Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Want to enlarge main text/post box in Bueno

  1. dominicanroots
    Member

    Hi All,

    I am new to this and hope someone can help me. I would like to enlarge the main text box where the posts go on my site. I would like it to extend into the right sidebar so it is flush with the top header picture bar. I would also like for the sidebar widgets to sit inside of the main box as well. My main reason for doing this is that the sidebar text is presently not very visible due to the nature of the background picture so it would be nice to have it all sit on that plain white box.

    Any help with figuring out a CSS code that could make this changes would be much appreciated!

    Thanks,
    DR

    The blog I need help with is dominicanroots.com.

  2. thesacredpath
    Member

    Give this a try and see what you think.

    #content {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #EFEFEF;
padding-right: 20px;
}

.post {
border: none;
}

  3. dominicanroots
    Member

    Wow! Thanks! That is just what I was looking for. Do you know if there is a way to line the main box up with the header so they are flush? I think it would mean making the main box just a little bit smaller.

    Thanks so much for your help!

    DR

  4. thesacredpath
    Member

    Try this instead of what I had gave you. The width of the sidebar had to be reduced by 50px to do it.

    #content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 5px solid #EFEFEF;
    padding-right: 20px;
    width: 910px;
    }

    .post {
    border: none;
    }

    #sidebar {
    width: 290px;
    }

  5. thesacredpath
    Member

    I seem to be forgetting my code tags today. Copy and paste this rather than the above.

    #content {
background: none repeat scroll 0 0 #FFFFFF;
border: 5px solid #EFEFEF;
padding-right: 20px;
width: 910px;
}

.post {
border: none;
}

#sidebar {
width: 290px;
}

  6. dominicanroots
    Member

    Thanks TSP! One more question and I hope I'm not pushin' it...lol
    Is there any way to make the main box slightly translucent so the wood plank background will show through just slightly?

    muchas gracias!

    DR

  7. thesacredpath
    Member

    This is a little difficult since Internet Explorer does not support opacity like everyone else does and it requires jumping through flaming hoops while doused in gasoline.

    My suggestion would be to create a 10px x 10px white PNG image and set the opacity of the white to the value you wanted. Save the file, upload it to your media library, get the URL of that and then put it into the following CSS (delete the #content stuff I had given you and replace with the below) in and replace the URL OF IMAGE between the double quotes with the URL of the transparent image. Using an image means it will be seen by everyone.

    #content {
background: url("URL OF IMAGE") repeat scroll 0 0 transparent;
border: 5px solid #EFEFEF;
padding-right: 20px;
width: 910px;
}

    Also modify the .post CSS I gave and add the background color declaration as below.

    .post {
background-color: transparent;
border: none;
}

  8. dominicanroots
    Member

    Thank you so much! That definitely seems like a project for me to try a little further down the line when I'm feeling a little more confident. :) Thank you for all the help, I'm delighted that I can finally put up my first post!

    Best,
    DR

  9. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags