Custom CSS

Subscribe to Custom CSS 7 posts, 4 voices

DustinLuck Script's Author

I have had many requests for Google Reader changes that I didn't necessarily want to add to the script's options dialog for fear of cluttering it up. I have been looking for a way to satisfy those who want to implement these changes without having to change the underlying code. I hope today's addition of a custom CSS field strikes the right balance between allowing more customization while at the same time keeping the options dialog simple for most users. I will try to collect any CSS customizations I've posted for individual requests in this thread so that a somewhat comprehensive list will be available in one place. If you have any other requests, post them here and I will do my best to reply with the code you need.

Hide Entry Star

.entry .entry-actions .item-star { 
    display: none !important; }

Hide Entry Email

.entry .entry-actions .email { 
    display: none !important; }

Hide Entry Tags

.entry .entry-actions .tag { 
    display: none !important; }

Hide Entry SendTo

.entry .entry-actions .item-link { 
    display: none !important; }

Revert post title style

For those that like the 'Condense White Space' options, but not the reformatting of the post titles.
.entry .entry-title { 
    font-size: 140% !important; } 
.entry .entry-title .entry-title-link { 
    text-decoration: none !important; }

Chevrons in front of post titles

Note: this only affects list view
#entries.list .collapsed .entry-main .entry-original {
    right: auto !important; 
    left: 1.85em !important; }
#entries.list .collapsed .entry-main .entry-source-title {
    left: 3.6em !important; }
#entries.list .collapsed .entry-main .entry-secondary {
    margin-left: 16.75em !important; }
.samedir #entries.single-source .collapsed .entry-secondary {
    margin-left: 3.75em !important; }
#entries.list .collapsed .entry-date {
    margin-right: .5em !important; }

Side navigation on the right

Replace the margin-right value for the chrome id with your custom width if you've tweaked it.
#nav { 
    float: right !important; }

#chrome { 
    margin-left: 0 !important; 
    margin-right: 175px !important; }

body.lhn-hidden #chrome { 
    margin-right: 0 !important; }
If you've hidden the top navigation area, use the following CSS to reposition the search controls, replacing the value with whatever you used for margin-right above + 10.
#search { 
   right: 185px !important; }

Change the font for post text

Feel free to change the font face and size to whatever you prefer
.entry-body { 
    font-family:monospace !important; 
    font-size: 12px !important; }

Limit the width of feed items

Return to the default right margin in the feed item area instead of letting the contents stretch all the way to the edge.
(Delete the first two lines to keep the Google default of stretching feed items when the sidebar is hidden.)
.lhn-hidden #entries .entry-body, 
.lhn-hidden .entry .entry-title, 
#entries .entry-body, 
.entry .entry-title {
    max-width: 650px !important; }

Change link color

a:link {
    color: blue !important; }
a:hover {
    color: royalblue !important; }
a:visited {
    color: purple !important; }
a:active {
    color: red !important; }
DarKHelmeT User

i assume this field saves a variable somewhere so the changes are persistent between updates?

here is the code you pointed me to

Header Title Size/Decoration

.entry .entry-title { \
font-size: 16px !important; } \
.entry .entry-title .entry-title-link { \
text-decoration: none !important; } \

easy to see how to change text size. and text decoration can be "underline" etc

DustinLuck Script's Author

@DarKHelmeT: It absolutely does save the text, so it is persistent.

nascent Scriptwright

wow. incredible addition. thanks loads for the hard work.

Josh Gunderson Scriptwright

Whitespace for #top-bar is showing up again; adding this to Custom CSS fixed it for me:

#top-bar {
    height: 0 !important;}

DustinLuck Script's Author

Thanks. This has been added to the script.

Josh Gunderson Scriptwright

Disable +1 button hover/click popup:

.gc-bubbleDefault, .pls-container {
   display: none !important; }

Found here: