Archived

This topic is now archived and is closed to further replies.

  • 0

Hero: Change Content Pad

Question

Posted · Report post

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.

 

http://www.maggpie.com/crc/

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

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.

post-6-0-48844900-1356222232_thumb.png

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

 

.pl-hero-wrap {
  -moz-box-sizing: border-box;
  background-color: #F5F5F5;
  border: 1px solid #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) inset;
  padding: 5%;
}

Does this look familiar?

 

If so, try this

 

#hero .pl-hero-wrap {
  padding: 10px 15px;
}

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Osgzach is correct that the element involved here is this:

.pl-hero-wrap {
    -moz-box-sizing: border-box;
    background-color: #F5F5F5;
    border: 1px solid #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) inset;
    padding: 5%;
}

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

One last question. I simply don't see only

.pl-hero-wrap

I see

 

pl-imageframe img, img.pl-imageframe {

 

What am I doing wrong?

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Glad that worked for you!

Share this post


Link to post
Share on other sites