Customizing Ari Theme

  • dsinni88 · Member ·

    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: (visible only to logged in users)

  • thesacredpath · Member ·

    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.

  • dsinni88 · Member ·

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

  • thesacredpath · Member ·

    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;
}
  • The topic ‘Customizing Ari Theme’ is closed to new replies.