Jump to content


Photo
- - - - -

Diminish size of sections on page separate from page/contentwidth


  • Please log in to reply
9 replies to this topic

#1 janpeeters

janpeeters

    Advocate

  • Members

  • 308 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 21 May 2012 - 06:54 PM

Hi, I've did a lot of searching with Firebug to find the CSS attributes with whom I could change the following: On the website www.janpeeters.nl I want to reposition some parts and diminish some. 1) I'm using the 'Special Recent Posts PRO' plugin on the homepage (in postloop) to show the three latest posts. At the moment I've only got one post ;-). I find the width of this section too wide for the textlines to be readable. So I would like to diminish the width from the right side so that I have apprx. the same amount of white left as right. Does anyone know with CSS attribute I need for that? I've found content-pads but when I change them in Firebug preview or enter them in my base theme style.css nothing happens. 2) Besides that I want the same (though not so much space) for the boxes above. I think they are just a bit too much to the side so I want to make them a bit smaller too. 3) I want to slide the site title and site description a bit more onto the page. Maybe I'm missing something very functional in the way Framework is build up. Is there maybe a graphic or so that explains what all the CSS selectors are for certain sections (with padding and all)? Thanks for all the help again ;-) Jan

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 22 May 2012 - 02:35 AM

1) Can you please post the CSS you tried for making this adjustment?
2) By smaller. do you just want the width to be decreased (no height adjustment)?
3) Add this CSS to move the title and description down a bit:

Please Login or Register to see this Hidden Content


^ Adjust the value (50) if you want to move it down or up further.

There isn't a graphic made, but practicing with Firebug is a good way to find the selectors you need.

#3 janpeeters

janpeeters

    Advocate

  • Members

  • 308 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 23 May 2012 - 03:59 PM

Hi Catrina,

You're right about Firebug that it's a good way to learn, I'm doing that most of the time, but with this I can find a solution, sorry.

regarding 1) I've tried

Please Login or Register to see this Hidden Content


and

Please Login or Register to see this Hidden Content


But nothing happens. I also worried that this (if it worked) might change this for all pages and I want it for only the front page. So I guessed I have to add #post-31 before the selectors?

2)
Yes only width

3)
Your suggestion for the title-container doesn't do anything overhere. Maybe something overrules it but I can't find what. I've noticed with Firebug that sometimes you can change something and it changes right on the page, but when I add it to style.css nothing happens. Have you experienced this behaviour?

Thanks for your help and time, Jan

#4 Rob

Rob

    One Smart Egg

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

Posted 23 May 2012 - 09:00 PM

Jan,
I'm going to deal with these one at a time, if you don't mind.

As I understand point 1, you want to make the excerpt width appear to have even amounts of white space on either the left or right side. To achieve this, try adding the following to your Custom Code > CSS Rules:

Please Login or Register to see this Hidden Content

You may need to adjust the 70px width. I'm doing this by eye. You might want to try a more exact means of measuring it.

That code will ONLY affect the excerpts in Special Recent Posts. It won't change the title or anything else.

#5 Rob

Rob

    One Smart Egg

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

Posted 23 May 2012 - 09:03 PM

For point 2, I see there's an empty div for a sidebar left of the box area. You may need to check the box in Dashboard > PageLines > Settings > Website Setup for Hiding Sidebars when empty under: Remove Default Sidebars When Empty. The empty div will vanish. Then, margin left and right will work for the boxes container.

#6 Rob

Rob

    One Smart Egg

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

Posted 23 May 2012 - 09:10 PM

2. This worked in Firebug, but it's with the empty sidebar div present:

Please Login or Register to see this Hidden Content

I did not inspect other parts of the site with that, and it might have impact outside the front page.

#7 Rob

Rob

    One Smart Egg

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

Posted 23 May 2012 - 09:13 PM

With item 3, I see you may have had some success with this:

Please Login or Register to see this Hidden Content


If not, then change the 50px to a bigger or lesser number as you see fit.

#8 janpeeters

janpeeters

    Advocate

  • Members

  • 308 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 26 May 2012 - 10:49 AM

Rangelone, thanks, I'm having a busy week so no time to check it out, but I will next week. Thanks in advance for all your suggestions. Best, Jan

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 May 2012 - 04:53 PM

Let us know how the solution works out

#10 janpeeters

janpeeters

    Advocate

  • Members

  • 308 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 28 May 2012 - 07:22 AM

Hi Rangelone,

1+2)
I've tried your suggestion regarding the SRP Pro widget. Your suggestion works perfectly well, but in case of long titles it wouldn't work as you already mentioned because it works only on excerpt.

What I've never understood but starting to grasp is that you have to apply a margin on more then one selector to really change something. That's probably because they're nested in each other?
Also the > trick I'd never seen. After researching that on the web it became a bit clearer.

So to summarize the solution.
- I changed the layout to full-width. 'Hide empty sidebars' in Pagelines settings didn't do anything. Maybe because I'm using the Visual widget logic plugin? But I didn't research that further.
- When looking at the design I decides that I can better make the SRP widget even less wide to improve readability. I used the Visual Composer plugin (great addition for Pagelines btw, maybe one day included) to divide the main content in 2/3+1/3. I used the 1/3 for news.
- Still I had to create a large space left to approach my initial design. That I initially did with the empty sidebar. I used the following code to do that (I've made it in percentages to keep the site responsive for mobiles)

Please Login or Register to see this Hidden Content


This code that you posted above changes the right margin on all pages in every sidebar so is a bit too drastic ;-)

Please Login or Register to see this Hidden Content

But it was interesting to see you use the > sign. I wasn't aware of this function in CSS so I learned a bit!

3) Moving the title worked, but I didn't want it to go down, just to the right. So it had to be a margin-left.

Thanks again for all your help, also Catrina.
Great to have a place where you can learn in this way.

Jan