1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved Change the back ground color & related posts

Discussion in 'Basic Support Forum' started by Kelly Costello, Apr 29, 2020.

  1. Kelly Costello

    Kelly Costello New Member

    Hello, I cannot seem to find out how to change the background color anywhere, I need it to be white not grey. I also see a section to edit related posts however I do not see related post anywhere, only recent posts.
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
    Not quite sure what you meant by that. Any screenshot & URL as well?
     
  3. Kelly Costello

    Kelly Costello New Member

    My site is allthingsbabynames.com on the main page/home you can see that there are white boxes under the posts and the background is grey, I would like everything to be white, in other words no box or shadows. I also do not see any option to display related posts, is this a separate plug in? And lastly, how can I edit an archive page to display posts only in a certain category? For example I like your archive layouts better than the blog layouts and prefer to use that on my homepage instead but only want to display certain posts.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade gradient text design for your Divi site without using any plugins:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    To remove the box shadow, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .free-blog-list-3.free-blog-biggest .et_pb_post {
        box-shadow: none!important;
    }
    .free-blog-list-3.free-blog-biggest .et_pb_post:hover {
        box-shadow: none!important;
        top: 0!important;
    }
    Related post is for single blog post page, for example: https://www.allthingsbabynames.com/beautiful-and-elegant-latin-names-for-girls/

    You can add the related post through Theme Customizer > Divi Ultimate Blog Post > Blog Main Settings > Choose Your Related Posts Style
    Archive / category pages are automatically generated. Category page is what you're referring to: archive page to display posts only in a certain category. And our archive feature is used to style those auto-generated pages with premade design. But you can't set a category page as a homeapge.

    Also if you're using Divi Theme Builder to edit those archive pages, then you can't use our archive premade design.
     
  5. Kelly Costello

    Kelly Costello New Member

    Thank you so much for your quick response, that CSS worked around the blog border and I found the related posts, just two more questions: 1. How can I remove the black background around the related posts? 2. How can I make header number 12 smaller, it is too long and taking up too much space, how can I adjust the height? Thanks
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  6. Kelly Costello

    Kelly Costello New Member

    And sorry one last thing I noticed that my site is loading pretty slow with your theme so I disabled the plugin and it loaded a lot faster without it but then I lose all the design. I would like to keep using this theme but can you tell me how to speed it up.
     
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You can change the color in Theme Customizer > Divi Ultimate Blog Post > Customize Blog Related Posts > Related Posts Background Color.
    It's because you set height for the menu module. Basically, just go to the Menu Module Settings & remove the height, max-height and min-height values.
    Our child theme shouldn't affect much on your load time. As we only load few hundreds KB of CSS & JS files.

    And I see that you're using Siteground cache plugin as well. And your images are on reasonable sizes.

    You may check your site waterfall at GTMetrix & see which part is slowing down your site: https://gtmetrix.com/
    **Look pretty normal to me.
     
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  8. Kelly Costello

    Kelly Costello New Member

    Thanks again for responding so quick sorry for so many questions just trying to get it all set it up, (I try to search the forum before asking). So I was able to change the background color of the related posts but how can I remove the date and shadow. I would also like to change the color of the red line on the side bar (main page)?
     
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .free-du-blog-1 .free-blog-related-posts .et_pb_post {
        box-shadow: none!important;
    }
    .free-du-blog-1 .free-blog-related-posts .et_pb_post .post-meta {
        display: none!important;
    }
    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .free-magazine .free-header .et_pb_module_header {
        border-color: #002e5a!important;
    }
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  10. Kelly Costello

    Kelly Costello New Member

    Thank you the related post worked perfectly but unfortunately the other code to change the red color did not. And is there a way to have the post category archives display alphabetically?
     
  11. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    From what I see, your custom CSS ended with our box-shadow CSS. I couldn't see the post meta & the red color CSS. Kindly recheck whether you have it correctly in Divi > Theme Options > Custom CSS. And try to clear your Siteground cache as well.

    upload_2020-5-1_23-6-33.png
    There's no built-in option to sort the category page. It would require custom coding.

    Just did a quick search & found this plugin to sort the category pages alphabetically: https://wordpress.org/plugins/sort-categories-by-alphabetical-order/
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  12. Kelly Costello

    Kelly Costello New Member

    Thanks for finding the plug in, I reentered the code and it is still not changing, here is a screen shot
     

    Attached Files:

  13. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You are missing a closing bracket } after
    box-shadow: none!important;
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade floating button design for your Divi site without using any plugins:View Demo
  14. Kelly Costello

    Kelly Costello New Member

    LOL. Wow I feel pretty stupid that worked, thank you so much for everything so far you have been so helpful, this theme is amazing and has exceeded my expectations!
     
  15. Kelly Costello

    Kelly Costello New Member

    Sorry to bother you again but I have one last question I had to switch back to the divi Extra theme but I'm still using the Ultimate plugin, I noticed on my homepage that the menu height is extended again, how can I fix this, thanks. I had to disable the header it for the time being.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade slide in bar design for your Divi site without using any plugins:View Demo
  16. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Will need to view your site with the extended menu height issue.
     
  17. Kelly Costello

    Kelly Costello New Member

    Hello, I was wondering if there was a way to display the menu items for "header 12" on the desktop, instead of the hamburger?
     
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  18. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Header style 11 & 12 is the vertical navigation menu.

    You may set it to be / not to be hidden behind hamburger menu on desktop: Theme Customizer > Divi Ultimate > Vertical Navigation > Always hide vertical navigation & show hamburger menu
     
  19. Kelly Costello

    Kelly Costello New Member

    Thanks for the quick response, I already have that setting enabled, I would like the menu items to show on the desktop like the attached website example
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  20. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    For that case, you will to create a new section for that, using menu module.

    And to make the new desktop section sticky, go to the Section Settings > Advanced > CSS Class & add free-sticky

    And lastly, you will need to hide the hamburger menu section in desktop. To do that, just go to hamburger Section Settings > Advanced > Visibility & set it to be hidden in desktop.