Hacking on CSS to Make Custom Profiles
Making a website from the bottom where you have full control of all the files, the HTML markup, the CSS style, and any additional things is a different experience from tweaking an existing theme for a website to accomplish what you want to do. In a lot of ways, HTML and CSS are inseparable because a lot of effects are created through parent-child relationships.
When you make your own website, you approach things in a very maintainable way hopefully. You give good names to selectors, you make it so that slight changes to markup won't break the CSS too much. You start from a base point and you add on to it. When tweaking a custom profile, you're stuck with the markup you have. You select elements however you're able to. If there's something you don't like, you can't remove it; the best you can do is hide it. If you need additional markup, sometimes your only option is to repurpose what's there.
Your best friend will be display: none;
and ::after
/ ::before
pseudo-elements.
The best approach isn't to jump in and start adding your custom backgrounds and pizazz. You actually want to break everything that will be in your way down to the simplest thing. Remove (hide) elements that interfere with your idea. On bear blog that isn't too crazy because the default theme is pretty simple but most likely you can make it even simpler and it will be easier to get at what you're going for. Don't start molding your idea until your canvas is clean. This is especially important on sites that offer custom CSS profiles but their themes are significantly louder than on Bear.
In this theme I repurposed the nav to have buttons to my websites, that way they'll appear on every page. On a desktop they'll be at the top, on smaller screen at the bottom. They'll also go behind the content so they don't interfere with viewing that. You'll also notice, I changed the "Powered by Bear ʕ•ᴥ•ʔ" to hide the ascii emote. Again, I can't remove it. I can only hide it and replace it with something else using pseudo elements.
I have some ideas on where to go with this, but this is a good starting point. I'll put an image here for posterity in case I do end up going with heavy changes to it.
I have several profiles across the net with my custom stuff and while I won't link them all, one of my favorites is the one on my status.cafe.