bearblog customization tips
I get emails about how I customized my blog sometimes, so I thought I should publish that information some time in a comprehensive post summarizing everything and holding helpful links. This is not meant to replace the emails, so if you have questions, still feel free to reach out - I just didn’t wanna lock it behind having to message me :) and also I'll try to keep this very beginner friendly!
basics
- When you see a cool blog, you can always rightclick on that site, click 'View Page Source' (or an equivalent in your browser), and see their code. The custom CSS part of a Bearblog starts at
<style>. - If you are curious about a specific part of a website, right-click it and click 'Inspect'. This opens up a view that shows what the code behind that specific part is.
- If you want to target a specific part of the website with your CSS but don’t know what it’s called, it can help to Inspect and copy the CSS path. Not always entirely accurate for what you wanna do (especially if it adds some nth child stuff; chances are you could target it better) but it at least tells you some information to work with.
- The MDN is a good resource for CSS; I like their live examples you can click on.
bearblog specific
- For Bearblog specific styling, be sure to check out the Styling docs
- There’s bear.css.observer by mgx to toy around with. To get familiar with how CSS works, consider changing some values like colors and sizes to see how the theme reacts; turn red to blue, increase 200px to 210px, etc. That also makes you understand typical terms like color, width, font-size, margin, padding, border-radius etc. (those are the most important for beginner customizing in my opinion)
- A lot of themes can work (with some adjustments here and there) with the Bearming addons. I don’t use the Bearming Theme, but also have Bearming addons in my design. Many of my pages use the timeline addon, the 'what other people say' uses the testimonials addon.
- Always remember that you can set post attributes and that you can save a Post template (via the button 'Edit template' in the post editor) so that it all comes prefilled when you click 'New Post'. You can set meta data there like tags, a description, an image (both of these are visible in the preview you see when it’s posted on socials, Discord etc.) and more.
- If you want to display things automatically like post lists based on tag, or when the blog or post was created, when you were last active, etc. I encourage you to check out the docs on Embedding custom post lists and Neat Bear features. Custom post lists is how my home page and my “all entries” page split by year works, and inserting blog attributes is how it automatically updates when I have posted last and shows when this blog was created on the home page.
- If you want to change how your blog looks like for just one page, you can either set a class name via the post attributes (more about that here) so you can specifically target that page within your normal Theme CSS, or do it the lazy way like I do it: Write custom CSS into the post itself, starting with
<style>and ending with</style>. That’s how my Filou and Benji pages work; they set a lot of things like the navigation bar and footer to display: none and change values like background color and width. - Remember that you can’t just customize your blog but also your dashboard. I have used this code to always show me how many posts I have in total (if you are curious, right now it’s over 340).
other lists
- There’s this list by folkmoss, and
- this resource list by Sylvia for more helpful tweaks.
my stuff
- Here’s my blog design code. Should be 99% up to date since I haven’t changed much since then.
- Here’s my blinking cursor title code. It's an odd solution, you might wanna do it differently.
If I can think of anything else, I'll update it :)
Reply via email
Published