9 replies to this topic

[margeaux7]

I am slowly but surely getting the hang of Firebug. I am trying to change the content padding in my hero element. In firebug if i replace the 5% to say 10 pixels it works, but when I past the exact code into my custom code it does not work. This is what I am using.

 

#hero .content-pad {
    padding-bottom: 10px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 10px !important;
}

 

Here is the URL. Thank you so much in advance.

 

Please Login or Register to see this Hidden Content

[osgzach]

Have you tried it without the  "!important"  bit ?   I have not found it necesarry to use as of yet, and I'm not even sure it works myself..

 

Other than that, make sure you are really getting the full CSS path you need to override..   You will often find when inspecting the HTML  that child nodes are ridiculously nested and can go down many levels. 

 

The first thing I did was location the Hero ID, and it has several chidren and those children also go down multiple levels.   So a more thorough inspection of your tree is probably where the solution lies.

[margeaux7]

It is so kind of you to reply. I did try it without the important.

[osgzach]

I wish I could do more,  its hard for me to give a better answer because I don't have a local copy to work with that uses the Hero  item.  I will see what I can do locally with some testing... But I think this is going to come out to the path being incomplete.

 

 

edit: I believe you are looking to change the class  "pl-hero-wrap row"  that controls the padding around the borders of the Hero Unit if I am not mistaken.   This is where I found the "5%" you referenced.

 

 

Please Login or Register to see this Hidden Content

Does this look familiar?

 

If so, try this

 

Please Login or Register to see this Hidden Content

Note this won't change the size of the Hero Unit (i.e if your text does not go all the way to the bottom, the bottom will not rise up to compensate)  it just changes the padding around the  inner margins of the Hero Unit itself. If I am correct.

[Rob]

Hi,

 

Osgzach is correct that the element involved here is this:

Please Login or Register to see this Hidden Content

The padding is written as a percent, not a px width for the reason of insuring that it remains responsive.  Pixel widths are not responsive.  Percentage widths are.

 

Since a percentage can be fractional, you have an almost infinite range between 0.001% and 100%.   Since you want different sizes for top, sides and bottom, you simply edit the code in Firebug like padding-top: 2%;  padding-bottom: 1.5%;  padding-left:1%;  padding-right:1.25%;  and it will write the padding with the one 'padding' tag, followed by all the percentages grouped together.  Like padding: 2% 1.25% 1.5% 1%; making it shorter.   The proper order is top, right, bottom, left.  Still, let Firebug do it for you to ensure it's correct.

 

Once done, copy the entire group and paste to Dashboard > PageLines > Site Options > Custom Code > CSS Rules

[margeaux7]

Thank you for taking the time to respond. That worked perfectly.

[margeaux7]

One last question. I simply don't see only

Please Login or Register to see this Hidden Content

I see

 

pl-imageframe img, img.pl-imageframe {

 

What am I doing wrong?

[Rob]

Once you click the text component in the Hero unit using the Firebug cursor (the rectangle with a cursor icon) you'll see all the potential elements (see image below, each pointed out with a red arrow).  Move your cursor to any one of these and you'll see all the related CSS for that element on the right in the CSS column.

 

If you only see one level, you've not moved the Firebug cursor to the correct level. Just move it about and you'll find the right bits.

Attached Files

•  12-22-2012 7-19-03 PM.png   315.96K  7 downloads

[margeaux7]

You image is a breakthrough for me. I have only been examining the window to the right and not the top level. Thank you. I truly spent the day trying to solve this on my own.

[Rob]

Glad that worked for you!