CSS Snippets for Divi

Useful CSS Snippets for Divi

Amy Valentine

Amy Valentine, Web Designer, NZ

Divi by Elegant Themes ships with a ton of awesome features, but sometimes you just want to edit the CSS Code to suit your requirements. Firstly, we recommend always using a child theme and place your customisations in your child style.css file.

To create a child theme we recommend using this Child Theme Builder freely available on divi.space.

Whilst I haven’t written tutorials on the code below, if you are comfortable using custom CSS and child themes then feel free to use some of the snippets below to customise your next Divi site.

[UPDATE October 2015] The CSS code below was used on the legacy Divi 2.3 version and all snippets are untested on any other versions.

CSS Snippets for Divi 2.3 (legacy)

Note: the hex colours below – change to your site’s colours.

Divi Tutorials – by the team at Elegant Themes – this should be your first go-to resource for learning how to use Divi.

Divi Video Tutorials – by Elegant Themes. Perfect for a quick overview of each module, plus lots more video tutorials.

Divi Theme Examples – site created and curated by Craig Longmuir showcasing websites built using the Divi themes.

Divi Theme Examples Resources – want to customise your Divi site? Bookmark this great custom css resource.

Quiroz.co – Geno Quiroz uses Divi on his website and his blog posts are a rich source of custom css snippets and tutorials.

Divi.space – by SJ James, creator of the FB Private Group and css master! Another excellent resource to bookmark.

ElegantChildThemes.com – founded by Nathan Duvall, author of the child theme I use on this website!

10 Comments

  1. Hi Amy.

    I used this code to create a grey box around text in slider.

    /*—————[add grey opaque bg to slider text]—————*/

    .et_pb_bg_layout_dark .et_pb_slide_description{
    background-color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    padding: 50px;
    margin: 100px;
    border-radius: 15px;
    }

    Now, the slides are no longer responsive. On iphone, only left part of image appears.
    Can you help?
    Regards
    Stephane

  2. Hi Stephane, try adding this css to your child theme style.css.

    /*—————[force slider and button to render on mobile]—————*/

    @media only screen and (max-width: 767px) {
    .et_pb_slide_content, .et_pb_more_button, a.et_pb_more_button {
    display: block !important;
    }
    }

  3. Hi, Amy! I need to hover the links on this website’s sidebar http://www.olfomed.com/en/about-us/ , It is built on Divi and with Divi builder. I tried to add a.hover to child theme CSS but it didn’t work. Please give your advuce!

  4. Hi Amy,

    Do you know how to change the light and dark default colors from Divi?

    Hope you can help?

  5. Amy Valentine

    Hi Jeroen,
    I found this in the ET Support Forums. Add to your child style.css or the ePanel Custom CSS box.
    Hope it helps.

    .et_pb_text_color_dark {
    color: #000 !important;
    /*<--Change to your color hex*/; } .et_pb_text_color_light { color: #fff !important; /*<--Change to your color hex*/; } If you want to assign to specific tags simply add the relevant tag. Example as follows: .et_pb_text_color_dark p { color: #000 !important; } .et_pb_text_color_dark h1, h2, h3 { color: #000 !important; } .et_pb_text_color_dark blockquote p { color: #000 !important; }

  6. Amy Valentine

    Hi Roman,
    Try this instead:
    a:link {
    color: #409bd0; /*change to the hover color you want*/
    }

  7. Ooh thank you Amy. Footer info font weight and colour CSS is exactly what I was looking for!!

  8. Please help! I’m trying to increase the width of the dropdown on my primary menu without removing the css that makes the “Donate” button orange. Tried a number of solutions I found via search with no luck. Love your snippets!

  9. Amy Valentine

    I’m sorry Kathy but I am not sure how to edit the drop-down menu width. Instead I would suggest swapping the Contact us menu item with Ways To Donate, that way the drop-down menu won’t slide under the Donate button in orange. Hope this helps and thanks for your kind comments:)

  10. You guys are professionals. So glad you put the time and effort into this blog. I need to learn more CSS.

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Posts

Pin It on Pinterest