Archived

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

  • 0

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


Question

Posted · Report post

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

7 answers to this question

Posted · Report post

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;
}

Share this post


Link to post
Share on other sites

Posted · Report post

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/

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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;
}

Share this post


Link to post
Share on other sites

Posted · Report post

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