2022 Developer Survey is open! Take survey.

Hot answers tagged

23 votes
Accepted

How do I override the CSS styles in my template?

Why use CSS overrides? It's always a good idea to keep your CSS styles separate from the existing template styling, if you're using a pre-built Joomla template. It's easier to maintain Your changes ...
user avatar
  • 13.3k
15 votes
Accepted

Adding custom CSS styling on some of my pages

There are several ways to add custom CSS code to a specific page. Here's a couple of alternatives: Alt. 1 - Page class Use page classes. In the menu item editor, under the "Page display" tab, there's ...
user avatar
  • 13.3k
10 votes
Accepted

Understanding CSS classes applied to menus: "deeper" and "parent"

.deeper is applied when the menu item has a submenu (item) .parent is applied if this menu item is parent of another menu item If you have a menu showing all levels then both classes are applied to a ...
user avatar
  • 3,693
9 votes

Adding custom CSS styling on some of my pages

One of my favorite approaches is to create dynamic classes for the body element. So: <?php $app = JFactory::getApplication(); $menu = $app->getMenu(); $active = $menu->getActive(...
user avatar
  • 19.5k
9 votes
Accepted

How to customize the look of the admin ISIS template with CSS? ISIS custom.css

Custom.css for Joomla 3.4.1 and later This method is the easier for custom CSS overrides for the admin template. Simply create a custom.css file and place it inside the css folder of the ISIS ...
user avatar
  • 19.5k
9 votes
Accepted

How to override an extension CSS file

You firstly need to ensure the developer has used the correct approach for importing the CSS file, using JHtml, like so: JHtml::_('stylesheet', 'mod_module/style.css', ['relative' => true]); The ...
user avatar
  • 26.4k
8 votes

How do I override the CSS styles in my template?

Joomla 3.5+ (Protostar template) As of Joomla 3.5, you're able to create file called user.css and place it in: templates/protostar/css/user.css Note: the file name must be user.css The protostar ...
user avatar
  • 26.4k
6 votes
Accepted

creating new template in 3.3

The general rule when doing a template is to load your own CSS files after the <jdoc:include type="head" />. That's important because this way you have the final say over CSS rules. However that ...
user avatar
  • 5,527
6 votes
Accepted

How to change Joomla! 3's bootstrap theme preserving original?

You don't overwrite core files. You never do. Just don't. Put the CSS files into your template directory and load them from there. Have a look at how the Protostar template does it. The CSS file is ...
user avatar
  • 5,527
5 votes

Joomla menu module - display levels in separate panels

I won't give you code on how to create a such menu, but I will give you an idea that will allow you to create a similar end result. You can create a "Split-Menu", by using 2 menu modules. At the ...
user avatar
  • 19.5k
5 votes
Accepted

Standard CSS classes / id naming conventions

what steps would you take to ensure that the look and feel works in synergy with Joomla and other templates? There's no way of knowing what will, and what will not, be supported in a template so my ...
user avatar
5 votes
Accepted

Is there a way to have the article edit box stretch the full width of the screen in Joomla 2.5?

You can just add a view override in the template: Understanding Output Overrides http://docs.joomla.org/Understanding_Output_Overrides Component Output Types and Layout Overrides http://docs.joomla....
user avatar
  • 7,415
5 votes

How do I override the CSS styles in my template?

Helix Framework (JoomShaper) Another Joomla template framework, that facilitates the customization workflow. Helix Framework templates provide as well an easy way to add your custom styles with 2 ...
user avatar
  • 19.5k
5 votes

Dynamic JS and CSS combining without JCH Optimize

JCH Optimize is one of those plugins where you should not simply select everything to be optimised and expect your site to be 2x faster in loading speeds. The more you try and optimise, the more ...
user avatar
  • 26.4k
5 votes
Accepted

Fit recaptcha inside the module

You can set recaptcha element width with css like that: Place those lines in your module's php file $document = JFactory::getDocument(); $recaptcha = '#dynamic_recaptcha_1>div>div {' .'...
user avatar
5 votes

CSS Change won't apply - Where could the cache be?

Do you reach directly to the updated css file through your browser and you see the old css? Or you just don't see the changes taking effect on your site? Some suggestions for both scenarios: A. Do ...
user avatar
  • 19.5k
5 votes
Accepted

CSS/HTML problem on Joomla config page (3.6.1 and 3.6.5)

You might want to use Admin Tools or RSFirewall to do a malware scan. There are known cases where certain malware can cause this problem: https://forum.joomla.org/viewtopic.php?f=706&t=902880
user avatar
5 votes
Accepted

How to add custom JS/CSS file, without modifying the template (from extension)?

Here is the documentation: https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page If you wish to add different css and js to the front and back of the site then you should use a system ...
user avatar
  • 3,134
4 votes

creating new template in 3.3

Unfortunately Joomla doesn't work like this. To make a Joomla template, you have to have some dynamic elements such as the jdoc tag that imports the component and so forth. <jdoc:include type="...
user avatar
  • 26.4k
4 votes

Standard CSS classes / id naming conventions

I wish there was a solution to this but unfortunately there isn't. It would be great if we could all develop extensions that would integrate with all templates out there. You would simply be best ...
user avatar
  • 26.4k
4 votes

Standard CSS classes / id naming conventions

Currently, there is no such standard. The closest thing is indeed the Bootstrap classes. What I usually do is making sure it works in Protostar and hope for the best. There was once sort of a ...
user avatar
  • 5,527
4 votes

How to add conditional comments for IE when including CSS / JS?

It looks like JDocument (actually JDocumentHTML) has a hidden method: addCustomTag. $customTag = <<<CUSTOM <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --...
user avatar
4 votes

Adding custom CSS styling on some of my pages

This is another method of doing the same thing. Goes above the doctype: <?php $app = JFactory::getApplication(); $menu = $app->getMenu()->getActive(); $pageclass = ''; if (...
user avatar
  • 1,328
4 votes

How to center the logo Description in Protostar Joomla 3.4

The correct way to do it would be to add the following css to /templates/protostar/css/template.css (or, if you will recompile the LESS then /templates/protostar/less/template.less): .site-...
user avatar
4 votes
Accepted

Use a colour (e.g. #ccc) as css ID or Selector

Not really Joomla! related. You should ask questions like these better at stackoverflow. But as a quick answer: You can escape the hash sign: .\#cccccc { // my css rules; } .something-\#cccccc {...
user avatar
  • 3,693
4 votes

How do i Style a module to appear in a different color on a particular page

Two ways for this situation - Go to the menu where you have to add "Color2" and go to Page Display tab. There you will see an option for Page Class just add the page class and then add css for the ...
user avatar
  • 1,771
4 votes

Random image in an article

You have to use a more specific CSS selector in order to target only the main image, and not all images added to an article. The main article image (added through the "Images and links" tab in the ...
user avatar
  • 13.3k
4 votes

Where to include additional stylesheets in my template?

If you want to add it directly to your template's index file you might be better off using the JHtml::stylesheet method: <?php JHtml::_('stylesheet', JUri::base() . 'templates/gk_simplicity/css/...
user avatar
  • 362
4 votes

How to make a menu item (menu link) invisible in a footer menu?

Login to your website administration site Go to Menus -> Your menus which has this menu item Click on the Unpublish button of the desired menu item If you do not want to unpublish and just want to ...
user avatar
  • 2,971

Only top scored, non community-wiki answers of a minimum length are eligible