Wordpress changing a css value inline in a theme

Question

I'm using this wordpress theme and I need to change a value in a div class on the homepage. This div class is

<div class="vertical-center">

and there is the inline value

style="padding-top: 132px;

I tried to find where is the setting of this value

with the text editor searching in files (.js, .css, .php): none
Theme option setting in admin: none
into mysql database: none

and this value does not appear in the source page, but you can see it with the inspector ( using chrome)

Where is this value and how to change it??? Thanks

Although it's bad practise, you can override it with padding-top: 10px !important; in your .vertical-center selector. — naththedeveloper
If you're not seeing it when you view the source it's being applied by some JS. It's unlikely the JS will be set to 132px but rather it's going to calculate the height of something. The easiest fix will be to use CSS to override it as suggested by FDL. I'll take a look at your theme and see if I can see the cause. — Nathan Dawson

Nathan Dawson Nathan Dawson · Accepted Answer · 2014-06-10T12:10:52

The padding-top style is being applied by some JavaScript inside /javascripts/main.js in your active theme folder (dignity).

The line applying this styling is:

 //Vertical Centering of natural content spcific elements (non-images)
 $(function ($) {
          /*if your element is an image then please use $(window).load() instead tha above function wrap, because we want the coding to take
          effect when the image is loaded. */

          //get the width of the parent
          var parent_height = $('.vertical-center').parent().height();
          var image_height = $('.vertical-center').height();

          var top_margin = (parent_height - image_height)/2;

          //center it
          $('.vertical-center').css( 'padding-top' , top_margin);
          //uncomment the following if ithe element to be centered is an image
          $('.vertical-center-img').css( 'margin-top' , top_margin);
   });

If you want to remove it one option would be through the use of CSS:

.vertical-center {
    padding-top: 0 !important;
}

.vertical-center-img {
    margin-top: 0 !important;
}

By using !important you're overriding the inline style.

Make sure you're doing this in a child theme or an appropriate area to add custom CSS to avoid it being overwritten if you update the theme.

Wordpress changing a css value inline in a theme

1 Answers