Overriding Inline css of wordpress template

Question

I want to override the style padding-top:100px to padding-top:0px. How can i override the inline style inside wordpress template?

<!-- Sidebar With Content Section-->
    <div class="with-sidebar-wrapper">
  <section id="content-section-1" >
  <div class="gdlr-full-size-wrapper gdlr-show-all"  style="padding-top: 100px; padding-bottom: 0px;  background-color: #ffffff; "  ><div class="gdlr-master-slider-item gdlr-slider-item gdlr-item"  style="margin-bottom: 0px;"  >
    <!-- MasterSlider -->

I already tried the below code in style.css but its not working!

.gdlr-full-size-wrapper .gdlr-show-all{
padding-top:0px !important;
}

vivekkupadhyay · Accepted Answer · 2015-08-21 11:24:24Z

6

To select this perticular <div> you to write your CSS like:

 .gdlr-full-size-wrapper.gdlr-show-all {

 } /*without space between*/

you're using

 .gdlr-full-size-wrapper .gdlr-show-all {

 }

viz selecting

<div class="gdlr-full-size-wrapper">
   <div class="gdlr-show-all"></div>
</div>

Also if you're willing to override inline CSS only then you can use [style] selector also.

As:

<div class="someClass" style="font-size:10px; "></div>

So we can write CSS like:

.someClass[style] { font-size:14px !important}

what's trick here is this CSS only works when someClass has inline CSS for font.

edited Aug 21, 2015 at 11:24

vivekkupadhyay

2,9011 gold badge25 silver badges36 bronze badges

answered Aug 21, 2015 at 10:36

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DeebashVFX Over a year ago

Can anyone explain how inline styles are created in wordpress and how can I modify directly without using the above method. Is it possible?

DeebashVFX Over a year ago

Where to add that JS statement, i mean in which php file? (I'm new to wordpress)

Justinas Over a year ago

@DeebashVFX I don't know WP too, but you must put that to .js file

Muhammad Nasir · Accepted Answer · 2015-08-21 10:43:56Z

0

Use following code it will work for both cases if you have one or both classes on div tag.

.gdlr-full-size-wrapper.gdlr-show-all, .gdlr-full-size-wrapper .gdlr-show-all
{
 padding-top:0px !important;
}

answered Aug 21, 2015 at 10:43

Muhammad Nasir

2,2045 gold badges38 silver badges66 bronze badges

Comments

Martin Karari · Accepted Answer · 2020-05-13 15:00:41Z

0

Justinas explains it well and that should work perfectly, I have applied the same to custom CSS of a WordPress theme and has worked for me. The CSS I had trouble changing were inline a div.

answered May 13, 2020 at 15:00

Martin Karari

1883 silver badges12 bronze badges

Collectives™ on Stack Overflow

Overriding Inline css of wordpress template

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related