Virgo Web Design Blog

CSS Tricks for Content Management Systems

CSS Tricks for Content Management Systems

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.

calendar extension

Using Firebug, I hover over the element to find that the ID is "cal_title"

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.

displaynone

The element is now hidden:

 titleremoved

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:

displaynonecode

!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.

 

 

 

 

Review: Best Joomla Templates & Frameworks
Website requirements gathering documentation: Crea...
 

Comments

No comments made yet. Be the first to submit a comment
Guest
Tuesday, 23 July 2019

LATEST ON OUR BLOG

OUR YELP REVIEWS

  • Virgo Web Design recently completed my website MeetPeopleChicago.com. Jerry was easy to work with, was attentive to my questions and was on top of things from start to finish. In addition he was very knowledgable and up to date on the latest technologies. I am very pleased with the final product and I will surely use him again for future enhancements. Thank you Jerry for the great work you have done!

    PETER S.

    Meet People Chicago

  • As a marketing communications person who knew my company needed an up-to-date website built in Joomla, I was very happy we found [Virgo Web Design]. I understood things from a content perspective, but when it came to back-end design and architecture, my hands were tied. [Virgo Web Design] was so knowledgeable and easy to work with, and was always available to answer questions, make tweaks, walk me through front-end editing tasks...you name it. [Virgo Web Design]'s accessibility and can-do attitude made such a difference to our entire team, and I hope I always thanked [them] enough for helping me through the client-side part of the web redesign process.

    CORRIE M.

    Aptude

  • "[Virgo Web Design] did an amazing job on my non-profit's website, ghhaven.org. [They] put our site together quickly and with all of the elements we requested - plus, [they] had a lot of great recommendations for things that we hadn't even considered for the site. [They were] very helpful throughout the process of getting our site launched and I found [them] to be quick in responding to all of my questions/requests as well. [They] even helped us get our business emails set up!

    I would definitely recommend Virgo Web Design as a go-to for all of your web design/development needs. I will definitely be using [them] again in the near future!"

    FRITZIE S.

    Genesis Hopeful Haven

  • [Virgo Web Design] has developed and designed multiple websites for me over the years. [Their] team are exceptionally skilled technicians. Their communication is easy to understand, and they are very proficient - even when near-end deadlines are demanding. Hiring Jerry Virgo and his team is one of the best decisions I have made for my company.

    Michael W

    One Chicago Realty

  • I've used Yahoo sitebuilder for several years and my e-commerce website was due for an overhaul. I asked around & received several recommendations from friends & other small businesses.

    Many of the other referrals came from Web design firms & had significantly higher overheads/billing rates...We had a tight timeline & [they were] very diligent at following up to avoid production delays at time when I was extremely busy. [They] did a nice all around job improving my SEO optimization, creating a polished final product, and documenting the back end with an easy to use manual.

    After the site when live, [they] stood by & helped me troubleshoot unanticipated events & helped me create work arounds.

    Chris H.

    City Tree Delivery

  • [Virgo Web Design] knocked out a full rebuild of our site in a few weeks, guided us through things we didn't understand with ease and calm and gave great advice, training and follow up service

    Nicholle D.

    DANK Haus

5000 characters left

LATEST ON OUR BLOG

OUR YELP REVIEWS

  • Virgo Web Design recently completed my website MeetPeopleChicago.com. Jerry was easy to work with, was attentive to my questions and was on top of things from start to finish. In addition he was very knowledgable and up to date on the latest technologies. I am very pleased with the final product and I will surely use him again for future enhancements. Thank you Jerry for the great work you have done!

    PETER S.

    Meet People Chicago

  • As a marketing communications person who knew my company needed an up-to-date website built in Joomla, I was very happy we found [Virgo Web Design]. I understood things from a content perspective, but when it came to back-end design and architecture, my hands were tied. [Virgo Web Design] was so knowledgeable and easy to work with, and was always available to answer questions, make tweaks, walk me through front-end editing tasks...you name it. [Virgo Web Design]'s accessibility and can-do attitude made such a difference to our entire team, and I hope I always thanked [them] enough for helping me through the client-side part of the web redesign process.

    CORRIE M.

    Aptude

  • "[Virgo Web Design] did an amazing job on my non-profit's website, ghhaven.org. [They] put our site together quickly and with all of the elements we requested - plus, [they] had a lot of great recommendations for things that we hadn't even considered for the site. [They were] very helpful throughout the process of getting our site launched and I found [them] to be quick in responding to all of my questions/requests as well. [They] even helped us get our business emails set up!

    I would definitely recommend Virgo Web Design as a go-to for all of your web design/development needs. I will definitely be using [them] again in the near future!"

    FRITZIE S.

    Genesis Hopeful Haven

  • [Virgo Web Design] has developed and designed multiple websites for me over the years. [Their] team are exceptionally skilled technicians. Their communication is easy to understand, and they are very proficient - even when near-end deadlines are demanding. Hiring Jerry Virgo and his team is one of the best decisions I have made for my company.

    Michael W

    One Chicago Realty

  • I've used Yahoo sitebuilder for several years and my e-commerce website was due for an overhaul. I asked around & received several recommendations from friends & other small businesses.

    Many of the other referrals came from Web design firms & had significantly higher overheads/billing rates...We had a tight timeline & [they were] very diligent at following up to avoid production delays at time when I was extremely busy. [They] did a nice all around job improving my SEO optimization, creating a polished final product, and documenting the back end with an easy to use manual.

    After the site when live, [they] stood by & helped me troubleshoot unanticipated events & helped me create work arounds.

    Chris H.

    City Tree Delivery

  • [Virgo Web Design] knocked out a full rebuild of our site in a few weeks, guided us through things we didn't understand with ease and calm and gave great advice, training and follow up service

    Nicholle D.

    DANK Haus

Contact

  • Phone:
    (224)388-0250
  • E-Mail:
    This email address is being protected from spambots. You need JavaScript enabled to view it.

SUBSCRIBE TO OUR NEWSLETTER

© Copyright Virgo Web Design. All right reserved.

Signup for our newsletter!