[Theme][GitHub head] GReaderish modifications

Post plugins and custom CSS snippets here
levito
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 17 Mar 2013, 04:18

[Theme][GitHub head] GReaderish modifications

Postby levito » 08 May 2013, 01:18

Users of the latest code from GitHub will have noticed a lot of changes to the styling. I like them a lot - everything is cleaner, more elegant and more to the point.

However, I made some changes and want to share them with you:

* full width entry separators in combined mode
* increased headline size to 16px for expanded entries
* top-aligned entry header elements (visible only when headlines break in 2 or more lines)
* visually merged toolbars and splitters
* some small fixes to dijit theme

... and this is what it looks like:
Bildschirmfoto 2013-05-07 um 23.11.30.png
Bildschirmfoto 2013-05-07 um 23.11.30.png (124.63 KiB) Viewed 3877 times


The CSS is tested in latest Chrome only but should work in every modern browser:

Code: Select all

/* fix dijit */
:focus {
   outline: none;
}
input[type="search"] {
   -webkit-appearance: none;
}
.dijitContentPaneSingleChild {
   overflow: auto;
}

/* some styling */
hr {
   max-width: none;
}
div.cdm.expanded div.cdmHeader a.title,
div.cdm.active div.cdmHeader a.title {
   font-size: 16px;
}
div.cdmHeader span.updated,
div.cdmHeader div.hlFeed,
div.cdmHeader div.hlFeed a {
   vertical-align: baseline;
}
div.cdmHeader > div:not(.hlFeed) {
   vertical-align: top !important;
}

#toolbar .dijitToolbar {
   background: #f0f0f0;
   border-color: #f0f0f0;
}
#headlines-frame,
#content-insert {
   border: none;
   border-left: 1px solid #c0c0c0;
}
#content-wrap {
   border: none;
}
#main .dijitSplitter {
   background: #f0f0f0;
}
#headlines-wrap-inner .dijitSplitter {
   border: 0 solid #c0c0c0;
   border-width: 1px 0;
}

jianglai
Bear Rating Trainee
Bear Rating Trainee
Posts: 5
Joined: 08 May 2013, 04:01

Re: [Theme][GitHub head] GReaderish modifications

Postby jianglai » 08 May 2013, 04:22

This is exactly what I've been looking for! Larger headline fonts! Thank you so much!

levito
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 17 Mar 2013, 04:18

Re: [Theme][GitHub head] GReaderish modifications

Postby levito » 08 May 2013, 18:37

Some more changes... The latest GitHub code has a lighter #headlines-toolbar background - I reverted that to #f0f0f0.

I changed the HR styling to separate entries better. I also applied it only to the HRs which separate the entries, not to these inside the entry content.

Finally, I added a max-width to the tree nodes of the sidebar to prevent long items from hiding the unread count.

Code: Select all

/* fix dijit */
:focus {
   outline: none;
}
input[type="search"] {
   -webkit-appearance: none;
}
.dijitContentPaneSingleChild {
   overflow: auto;
}

/* some styling */
hr {
   max-width: none;
}
.cdm > hr {
   height: 2px;
   border-top: 1px solid #b0b0b0;
   border-bottom: 1px solid #d0d0d0;
   background: #e0e0e0;
}
div.cdm.expanded div.cdmHeader a.title,
div.cdm.active div.cdmHeader a.title {
   font-size: 16px;
}
div.cdmHeader span.updated,
div.cdmHeader div.hlFeed,
div.cdmHeader div.hlFeed a {
   vertical-align: baseline;
}
div.cdmHeader > div:not(.hlFeed) {
   vertical-align: top !important;
}

#toolbar .dijitToolbar {
   background: #f0f0f0;
   border-color: #f0f0f0;
}
#headlines-frame,
#content-insert {
   border: none;
   border-left: 1px solid #c0c0c0;
}
#content-wrap {
   border: none;
}
div#headlines-toolbar,
#main .dijitSplitter {
   background: #f0f0f0;
}
#headlines-wrap-inner .dijitSplitter {
   border: 0 solid #c0c0c0;
   border-width: 1px 0;
}
#feedTree .dijitTreeRow {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
}

levito
Bear Rating Disaster
Bear Rating Disaster
Posts: 77
Joined: 17 Mar 2013, 04:18

Re: [Theme][GitHub head] GReaderish modifications

Postby levito » 09 May 2013, 03:59

One more change: I fixed the borders in "separated mode" with both entry content at the bottom (default) and on the right (widescreen mode).

Have fun!

Code: Select all

/* fix dijit */
:focus {
   outline: none;
}
input[type="search"] {
   -webkit-appearance: none;
}
.dijitContentPaneSingleChild {
   overflow: auto;
}

/* some styling */
hr {
   max-width: none;
}
.cdm > hr {
   padding: 1px;
   border-top: 1px solid #b0b0b0;
   border-bottom: 1px solid #d0d0d0;
   background: #e0e0e0;
}
div.cdm.expanded div.cdmHeader a.title,
div.cdm.active div.cdmHeader a.title {
   font-size: 16px;
}
div.cdmHeader span.updated,
div.cdmHeader div.hlFeed,
div.cdmHeader div.hlFeed a {
   vertical-align: baseline;
}
div.cdmHeader > div:not(.hlFeed) {
   vertical-align: top !important;
}
#toolbar .dijitToolbar,
div#headlines-toolbar {
   background: #f0f0f0;
   border-color: #f0f0f0;
}
#headlines-frame,
#content-insert {
   border: 1px solid #c0c0c0 !important;
}
#content-wrap {
   border: none;
}
#headlines-wrap-inner {
   margin: 0 -1px -1px 0;
}
#main .dijitSplitter {
   background: #f0f0f0;
}
#feedTree .dijitTreeRow {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
}


Return to “Themes and plugins”

Who is online

Users browsing this forum: No registered users and 1 guest