Need help? Check out our Support site, then


Adding sidebar to Ambiru theme

  1. 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
    Staff

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

    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
    Staff

    Oops, forgot to copy in a couple.

    #sidebar {
    width 200px;
    }
    
    #sidebar .sec-a {
    width: 180px;
    }
  6. 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
    Staff

    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
    Staff

    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
    Staff

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

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

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

    #sidebar {
    width: 200px;
    }
  14. Apologies for not listening - just added it and it works. Brilliant.

    Thanks for all your help.

  15. thesacredpath
    Staff

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

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

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

    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
    Staff

    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. 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. 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. Where is the date font declared as Josefin Slab?? I can't find it on the coding.

  24. 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. I've added it yet it's still not working...

  26. 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. I've got to go to sleep. It is nearly 2am here in the middle of the Pacific.

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

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

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