Misty Look Re-alignment

  • Author
  • #1416953

    I just widened the page margins after searching through the forums and using my copy an pasting skills…I know nothing about CSS. I was able to realign the navigation tabs at the top as well. I have not yet paid for the upgrade, so all the CSS entry only shows in preview mode…just want to make sure I can make it look right before I put forth the money.

    I am wondering how to:
    1) move the search bar at the top to align with the right side.
    2) move the widgets all the way to the newly expanded right hand side
    3) widen the actual written posts to fill all this new space
    4) (if it looks cool) have the widgets floating on the right so there is an exposed bar between them and the main content where viewers can see the background image
    5) maybe expand the twitter widget so it’s not so smooshed
    6) I think I can figure out expanding the header at the top

    I am at http://brianfgermain.wordpress.com/

    Thank you!

    The blog I need help with is brianfgermain.wordpress.com.


    1, 2 and 3 looks like you have gotten taken care of. Nice job!

    4. This one is sort of tricky due to the way the HTML is structured, and this CSS solution is probably not what you are looking for as the white area for the sidebar will only extend down to just below the last text widget. Also, it is a little tricky to put a white background behind the header area. Copy/paste this into you CSS below any existing CSS and see what you think. You already have some of these rules in your CSS, so if this works for you, you can take any new stuff out of the duplicate rules I’ve given and incorporate it into your existing CSS. Let me know what you think.

    #sidebar {
        background: none repeat scroll 0 0 #FFFFFF;
        float: right;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        width: 200px;
    #container {
        background: none repeat scroll 0 0 transparent;
        border: medium none;
    #content-main {
        background: none repeat scroll 0 0 #FFFFFF;
        padding-left: 30px;
        padding-right: 30px;
        width: 660px;
    #content {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: -70px;
        width: 960px;
    #headerimage {
        background-color: #FFFFFF;
        background-position: center 85px;
        height: 264px;
        margin-left: 0;
        padding-top: 80px;
        position: relative;
        top: -78px;
        width: 960px;
        z-index: -100;

The topic ‘Misty Look Re-alignment’ is closed to new replies.