How to modify the CSS of your WordPress without using a Child Theme

Surely more than once you had to modify the CSS code of your WordPress and have had fear of losing everything when you update the version of your WordPress .

I'm sure that after a lot of reading on the internet at the end you have come to the conclusion that the best solution to change the CSS of your WordPress without losing it with an update is through a Child Theme or son ​​theme .

Well, this process is not a simple topic and requires minimal knowledge even if there are plugins that do it automatically ]

So today I come to bring you a plugin with which you can modify the CSS of your WordPress without having to worry about installing children themes or strange things . You will only need to install the plugin and you will be ready to write lines and lines of CSS code.

The plugin I am talking about is Simple CSS . This wordpress plugin acts as a kind of child theme and gives priority to this style sheet above the rest .

Once the plugin is installed you will only have to put write lines of code in the new plugin .

In case any property you have written in Simple CSS is not respected you simply have to add the code ! Important before ending each property.

Example:

In this way you will ensure that all your properties written in Simple CSS are respected.

Also, with this plugin you can do things as interesting as modify the CSS of a particular WordPress page

 simple plugin css

To do this, you simply have to indicate the page on which the CSS (ID) will be modified and then write the CSS code

To know the ID of a WordPress page you will simply have to edit an entry or page in wordpress and look at the URL that appears once you are editing.

In this URL you will see the ID of the page since it is the number that appears after the code post =

You can also modify the CSS of the WordPress blog section using this code: You can also modify the CSS of the blog section WordPress using this code:

How you can check there are a thousand and one ways to modify the CSS of your WordPress with this plugin even if you use some visual layout ( Divi Elementor Visual Composer ).

Note that this plugin is the perfect complement for this allows to modify the CSS of any part of the web saving resources and optimizing your WordPress to the maximum without Necessity of any Child Theme.

Loading …

That may also help you:

Convert any link into a Divi button • WordPress Help

/ * CSS to create a very cute divi button * /

. button white {

font size : 20px ;

font weight : 500 ;

] moz border radius : 3px ;

webkit ] – border radius : 3px ;

border radius : 3px [19659003];

padding : 8px 20px ;

line height : 1.7em ; [19659002] background : transparent ;

border : 2px solid [19659003];

webkit font smoothing : antialiased ;

] moz osx font smoothing : grayscale ;

moz transition : all 0.2s ;

webkit ] – transition : all 0.2s ;

transition : all 0.2s ; [19659002] position : relative ; }

to . button white {

background color : transparent ;

border : 2px solid # 8e3737; / * change the border color here * /

color : # 8e3737! important; / * changes here the color of the text * /

font weight : bold ; }

to . button white : hover {

background : transparent ;

border : 2px solid # 8e3737; / * change here the color of the border when passing the cursor * /

padding : 8px 34px 8px 14px important ; }

to . button white : after {

font family : 'ETmodules' ;

font size ]: 32px ;

opacity : 0 ;

speak : none ;

font style : normal ;

font ] weig ht : normal ;

font variant : normal ]

text transform : none ;

line height : 1 ;

webkit font smoothing : [19659004] antialiased ;

moz osx font smoothing : grayscale ;

font size : 32px ;

line ] heig ht : 1em ;

content : " 35" ;

position : absolute ;

margin left : 1em ;

moz transition : all [19659000] 0.2s ;

webkit ] transition : all 0.2s ;

transition : all 0.2s ; }

to . button white : hover : after {

] [19659004] opacity : [19659308] 1 ;

display : block ! important ;

font family : 'ETmodules' ;

speak : none ;

style : normal ;

font weight : normal ;

font variant : normal ;

text transform : none ;

line height : [196590] 13] 1 ;

webkit font smoothing : antialiased ];

moz osx font smoothing : grayscale ;

right : 0px ;

top : 5px ;

margin left : 0 ; }

Divi Tutorial: Prevent the logo from losing quality

One of the things that makes me more nervous Divi although I love it, is that when you add your own logo it looks very ugly, pixelated or low quality .

Either because of the size of the chosen image or the format, when the size of the main menu is small, it is often displayed poorly and basically looks bad .

One possible solution, manual, it is upload the logo to the maximum size – or similar – that will be displayed in your main menu . It's a fix, but it works.

But if you do not want to do ridiculous experiments or calculations it's best that you add this bit of CSS from the Theme Customizer > Additional CSS :

Save the changes and your logo will look decent already .

Following the same example from the previous web would now look like this, without changing the image file, just applying the previous CSS:

This is one of my tricks for Divi favorites so easy to apply and the great and visible result with the least effort.

]

How to improve the appearance of comments

The theme Divi has many advantages and every time it improves more in every way, but there are some elements that still leave something to be desired, at least for my taste, and one is the native aspect of the comments, so let's improve them .

I mean the Divi theme, for example, user avatars are square which goes against current style trends, because in almost virtually all web services are round.

One more problem with the avatars is that are also too large .

And also to how the boxes are shown when responding to comments, overlapping at times on top of each other, which is a fat design flaw.

Another flaw , in my view, is the excessive margin that is added to each comment anidad or sometimes overflowing the width of the comment zone.

Here are some examples of what I'm saying:

Well, if you want to fix these bugs you can greatly improve the appearance of the native comments of Divi by adding a bit of custom CSS or solve them, and offer better comments.

Just open Theme Customizer > Additional CSS and add the following code:

Post changes and the improvement will be noticeable .

you see, in each line I explain in the code what each part does e, for your reference.

In the end, what you get is this other …

How can you observe, we have achieved the following:

  • Convert the square avatars into rounds
  • Reduce the size of the avatars somewhat
  • Improve the placement of the avatars
  • Make the avatars even smaller in mobile devices
  • The nested comments, from the second comment, remain in the same margin, do not extend to infinity.
  • In passing we have eliminated the problems of visualization in the box to respond to comments, which you will appreciate the first time you use it.

If you want to add more styles for more sizes of devices you will only have to add the lines corresponding to the maximum widths you want to specify and customize.

Loading …

That may also help you:

Remove border and margins in the grid style blog module

One of the most popular modules Divi is the one from blog style grid, or masonry which shows the last entries so that they look like in boxes stacked in aesthetically mode messy.

If you use the social network Pinterest you know what I'm talking about, it's very similar.

This module, by default, adds an additional margin and wraps the entries in boxes with border that you can remove if you want.

To eliminate that additional margin and border you just have to add the following code in section Additional CSS WordPress Personalizer .

Save the changes and you'll have the grid-style blog module, or masonry, cleaner like this:

Call to action in a single line

The Divi call-to-action module has two default lines one for the texts and one for the action button, but you can easily change so that it is all on one line ]

The way to get it is very simple. Just go to Customizer and in section Additional CSS add the following code:

There are two lines of the code that you should adapt to your liking, the top margin of the button ( margin-top ) and the width of the elements (width), as indicated in the code.

Divi Tutorial: Put the secondary menu under the main

Today I came up with a pijada that still serves you at times for some web of yours or of some client: put the secondary menu below the main one in Divi.

And the thing is quite simple, since you just have to apply a bit of CSS simple to the elements that determine the position of both menus.

To do so open the Customizer> Additional CSS and add the following code:

] The only adjustments you would have to make would be for to change the property height top to the CSS ID # top-header in case it does not fit your menu correctly , but other than that works great.

How to add the Ken Burns effect

/ ** Effect kenburns Divi ** /

. kb zoomout . et_pb _ slide et_parallax _ bg {

animation : zoomout 7s forwards ;

ms animation : zoomout 7s forwards ;

webkit animation : zoomout 7s forwards ;

0 animation : zoomout 7s ] forwards ;

moz animation : zoomout 7s forwards ;

}

. kb zoomin . [19659003] et_pb _ slide . et_parallax _ bg {

animation : ] zoomin 7s forwards ;

ms animation : zoomin 7s forwards ;

webkit animation : zoomin 7s forwards ;

0 animation : zoomin 7s forwards ;

– [19659] 003] moz animation : zoomin 7s forwards ;

}

kb zoomin right . et_pb _ slide . et_parallax ] bg {

animation : zoomin right 7s forwards ;

ms animation : zoomin right 7s forwards ;

webkit animation : [19659003] zoomin right 7s forwards ;

0 animation : zoomin right 7s forwards ;

[19659004] – moz animation : zoomin right 7s forwards ;

}

. kb zoomout right . et_pb _ slide ] . et_parallax _ bg {

animation : zoomout – [19659005] right 7s forwards ;

ms animation : zoomout right 7s forwards ;

we bkit animation : zoomout right 7s forwards ; [19659013] 0 animation : zoomout right 7s forwards ;

moz animation : zoomout right [19659017] 7s forwards ;

}

. kb zoomout . et_parallax _ bg {

animation : zoomout 17s forwards ; [19659013] ms animation : zoomout 17s [194590] 04] forwards ;

webkit animation : zoomout 17s forwards ;

0 animation : zoomout 17s forwards ;

moz animation : zoomout ] 17s forwards ;

}

. kb zoomin . et_parallax _ ] animation : zoomin 17s forwards ;

] ms animation : zoomin 17s [1945] 9004] forwards ;

webkit animation : zoomin 17s forwards ;

0 animation : zoomin 17s forwards ;

moz animation : zoomin ] 17s forwards ;

}

. kb zoomin right . ] et_parallax _ bg {

animation : zoomin right 7s forwards ;

ms animation : zoomin right 17s forwards ;

webkit animation : zoomin right 17s forwards ;

0 animation : zoomin right 17s forwards [19659008];

moz animation : zoomin right 17s ] forwards ;

}

. kb zoomout right . et_parallax ] bg {

animation : zoomout – [19659005] right 7s forwards ;

ms animation : zoomout right 17s forwards ;

webkit animation [19659004]: zoomout right 17s forwards ;

0 animation : zoomout right 17s forwards ;

] moz animation : zoomout right 17s [19659003] forwards ;

}

@ keyframes zoomout {

0 [1 9659004]% {

ms transform : scale3d ( 1.5 [19659008] 1.5 1.5 ) translate3d ( 0px 0px ] 0px ) ;

webkit transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 0px 0px 0px ) ;

or transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 0px [19659017] 0px 0px ) ;

moz transform : ] scale3d ( 1.5 1.5 1.5 ) translate3d ( 0px ] 0px 0px ) ;

transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 0px 0px , 0px ) ;

animation timing function : linear ;

}

100 % {

ms transform : [19659511] scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px [19659008] 0px 0px ) ;

webkit transform : scale3d ( 1.1 1.1 1.1 ) translate3d ( ] 0px 0px 0px ) ;

or transform : ) scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

moz transform ]: scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

transform : scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

}

}

@ keyframes zoomin {

0 % {

ms transform : scale3d ([19659042] 1.1 1.1 1.1 ) translate3d ( 0px 0px [19659008][19659017] 0px ) ;

webkit transform : scale3d ( ] 1.1 1.1 1.1 ) translate3d ( 0px 0px ] 0px ) ;

or transform : scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

moz transform : scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px [19659017] 0px 0px ) ;

transform : scale3d ( 1.1 ] 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

animation timing function : linear ;

}

100 % {

ms transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 0px) 0px 0px ) ;

webkit transform : ] scale3d ( 3.5 3.5 3.5 ) translate3d ( 0px 0px 0px ) ;

or transform : scale3d ( 1.5 1.5 1.5 ) translate3d [19659008] ( 0px 0px 0px ) ;

moz transform : scale3d ( 1.5 1.5 1.5 ) ] translate3d ( 0px 0px 0px ) ;

transform : ] [19659511] scale3d ( 1.5 1.5 1.5 ) translate3d ( 0px [19659008] 0px 0px ) ;

}

}

