Sometimes I wish websites I visited were slightly different. I sometimes read Planet Fedora, but it's default layout is painful on my relatively small screen. My monitor is 1024x768, but I only have about 924px of width because I use a vertical tab bar. Consequently, the post entries normally appear very narrow. The entries waste a lot of space on the right in the column with the author's icon. Two changes I'd make to the page include making the text take up the full width of the entry, and actually removing the link bar on the left (I never use it) so I can have wider entries.
Many browsers will let you do this, or have an extension to let you do this. You can make changes to websites that will only affect your view of it, telling your browser to render it differently, just for you.
In the case of Mozilla Firefox, the browser I use, I use the native method of creating a custom CSS file, at (in Linux) ~/.mozilla/firefox/<profile ID>.default/chrome/userContent.css. Firefox loads this for every page and let you override a site's default CSS style.
The style changes I want to make are to elements with generic identifiers like div#content. I don't want this to affect every div element with an id of "content" in all my browsing, so I took a couple seconds to find out how I could make my local rules site-specific.
In the end, I've ended up with:/* for Planet Fedora */
@-moz-document url-prefix(http://planet.fedoraproject.org) {
.blog-entry-content {
margin-right: 25px !important;
}
div#sidebar {
display: none;
}
div#content {
margin-left: 30px !important;
}
}
The !important modifiers ensure that, if Planet Fedora sets margin-left itself on div#content, say, that our rule will take precedence.
Sometimes, though, I forget I've set this in my local Firefox, which gives me a surprise when I see it in another browser!
Normally (in Google Chrome):
With customisations (in Mozilla Firefox):
No comments:
Post a Comment