How To Make Divi Blog Grid Posts The Same Height

The Divi blog grid layout does have a limitation, when you have featured images of different sizes, and post titles/excerpts which are different lengths, it can cause the grid to look uneven – even with the ‘Equalize Column Heights’ option checked.

Go to Blog Module Settings > Custom CSS and give the module the new CSS Class “new_grid_blog”. “et_pb_blog_grid”.

Add the following code to your Custom CSS box:


@media only screen and (min-width: 768px) {
.et_new_grid_blog .et_pb_post {
min-height: 520px;
max-height:520px;
}
}

Read More

Hide blog content in DIVI blog grid mode

With the Divi theme blog module, there are two display option, grid or full post. Both of these allow for a short amount of blog content to be shown, or the full blog post content.

There is not an option to not show the content in the Divi blog module.

If you wish to have the blog post just show featured image or may be just the the title, you can configure that in the module itself. To remove the content of the blog posts from showing in the grid view, login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:

.et_pb_post .post-content {
display: none;
}

Read More

Remove WooCommerce cart icon from DIVI header

To remove the WooCommerce cart icon from the DIVI header on your WordPress site.

Login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:

.et-cart-info { display:none; }

Read More

Add a transparent overlay to Fable theme featured image

If you are running the Fable theme for WordPress by Elegant Themes, then you may notice this little bug when you use features images. The text or post title of the WordPress post is usually hidden because it cannot be seen over the featured image.

To add the transparent overlay please add the following code to the Custom CSS box in the ePanel options:

.category .post.entry.et-background-image:before {
content:'';
display:block;
width:100%;
height:100%;
z-index:999;
position:absolute;
top:0;
background:rgba(0,0,0,0.5);
}
.category .post.entry .container.clearfix {
z-index: 9999999;
}

Read More

Hide the Email icon in Divi theme header

To hide the email icon in the DIVI theme header, just enter the below custom CSS:

/* Hide Mail Icon in Header */
#et-info-email {
    display: none;
}

The icon appears if you only wish to have the phone number appear. You can disable them in theme customizer if you do not wish to display the phone and email icons.

Read More

Remove bullet points on DIVI footer menu and left align

If you add a custom navigation menu to the DIVI theme, you will notice that these bullet points appear before the text of each menu item.

These can easily be removed by adding the below CSS to your custom CSS box in the WordPress admin area:

 .footer-widget li:before { 
display: none; 
}

If you add this, you will notice that there is still space for the bullet point although it is no longer visible. To have the menu items left aligned with the title you will need to add the follow CSS:

#footer-widgets .footer-widget li {
padding-left: 0px;
}

Read More

Aligning Gravity Forms survey responses side by side

The Gravity Forms plugin has a nice Survey add-on that can be installed. You can align the answers of the survey side by side if you wish so they are not stacked.

They are stacked on top of each other by default and the picture below will give you an idea of that.

 

If you wish to have the Gravity Forms survey form slightly more condensed as per the 1st question in the above example then all you need to do is a add a ready made CSS style. 

The custom CSS class to add is: gf_list_inline

You can add this by editing form and adding the text to the Custom CSS class as pictured below.

Read More

Custom CSS to use with Gravity Forms on dark background

Using the Gravity Forms plugin for WordPress is a great way to build some awesome forms. I recently added some forms to a page with a dark background. I found some text hard to read. I was able to fix this by adding the below custom CSS code...

body .gfield_description {
    color:#fff;
}

body .gf_step_label {
    color:#fff;
    font-size:20px;
font-weight:500;
line-height:1.4em;
}

body .validation_error {
    color:#fff!important;
}

body .gfield_label {
    color:#fff!important;
}

body .gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible {
    color:#fff!important;
}

Read More

Fixing the field text color in Divi Email Optin Module

Finding that the text is white in the Divi email opt-in? Add this custom and edit with the colors you wish to use.

.et_pb_newsletter_form .et_pb_signup_custom_field_0 .input[type="checkbox"] + label {
font-family: 'Verdana',Helvetica,Arial,Lucida,sans-serif;
font-size: 10px;
color: #ffffff !important;
text-align: left;
text-shadow: 0em 0.1em 0.1em #ffffff;
}

Read More

How to decrease the padding between rows in DIVI

