Archived

This topic is now archived and is closed to further replies.

  • 0

Full Width Text with less padding using boxes


Question

Posted · Report post

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

 

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.

 

 

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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 - http://www.codeschool.com/paths/html-css

Codeacademy - http://www.codecademy.com/ 

 

This one to get to grips with the dev tools http://discover-devtools.codeschool.com/ 

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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 - http://screencast.com/t/kCCoWa3Gvk

 

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 - http://screencast.com/t/9apDXYzjldRH

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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 - http://support.pagelines.me/docs/customization/custom-css/

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites