It is very common that customizing a component. module, or plugin (or whatever the CMS you chose decided to call it) within a content management system will require some additional CSS editing to get it to look or function the way you intended. Content management systems have many more working parts than a traditional website built with HTML & CSS, and may need some additional tricks to get the job done. The methods shown below should lend a helping hand with that.
1. Use display: none to hide elements
I often use CMS plugins/extensions/modules that offer more features than I require for my project, and there isn’t always an on/off switch to administer certain features.
Example: Let’s say we are using a calendar application within a CMS. In this example, I am utilizing the JEvents extension for Joomla. The calendar displays the current month, day, and year at the top of the calendar, however I would like the component to not display that information.
Using Firebug, I hover over the element to find that the ID is "cal_title"
I then insert the code below into my css file - in this case, I am using the template framework Gantry, which has a template override file called template.css.
The element is now hidden:
Keep in mind that this should only be used if you are hiding non-important information. If you are hiding information that you would not want released to the general public, then I recommend going into the actual files of the extension, application, or module and deleting afew lines of code.
2. Using !important to set priority of your CSS properties
Third party applications that you install into your CMS always have their own CSS files or inline CSS code. Ever try to apply CSS to different HTML elements and it has no effect? This may be because that element already has CSS properties applied to it, and your new ones are just being overwritten. Luckily, there's a way around that - using the !important property will let your new rules override the existing ones. This will only apply to a property you create; for example, if you are only applying a new border property, this will only override the border, not other properties like fonts, background-color, etc.
Continuing from the previous example, here's how you would apply the !important property to your CSS:
!important should only be used if you have exhausted all other methods to apply your CSS. Usually you can easily find the original CSS properties and modify those.
3. Using CSS Generators
You can save yourself a great deal of time by using CSS generators online to create effects such as rounded borders, buttons, gradients, shadows, and more. I typically use different generators ones depending on my need, so I suggest trying out different options rather than always using the same one, as they usually have different configurations.
So how do you find them? Simple use your favorite search engine and type in "CSS generators"!
4. Switching Style Sheets for the mobile version of your website
I've come across several situations in which I only wanted to modify the CSS on the mobile version of my without making changes to the full desktop version. If you are using a template with a built-in mobile feature, or built your mobile site separately using something like jQuery Mobile, then this may not be an issue. However, there may be some situations that require this little trick will come in handy.
This article has an excellent tutorial for switching your stylesheet based on your browser width.
