Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #1124595

    Hello
    I have added the category widget on my blog, see blog https://www.ninserviziogratuito.co.uk/blog

    As you can see the categories ar listen one below the other. I have at the moment 7 categories.
    I would like each of them to be boxed and 3 per line and centred in the blog page. See example, I could not draw it better :-)

    Thanks,
    Marco

    • This topic was modified 2 months, 1 week ago by  marcoabis81.
    #1125164

    Hey Marco,

    I can’t seem to find the category widget you mentioned.
    The only widgets I see are those on the footer, can you give a screenshot where it shows?

    Best regards,
    Nikko

    #1125165

    Sorry, just updated now

    In this page, just below the 4 countries images.

    On the screenshot you’ll see how I would like to have them https://www.screencast.com/t/XVYOQtVOaP

    thanks
    Marco

    #1125408

    Hi Marco,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top .widget_categories h3.widgettitle {
        text-align: center;
    }
    
    #top .widget_categories ul {
        display: flex;
        flex-wrap: wrap;
    }
    
    #top .widget_categories li {
        flex-grow: 1;
        width: 32%;
        float: none;
    }

    Best regards,
    Nikko

    #1125730

    Hi Nikko,
    yep this is the way but I miss a few things. This is what I got now. https://www.screencast.com/t/9KCv0cQufa

    1) How do I make the boxes narrower?
    2) How do I make the last box (the one on the third row) same size of the others?
    2) How do I remove the bullet points?
    3) The title CATEGORIE) does not center using your instructions
    4) How do I put little pics on the left of the centred category name?

    UPDATE
    The changes on the category widget are affecting all the categorie widgets around the website. I need to have this changes only on the category here on the blog page. How to do that? >>> example of how it is affecting the category widget on another page https://www.screencast.com/t/VK5KNvDl08z

    Many thanks for your help
    Marco

    • This reply was modified 2 months, 1 week ago by  marcoabis81.
    • This reply was modified 2 months, 1 week ago by  marcoabis81.
    #1126221

    Hi Marco,

    1. I have answered it in your other thread but it’s on 1 page specifically.

    2. (last box and remove bullet points) replace this code:

    #top .widget_categories ul {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    
    #top .widget_categories li {
        flex-grow: 1;
        width: 32%;
        float: none;
        padding: 15px 15px 15px 18px;
        margin: 15px 15px 8px 0px;
        border: ridge;
        font-size: 18px;
    }

    with:

    #top .widget_categories ul {
        display: block;
        text-align: center;
    }
    
    #top .widget_categories li {
        display: inline-block;
        width: 31%;
        float: none;
        padding: 15px 15px 15px 18px;
        margin: 15px 15px 8px 0px;
        border: ridge;
        font-size: 18px;
        box-sizing: border-box;
    }

    3. I could see the code if I check via page source but it’s not showing in the web inspector.
    First, remove these lines that you have (css tries to read it, just use comments like /* comments*/

    ------------------------------------------------------------

    Next, move this code to functions.php file:

    /* A seguire, questo aggiunge le foto nel mega menu */
    add_filter('wp_nav_menu_objects', 'avf_wp_nav_menu_objects', 10, 2);
    function avf_wp_nav_menu_objects($sorted_menu_objects, $args) {
    
        // check menu name
        if ($args->menu->name != 'Top Menu (Italiano)') return $sorted_menu_objects;
    
        // edit the menu objects
        foreach ($sorted_menu_objects as $menu_object) {
            // searching for menu items linking to posts or pages
            // can add as many post types to the array
            if ( in_array($menu_object->object, array('post', 'page', 'portfolio', 'products')) ) {
                // set the title to the post_thumbnail if available
                // thumbnail size is the second parameter of get_the_post_thumbnail()
                $menu_object->title = has_post_thumbnail($menu_object->object_id) ? $menu_object->title . get_the_post_thumbnail($menu_object->object_id, 'thumbnail') : $menu_object->title;
            }
        }
    
        return $sorted_menu_objects;
    }

    I think if that’s fixed, the code I gave should work.

    4. I’m not sure I understand this well, do you mean move the pics on the left and category to the right?

    Can you give a link to the page where other category widgets are showing?

    Best regards,
    Nikko

    #1126313

    Hi Nikko,
    you are an absolute star. Thanks again for your help.

    PHP code added but not seeing pics on the mega menu.

    4, On the category that you helped me to create the boxes around, within the boxes, at the left of the category name, I would like to have a little pic
    See the screenshot https://www.screencast.com/t/jw8D4ld4U7
    The little red boxes is where I would like to have the pics.

    5) Where the category widget is also appearing:
    – withing any post https://www.ninserviziogratuito.co.uk/categoria/lavoro-e-business
    – within any archive page https://www.ninserviziogratuito.co.uk/categoria/burocrazia
    Should we add an instruction that tells the widget that the new code is only for the blog page?

    Thanks.
    Marco

    #1126766

    Hi Marco,

    Thanks for your kind words :)
    If the function doesn’t work as expected, I think you can try to check other functions just above it if it works, because sometimes if the code on top of it has issues the code/function after it is skipped.

    4. Please move text-align: center from ul to li. (will give instructions after #5)

    5. Yes, I think that would be best solution, please replace this code:

    #top .widget_categories h3.widgettitle {
        text-align: center;
    } 
    
    #top .widget_categories ul {
        display: block;
    }
    
    
    #top .widget_categories li {
        display: inline-block;
        width: 31%;
        float: none;
        padding: 15px 15px 15px 18px;
        margin: 15px 15px 8px 0px;
        border: ridge;
        font-size: 18px;
        box-sizing: border-box;
        text-align: center;
    }

    with:

    #top.page-id-86 .container_wrap .widget_categories h3.widgettitle {
        text-align: center;
    } 
    
    #top.page-id-86 .container_wrap .widget_categories ul {
        display: block;
    }
    
    
    #top.page-id-86 .container_wrap .widget_categories li {
        display: inline-block;
        width: 31%;
        float: none;
        padding: 15px 15px 15px 18px;
        margin: 15px 15px 8px 0px;
        border: ridge;
        font-size: 18px;
        box-sizing: border-box;
        text-align: center;
    }

    Hope it helps.

    Best regards,
    Nikko

    #1126843

    Hi Nikko,
    PHP I believe all the PHP code I have on the PH function file works. As a test, I put the code you gave at the top, before any other PHP code. It still does not work. Am I wrong with something?

    4) Now that we have fixed the behaviour of the category widget for the other pages (issues number 5) I could I set a small pic as per the screenshot? https://www.screencast.com/t/jw8D4ld4U7

    6) similarly, I can I add now some pics next to the category name on all the other category widget on the side bar? https://www.ninserviziogratuito.co.uk/contratto-casa-regno-unito

    On the screenshot you’ll see that I managed to do that for the recent post by using a plugin, how to do the same for the categories? https://www.screencast.com/t/do09vxyXkpT

    Thanks
    Marco

    #1127198

    Hi Marco,

    The code I asked to put in functions.php isn’t from me, but I discovered that it’s in a css file (most likely in Quick CSS) which will not work (including the ——).

    4. It’s fixed on my end, the category boxes are left aligned, try to clear the browser cache, maybe it’s fetching some old css.

    5. It’s not possible with wordpress default category widget, I think you should be able to find a plugin that has those feature, sometimes you’ll just need to tweak it with a bit of css on some plugins to get what you want to achieve.

    Best regards,
    Nikko

    #1127312

    Hi Nikko,
    ok thanks, I will look for a plugin, I found it for recent posts but not for category.

    Mobile view: I see that boxes created around the category are behaving very well, is there any code that can help me to make them nice on mobile?

    See it https://www.screencast.com/t/QVTijXNxhAcf

    Thanks
    Marco

    #1127699

    Hi Marco,

    Add this css code:

    @media only screen and (max-width:767px) {
      #top.page-id-86 .container_wrap .widget_categories li {
        display: block;
        width: 100%;
      }
    }

    Best regards,
    Nikko

    #1127707

    Amazing it works this too :-)

    Just another question about it.
    Why does your code work for my italian version while it does not for the translated websites? Spanish and English version?

    Here the URL.

    Thanks
    Marco

    • This reply was modified 2 months ago by  marcoabis81.
    #1128204

    Hi Marco,

    Can you try to place it in your child theme’s css? and try to flush out the cache.

    Best regards,
    Nikko

    #1128219

    Hi Nikko
    It’s already inside the CSS.
    That is why I cannot understand why it is not working

    Marco

    #1128683

    Hi Marco,

    Each translation has different theme option setup, so you’ll need to add those in Quick CSS in each translation.
    To place it once only, you’ll need to add it outside theme option which is usually a custom css in a child theme.

    Best regards,
    Nikko

    #1128732

    Hi Nikko,
    Sorry, cannot understand what you mean by “to place it only once”… Placing it outside theme option, not sure what you mean.

    However, in order to have the quick CSS working I put it on the quick CSS on all the 3 languages, but still it is not working.

    So if the same code is within each of the 3 translations, why does it work just for one site? I mean, all the code is working except the of the category widget you gave me. See how they display above in the previous message.

    Thanks

    #1128793

    Hi Marco,

    I apologize it wasn’t very clear, what I meant was putting the code just once, not in every theme option for each translation.
    Since it still not working, this may be due to some caching. Try to flush out cache then disable the caching plugin then check.

    Best regards,
    Nikko

    #1128919

    Nothing,
    there must be an error in caching or updating the CSS file. I just noticed that again on another instance. The new code added on quick CSS disappears after a while. I lost everything I did yesterday and today it happened again, after saving the CSS, 10 minutes later all did today as well went lost.

    #1129099

    Hi Marco,

    I’m not sure why that happens, maybe you have some security plugin that’s preventing you to make changes or reverts to previous setting?

    Best regards,
    Nikko

    #1129118

    Don’t know the reason of this.
    Site ground suggested me to remove all the plugins. But this would be a nightmare.
    However, going back to initial reason of contact, the same exact code doesn’t work for all the 3 websites. Can you please check why? Code below in private

    Thanks

    #1129418

    Hi,

    Thank you for the update.

    The css code doesn’t work for the other languages because the translated blog pages have a different ID. You have to replace the following selector with the actual ID of the translated blog pages.

    #top.page-id-86
    

    This is the ID of the EN version:

    #top.page-id-4621
    

    And the Spanish:

    #top.page-id-4622
    

    Best regards,
    Ismael

    #1129620

    Yuhuuu,
    Thank you Ismael,
    It is actually I had thought I had to change (in the beginning when Nikko helped me with the code) then I forgot about it :-)

    Super super,

    thank you
    Marco

    #1129628

    Hi,

    Did you need further help on this topic?

    Best regards,
    Jordan Shannon

    #1129657

    No Jordan,
    you can close the ticket, very kind :-)

    #1129660

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 26 posts - 1 through 26 (of 26 total)

The topic ‘Change layout category widget in a page’ is closed to new replies.