Spacing

[indakno 0]

Why is there so much spacing? I need the site to be a little tighter. Is there a way to decrease the spaces between widgets, content area, header, footer?

[pernillaoberg+ 0]

I have the same question as indakno. I have searched the forum and tried pasting different recommended code for tighter space between widgets, se below, in Settings->Custom Code (which is the only code I dare to change), but nothing happens: ` .widget { margin-bottom: 1em; } ` Best regards, Pernilla http://www.akersjon.com

[Jenny 33]

I believe there is a lot of spacing because our developers like it that way. Look at any page on the PageLines website, there is lots of spacing. ;) if you can provide a link to your site and the EXACT area that you would like to have less spacing, we can help you achieve the desired look using custom CSS. @pernillaoberg glad you were able to find a CSS selector you want to change! I don't know if the 1em is the default bottom margin but you can always change it to 0 to make sure your changes are taking affect. Also, when adding custom CSS, I always recommend adding !important after the CSS so you are sure your change is applied, like this: [code].widget { margin-bottom: 1em !important; }[/code]

[jdbrasesco+ 3]

+1 I've spent hours and hours firebugging and removing padding and margins. Even adding negative numbers at times. It would be nice if there were some padding and margin controls in the settings or at page/feature level.

[Jackey 29]

You can change margins at page level or change margins for different type of pages. I alo found the layout to be very loose, and took some time to make my pages more compact. [url="http://golfclub-stippelberg.nl/nieuws/"]sample[/url] Pagelines has been clever to code in separate divs that provide the padding of all areas on a page. These can easy be recognised because they are all called div.********-pad Apart from all section and space identifiers, they also done the clever thing to add all kind of classes to the body of the pages to identify what page or even what kind of page it is. So the task is to locate the padding div and look in what body or/and section class it is encased. With that info you build your CSS-selector. Sample: [code]/* Indent copy space for posts and remove line and space under pages and posts */ article.type-page, section#postloop.copy.postnav-postloop.postloop-sharebar article.type-post.fpost { border-bottom: none; } article.type-page div.hentry-pad, article.type-page { padding: 0; } section#postloop.copy.postnav-postloop.postloop-sharebar div.hentry-pad { padding: 0 10px; }[/code] This is just a sample.

[pernillaoberg+ 0]

Thanks simple_mama! It worked, but I had to put a negative value as brasesco said and that made the widgets tighter: .widget { margin-bottom: -2em !important; } Love PageLine - love the support! :-) Pernilla

[Jenny 33]

You're welcome! And yes, negative lessens the value whereas positive raises it. :)

[indakno 0]

@simple_mama - My site is indakno.com/atl.The spaces are everywhere. Between each section and widget. Thank you.

[indakno 0]

If someone could look at the 300x250 ads at the bottom of indakno.com/atl and help me with the spacing, I would really appreciate it.

[Jenny 33]

What spacing do you want removed exactly? Keep in mind we can only help you with a limited amount of CSS, we can't design your site for you. ;)

[indakno 0]

www.indakno.com/magazine The more footer widgets. How can I get them to be 300px in width. That's what Im mainly talking about. There are a lot of spacing within the site. I'm not looking for design help, I've designed the site myself. What I do need is help with this template. Thanks in advance.

[Jenny 33]

I don't see more-footer widgets unless I am missing them. You can find the CSS element for any section using [url="http://www.getfirebug.com"]FireBug[/url]. From there, you will be able to find the padding and reduce it as desired.

[indakno 0]

They are there now. I have never used firebug but I will look into it.

[Jenny 33]

Right now they are using percentages, which is the best way to do it so they are all even. If you'd like to change the widths, use this CSS code and change accordingly: [code]#morefoot_area .pp3 { width: 31.3333%; }[/code]

[indakno 0]

Last question. Where did you find that. I am looking at firebug and I see 10px. How did you find that? Thanks in advance.

[Jenny 33]

Go through the morefoot CSS starting at the parent item (#morefoot_area). This selects the whole area, but you only want to know about 1 box individually, so move down going further into child selectors until it highlights a single box. Clicking that line in the html displays the CSS on the right, where is shows .pp3 with a width of 31.3333%. (I added the #morefoot_area to the code above so you don't need to add !important to the CSS.)

[indakno 0]

I know you're probably getting tired of me but this is one last thing. I did what you asked and all it did was resize the morefoot content area and not reduce the spacing that is surrounding it. Go here: http://indakno.com/magazine/atlanta/ scroll down to the morefoot area and you can see the 300x250 ad thats in the middle. It doest fit. And the spacing between the content is too wide. If I could close the spacing a little, maybe I can fit the content in there. I just want to make it at least 300px wide. Help please..

[Jenny 33]

It looks like you got this working. Let me know!

[indakno 0]

Not really. I had to increase the width of my page because I could not decrease the spaces between the columns in the morefoot section in order to get my ad to fit.i really hate all the spacing. Although I do like it, I hate not being able to control it.

[Jenny 33]

This is where all the padding/margins come from in that section. (I have changed to zeros for you.) If you want, you can put this in your CSS and then adjust the page width as necessary. [code]#morefoot_area .pp3 { margin-right: 0; width: 31.3333%; } #morefoot_area .widget-pad { padding: 0; }[/code] Hope that helps :)