Jump to content


Photo
- - - - -

Full Width Text with less padding using boxes

box padding full width text

  • Please log in to reply
7 replies to this topic

#1 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 26 June 2013 - 01:43 PM

I am using a box to create text the spans the page. Which can be seen here :

Please Login or Register to see this Hidden Content

 

i.e the opening text below the banner.

 

 Want to have full width text with a header and paragraph text beneath it, I want this on each page as the opening intro and at the bottom just below the footer.  I am using a box to achieve this, using CSS customisations. I am also using a highlight above and below the box to help divide the page.

 

The issue I am having at present is the padding, there is to much above and below the box. and I am wondering what the best method is to reduce the padding, that is if the box method for full width text is best suited for what I want to achieve.

 

 



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 26 June 2013 - 01:59 PM

You can remove the excess padding with custom CSS.  I recommend using Firebug or your browsers built-in web dev tools and inspect the sections to find the correct code.

 

For assistance visit our custom CSS documentation - 

Please Login or Register to see this Hidden Content



#3 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 26 June 2013 - 02:18 PM

Yes we have tried this, but we want to remove the padding for the box.

 

.fbox_72 {padding-bottom; -50px}

 

Nothing works, thanks for coming back quickly.



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 26 June 2013 - 03:16 PM

Try moving the boxes to the page template rather than have them in the Page content area template. you may get a different result then. 



#5 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 26 June 2013 - 04:27 PM

ok I am trying it with highlights, using the text.

 

I am still not 100% what the correct methods of CSS are.

 

So can you confirm the following: How do I just select one highlight from a page that has multiple highlights. i.e a box will have a number, what is the highlight class for an individual code. Please can you confirm and give an example.

 

Also what is the correct method to reduce the padding and margins on the highlight so in effect if making the highlights touch each other? Would the code involve negative margins? or borders?



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 26 June 2013 - 05:27 PM

When it comes to getting to grips with CSS and knowing the correct methods i recommend one of the free online courses (there are some great paid ones too) 

 

CSS courses 

Code school - 

Please Login or Register to see this Hidden Content

Codeacademy - 

Please Login or Register to see this Hidden Content

 

This one to get to grips with the dev tools 

Please Login or Register to see this Hidden Content



#7 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 26 June 2013 - 05:30 PM

thanks but that doesn't really help, we have used a lot of CSS, we just want you to confirm which the best method is.

 

1 - Can you confirm the select for an indivual highlight, as using firefox firebug gives a very long code, which doesn't seem to work. such as texthere clone4 text here etc. What is the correct way?

 

2 - The padding issue seems to be a bit of an issue on pagelines, as many methods do not work, or it can depend on where it is situated.

 

Please can you come back with a more specific help, or if you cant, we will wait for someone who can. I appreciate your help, but i have paid a lot of money to pagelines, and would expect a bit better response to my question as opposed to go read here.



#8 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 June 2013 - 08:30 PM

Hi there,

 

Yes you can select highlights depending on the clone by adding the clone class after the clone id. #highlight .clone_3

 

Example of where this is in firebug -

Please Login or Register to see this Hidden Content

 

In regards to the spacing between the sections, you have numerous margins between the boxes, content, and postloop sections. Unfortunately we're unable to provide directly assistance with css changes as this is classed as site design, we're only able to provide you with links to the relevant resources to be able to learn how to track down the required resources to make the changes.

 

In firebug you'll see margins as yellow in the preview window, padding as dark blue. Scrolling through the html within the section you've selected in the inspector will help you to target these areas using the colors as a guide to where the css is applied. You can then edit/copy/paste back in to the framework to over rule the code.

 

For example -

Please Login or Register to see this Hidden Content

 

So that would tell me to look inside the postloop area to see where further down the code to see where the margin is. So looking in there it was coming from the .article class. Then going further inside there, it there was more padding applied in the .hentry class. Going further .hentry-pad also had padding applied.

 

If you wanted to go further and remove the padding from above that area, you can reduce the #content .content-pad to bring the section up higher.







Also tagged with one or more of these keywords: box padding, full width text