so while messing with the style of this theme to change a few things, I ran into an interesting thing about CSS - Overrides. More specifically, proximity vs. id/class. In essence, even though I was specifying a closer proximity to the element via it’s outer class, because there was an element with an id with the same style, even though it was higher up the chain, it was overriding my style.
If you understood that, congrats, because I just wrote it and I don’t understand it. So I’ll try and go a little more indepth here. If you don’t care about CSS and web design, please, feel free to disregard this post.
So the sidebar ( the vertical bar over there –> ) has an id of #sidebar and it has a style for all the links. Now, there is the calendar ( which is also over there –> ) which has a class defined of widget_calendar. I wanted to change the style of the links within the calendar. So, using proximity, I said something like this…
li.widget_calendar a {
text-decoration: underline;
}
Now here’s the rub. Since the sidebar is specified with an id and there can only be one id of that name within the page, that’s considered closer proximity than the fact that I specified a style for a class, assigned to element within the sidebar element. So, in order to fix this, I had to change the style to something that had an id tag and was inside the sidebar element. Lucky for me, the calendar also generates a div with a specific id. I was able to use that to assign my link style.
Confusing, I know. CSS is a love/hate relationship with me. There are so many cool things you can do to style your pages but some of it is so baffling and irritating ( especially with cross browsers ) that it becomes a nightmare.
In any case, the problem has been solved and I now, joyously, have underlined links in my calendar. Yay!
), but keep checking the site for more updates!
Recent Comments