Remove the Date and Author in flipcard Dynamic Views Blogger Template

You can remove the Date and Author in flipcard view by adding this to your CSS:

#groups li:last-child, #groups li:nth-child(2), #groups li:last-child, #groups li:nth-child(4){
display: none !important;
}

Read More

Remove the date ribbon in Dynamic Views Blogger Template

To remove the date ribbon on Dynamic Views theme by Blogger. Add this custom CS:

.ribbon {display:none!important;}

Read More

How To Remove Blogger Attribution Gadget on Dynamic Views

To remove the Dynamic Views theme. Powered by Blogger. text in the footer of the Dynamic Views template. Add this custom CSS code as pictured below:


#Attribution1{display:none!important;}

The next step is to remove the Attribution module and click Save.

Read More

Remove Dynamic Views Blogger Template Loading Gears Icon

To remove the gears, add the following CSS:

.ss,.blogger-gear{

display: none;

}

Read More

Display 3 WooCommerce products instead of 4 with DIVI

I have changed the columns of the WooCommerce product page from 4 to 3 with this code:

@media only screen and ( min-width: 981px ){
.woocommerce-page ul.products li.product {
margin-right: 3.8% !important;
width: 30.8% !important;
}
.woocommerce-page ul.products li.product:nth-child(4n+1) {
clear: none !important;
}
.woocommerce-page ul.products li.product:nth-child(3n) {
margin-right: 0 !important;
}
}

@media only screen and (min-width: 800px)
{
.woocommerce-page ul.products li.product {
min-height: 600px;
}
}

Read More

Upgrade the style of DIVI category and archive blog pages

By default the DIVI blog category page style is basic. You can see an example in the picture below from the TweakDorks website.

By adding this in the custom css section in the theme options you can improve the style of your DIVI blog pages.

.archive img[width="1080"] {
max-width: 300px;
float: left;
margin-right: 20px;
}
.archive .et_pb_post {
border-top: 5px solid #F13361;
box-shadow: 0 0 10px #ddd;
padding: 10px;
}

Here is an example:

Read More

Changing color of Thank You message for DIVI Contact form

To do this, add a custom CSS class to that particular Module Settings / Advanced / CSS ID & Classes say custom-contact, then add the following code to Dashboard / Appearance / Customize / Additional CSS:

.my-new-contact .et-pb-contact-message {
color: #333;
}

You can play with the value to achieve the desired result.
Let me know the result.

Read More

Add the Ken Burns effect to slowly zoom out of background image

Add this CSS code to the custom CSS section of your theme.

@-moz-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-webkit-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-ms-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-o-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

Read More