Adding sidebar to Ambiru theme
-
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.
-
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.
-
-
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; } -
-
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.
-
-
Yep yep it worked that time around. Really, thank you SO much for your help – sorry for keeping you up!
-
-
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!
-
Each browser renders text a little differently and some browsers render the strokes narrower than others and the font you have chosen has a very light stroke. The “fuzzy” could also be an issue with font color. The following will also change the color of the sidebar text to black. You can of course change the colors. Give the following a try and see
body#home .entry-1, .sticky, body { color: #000000; } .entry { font-size: 120%; } #sidebar { color: #000000; } -
Brilliant – it worked. Thank you!
I think we should probably try changing the font – would you suggest that we go with something bolder? Yeah, we’ve found that re.the browsers – but apparently, on some it is virtually unreadable due to the blurriness.
The font on the sidebar definitely looks clearer than the rest of the body of text – i definitely should have figured this out by the now, but how do we change the font-colour on the main page?
-
The font you are using is listed as “light” so if you go with a “regular” font with a wider stroke it should work for everyone. They have a feature over at typekit where you can see how each browser will render fonts by OS. You might run your font through that to see how it looks in all the different browsers. Macs in general, no matter the browser render fonts better than Windows, so Windows XP, Vista and 7 are the most important to check.
-
Contrast between background colors and font colors is also very important especially for those with less than perfect eyesight. There is a whole science behind that and it is something that sites will have to pay much more attention to once the web accessibility standards start to be enforced.
-
We’re just trying out different fonts as we speak – hopefully we’ll find one we like as much as the previous one.
How do we get the sidebar so that there is no line border around it?
-
To get rid of the border, do this.
#sidebar { border: medium none; }The fonts I see at the moment are much more readable.
-
Hi – yes, it looks much better/more readable now – although we’re not so enamored with that font, but oh well!
Is there any way of changing the lay out/style of the widgets on the sidebar? For instance, is it possible to get rid of the big bullet points, and reduce the space between each point? And can we introduce a line inbetween each widget?
-
Give this a try for getting rid of the bullets and decreasing space between lines.
#sidebar ul li { list-style: none outside none; margin-bottom: 0; } #sidebar ul { padding-left: 15px; }The line between widgets is a little tougher since the theme designer did not include a “widget class or ID. Basically each widget stands alone and the spacing in between is just whatever it is. What you would have to do is to put a section into the CSS for each type of widget and then declare a bottom border and some bottom padding or margin. So, these would be the selectors.
.textwidget
#subscribe-blog
.blogroll
Anytime you added a widget, you would have to go back into the CSS and add a section for that particular widget type (archives, recent comments, calendar, etc.).
-
Great – I managed to add lines/spaces in some areas.
It seems that ‘border-top’ applies to the space between the title (e.g. Categories) and the points (e.g. India/Recipes) – what code would apply to the space ABOVE the title (e.g. ‘Categories’/Blogroll’)
I think it’s looking better and slowly coming together though!
-
This moves the content up closer to the title for all the widgets and puts a touch of space at the bottom of the widget content (unordered list).
#sidebar ul { margin-bottom: 20px; margin-top: 0; }This puts more space between the widget titles and the bottom of the previous widget and puts a line above the title.
#sidebar h2 { border-top: 2px solid #000000; padding-top: 5px; }Also, with what I have above, take the border-bottom off in #searchform.
See where that gets you.
- The topic ‘Adding sidebar to Ambiru theme’ is closed to new replies.
WordPress.com Forums 