@ keyframes zoomout [19659004] – right {

0 % {

ms transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( ] – 150px 20px 0px ) ;

webkit transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 150px 20px 0px ) ];

or transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 150px – [19659042] 20px 0px ) ;

moz transform : [19659511] scale3d ( 1.5 1.5 1.5 ) translate3d ( ] 150px 20px 0px ) ;

transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( ] – 150px 20px 0px ) ;

animation timing function : linear ;

}

100 % {

ms transform : scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

webkit transform : scale3d ( 1.1 1.1 [19659008] 1.1 ) translate3d ( 0px 0px 0px ) [19659008];

or transform : scale3d ( 1.1 ] 1.1 ) translate3d ( 0px 0px 0px ]) ;

moz transform : scale3d ( 1.1 , 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

transform : scale3d ( 1.1 1.1 1 .1 ) translate3d ( 0px 0px 0px ) ;

}}

}

@ keyframes zoomin right {

0 % {

] ms transform : scale3d ( 1.1 1.1 , 1.1 ) translate3d ( 0px 0px 0px ) ;

webkit transform : scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

or transform : scale3d ( 1.1 1.1 1.1 ) translate3d ( 0px 0px 0px ) ;

moz transform : scale3d ( 1.1 1.1 [19659008] 1.1 ) translate3d ( 0px 0px 0px ) [19659008];

transform : scale3d ; [ 1.1 ; 1.1 ; 1.1 ]) translate3d ( 0px 0px 0px ) ;

] animation timing function : linear ;

}

100 % {

ms transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 150px [19659004] – 20px 0px ) ;

webkit transform : ] scale3d ( 1.5 1.5 1.5 ) translate3d ( 150px 20px 0px ) ;

– [196590] 03] or transform : scale3d ( 1.5 1.5 1.5 [19659008]) translate3d ( 150px 20px 0px ) ;

moz transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 150px 20px 0px ) ;

transform : scale3d ( 1.5 1.5 1.5 ) translate3d ( 150px , 20px 0px ) ;

}

}

Fix the footer (footer)

The other day I was asked in the comments how to make the footer of Divi, the footer, stay fixed down because he has the habit that when you have a page with little content he stays like half, floating instead of being at the bottom.

I refer to this horripilancia:

]

This ugly behavior gives a rather regrettable feeling, nothing according to everything you can get with Divi so let's fix it right now.

The problem is that ] the CSS ID of footer is relative to the content, so it will adapt and if you have a page like the one above (an empty cart) with little content, then the footer will be relative to the content, little in this case.

The solution goes through forcing the CSS to the position is absolute and stays in the background .

If you only have the problem on one page, because the rest have enough content, there is no reason to add additional CSS to your entire site

Just open the page and open its settings, here:

And once inside paste the custom CSS to solve the problem here:

and the CSS to add is the following :

Conversely, if you prefer to apply the custom CSS to make the Divi footer fixed on all pages then open the Customizer and add the CSS to the section of Additional CSS .

The CSS is the same this:

The result

What we want to get is, of course, this:

Enjoy it!

Loading …

Maybe too Help me:

Make the mobile menu also fixed

In case you have not noticed, even if you have configured the Divi menu to be fixed so that you chases often, from mobiles stays up, the fixed menu does not work .

In my humble opinion it makes some sense, because on a mobile device the little screen space available must be dedicated to the content, without being occupied by other elements such as menus, etc.

Now, if you prefer that also on mobile the navigation menu follow the screen to the users you can modify it with this trick in two steps

Simple, to get your navigation menu to follow the user as he navigates simply add the following code to the section Additional CSS of the Customizer :

Now, a mobile menu with subelements always has a problem and that is if it has many pages in the drop-down reaches a point where it meets the bottom of the screen and you can not continue browsing . It happened to you right?

So this other trick is for you to scroll through the pull-down elements of your mobile menu .

Again, just add the code to CSS Additional of Customizer :

Of course, do not forget to save and publish the changes so that Divi has also the mobile fixed menu

Loading …

You may also find it helpful: