Jump to content


Photo
* * * * * 1 votes

Change content pad on content box


Best Answer Danny , 10 March 2013 - 11:40 AM

Hi,

 

All sections in PageLines Framework have a similar HTML/CSS structure to position the sections content, this structure looks like this:

 

<section ID="SectionName" class="section-sectionname fix"> <== There may be more classes but this is just for example purposes.

<div class="texture">

<div class="content">

<div class="content-pad">

 

Now as you can see above, each section has a div with a class called content-pad, this container controls the padding for that section. So in order to reduce this sections padding, we will need to use the sections class, which you can see in the <section> above and then add the content-pad class after it in our code, this will target that sections content-pad and no others.


This means you can reduce the padding for that section and that section alone. The code you have above, will do it globally across your site.

 

So here is an example which will assist you.

 

.section-sectionname .content-pad { padding:0px; }

 

The code above will give our example section zero padding and therefore reduce the space (gap) from top, right, bottom and left.

 

As for your Download button, you have added the HTML for your button in the ContentBox section. So I recommend using Firebug or your browsers built-in web dev tools and inspect the ContentBox sections content-pad element to find the correct code.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

Go to the full post


  • Please log in to reply
16 replies to this topic

#1 margeaux7

margeaux7

    Super Member

  • Members

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

Posted 09 March 2013 - 02:37 PM

I have tried several different things to change the content pad on a content box and I am not that good at firebug especially when things are nested.

 

Here is what I tried:

 

.hentry-pad cb-standard-pad entry_content  { padding: 10px 10px 10px;}

 

Thank you in advance. I really appreciate those that are so willing to help.



#2 Rob

Rob

    One Smart Egg

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

Posted 09 March 2013 - 03:27 PM

Hi,

 

Many apologies but I'm unclear of several things:  Where are you trying to do this on the page? What's the link you're trying to modify? What's the primary goal?

 

Thanks.  I'll be happy to guide you.



#3 margeaux7

margeaux7

    Super Member

  • Members

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

Posted 09 March 2013 - 03:44 PM

Please Login or Register to see this Hidden Content

Scroll down to the second set of boxes. I would like to diminish the bottom padding of the content box a bit.

When I use firebug I get this but I don't know how to reference the contentbox. See it says 15 px bottom. But what is the code to reference the box?

 

.content-pad {
    padding-bottom2px !important;
    padding-left15px;
    padding-right15px;
    padding-top7px;
}
.content-pad {
    padding-bottom15px;
}


#4 Rob

Rob

    One Smart Egg

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

Posted 09 March 2013 - 04:02 PM

Hi,

I believe the proper element you're trying to modify is .hentry .cb-standard which isn't seen in the sandbox, but is seen in the HTML code. When you find it there, and hover in Firebug, you'll see the bottom space is highlighted in yellow.

 

I believe you need to set margin-bottom : 0; or padding-bottom : 0; to that. 

 

Hope this helps.



#5 margeaux7

margeaux7

    Super Member

  • Members

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

Posted 09 March 2013 - 04:59 PM

Rob,

You helped me tremendously. I did not know to access the html code to figure out how to reference an item properly. This is going to make such a difference for me. Thank you very much for your time and expertise.



#6 margeaux7

margeaux7

    Super Member

  • Members

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

Posted 10 March 2013 - 11:04 AM

I thought I understood but I have now spent hours trying to do this on my own and it continues to say

.content-pad {
    padding-bottom15px;
    padding-left15px;
    padding-right15px;
    padding-top15px;
}
 
Would you please consider giving me the proper code to remove all of that white space around the download now button on this page:

Please Login or Register to see this Hidden Content

Thank you in advance.


#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 15818 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 March 2013 - 11:40 AM   Best Answer

Hi,

 

All sections in PageLines Framework have a similar HTML/CSS structure to position the sections content, this structure looks like this:

 

<section ID="SectionName" class="section-sectionname fix"> <== There may be more classes but this is just for example purposes.

<div class="texture">

<div class="content">

<div class="content-pad">

 

Now as you can see above, each section has a div with a class called content-pad, this container controls the padding for that section. So in order to reduce this sections padding, we will need to use the sections class, which you can see in the <section> above and then add the content-pad class after it in our code, this will target that sections content-pad and no others.


This means you can reduce the padding for that section and that section alone. The code you have above, will do it globally across your site.

 

So here is an example which will assist you.

 

.section-sectionname .content-pad { padding:0px; }

 

The code above will give our example section zero padding and therefore reduce the space (gap) from top, right, bottom and left.

 

As for your Download button, you have added the HTML for your button in the ContentBox section. So I recommend using Firebug or your browsers built-in web dev tools and inspect the ContentBox sections content-pad element to find the correct code.

 

For assistance visit our custom CSS documentation - 

Please Login or Register to see this Hidden Content


  • michael_b, progressive01 and Erwan like this

#8 margeaux7

margeaux7

    Super Member

  • Members

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

Posted 10 March 2013 - 11:49 AM

What am I doing wrong. I really am trying to be self sufficient and not rely on others.

 

.hentry .cb-standard .content-pad}
padding-bottom: 2px !important;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
{

 

Thank you.



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 15818 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 March 2013 - 12:08 PM

As I mentioned above, you want to use the sections class and then add after that the content-pad class, then apply your padding to it.

 

Also, the ContentBox your download button is using is a clone, therefore, you will also need to add the clone class to your code.

I have provided you with the correct code below, all you need to do is add your padding to it.

 

 

.section-contentbox.clone_2 .content-pad { }

  • michael_b likes this

#10 margeaux7

margeaux7

    Super Member

  • Members

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

Posted 10 March 2013 - 12:09 PM

Thank you. I really am trying to learn this. I greatly appreciate your patience with me.



#11 margeaux7

margeaux7

    Super Member

  • Members

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

Posted 10 March 2013 - 12:15 PM

Danny,

I am sorry. This is not working for me and I do not understand.

 

.section-contentbox.clone_2 .content-pad {
padding:0px;}



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15818 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 March 2013 - 12:28 PM

Not sure what you mean, the code has worked and has removed 30 pixels of padding.

 

Please Login or Register to see this Hidden Content

 

Without the code active - 

Please Login or Register to see this Hidden Content


With the code active - 

Please Login or Register to see this Hidden Content



#13 margeaux7

margeaux7

    Super Member

  • Members

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

Posted 10 March 2013 - 12:37 PM

Cached! I am sure you are very sick of me. I will study your tutorial that you spent so much time reading. I am quite blessed to have you help me. Thank you.



#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 15818 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 March 2013 - 01:02 PM

No problem, happy to help.



#15 bellcreative

bellcreative

    Newbie

  • Members

  • 7 posts
  • Country: Country Flag

Posted 18 June 2013 - 05:17 PM

I have been trying to do what you said to take out the white gaps between layers of my website. I can't seem to get it to work. Can you help me with my homepage?

 

Thanks,

connor



#16 bellcreative

bellcreative

    Newbie

  • Members

  • 7 posts
  • Country: Country Flag

Posted 18 June 2013 - 05:18 PM

My site is

Please Login or Register to see this Hidden Content



#17 Rob

Rob

    One Smart Egg

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

Posted 18 June 2013 - 05:26 PM

Hi @

Please Login or Register to see this Hidden Content

, please open a new topic and reference this.