Jump to content


Photo
- - - - -

Hero: Change Content Pad


Best Answer Rob , 23 December 2012 - 12:24 AM

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.

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 margeaux7

margeaux7

    Super Member

  • Members

  • 118 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 22 December 2012 - 06:06 PM

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



#2 osgzach

osgzach

    Advanced Member

  • Members
  • 32 posts
  • LocationWI, USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 22 December 2012 - 08:41 PM

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.



#3 margeaux7

margeaux7

    Super Member

  • Members

  • 118 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 22 December 2012 - 08:43 PM

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



#4 osgzach

osgzach

    Advanced Member

  • Members
  • 32 posts
  • LocationWI, USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 22 December 2012 - 08:52 PM

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.



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 December 2012 - 10:01 PM

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



#6 margeaux7

margeaux7

    Super Member

  • Members

  • 118 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 22 December 2012 - 10:33 PM

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



#7 margeaux7

margeaux7

    Super Member

  • Members

  • 118 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 22 December 2012 - 10:37 PM

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?



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 12:24 AM   Best Answer

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



#9 margeaux7

margeaux7

    Super Member

  • Members

  • 118 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 23 December 2012 - 01:30 AM

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.



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 December 2012 - 02:59 AM

Glad that worked for you!