By default, the DIVI theme by Elegant Themes has a generous amount of padding. To reduce the amount of padding globally with CSS, just add this custom CSS code below:

.et_pb_row {
padding: 0 !important;
}

Read More

Add a background and change the font of your WordPress blockquote

In a previous post, I demonstrated how to center align your WordPress blockquote, if you are looking for some additional styling, take a look at this custom CSS:

blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
font-family: Helvetica Neue,Helvetica,sans-serif;
font-size: 22px;
color: #95a5a6;
background: #ccc;
}

Read More

How to center align your WordPress blockquote

With most of the content on your WordPress page or post being left aligned. Center aligning a blockquote is a great way to have them stand out.

To center align your WordPress blockquote, all you need to do is add this custom CSS code to the additional CSS box in your WordPress theme:

blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
}

Read More

Centering the DIVI menu on mobile only

If you would like to make menu centered on mobile only, add this css code in the custom css field of the theme options:

.et_mobile_menu li a {
text-align: center;
}

Read More

How to Disable All Animations in DIVI

Looking to disable all animations within a Divi WordPress site, Globally?

There is an easy way to disable the animations with DIVI, just add this code to the Custom CSS area from Theme Options:

.et_pb_section, .et_pb_section *{
animation:none !important;
}

Thanks to the people that left comments below, I have updated the below code with this one above which should work much better with more recent versions of DIVI. If there is any trouble, please let me know by leaving a comment.

.et_pb_section .et_pb_module {
animation-name: none!important;
-webkit-animation-name: none!important;
-moz-animation-name: none!important;
-ms-animation-name: none!important;
-o-animation-name: none!important;
opacity: 1!important;
transform: translate3d(0px, 0px, 0px)!important;
} Benefit from fantastic savings on web hosting , just by taking a look at https://cloudtransformation.com.sg 

Read More

Add second telephone number to DIVI header

Using the DIV theme by Elegant Themes and you may already have the email address and telephone number in the top header, but what if you also want to add whatapp number with the whatsapp icon. This post will explain how to add an extra number with an icon to the top header?

You need to edit the header.php in your theme. please go to your theme folder then edit header.php.

Please fine the line:

<span id="et-info-phone"><?php echo et_sanitize_html_input_text( $et_phone_number ); ?></span>

And paste this line right after it:
(replace "123123123" with your number)

<span class='additional_number'>123123123</span>

 

 Then go to custom css option and add this code in your css option:

.additional_number:before {
font-family:'ETModules';

content : '\e090';

}

Read More

Remove the mobile menu icon from DIVI theme

To remove this completely, add this CSS code:

#mobile_menu_bar{
display:none;
}

Or to adjust the size at which is it displayed you can use something like this CSS code:

@media (max-width:480px){
#mobile_menu_bar{
display:none;
}}

Read More

Increase spacing between Divi bulleted lists and numbered lists

To increase the space between Numbered lists and Bullet point lists. Add this code to Dashboard > Divi > Theme options > custom css:

.entry-content ul li {
line-height: 35px;
}

Read More

How to center secondary header elements with Divi

To center the telephone number and email address in the secondary header of Divi. Add the following code in custom css of Divi theme's option:

#et-info {
float: none !important;
text-align: center;
}

Read More

Remove Description text in WooCommerce with Divi Theme

To remove the word "Description" from all product listing pages in WooCommerce with Divi.

Add this css code to Divi >> Theme Options >> General Panel >> Custom Css

 

.woocommerce-page div.product .woocommerce-tabs #tab-description h2:nth-child(1) {
display: none;
}

Read More

How to get Divi social media icons to be inline in the menu

If your Divi social media icons are not inline with the email address in the full screen menu. Use this code in custom css field of theme option:

.et_slide_menu_top div#et-info {
padding-top: 0 !important;
}

Read More

Adding a link to Divi featured image posts slider

To link to the post both in the title and in the featured image in posts slider module. Add this custom CSS to to DIVI Custom CSS window.

.et_pb_post_slider .et_pb_slide_title a::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}

Read More

Creating a custom DIVI style button with CSS

To create a custom DIVI button you can use this CSS on any site and edit it to suit:

