Divi Snippets
For the times when you just need a quick fix
Headers
Back to Top Button Styling
/*Style the Back to Top Button*/
.et-pb-icon.et-visible {
background-color: #ff9300 !important;
z-index: 2 !important;
position: fixed !important;
}
Social Media Icons
Style Monarch Icons
/*Styles the Monarch Icons */
.et_social_icons_container li {
background-color: #c0ccb3 !important;
}
i.et_social_icon {
color: #FFFF00 !important;
}
Removes the Share text from the social media icon posts
/*Removes the Share text from the social media icons posts */
.share-title { display: none !important; }
Buttons
Same size buttons
/*Button Same Size */
.et_pb_button { min-width: 120px; text-align:center; }
@media (max-width: 900px) {
.et_pb_button {
min-width: 90px;
}}
Lists
Add breathing room to a list
Add a class to your ordered (ol) or unordered (ul) list:
class=”list-spacing” then add the code on the page or post.
/*List breathing room spacing between points */
ol.list-spacing li {
padding-bottom: 2%;
}
/*space between the intro text before list and the first list item*/
ol.list-spacing {
padding-top: 4% !important;
}
The first list has no breathing room, while the second list does.
TOC
Style TOC Plugin
/*TOC such as Easy Table of Contents Plugin*/
#ez-toc-container .ez-toc-heading-level-1 {
color: #2c3241;
font-weight: 500;
}
#ez-toc-container .ez-toc-heading-2 {
color: #CC414E !important;
font-weight: 500;
}
a.ez-toc-link.ez-toc-heading-25{
color: #CC414E !important;
font-weight: 500;
}
#ez-toc-container .ez-toc-page-1 .ez-toc-heading-level-3 a {
font-weight: 500;
}
#ez-toc-container .ez-toc-heading-level-4 a {
color: #000080;
font-weight: 500;
font-style: italic;
}
Toggle
Animate Toggle Icon
/*Animate the Divi Toggle Icon */
.et_pb_toggle_open .et_pb_toggle_title:before {
transform: rotate(180deg);
transition:all 0.5s ease-in-out 0s;
color: #2c3241;
}
Use FA icons
The Constitution assigned to Congress responsibility for organizing the executive and judicial branches, raising revenue, declaring war, and making all laws necessary for executing these powers. The president is permitted to veto specific legislative acts, but Congress has the authority to override presidential vetoes by two-thirds majorities of both houses. The Constitution also provides that the Senate advise and consent on key executive and judicial appointments and on the approval for ratification of treaties.
Layout
2-Column Layout
Add class .two-column to your Column in Divi. Then add the code to the page:
@media only screen and (min-width: 600px) {
.two-column {
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
}}
You can adjust the code above for more
columns by increasing the column-count
to 3, 4, etc. See a Demo.
Posts
Hide Post Slide Excerpt
/*Hide post slide exceprt*/
.et_pb_slide_content div p {
display: none;
}
Remove the Previous/Next Blog Post at the bottom
/*Removes the previous/next blog post at the bottom*/
.single-post .nav-links {
display: none !important;
}
Add Drop Caps
.drop-cap {
color:#CC414E;
float: left;
font-family: “Noto Serif”;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
Global
Change Color of Highlight Text
/*Highlight Text Selection Color */
::selection {
background: #e4f2ff; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #e4f2ff; /* Gecko Browsers */
}
Portfolios
Portfolio Sizing
@media (max-width: 980px) {
.et_pb_column .et_pb_grid_item.et_pb_portfolio_item
{
width: 100%; margin-right: 5px;}
}
@media (min-width: 981px) {
.et_pb_portfolio_items {
display: flex !important; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
.et_pb_column .et_pb_grid_item.et_pb_portfolio_item {width: 30% !important;margin-right: 5px !important; }}
Project Box-Shadow
/* Project Gallery Items Box-Shadow*/
.et_pb_portfolio_item {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
/* Project Gallery Items Box-Shadow*/
.et_pb_portfolio_item {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
Table Formats
Project Box-Shadow
/*—————————————————————–TABLES——————————————————————–*//*—————————————————————–TABLES——————————————————————–*//*Table Format */ table.tableizer-table { font-size: 18px; font-family: Montserrat; color: #2c3241; } .tableizer-table td { padding: 4px; margin: 3px; border: none; color: #2c3241; font-family: montserrat, sans-serif; }
.tableizer-table td a { color: #0c71c3 !important;} .tableizer-table th h4{ font-weight: 600; font-size: 2.5vh; font-family: Raleway; } tr:hover{ background-color:#f5f5f5}
Backgrounds
Add Circle Background with Flex
Add color to an item. Add class .circle
Style as:
.circle {
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;
}
To make it a rectangle with rounded corners, change the border-radius to 5%.
Slider
Slider Arrows
/*Change slider arrow colors*/
.et-pb-arrow-next, .et-pb-arrow-prev {
color: blue !important;
}