Jump to content
Sign in to follow this  
gregoates

Is it possible to fully align site left & right w/o background color?

Recommended Posts

gregoates    0
gregoates

I don't use any background color at 200rooms.com. Posts, post excerpts and right sidebar are indented slightly on both sides below nav bar. Is there a way to align both sides vertically?

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

The first thing I'd recommend is using Firebug for Firefox or Chrome's inspection tools to locate the related CSS.

 

That said, the CSS to align the left column (content) flush with the left edge of your site is here:

.one-sidebar-right #column-main .mcolumn-pad, .two-sidebar-right #column-main .mcolumn-pad {
    padding: 14px 30px 0 14px;
}

You'll see that second 14px (the last), which should be change to 0 (not 0px, plain 0). This code is then copied and pasted to Dashboard > PageLines > Site Options > Custom Code or any of the other possible stylesheet options (child theme or PageLines Customize plugin).

 

Comparably, using Firebug or Chrome, you'll be able to find similar code for the sidebar, which is likely going to be the widget tag.

 

Are you familiar with CSS?  This site can be very helpful to you:  http://www.w3schools.com/css/


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gregoates    0
gregoates

Thank you. I pasted in the above code and changed the second mention of "14px" to "0" but it didn't change anything.

 

I have started to learn CSS but I'm not sure how I could ever learn to create that much code that you supplied.

 

I would appreciate any further assistance you could provide. I use Chrome and will try to find corresponding code for right side.

Share this post


Link to post
Share on other sites
Rob    547
Rob

I'm not sure how you pasted this code:

.one-sidebar-right #column-main .mcolumn-pad, .two-sidebar-right #column-main .mcolumn-pad {
    padding: 14px 30px 0 0;
}
.widget .widget-pad {
    padding: 10px 0 10px 10px;
}
.widget .textwidget {
    float: right;
    padding: 5px 0 5px 2px;
}

But, it should go to Dashboard > PageLines > Site Options > Custom Code in the CSS/LESS Rules area on a line below body {}.  It should not be nested or within any set of curly brackets.

 

Do you have a cache plugin activated? If so, once you paste and save the CSS, clear the plugin's cache. Then view the site.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gregoates    0
gregoates

Thank you very much. The fist time I put the code in the Pageline CSS plugin. This time I put the above code in the Pageline theme CSS and it seemed to work. THe only problem was that it shrunk my Twitter widget to half it's width. So I'm considering dropping that maybe.

 

Appreciate your help, thank you...

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there

 

To keep things as they are in the sidebar but move the sides out try using the following css. That will strip out the content pads padding but leave the content inside the sidebar and the content area as it is.

#content .content-pad {
    padding: 0;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
gregoates    0
gregoates

Hi James,

 

Thank you. I tried that in both the Pagelines customization plugin and the Pagelines Custom CSS in Site Options but neither seemed to have any effect.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi

 

If you have any css above check its not missing a closing bracket or semicolon, anything broken above will stop the css from reading.

 

This is the result it gives in firebug - http://screencast.com/t/toItsN6a7bA

 

You can also try putting an override in front of the css like #page or #site to force if it doesn't take.

#page #content .content-pad {
    padding: 0;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • JawDesigns
      By JawDesigns
      Hi to all,
      I always have this problem and I'm unhappy with the fix I usually apply for aligning columns at the bottom (see attached).
      For example: I use two text boxes side by side. Both text columns have a background colour. Text column 1 has 200 words and text column 2 has 300 words.
      How do I easily get them to align at the bottom without using a min-height declaration? I want to get text column 1 with 200 words to fit the height of text column 2 if that makes sense?
      Thanks for any help on this!
      Cheers,
      James

    • Jeremiah
      By Jeremiah+
      Does anyone know the custom css to align the menu navigation links to the center? 
    • Claude203
      By Claude203
      I would like to left justify the feature thumbnail in the blog post summary, to the left of the title and excerpt, as in the attached image. Thank you.
       
       
       
       
    • rallison87
      By rallison87
      Hi guys,
       
      This is probably an easy one - I've spent the past few hrs reading through similar cases and trying CSS modifications, but without any success.
       
      What I'm trying to do is align a simple 3-item fixed navbar (no logo/title) to the center of the page.
       
      Site URL:  http://wp.onlineaperture.com/wp/
       
      Nothing invoking the text-align: center seems to work, and manually padding breaks with responsive dimension changes.
       
      The closest I've come is via Firebug but in my attempts I've lost the CSS modifications that almost had it.
       
      Can anyone help me change my navbar from this:
       

       
       
      To this:
       

       
       
      Any assistance is greatly appreciated- I figured I'd logically be able to crack this out easily, but instead here I am!
       
      Cheers!
    • BentleyD
      By BentleyD+
      I'm working on this page:
       
      http://freshjuiceglobal.com/alliances/?pagename=alliances
       
      For some reason the images are all the sudden not inline with the text and button. Do you know what's going on?
×