How to create a Joomla custom CSS style for Chrome and Safari

So you’ve got your Joomla website looking great. The design is done and you’ve spent loads of time getting the content and images just right but when you open your site in Chrome or Safari, some of the modules look not quite right or out of alignment. You can change the .css file but that also changes how it displays in IE and Firefox. So you ask yourself - How can I change the css for a module in Joomla so it only changes in Chrome or Safari?

(Note to remember - This fix will make changes to both Safari and Chrome as they both use the V8 engine.)

Firstly, I created a custom style for my module. There’s two ways to do this:-

1. Create a custom CSS stylesheet (preferred), or
2. Add it to the bottom of your template.css file

Custom stylesheet
If you’re thinking about using a custom stylesheet here’s a great article from Rockettheme about how to do this.

Adding it to your template.css file
If you’re adding it to your template.css file this is located at yourwebsiteaddress\templates\template_name\css\template.css

Creating a custom style - it’s easy... trust me
If you’ve never created a custom style for a Joomla module before it’s very easy. Here’s how:-

1. Open your template.css file or your custom stylesheet.
2. Add a reference to what you’re doing and comment it out like this example
   

   /* Homepage Text Module*/

3. Create your custom style by using this syntax
   

   div.customname {}

So your code will look like this on your stylesheet file

/* Homepage Text Module*/
div.customname {}

Custom module styles for Joomla are really handy, they can help you to move or style individual modules on your website.

Next add the Chrome styling
Next you need to add a piece of code to let Chrome know it needs to change this css style, so you’re going to add this below your code

@media screen and (-webkit-min-device-pixel-ratio:0) { div.customname {ADD YOUR CODE IN HERE} }

So if you wanted to move your module up ten pixels (but only in Chrome) you would add code like this

/* Homepage Text Module*/
@media screen and (-webkit-min-device-pixel-ratio:0) { div.customname {position:relative; bottom:10px;} }

Remember upload this file to your server.

One last step – add the custom style to your module
Next you need to add this custom style to your module. Log into your Joomla administrator backend and navigate to the module you wish to style, then in the ‘module class suffix’ add the name of your div. In this example it’s “customname” as that’s the name of the custom div we have created.

Click the image below to see where to add your custom style

That’s it. You have now styled a Joomla module using CSS but only for the Chrome and Safari browsers.

If you would like a more visual approach to learning how to do this take a look at the video below.