Problem with adding custom CSS Topic is solved

Post Reply
VikingCop
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Jan 18, 2021 8:21 pm

Problem with adding custom CSS

Post by VikingCop » Fri Jul 02, 2021 10:35 am

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?
Last edited by toivo on Fri Jul 02, 2021 10:58 am, edited 1 time in total.
Reason: mod note: moved from 3.x General Questions

illovo
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Sun Jan 13, 2013 9:30 am
Contact:

Re: Problem with adding custom CSS

Post by illovo » Fri Jul 02, 2021 12:37 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Jan 18, 2021 8:21 pm

Re: Problem with adding custom CSS

Post by VikingCop » Fri Jul 02, 2021 4:22 pm

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

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 28079
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Problem with adding custom CSS

Post by Per Yngve Berg » Fri Jul 02, 2021 7:48 pm

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

VikingCop
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Jan 18, 2021 8:21 pm

Re: Problem with adding custom CSS

Post by VikingCop » Mon Jul 05, 2021 8:42 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Mon May 21, 2007 6:10 pm

Re: Problem with adding custom CSS

Post by web.dev » Mon Jul 05, 2021 9:18 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Jan 18, 2021 8:21 pm

Re: Problem with adding custom CSS

Post by VikingCop » Mon Jul 05, 2021 10:06 am

web.dev wrote:
Mon Jul 05, 2021 9:18 am
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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Jan 18, 2021 8:21 pm

Re: Problem with adding custom CSS

Post by VikingCop » Thu Jul 08, 2021 11:26 am

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.

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 356
Joined: Tue Jun 30, 2020 12:17 pm

Re: Problem with adding custom CSS

Post by Pavel-ww » Thu Jul 08, 2021 2:06 pm

VikingCop wrote:
Thu Jul 08, 2021 11:26 am
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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Jan 18, 2021 8:21 pm

Re: Problem with adding custom CSS

Post by VikingCop » Fri Jul 09, 2021 12:30 pm

Pavel-ww wrote:
Thu Jul 08, 2021 2:06 pm
VikingCop wrote:
Thu Jul 08, 2021 11:26 am
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.


Post Reply

Return to “joomla.com - Feedback/Information”