Hi Sam,
Looking in my profile there’s a big section for custom CSS in the Blurblog. A few examples for what we might be able to do with this would go a long way to kicking off the ol’ noodle to getting that page customized.
1 Like
That’s up to you. You can see your blurblog at samuel.newsblur.com (substituting in your username), but you need to know CSS. A theme garden might come some day.
I am also planning to learn CSS to customize my Blurblog and it would be good to give some guidance for example, blockquote is for the “quote” in the news.
I think I have some of it figured out, so I am sharing it over here. You need to go to your Blurblog Profile and there is a Custom CSS for your Blurblog:
You can use the following CSS element to color the background:
.NB-title {background-color: #5D8AA8;}
.NB-title-photo {background-color: #5D8AA8;}
.NB-banner-table {color: white;}
.NB-banner-wrapper {background-color: #5D8AA8;}
.NB-banner-stats {color: white;}
.NB-banner-stats .NB-banner-stat b {color: white;}
.NB-story-comments-container {background-color: #f5f2eb;}
You can press F12 in your Blurblog and your browser will go into a “developer” mode and then you can explore each element.
Hope this will help anyone interested to skin your Blurblog.
1 Like
I am trying to make my Blurblog into a Dark mode, to make it easier to read in the dark. But I struggle to change the color of the background, as well as 3 other areas, as per my screenshot below.
If anyone have tried this and can give a helping hand, that would be much appreciated. I highlighted the 4 areas which I am unable to change the color via custom CSS:
You just need to add specificity. Those two lines in the story header are both linked as anchor tags, so add the a tag:
.NB-feed-title a { color: white; }
.NB-story-permalink a { color: white; }
Looks like you got the background color. You can hide the cutoff bar:
.NB-story-content-wrapper .NB-story-content-expander .NB-story-cutoff { background: none; }
1 Like
Thank you so much. That works!
Here is my Dark Mode theme. I have also pasted the CSS quotes with description of each line if anyone is interested to venture into customizing their Blurblog.
If you like my Dark mode, just copy and paste the code below into your Blurblog custom CSS. I am using the Color scheme outlined in Apple Interface Guideline for Dark mode.
/* Override the main background using !important */
.NB-container[style] {background-color: black !important;}
a:link, a:visited {color: yellow;} /* to color links */
blockquote {background-color: #636366;} /* to color blockquotes */
body {background-color: black;} /* this will make the scroll bar black too */
/**** Header: Water Cooler Corner ****/
.NB-title {background-color: #636366;}
.NB-title-photo {background-color: #636366;}
.NB-banner-table {color: white;}
.NB-banner-wrapper {background-color: #636366;}
.NB-banner-stats {color: white;}
.NB-banner-stats .NB-banner-stat b {color: white;}
/**** Story Section ****/
.NB-story {background-color: #3A3A3C;} /* box of the story frame */
.NB-story-content {background-color: #3A3A3C;} /* box of the story content */
.NB-story .NB-story-title .NB-story-title-link {color: white;} /* title of the story */
.NB-story .NB-story-author {color: #FF375F;} /* to color Author of the post */
.NB-story .NB-story-metadata .NB-story-permalink a { color: grey; } /* to color the date and time */
.NB-story .NB-feed .NB-feed-title a { color: #FF375F; } /* to color name of source of story eg Daring Fireball */
.NB-story-shares-container {color: #64D2FF;} /* to color the text "1 Comment" at the right side of the site name */
/**** The box around "Read the whole story" ****/
.NB-story-content-wrapper .NB-story-content-expander {
background: #3A3A3C;
color: #64D2FF; }
/**** The cutoff bar above "Read the whoe story" ****/
.NB-story-content-wrapper .NB-story-content-expander .NB-story-cutoff { background: none; }
/**** Comments Section ****/
.NB-story-comments-container {background-color: #48484A; color: white;} /* to color comment box and text */
.NB-story-inner {color: white;}