Welcome to CSS jungle, we’ve got tags and divs / We got everything you want honey, we know the links
We are the people that can style whatever you may need / If you agree the CSS rules, we got your properties — Welcome to CSS Jungle[^1]
What you just read, it’s been taken from a famous Guns n’ Roses song. It is nothing more than a frontend developer parody of the famous song “Welcome to the jungle”.
Well, it perfectly describes how I felt when I was dealing with CSS: imagine being in the Tarzan’s Jungle, but instead of lianas you have tags.
Note that this article has been written after modifying the template: this means that the process may have been slightly changed to simplify code.
Context
As you may (or may not) know, I’ve changed the design of my website several times: this is because I’ve been undecided in the past, and I tried to figure out what was the best layout and the best features for a website.
The reason behind this is really simple: I never found a perfect template that was complaining about my needs. And this time is not an exception: the template I’ve been using was missing two basic things:
- a nice font
- social / contact icons: those icons you see on some websites which let people contact you
The template I used is really beautiful, but this time, it was different: I was really up to change the template to comply with my needs. This means that, if I had found a way to implement some icons in the left sidebar with a href, the template would have been suitable for me.
Let’s get this done!
The plan
Indeed, there are some steps that I thought were ok to follow:
- figure out where is the left sidebar
- figure out how it is defined
- find a way to take parameters from config.YAML – we will talk about it later
- fetch an image about a social brand, possibly an icon (without blaming too many people and wasting too much time)
- find a way to link YAML parameters and the image with a href
- conditional image: if YAML parameters are not defined, the image must not be rendered
- style and load CSS