WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
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.
ldpeugh#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
#searchform
#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.
Oh, and remove the border bottom in #subscribe-blog also.
Hi - We're curious - what do you, from a design/lay-out perspective, think of the blog? Do you think there are things that need tweaking/adding?
What is below is sort of picking nits really. Just little things.
I would change the width under #nav to 730px so that the gap at the left and right match and also change the bottom padding there as well to something like 20px so that there is less of a gap between the navigation and the content/sidebar.
#nav {
width: 730px;
padding-bottom: 20px;
}I would probably do this also so that your sticky posts have a bottom border line like the other posts.
body#home .entry-1, .sticky, body {
border-bottom: 1px solid #000000;
}I would probably add the following to space the submit button down away from the search box a little.
#searchsubmit {
margin-top: 10px;
}And maybe this which evens out the right side whitespace to the right of the sidebar with the left side of the content area.
#sidebar {
margin-right: 7px;
}One other thing. I would use the stick post feature for "special" type posts you want to stick at the top to highlight them, and I typically keep no more than 1 as a sticky, but 2 would be my limit otherwise they lose their "specialness" and just become another post. Right now you have 3 posts as stickies.
I would also shy away from putting symbols into page or post titles such as the heart. Some browsers do not take kindly to symbols and can actually return 404 file not found errors.
Thanks - very helpful just in terms of tidying.
I don't quite understand your penultimate paragraph though re. stickies? I don't know what a sticky is...and not sure what you mean when you refer to our 'special' type posts?
The posts with the grayish backgrounds have been set as sticky posts. That means they will forever be at the top of the posts display. All new posts (not set to sticky) would then go underneath the posts set as sticky.
This support document will show you how to "unstick" the posts.
This topic has been closed to new replies.
