Hot answers tagged

21

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 will not be lost if you upgrade the template You can easily copy/move the modifications to another template or another site. How does CSS overrides work? CSS ...


15

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 a field called "Page class". This will add a class to your <body> tag (or a <div class="YOURCLASS">...</div> around your content), depending ...


9

.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 parent menu item. But sometimes you want to show just the first level in your main menu and show the other levels in a side menu, for example. .deeper is then ...


9

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(); $class = $active->alias . " pageid-" . $active->id; ?> <body class="<?php echo $class; ?>"> Some examples of what the above code ...


8

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 template, like so: administrator/templates/isis/css/custom.css The template will load this css file last, so any css rules declared there, will override the core ...


8

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 key to this, is the true argument. If this isn't defined or is false, then the override isn't possible. The true argument means the path is relative to the /...


7

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 template will check if: The file exists The file size is > 0. If both conditions are met, it will automatically import this file for you. See the Pull ...


6

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 also means that you don't use $doc->addStyleSheet() in your template. Instead you just write it as plain HTML into your head after the jdoc statement. ...


6

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 located here: https://github.com/joomla/joomla-cms/tree/staging/templates/protostar/css and loaded with this call: $doc->addStyleSheet('templates/' . $this-&...


5

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 First Menu Module (main first-level module) you will set to show only up to level 1 menu-items, in the: Module settings -> Start Level & End Level At the ...


5

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 advice would be to not rely on a template to style your component at all. It is impossible to ensure the look and feel, that it ultimately decided by the ...


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.org/Understanding_Output_Overrides#Component_Output_Types_and_Layout_Overrides The override only has to include your new CSS style modification, and the ...


5

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 processing the plugin must do. You may also reach a point, where there is no room for more optimisation. What I would suggest you do first is only use JCH to ...


5

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 {' .'width: 100% !important;' .'border-radius: 4px;' .'overflow: hidden;' .'max-width: 300px;' .'}'; $document->addStyleDeclaration($recaptcha); But ...


5

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 you reach directly to the updated css file through your browser and you see the old css? Make sure the server/location you are FTP uploading, is the ...


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


5

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 plugin and test for which client it is like this: class plgSystemRandomname extends JPlugin { function onBeforeCompileHead() { $doc = JFactory::...


4

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="head" /> is also a requirement and a very handy one at that. Basically, it gets all the script, link and anything else that is supposed to be injected into the &...


4

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 convenient methods. In the template control panel in backend, there is a Custom CSS field. Here you can type your css, which will be added as a style element in ...


4

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 making use of the Bootstrap classes and if the style doesn't integrate well, then the user can simply create a Template Override for your component. Just be sure ...


4

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 standard but support for it was low and the documentation was bad. It was basically just a list of ids and classes used by core.


4

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 --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/...


4

This is another method of doing the same thing. Goes above the doctype: <?php $app = JFactory::getApplication(); $menu = $app->getMenu()->getActive(); $pageclass = ''; if (is_object($menu)) $pageclass = $menu->params->get('pageclass_sfx'); ?> Goes in your index where your body class is: <body id="<?php echo $pageclass ...


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-description {text-align: center;}


4

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 { // my css rules; } This should also work: [class="#cccccc"] { // my css rules } Though I think it's not a real nice way to make CSS class names as ...


4

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 module including this page class. You can replicate the module and only assign it to the menu where you want it. Now go to the module, open Advanced tab and add ...


4

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 article editor) are usually displayed within a <div class="item-image">, so you can simply change your CSS to target this image only: .item-image img { ...


4

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/sample.css', true); ?> What you have there is intended to be used inside template functions. https://docs.joomla.org/J3.x:...


4

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 hide it, edit the menu item -> go to Link type tab -> Select No to Display in Menu option


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