Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

Adding sidebar to Ambiru theme

  1. 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 thecustardapples.wordpress.com.

  2. 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.

  3. 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

  4. 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.

  5. thesacredpath
    Member

    Oops, forgot to copy in a couple.

    #sidebar {
width 200px;
}

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

  6. 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!

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

  8. 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.

  9. 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.

  10. 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

  11. 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.

  12. 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.

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

  14. hkleach
    Member

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

    Thanks for all your help.

  15. thesacredpath
    Member

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

  16. 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.

  17. 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.

  18. 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!

  19. 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?

  20. 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.

  21. hkleach
    Member

    I tried that before, but it still means that the font on other pages is smaller - ideally, we'd like for the font on all pages to be of uniform size. Is there a code i can add to the css to make this so?

    You're right re.the typekit font. But I am using the Josefin font through typekit and I have applied it to all areas of the blog, so I still don't really understand why the date is showing up differently.

  22. thesacredpath
    Member

    The date font is declared as Josefin SLAB. You have to edit that font stack and change it to just Josefin.

    For the font size, you are likely going to have to adjust it in several places. This will get you started on the content on the main page and the other static pages.

    .entry .entrybody p {
font-size: 120%;
}

    For the sidebar, you can do this and it will increase the size of the font in all the sidebar widgets.

    #sidebar {
font-size: 120%;
}

    See how far that gets you and then we can work on the other bits as necessary. In some themes, you might have to adjust font sizes in multiple places. It just depends on how carried away the theme designer got when doing the design.

  23. hkleach
    Member

    Where is the date font declared as Josefin Slab?? I can't find it on the coding.

  24. thesacredpath
    Member

    Hmmm, I'm not seeing it now, but I did see it before. Do this:

    h1, h2, h3 {
font-family: "josefin-1","josefin-2",sans-serif;
}

  25. hkleach
    Member

    I've added it yet it's still not working...

  26. thesacredpath
    Member

    It worked for me. I don't see it in your custom CSS. Check and make sure it is still there. This is what I see in your custom CSS:

    h1, h2, h3 {
}

    No font declaration, just blank.

  27. thesacredpath
    Member

    I've got to go to sleep. It is nearly 2am here in the middle of the Pacific.

  28. hkleach
    Member

    Yep yep it worked that time around. Really, thank you SO much for your help - sorry for keeping you up!

  29. thesacredpath
    Member

    Not a problem and glad to help. I'm off to bed now, my computer backup just finished.

  30. hkleach
    Member

    Hi - i'm really sorry to bother you once again. We're being told by lots of people that our blog is very very blurry, the text almost unreadable - do you know why this might be the case?

    Also - I've tried to figure this out, but do you know what part of the code needs to be changed in order to change the font-color on the sidebar?

    Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags