Adding sidebar to Ambiru theme

  • hkleach · Member ·

    Hi,

    Would anyone be able to tell me if there is any way in which a sidebar can be added to the Ambiru theme? Currently it’s just one column wide, with the sidebar at the bottom. And if this isn’t possible, is there a way to add features to the sides? i.e. menus/calendars?

    I’m pretty new to the whole blogging/css thing, but am slowly getting my head around it – any help would be very much appreciated.

    Thank you

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Actually the way Ambiru markup is done, it is quite easy. Since the site linked to your username has been deleted, I will need a link to the site you are talking about before I can help you with the code.

  • hkleach · Member ·

    Thanks for the swift response!

    Do you mean the link to our blog site? (sorry, as I said, I’m very new to this!) – It’s http://thecustardapples.wordpress.com

  • thesacredpath · Member ·

    Yup, that is what I needed. The following will give you what you want. You will have to fix your header image and make it 740px wide x 225px, upload it to the media library on your site, get the URL of that image and then insert it into the #header section. Once you increase the width or height of the header you can no longer use header uploader at appearance > header since it will always want to crop to the original size.

    #wrap {
width: 740px;
}

#nav {
width: 730px;
}

#header {
background: url("URL of new 740 x 225 header") no-repeat scroll 0 0 transparent;
width: 740px;
}

.navigation {
padding-bottom: 2.5em;
}

    I’ve increased the padding bottom in .navigation (the next and previous links at the bottom) so it doesn’t sit right on top of the header.

  • thesacredpath · Member ·

    Oops, forgot to copy in a couple.

    #sidebar {
width 200px;
}

#sidebar .sec-a {
width: 180px;
}
  • hkleach · Member ·

    Done – thank you! I guess our next step is to try and figure out how we can actually add things TO the sidebar – all in good time!

    One more quick question – regarding the change of header size – I did change it originally, but the image only stretched and was hence lacking in finesses – is there instead a way I can now center the header image across the column/sidebar? I’ve been trying to figure it out, but no luck. (and same too for the menu headings in the navigation bar).

    Thank you!

  • thesacredpath · Member ·

    For the background declaration in #header, change it to look like this where instead of the two zeros for the positioning, the first is the word “center.”

    background: url("http://thecustardapples.files.wordpress.com/2011/05/cropped-custard_6001.jpg") no-repeat scroll center 0 transparent;

  • thesacredpath · Member ·

    The header tabs are tricky since they are using an unordered list and the fact that the number of tabs (i.e. the length) can vary depending on what you add or delete. Add to that the fact that the alignment would change (using a “trick” to center) if someone were to use the zoom in or out feature on their browser, or if they had their browser display font size set to other than the default size.

  • thesacredpath · Member ·

    One thing you might want to try is setting your background image position in the body selector to the following.

    background-position: center top;

    The image(s) will then stay in relation to the wrap area when you change the width of a browser window.

  • hkleach · Member ·

    Thanks again. Tried these, but to no avail – perhaps my css ability is a little too limited at this stage, but I shall keep trying!

    Sorry to bug you again, but we have one more question – how do we load up a photo/image without it distorting the font size? Do we need to insert it through the css code, rather than through the normal wordpress means?

    Thanks.

    Hannah

  • thesacredpath · Member ·

    You have forgotten this:

    #sidebar {
width 200px;
}

    I just added the above to your CSS using Firebug and it is now right.

    The following is what should be in the CSS edit window.

    #wrap {
width: 740px;
}

#nav {
width: 730px;
}

#header {
background: url("http://thecustardapples.files.wordpress.com/2011/05/cropped-custard_6001.jpg") no-repeat scroll center 0 transparent;
width: 740px;
}

#sidebar {
width 200px;
}

#sidebar .sec-a {
width: 180px;
}

.navigation {
padding-bottom: 2.5em;
}

    Once you have the CSS upgrade and have widened the theme and header area, as we have done, then you need to enter the header image URL (after uploading it to the media library) into the background declaration in the #header section.

  • hkleach · Member ·

    We just added that bit we had missed out, thanks for alerting us to that error. However – we’re still not getting anywhere with the reducing-the-sidebar aspect, nothing changes when we add that to the code.

    But we think we’re making progress.

  • thesacredpath · Member ·

    I am still NOT seeing the below in your CSS. This has to be there otherwise things will not work.

    #sidebar {
width: 200px;
}
  • hkleach · Member ·

    Apologies for not listening – just added it and it works. Brilliant.

    Thanks for all your help.

  • thesacredpath · Member ·

    Oh yeah, there you go… looking good, and you are welcome, I was glad to help.

  • hkleach · Member ·

    Sorry to bother you again…..

    This is probably horribly simple – we’ve changed our font to josefin, but it won’t change the blog post (or date) headers – do you know why this is? We’ve changed it on typekit and on our css, but it just won’t change.

    Thanks.

  • thesacredpath · Member ·

    I’m seeing the new font on the blog post and the blog titles. For the date, it is here

    h1, h2, h3 {
font-family: "Josefin Slab",Rockwell,serif;
}

    but Josefin Slab doesn’t seem to be a valid font name, which is why it is moving down the font stack and showing Rockwell instead. Check over at typekit and make sure it exists.

  • hkleach · Member ·

    I found its profile under google web fonts:

    http://www.google.com/webfonts/family?family=Josefin+Slab&subset=latin#code

    Here it uses ‘arial’, instead of ‘rockwell’, but it’s just doing the same thing. Can’t figure out why it’s not applying the rule to the date font?

    Another question – the font size on our other pages is smaller, how can we uniform this on the css?

    Really am sorry for so many questions – if you’re fed up, I will find someone else to pester!

  • thesacredpath · Member ·

    Typekit does not have Joesfin Slab. They only have Josefin. Typekit fonts work here at wordpress.COM. Google webfonts do not. You can only use the fonts that are listed and available at Typekit.

    The font size issue seems to be related to fonts that have been turned out by font factories for use on places like Typekit. Since you have the CSS upgrade, you can just increase the size of the fonts for the particular elements in the page as needed.

    What areas/elements do you want to increase the font sizes in?

  • thesacredpath · Member ·

    This will increase the size of the fonts proportionally over the entire blog.

    body {
    font-size: 67%;
}

    Bump it up to say 75% and see what you think. That looks pretty good to me.

1 2 3
  • The topic ‘Adding sidebar to Ambiru theme’ is closed to new replies.