.custom-button a:hover {
color: #ffffff!important;
background: #000000!important;
border-color: #000000!important;
border-radius: 2px;
letter-spacing: 1px;
transition-delay:0s;
transition-duration:0.2s;
transition-property:all;
transition-timing-function:ease;
}

Read More

Hide date from related posts in Extra theme

To remove the date from the related posts, add this css code in WordPress admin to Theme Options >> General Panel >> Custom Css.

.related-posts-content .date {
display: none;
}

Read More

Change the background color of the Divi mobile menu

If you want to change the background color of the mobile menu, then please add this css code in the custom css field of theme options:

ul#mobile_menu {
background-color: red !important;
}
#main-header .et_mobile_menu li {
background: none;
}

Read More

Reduce space between top level nav and drop down item in Divi Theme

To reduce the space between the top level nav item and it's drop down item, add this code in custom css field of theme option:

.nav li ul {

top: 20px;
}

Read More

Reduce Space Between Footer and Bottom Bar on DIVI Builder

If you are looking to decrease the space between the footer and the bottom bar with the Divi Builder.

Add below provided code in custom css:

.bottom-nav { padding-bottom: 0 !important;}

Read More

Captcha answer text color white text on white background

If you are looking to change the color of the Captcha answer text because you may currently have white text on a white background.

Add the following code in custom CSS of the theme option:

.custom_contact.et_pb_contact_form_0.et_pb_contact_form_container .input {
color:#686867 !important;
}

Read More

Hide the dates from DIVI projects on home page

Looking to delete the dates from my projects on home page?

Add the css code below in Theme Options > Custom CSS box:

html .et_pb_portfolio_item .post-meta {
display: none;
}

Read More

Fixing the DIVI menu from displaying under main content on mobile

If your main menu shows under the content of the page on any mobile device, add the below CSS code to fix the issue.


@media only screen and ( max-width: 980px ) {
#main-header {
z-index: 99999;
}
}

Read More

Don´t display date on Divi related posts

Add this CSS code in: Divi > Theme options > General > Custom CSS
 

.single-post .related-post p.date {display: none;}

Read More

Remove the WooCommerce Breadcrumb tags with CSS

This simple CSS snippet is what you need to remove the WooCommerce breadcrumb text. 



.woocommerce .woocommerce-breadcrumb { display: none; }

Read More

Parent items in DIVI menu not clickable

To make the main menu items or 'parents' in the menu non clickable. You can link them to a # as many people do as a work-a-around. You can also add this custom CSS.

#top-menu .menu-item-has-children>a:first-child {
pointer-events: none;
}

Read More

Change the background colour on menu for active item

To change the background colour on the DIVI menu for the active menu item, add the following custon CSS:

.fullwidth-menu a:hover, .current-menu-item a {
background-color: #000 !important;
}

Read More

Resize and Restyle the DIVI comments

Here is some custom css to style the comment thread on the Elegant Themes DIVI theme.

.single-post .comment-body {padding-left: 0; padding-right: 0;}
.single-post .et_pb_button::after, .single-post .et_pb_button::before{content: none;}
.single-post #comment-wrap .comment-reply-link.et_pb_button {position: absolute; top: 100%;}
.single-post #commentform .form-submit .et_pb_button:hover {color: #000 !important; background-color: #fff !important; border: 2px solid #000 !important;}

Read More

Custom Slider Style for Blog Post in DIVI

Here is a custom CSS snippet to re-style a blog post in slider module:

.my_new_slider .et_pb_slides .et_pb_slider_container_inner{
width: 50% !important;
vertical-align:top !impoartant;
} 

Read More

How to make DIVI blog featured images the same height

Unless you upload your DIVI images the same size or proportions, then they may appear to have mixed sizes. This code is not perfect but does help tidy them up a bit.

.et_pb_post img {
max-height: 400px!important;
}

Read More

Change the height of DIVI blog grid layout

To make this more of a square, just add this css code to Theme Options > General Panel > Custom Css 

.et_pb_blog_grid .et_pb_image_container img {
height: 230px;
}

 

Read More

How to add background image to DIVI secondary nav

Use this code in custom css field of theme optio:

.et_fixed_nav #top-header {
background-image: url(Image url Here);
}

Read More

DIVI Mobile Menu Custom Style

This will increase the size of DIVI mobile menu (hamburger icon) and make the bars white.

Add this custom CSS code to your DIVI theme menu:

@media (min-width: 980px) {
.et-fixed-header#main-header {
background-color: #000 !important;
}
}
@media (max-width: 980px) {
.et-fixed-header#main-header {
background-color: transparent;
}
}
@media (max-width: 980px) {
.et-fixed-header .logo_container {
display: none;
}
}

Read More

Make the DIVI mobile menu icon Sticky

 To make the DIVI mobile menu icon Sticky add this custom CSS:


.et_header_style_left .mobile_menu_bar {
padding-bottom: 0px !important;
background: #000 !important;
}
.mobile_menu_bar {
position: fixed;
}

Read More

Hide users Ip Address shown on profile with Vanilla Forums

These is only usually shown to admins but if you wish to disable this altogether on your Vanilla install. Use this custom CSS:

    .MItem.IPAddress {
        display: none
    }

Read More

How to hide the Vanilla Forums Recent Discussion tab when on that page

This handy CSS snippet that can be added to your custom CSS file of Vanilla Forums will hide the Recent Discussions link on the sidebar when you are viewing the Recent Discussions page.

.Section-DiscussionList .FilterMenu .Discussions {
    display: none;
}

Read More

DIVI Theme Accent color over-rides WooCommerce buttons

If you use the WordPress DIVI theme with WooCommerce, then perhaps you have noticed the style of the buttons have changed.

This CSS snippet is all you need to fix the issue.

.woocommerce .button {
background:red !important;
color: #fff !important;
}

Read More

How to change your subreddit name to an image with CSS

To changes your reddit's name (at the top) to an image. You must include the dimentions
you want your image to be.
 
.redditname a{
background:url(IMAGE);
height: ??px;
width: ??px;}

#header-bottom-left{
height: ??px;}

.redditname a{
text-indent:-9001px;
}

#header-img-a,
.redditname a,
.tabmenu {
display: inline;
float: left;}

.tabmenu{
position:relative;
top:100%;
margin-top:-16px!important;}

You can view an example of the Reddit CSS Stylesheet here.

Read More

Hide the downvote arrow on Reddit subreddit

You can customize your sub-reddit page with CSS. To hide the downvote arrow, simply enter this CSS code:

.arrow.down {
visibility: hidden;
display: none
}

You can view an example of the Reddit CSS Stylesheet here.

Read More

Increase padding of WooCommerce image

You may find you need to increase the padding on a WooCommerce products pages with the DIVI theme. You can try this CSS code here here:

.single-product section.related.products {
    clear: both;
    padding-top: 20px;
}

Read More

How to hide the DIVI secondary menu before scroll

You can remove the secondary menubar before scrolling with this CSS snippet below. This will make the primary menu bar visible before scrolling, but the secondary bar only available when scrolled.

The custom CSS code is:

.et_fixed_nav #top-header {
visibility: hidden;
}

.et_fixed_nav #top-header.et-fixed-header {
visibility: visible;
}

Read More

How to remove comments on DIVI Projects with CSS

 
To remove comments with CSS on the DIVI theme, just add this code in theme option's custom css:
 

.single-project #comment-wrap{
display:none;
}

Read More

How to hide the ProtonMail logo

If you wish to hide the ProtonMail logo, you can do so with this custom CSS code:

.headerSecuredDesktop-logo {
display: none
}

 

Read More

Increase the font size in ProtonMail

You can increase the font size in ProtonMail by adding this custom CSS. Just remeber to edit the number values with your desired sizes.

h1 {
font-size:24px;
}

h2 {
font-size:22px;
}

h3 {
font-size:20px;
}

h4 {
font-size:16px;
}

h5 {
font-size:14px;
}

h5,h6 {
font-weight:700;
}

h6 {
font-size:12px;
}

Read More

Change colour of the ProtonMail Spinner

To change the colour of the spinner icon in ProtonMail. Login into your ProtonMail account and enter this CSS:

.spinner1,.spinner2 {
background-color:#9397cd;
}

Read More

Hide only the email icon in DIVI

If you are using DIVI and only need a number displayed. You may notice an email icon appear even though there is no email added.

Enter this CSS code to custom CSS to remove it:

#et-info-phone { display:none !important }

Read More

Remove the think line below DIVI header

The thin line below the DIVI header is actually a shadow. To remove the line, add the below to your custom CSS:


header#main-header.et-fixed-header, #main-header{
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}

Read More

How to fix the overlapping logo on mobile with DIVI

If you are using the DIVI theme with a square shaped logo instead of the standard landscape size. You might find a few overlap issues.

Try to add this css code to Divi - Theme Options - General - Custom Css and change the highlighted value:

@media only screen and (max-width: 980px){
#logo {
min-height: 80px;
}
}

Read More

Make DIVI Blog Category pages have 2 columns by default

This little dog is highly energetic, brave, loyal and clever. With owners who take the time to understand how to treat a small dog, yorkshire terrier puppies for sale near me in usa uk canada australia TX WA WI OR SC NC OH PA MI IL Yorkies that become demanding and dependent, appearing to need a lot of human attention and/or developing jealous behaviors, Add this custom CSS code to your DIVI Custom CSS box and you will have blog posts split into 2 columns.

.archive .et_pb_post {
float: left;
width: 45%;
margin-right: 5%;
}
.archive .et_pb_post:nth-child(2n+1) {
clear:both;
}

Read More

Change Foxy Theme Footer to have a background imae

 If you wish have an image as the background, add this CSS code.

footer#main-footer {
background: url(/wp-content/uploads/image.jpg) !important;
}

Read More

CSS Loading Animations

