Last Updated: February 25, 2016
·
864
· b0ssr00m

Priority in WordPress CSS design

Hello all, a bit of a n00b here, but it's a wonder what a bit of immersive learning can do for you. In being a beginner at this stuff, I figure it would be decent for me to share a n00bish mistake I had overcome and learned from today.

I was working alongside a client, making various CSS changes at their requests as we reviewed the project. Now at this time, and in my inexperience I tend to jump between Adobe Dreamweaver, Notepad++/Filezilla, and the built in epanel in our template WordPress theme. Well you could say that this is a story of why not to do this.

While working away in this way, I suddenly found that the changes that I made to my child themes weren't executing; the results weren't going live. After tinkering for way longer than I would like to admit, I found out that there is a sort of priority between the various CSS files. Most people understand that the Child theme has priority over the base theme in a WordPress site. However, when working with premium WordPress themes from sites such as ElegantThemes, ThemeForrest, etc. They often have special CSS editors built in. These tend to edit their own resource file, such as how epanel edits "theme/epanel/css/panel.css" and this has priority over even the child themes style.css file.

So if your like me and decided to haphazardly edit this epanel CSS section, no amount of hacking at your style.css will change any edits found in that panel.css file, and thus not show up on your site. The lesson learned is keep all your CSS edits in one basket.