Problem with adding custom CSS Topic is solved

[VikingCop]

Hi.

I have searched this and other forums, and followed all different suggestions regarding the subject.
But still, my custom CSS will not work as planned.

And - I am very new to Joomla, so I really hope you can help me out a bit.

The issue is this:
I am aiming to colorize the top header area on my site "ysktroms.joomla.com" with an orange color.

In the /css folder for template "cloudbase3" I have added my own css-file, and named it "user.css".
(I have also tried with file name "custom.css").

The content of "user.css" is very short:

Code: Select all

rt-header {background-color: #ea9c4c;}

This works when I try it just editing the inspection pane for that website when I am visiting the site.
This edit will of course not stick.

On the Joomla Adminstrator Control Panel (from dropdown menu "System", I have executed the Clear Cache and Clear Expired Cache.

I have also visited my Template "cloudbase3" (Extensions, Templates, Styles) and entered the "Cloudbase3 - ysktroms" which is my default template.
From there, I have clicked the "Clear Cache" button upper right corner, and a small info bbox tells me that "Gantry - Gantry caches cleared".

When visiting my Template Manager: Edit Styles, I get an information at the top of the page saying:

Warning
Update: Could not open update site #4 "RocketTheme Update Directory", URL: http://updates.rockettheme.com/joomla/updates.xml

Is this an issue? When I try to visit that URL, it says: Not found.

I have installed the Extension "Add Custom CSS" from impression eStudio v 1.2.1 and followed the instruction given to get it to work.

But still my background color in my header is white.

Can someone please advise me?

[illovo]

The rt-header selector is an id.

Code: Select all

<div id="rt-header">

Therefore your code looks wrong. It should be

Code: Select all

#rt-header {background-color: #ea9c4c;}

[VikingCop]

I edited the user.css according to your suggestion, still not working.
I even copied the user.css into a new custom.css, in case Joomla looks for either of the files.

Can not seem to find that Joomla loads the css files in question, can at least not find any references to these files in the head of the page (using inspector panes).

Still stuck...

[Per Yngve Berg]

The CSS files must be loaded in your template. Add to the template's index.php.

[VikingCop]

OK.

Can you please advise where I do that?
----

OK. Think I found the entry:
Found the file "index.php" in the template manager.

From line 36 it says:

Code: Select all

<?php
        $gantry->displayHead();
		$gantry->addStyle('grid-responsive.css', 5);
		$gantry->addLess('bootstrap.less', 'bootstrap.css', 6);
        if ($gantry->browser->name == 'ie'){
        	if ($gantry->browser->shortversion == 9){
        		$gantry->addInlineScript("if (typeof RokMediaQueries !== 'undefined') window.addEvent('domready', function(){ RokMediaQueries._fireEvent(RokMediaQueries.getQuery()); });");
        	}
			if ($gantry->browser->shortversion == 8){
				$gantry->addScript('html5shim.js');
			}
		}

Am I getting close?
Where and what should I insert in this code?

Thanks in advance.

[web.dev]

If it's Gantry, do not edit your index.php.

You add a custom css like this for Gantry:
http://docs.gantry.org/gantry5/tutorial ... tyle-sheet

[VikingCop]

If it's Gantry, do not edit your index.php.

You add a custom css like this for Gantry:
http://docs.gantry.org/gantry5/tutorial ... tyle-sheet

Have followed the instructions on the given site, and created both scss sub-folder in custom-folder, and created a new custom.scss file within this scss sub-folder.

However, I have not the same control panel as shown in the descrition (Gantry). I am using the one in Joomla, and my template cloudbase3 (which I understand is a Gantry driven template).

Can not find any place where I can access Recompile CSS and set Production mode to ON.

Am I totally on a wild goose chase here?
Still not working.

Like I said, I am new to this Joomla web creator system, so I hope you can give me some slack and understanding on my way,

[VikingCop]

Anyone with a suggestion on what is wrong on my side?
The website in question is ysktroms.joomla.com, and it is the background color of the header (where the logo is) which can not be altered via custom css.

[Pavel-ww]

Anyone with a suggestion on what is wrong on my side?
The website in question is ysktroms.joomla.com, and it is the background color of the header (where the logo is) which can not be altered via custom css.

Hi. Of course, this is a bad template selection if you prefer to use your code. It is very cumbersome and intended primarily for people far from the code. As far as I know, there is a color setting for the Header in the style tab.
I would recommend you to use your own hosting and more flexible and simple template. For example, Helix Ultimate.
Nevertheless, if you want to continue this to be used, you should study the documentation.
For example, this
https://www.cloudaccess.net/joomla-know ... a-3-3.html
and that
https://www.cloudaccess.net/joomla-know ... tions.html

[VikingCop]

Anyone with a suggestion on what is wrong on my side?
The website in question is ysktroms.joomla.com, and it is the background color of the header (where the logo is) which can not be altered via custom css.

Nevertheless, if you want to continue this to be used, you should study the documentation.
For example, this
https://www.cloudaccess.net/joomla-know ... tions.html

Voilá... it all boiled down to naming the css correctly.
Neither custom.css or user.css was sufficient.
When I renamed my css file to "cloudbase3-custom.css" within the template folder css, it worked.

Thank you all for your patience and endurance trying to assist a newbie.