Here are 8 full CSS3 Loading Animations by Matt Gentile that you can use in place of .gif and .svg animations (SVG's SMIL animations will be removed soon according to Google and other browsers).

The HTML:

<div class="loader_content loader_1">
</div>
<div class="loader_content loader_2">
</div>
<div class="loader_content loader_3">
</div>
<div class="loader_content loader_4">
</div>
<div class="loader_content loader_5">
</div>
<div class="loader_content loader_6">
</div>
<div class="loader_content loader_7">
</div>
<div class="loader_content loader_8">
</div>

The CSS:

.loader_content {
    display: inline-block;
    position: relative;
    max-width: 2em;
    max-height: 2em;
    min-width: 0em;
    min-height: 0em;
    background: none;
    float: left;
    padding: 0;
    margin: 2em
}
/* end loader_content */
/* loader_content.loader_1 below: */
.loader_content.loader_1 {
    height: 2em;
    width: 2em;
    top: 0;
    left: 0;
    background: #ccc;
    border-radius: 2em;
    -webkit-animation: spin 1.5s infinite linear;
    -moz-animation: spin 1.5s infinite linear;
    animation: spin 1.5s infinite linear;
    overflow: hidden
}
.loader_content.loader_1::before {
    display: inline-block;
    position: absolute;
    content: '|';
    margin: 0;
    width: 15%;
    height: 2em;
    top: 0;
    left: 41.5%;
    text-indent: -9999px;
    background: #666;
    border-radius: 0
}
.loader_content.loader_1::after {
    display: inline-block;
    position: absolute;
    content: '0';
    margin: 0;
    width: 1.75em;
    height: 1.75em;
    top: .13em;
    left: .13em;
    text-indent: -9999px;
    background: #666;
    border-radius: 2em
}
/* end loader_content.loader_1 */
/* loader_content.loader_2 below: */
.loader_content.loader_2 {
    height: 2em;
    width: .25em;
    top: 0;
    left: .75em;
    background: #ccc;
    border-radius: .5em;
    -webkit-animation: scale_2 1s infinite ease-out;
    -moz-animation: scale_2 1s infinite ease-out;
    animation: scale_2 1s infinite ease-out
}
.loader_content.loader_2::before {
    display: inline-block;
    position: relative;
    content: '|';
    height: 2em;
    width: .25em;
    top: 0;
    left: .75em;
    background: #ccc;
    border-radius: .5em;
    text-indent: -9999px;
    -webkit-animation: scale_3 1s infinite ease-in !important;
    -moz-animation: scale_3 1s infinite ease-in !important;
    animation: scale_3 1s infinite ease-in !important
}
.loader_content.loader_2::after {
    display: inline-block;
    position: absolute;
    content: '|';
    height: 2em;
    width: .25em;
    top: 0;
    left: -.75em;
    background: #ccc;
    border-radius: .5em;
    text-indent: -9999px;
    -webkit-animation: scale_1 1s infinite ease-in !important;
    -moz-animation: scale_1 1s infinite ease-in !important;
    animation: scale_1 1s infinite ease-in !important
}
/* end loader_content.loader_2 */
/* loader_content.loader_3 below: */
.loader_content.loader_3 {
    position: relative;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: .75em;
    left: 0;
    margin-right: 3em;
    border-radius: 1em;
    -webkit-animation: flash_1 1s infinite ease;
    -moz-animation: flash_1 1s infinite ease;
    animation: flash_1 1s infinite ease
}
.loader_content.loader_3::before {
    position: absolute;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: 0;
    left: 1.8em;
    border-radius: 1em;
    content: '0';
    text-indent: -9999px;
    -webkit-animation: flash_2 1s infinite ease-in-out !important;
    -moz-animation: flash_2 1s infinite ease-in-out !important;
    animation: flash_2 1s infinite ease-in-out !important;
    -webkit-animation-delay: 1.5s !important;
    -moz-animation-delay: 1.5s !important;
    animation-delay: 1.5s !important
}
.loader_content.loader_3::after {
    position: absolute;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: 0;
    left: .9em;
    border-radius: .9em;
    content: '0';
    text-indent: -9999px;
    -webkit-animation: flash_2 1s infinite ease-in-out !important;
    -moz-animation: flash_2 1s infinite ease-in-out !important;
    animation: flash_2 1s infinite ease-in-out !important;
    -webkit-animation-delay: 2.1s !important;
    -moz-animation-delay: 2.1s !important;
    animation-delay: 2.1s !important
}
/* end loader_content.loader_3 */
/* loader_content.loader_4 below: */
.loader_content.loader_4 {
    position: relative;
    display: block;
    background: #ccc;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 2em;
    overflow: hidden !important
}
.loader_content.loader_4::before { /* minute */
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #666 60%, transparent 40%);
    height: .25em;
    width: 1.75em;
    top: .87em;
    left: .13em;
    content: '|';
    text-indent: -9999px;
    border-radius: 100%;
    -webkit-animation: tick_tock 60s infinite ease-out;
    -moz-animation: tick_tock 60s infinite ease-out;
    animation: tick_tock 60s infinite ease-out
}
.loader_content.loader_4::after { /* hour */
    position: absolute;
    display: inline-block;
    background: linear-gradient(to bottom, #666 70%, transparent 30%);
    height: 1.75em;
    width: .25em;
    top: .13em;
    left: .9em;
    content: '|';
    text-indent: -9999px;
    border-radius: 100%;
    -webkit-animation: tick_tock 5s infinite ease-out;
    -moz-animation: tick_tock 5s infinite ease-out;
    animation: tick_tock 5s infinite ease-out
}
/* end loader_content.loader_4 */
/* loader_content.loader_5:below */
.loader_content.loader_5 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    overflow: hidden !important
}
.loader_content.loader_5::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .5em;
    width: .5em;
    right: 0em;
    top: 1em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em
}
.loader_content.loader_5::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .5em;
    width: .5em;
    top: .5em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em
}
/* end loader_content.loader_5 */
/* loader_content.loader_6:below */
.loader_content.loader_6 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    overflow: hidden !important
}
.loader_content.loader_6::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    right: 0em;
    bottom: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: bounce_1 .6s infinite ease-in-out;
    -moz-animation: bounce_1 .6s infinite ease-in-out;
    animation: bounce_1 .6s infinite ease-in-out
}
.loader_content.loader_6::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    bottom: 0em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: bounce_2 .6s infinite ease-in-out;
    -moz-animation: bounce_2 .6s infinite ease-in-out;
    animation: bounce_2 .6s infinite ease-in-out
}
/* end loader_content.loader_6 */
/* loader_content.loader_7:below */
.loader_content.loader_7 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    overflow: hidden !important
}
.loader_content.loader_7::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    right: 0em;
    top: .5em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: fade_1 1s infinite ease;
    -moz-animation: fade_1 1s infinite ease;
    animation: fade_1 1s infinite ease
}
.loader_content.loader_7::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    top: .5em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: fade_2 1s infinite ease;
    -moz-animation: fade_2 1s infinite ease;
    animation: fade_2 1s infinite ease
}
/* end loader_content.loader_7 */
/* loader_content.loader_8:below */
.loader_content.loader_8 {
    position: relative;
    display: inline-block;
    height: 2em;
    width: 2em;
    top: 0;
    left: 0;
    border-radius: 2em;
    overflow: hidden !important;
    -webkit-animation: pulse 1s infinite linear;
    -moz-animation: pulse 1s infinite linear;
    animation: pulse 1s infinite linear
}
/* end loader_content.loader_8 */
/* @keyframes animations below: */
@keyframes spin {
    0%{transform:rotateZ(0deg)}
    100%{transform:rotateZ(360deg)}
}
@keyframes scale_1 {
    0%{transform:scale(1)}
    50%{transform:scale(.25)}
    100%{transform:scale(1)}
}
@keyframes scale_2 {
    0%{transform:scale(1)}
    50%{transform:scale(.25)}
    100%{transform:scale(1)}
}
@keyframes scale_3 {
    0%{transform:scale(.25)}
    50%{transform:scale(1.5)}
    100%{transform:scale(.25)}
}
@keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes tick_tock {
    0%{transform:rotateZ(0deg)}
    12.5%{transform:rotateZ(45deg)}
    25%{transform:rotateZ(90deg)}
    37.5%{transform:rotateZ(135deg)}
    50%{transform:rotateZ(180deg)}
    62.5%{transform:rotateZ(225deg)}
    75%{transform:rotateZ(270deg)}
    87.5%{transform:rotateZ(315deg)}
    100%{transform:rotateZ(360deg)}
}
@keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
@-webkit-keyframes spin {
    0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-webkit-keyframes scale_1 {
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(.25);transform:scale(.25)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes scale_2 {
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(.25);transform:scale(.25)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes scale_3 {
    0%{-webkit-transform:scale(.25);transform:scale(.25)}
    50%{-webkit-transform:scale(1.5);transform:scale(1.5)}
    100%{-webkit-transform:scale(.25);transform:scale(.25)}
}
@-webkit-keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes tick_tock {
    0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    12.5%{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
    25%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
    37.5%{-webkit-transform:rotateZ(135deg);transform:rotateZ(135deg)}
    50%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}
    62.5%{-webkit-transform:rotateZ(225deg);transform:rotateZ(225deg)}
    75%{-webkit-transform:rotateZ(270deg);transform:rotateZ(270deg)}
    87.5%{-webkit-transform:rotateZ(315deg);transform:rotateZ(315deg)}
    100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-webkit-keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@-webkit-keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@-webkit-keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@-webkit-keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
@-moz-keyframes spin {
    0%{-moz-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    100%{-moz-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-moz-keyframes scale_1 {
    0%{-moz-transform:scale(1);transform:scale(1)}
    50%{-moz-transform:scale(.25);transform:scale(.25)}
    100%{-moz-transform:scale(1);transform:scale(1)}
}
@-moz-keyframes scale_2 {
    0%{-moz-transform:scale(1);transform:scale(1)}
    50%{-moz-transform:scale(.25);transform:scale(.25)}
    100%{-moz-transform:scale(1);transform:scale(1)}
}
@-moz-keyframes scale_3 {
    0%{-moz-transform:scale(.25);transform:scale(.25)}
    50%{-moz-transform:scale(1.5);transform:scale(1.5)}
    100%{-moz-transform:scale(.25);transform:scale(.25)}
}
@-moz-keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes tick_tock {
    0%{-moz-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    12.5%{-moz-transform:rotateZ(45deg);transform:rotateZ(45deg)}
    25%{-moz-transform:rotateZ(90deg);transform:rotateZ(90deg)}
    37.5%{-moz-transform:rotateZ(135deg);transform:rotateZ(135deg)}
    50%{-moz-transform:rotateZ(180deg);transform:rotateZ(180deg)}
    62.5%{-moz-transform:rotateZ(225deg);transform:rotateZ(225deg)}
    75%{-moz-transform:rotateZ(270deg);transform:rotateZ(270deg)}
    87.5%{-moz-transform:rotateZ(315deg);transform:rotateZ(315deg)}
    100%{-moz-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-moz-keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@-moz-keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@-moz-keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@-moz-keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
/* end @keyframes animations */

Read More