Page background, post bg, header bg, footer bg

[hajir 0]

Hello all, I have a question i intend to provide a back ground picture for my website that is a see through for header as well. So far I have managed to use the following codes i found here. body #page #page-canvas{background:none} body #page{background: none} #page-main{background:white} The problem with this code is that my posts also become see-through as well. I want to have a distinct background for my posts. In short I want to create something similar to http://www.blogginglabs.com/ but with my own design. I don't have any knowledge with php and coding. Any help would be appreciate. (PS: i am not actually really happy with my purchase, the advertisement and the video is so mis-leading, if I don't know any coding its tough to actually design something that is unique and is not a cookie cutter.) Thank you for your time.

[bryan-hadaway 3]

To truly customize anything at the advanced level of your goal you will always need to have at least some CSS knowledge and work with CSS no matter what the theme. But, right now you just need to know copy/paste cause you have a CSS master right here to help you. Let's get a link and any other requests while we're at it? Thanks, Bryan

[hajir 0]

Thanks Bryan Hadaway the CSS master. Unfortunately I been using MAMP to design it offline first then take it online, wanted the design complete before taking it on. I will give you a link shortly tomorrow if it is really necessarily. As I previously mentioned I really like blogginglabs.com design and want to design something similar to that so keep that in mind for now. Again much appreciated.

[Kate 3]

Hi Hajir - A link would help, thanks

[hajir 0]

As requested here is a link to the site I am working on. http://dialucrii.ca/wordpress/ I would like to have different design for the background of my posts, I wish for them to appear in a box rather than being in plain sight. Any help is appreciated. I don't know any CSS or php , just basic html ... thanks again.

[bryan-hadaway 3]

Hi Hajir, We'd start with something like this: ` .hentry { background: none repeat scroll 0 0 #FFFFFF; border: 4px double #EEEEEE; clear: both; padding: 10px; } ` Then if you want to get more fancy we would include a background image. Of course I can't design this for you via the support forum. So you come up with something and upload it and provide the link I could incorporate it into the code. Thanks, Bryan

[hajir 0]

Wow thats awesome ... thanks a lot Bryan, but if I could ask of you to click on 'Continue reading -' you notice a slight design problem at the top of the post and also the comments are still see through and leave a comment section is also see through ... anyways to fit all these into one single white box ? if not have at least proper boxes for each section ? (one single box would be much prettier if possible) Thanks again for your hard work.

[Kate 3]

Hey Hajif - You want that entire left column to be white, like blogginglabs.com, correct? Try this:

#column-main{background:#ffffff;}

[hajir 0]

Kate thank you for your input. I know I ask too much lol. if you could direct your attention to http://dialucrii.ca/wordpress/?p=1 on the top of the post there is a small tiny bar of different color (egg shell white?) that matches the background for the 'Share this' section of the post ... anyway to eliminate the tiny bar on top ?

[kastelic 6]

That bar is your post nav, that allows you to click forward and back through the posts. I'm guessing maybe its not showing the navigation because you only have one post right now? At any rate, if you want to hide it use this CSS code:

	body .post-nav{display:none}
	

[hajir 0]

oh i see i see thanks for clearing that up for me. anyone i can add borders to the main column ? like the code bryan previously supplied ?

[Guest Guest]

What do you mean by the main column?

[hajir 0]

well according to Kate , the coded that I added turned the main column into a white box ... everything, post, comments they are all in a white box. is there a way to add a border to that main column box ? like it is mentioned in bryan's code ? problem with bryan's code for my design was that it only added a box to the post and the comment and everything else were left as transparents ... now I have the white box behind everything was wondering if i could add a border so it looks better is all thanks for all your help gang.

[Guest Guest]

Try this?

body #column-main .mcolumn-pad {border: 1px solid black;}

[hajir 0]

Wow thanks a lot gang, all of you, I don't know which answer to pick as best answer because I used all 3. I have exactly what I needed. Thank you. One last question I promise so I don;t open new post: Anyway to add similar boxes to the widgets to the right ? (such as categories that si showing right now) Thanks all of you.

[Kate 3]

Hi Hajir - If you want the entire sidebar in white, you would use something like this:

#sidebar-wrap{background:#ffffff;}

If you just want the individual "boxes" white, then something like this:

#sidebar-wrap ul li{background:#ffffff;}

If you choose the second option, you may want to play with the padding a bit. Hope that helps...

[hajir 0]

Thanks kate very helpful all of you. When I added all the codes: body #column-main{background:#ffffff;} body #column-main .mcolumn-pad {border: 4px double #EEEEEE;} body .post-nav{display:none} body #sidebar-wrap{background:#ffffff; border: 4px double #EEEEEE;} the widgets do not fit in and get pushed down as evident from www.dialucrii.ca/wordpress/ right now. anyways i can 'shrink' them so they fit in and still keep the borders? or i have no choice and have to delete the borders? because when I delete the borders from the widgets and only keep it for the main column, they fit in. i love this community, now i take back my buyer's remorse , im happy with my purchase

[catrina 103]

You can shrink the widgets by adding this code:

#sidebar-wrap div.fix {width: 300px;}

[hajir 0]

Catrina I tried doing that, unfortunately it didn't work. I even tried changing the sizes in layout section of platform pro, didn't work either. I will wait till monday for some more input from others, if not I will close this thread as 'solved' because my original question was answered and solved.

[Guest Guest]

Try:

.one-sidebar-right #pagelines_content #sidebar-wrap, .one-sidebar-right #buddypress-page #sidebar-wrap {width: 300px;}

[hajir 0]

Tyler that seemed to do the trick, thank you very much, but now the line underneath the widget name is running too long. It is outside the widget box ... anyway to fix that ? make them shorter to be consistent with your code above? www.dialucrii.ca/wordpress/ Thanks again

[catrina 103]

Add this:

#sidebar1 {width: 290px;}

Adjust the width as you see fit.

[hajir 0]

catrina, I added the code, doesn't seem to affect the lines that are crossing out of the box on widgets, is that what that code is for ? right now I have all these codes in place to achieve what I have showing on the website, it is exactly what I wanted to have to begin with. With the one problem that the lines are going out of box on widgets , i wish to shorten the lines ... current code: body #column-main{background:#ffffff;} body #column-main .mcolumn-pad {border: 4px double #EEEEEE;} body .post-nav{display:none} body #sidebar-wrap{background:#ffffff; border: 4px double #EEEEEE;} body .one-sidebar-right #pagelines_content #sidebar-wrap, body .one-sidebar-right #buddypress-page #sidebar-wrap {width: 300px;} body #sidebar1 {width: 250px;}

[Guest Guest]

I just took a look at your site again in firebug, it looks like there's another section being called at 320px instead of 300px.

.one-sidebar-right #pagelines_content #sidebar1, .one-sidebar-right #buddypress-page #sidebar1 {width: 300px;}

Try that instead of the code I gave you, or add #sidebar1 to the line you already have and see if that does the trick.

[hajir 0]

I LOVE you lol. Thanks everyone. I achieved everything I had hoped to achieve. The following is all the codes I have added to achieve what I wish to achieve for someone having similar problem. body #page #page-canvas{background:none} body #page{background: none} body #page-main{background:white} body #column-main{background:#ffffff;} body #column-main .mcolumn-pad {border: 4px double #EEEEEE;} body .post-nav{display:none} body #sidebar-wrap{background:#ffffff; border: 4px double #EEEEEE;} body .one-sidebar-right #pagelines_content #sidebar-wrap, body .one-sidebar-right #buddypress-page #sidebar-wrap {width: 300px;} body .one-sidebar-right #pagelines_content #sidebar1, body .one-sidebar-right #buddypress-page #sidebar1 {width: 300px;} first 3 lines make everything transparent including header and body backgrounds. lines 4 and 5 turn the main column (left side) into a white box with borders line 6 deletes the navigation above posts line 7 makes the widgets into white boxes with borders lines 8,9,10 and 11 adjusts the size of widget box to fit in the page as intended