Customizing my BearBlog theme
Last modified 13 hours, 24 minutes ago
This is mostly just a running list of the changes I made to my blog’s theme to make it mine. By no means is this a how-to or advice. I am just teaching myself as I go. This is my first time using CSS (or really any kind of web development language). The closest I’ve come to previous experiences was learning Matlab and R during grad school, both of which I have forgotten after not using them for cough 7 years.
Changes made
Starting Point
I started with the “Low Vision Reader” theme. I liked the clean lines and structure of the theme.
Text and border color
It is probably extremely obvious my favorite color is pink. I think the easiest way to incorporate pink is changing the title and header fonts and borders to a nice light pink. Almost everywhere that I changed the color to pink it would be #c97db0.
Hover highlight
I'm sure you can already see a theme happening. I changed them to pink!
Date formatting
The default date font on my Ramblings list was a different font, so I change it to be consistent with the rest of the font. Quick, small change.
Image size and review format
I didn’t want the book covers on my What Am I Reading page to fill the whole screen. I adjusted the maximum width of images from 100% to 40% in the theme. I also used the “< section >” feature to format the text of my reviews to be next to the cover image. It took a lot of trial and error to not have the image stretched the length of the text, but I used the "align-self: flex-start;" for the image style.
Footer
I changed the BearBlog footer to have pink text.
Visited posts
I changed the text color of previously visited Ramblings post to a darker version of the standard pink I had used elsewhere.
Upvote button
I changed the upvote button from the standard orange arrow to a little duck. I hodgepodged this together from several different sources. Through a lot of trial and error, I think I settled on something I like. Big shout out to these blogs for being a great resource.
- Robert Birming's Bear Blog upvote button styles
- Sylvia's Anatomy of a Bearblog toast button
- ReedyBear's Shark Toast Button
Adding ducky to header
I added my little ducky to the header. This took quite a bit of trial and error. Thankfully, I was able to see what I needed to do by reading through ReddyBear’s code for bear log book theme post.
xoxo, Ducky