Jump to content


Photo
- - - - -

Spacing


  • Please log in to reply
19 replies to this topic

#1 indakno

indakno

    Super Member

  • Members
  • 110 posts
  • Country: Country Flag

Posted 24 December 2011 - 05:53 PM

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?

#2 pernillaoberg

pernillaoberg

    Member

  • Members

  • 26 posts
  • LocationVallrun
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 31 December 2011 - 12:31 AM

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

Please Login or Register to see this Hidden Content



#3 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 31 December 2011 - 06:41 AM

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:

Please Login or Register to see this Hidden Content



#4 jdbrasesco

jdbrasesco

    Advanced Member

  • Members

  • 63 posts
  • LocationSan Francisco, CA
  • Framework Version:DMS 2.0.4
  • Country: Country Flag

Posted 31 December 2011 - 06:48 AM

+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.

#5 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 31 December 2011 - 07:42 PM

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.

Please Login or Register to see this Hidden Content



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:

Please Login or Register to see this Hidden Content


This is just a sample.

#6 pernillaoberg

pernillaoberg

    Member

  • Members

  • 26 posts
  • LocationVallrun
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 02 January 2012 - 03:10 PM

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

#7 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 02 January 2012 - 04:50 PM

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

#8 indakno

indakno

    Super Member

  • Members
  • 110 posts
  • Country: Country Flag

Posted 13 January 2012 - 02:11 PM

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

#9 indakno

indakno

    Super Member

  • Members
  • 110 posts
  • Country: Country Flag

Posted 16 January 2012 - 04:25 PM

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.

#10 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 17 January 2012 - 07:59 PM

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. ;)

#11 indakno

indakno

    Super Member

  • Members
  • 110 posts
  • Country: Country Flag

Posted 23 January 2012 - 01:46 AM

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.

#12 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 23 January 2012 - 05:00 PM

I don't see more-footer widgets unless I am missing them.

You can find the CSS element for any section using

Please Login or Register to see this Hidden Content

. From there, you will be able to find the padding and reduce it as desired.

#13 indakno

indakno

    Super Member

  • Members
  • 110 posts
  • Country: Country Flag

Posted 23 January 2012 - 10:09 PM

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

#14 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 23 January 2012 - 10:45 PM

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:

Please Login or Register to see this Hidden Content



#15 indakno

indakno

    Super Member

  • Members
  • 110 posts
  • Country: Country Flag

Posted 23 January 2012 - 11:11 PM

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

#16 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 23 January 2012 - 11:31 PM

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.)

#17 indakno

indakno

    Super Member

  • Members
  • 110 posts
  • Country: Country Flag

Posted 26 January 2012 - 11:01 PM

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:

Please Login or Register to see this Hidden Content

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..

#18 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 27 January 2012 - 07:14 PM

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

#19 indakno

indakno

    Super Member

  • Members
  • 110 posts
  • Country: Country Flag

Posted 29 January 2012 - 04:56 PM

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.

#20 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 30 January 2012 - 07:39 PM

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.

Please Login or Register to see this Hidden Content


Hope that helps :)