Need help? Check out our Support site, then


Customizing Ari Theme

  1. I am trying to customize my blog's Ari theme to have part of my static left sidebar go up to the top horizontally as navigation (the links about through inspiration on my page). I used some CSS that was posted last year how to do this, but when I do the new CSS disrupts posts, cuts into my header image, and makes everything off kilter.

    Help? I'm new to CSS. My page is djyum.wordpress.com

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

  2. Can you point me to the thread where you found the CSS to move the menu so I don't have to recreate it? If you can, then I can work on margins and padding so that things align properly and don't overrun other page elements.

  3. I think this was it:

    #page {
    padding: 0;
    }
    #main {
    margin-top: 162px;
    }
    #masthead {
    width: 1020px;
    background: #fff;
    height: 95px;
    padding: 20px 0;
    margin: 0;
    }
    a.sd-button > span {
    opacity: 1;
    }
    .slideshow-window {
    z-index: -1;
    }
    .main-navigation {
    width: 1020px;
    background: #fff;
    display: block;
    position: absolute;
    height: 28px;
    border-bottom: 1px dotted #4C4C4C;
    z-index: 9;
    margin-top: -20px;
    }
    .main-navigation li {
    float: left;
    padding-left: 20px;
    border-bottom: none;
    }
    .main-navigation ul ul {
    left: 0;
    top: 29px;
    }
    .main-navigation ul ul a {
    padding-left: 0;
    margin-top: -2px;
    }

  4. Give this a try as a starter. The content flows underneath the menu. This is why they made #masthead 1020px wide, but I'm having problems with that and I'm at the end of my night. See how this looks as a starter for you.

    .main-navigation {
        background: none repeat scroll 0 0 #FFFFFF;
        border-bottom: 1px dotted #4C4C4C;
        display: inline-block;
        height: 28px;
        left: 300px;
        position: absolute;
        top: 10px;
        width: 660px;
    }
    
    .main-navigation li {
        border: medium none;
        float: left;
        padding-left: 20px;
    }
    
    #page {
        position: relative;
    }
    
    #main {
        margin-top: 67px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic