SOLVED Ignore Custom CSS file on specific page
-
-
- HeliFly
- Rocketeer
- Posts: 59
- Thanks: 0
-
Hi,
I've added the Events Booking module from Joomdonation to one of my pages and some of the css I added to my rt_graffito-custom.css custom file is conflicting. I've tried adding extra css to the custom file to override, but to no avail.
Is there some way I can ignore the rt_graffito-custom.css file for that specific page?
Regards, John. - Last Edit: 6 years 6 months ago by HeliFly.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Yes, if you enable "page suffix" in template manager you should then see a class get's added to the body tag of the form "menu-alias" where "alias" is the alias of you menu itme. Once you have that you then need to modify you CSS statements to use that in the qualification i.e. you can (for example) begin the selector with:
body.menu-xxx ..........
or
body:not(.menu-xxx) .......
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- HeliFly
- Rocketeer
- Posts: 59
- Thanks: 0
-
Hi Mark,
Have enabled page suffix and modified rt_graffito-custom.css as shown below. I still get the month / year controls of the calendar in #006633 rather than white. Page is here.
body.menu-groupon a.menu-groupon { color: white; font-weight: bold; } body a { color:#006633; font-weight:bold; }
Where have I gone wrong?
Regards, John.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
1. If you want to change something specific then your CSS should be specific... You are just saying "body a" which means change every link everywhere regardless of what it is used for (unless there is other more specific CSS elsewhere that states something else). So, in my opinion that is much too powerful statement to just apply to you site as it will have unforseen consequences.
2. If you wanted to change every link on a specific menu item then it should be....
body.menu-groupon a { color: white; font-weight: bold; }
3. If you wanted to change every link EXCEPT on a specific menu item it should be:
body:not(.menu-groupon) a { color: white; font-weight: bold; }
4. Your other statement should precede either of those statements above.
body a { color:#006633; font-weight:bold; }
... because it is way too generic and countermands what you use in 2 or 3.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- HeliFly
- Rocketeer
- Posts: 59
- Thanks: 0
-
Thanks Mark,
I've got a feeting that the actual problem I have is different now. I hadn't noticed that when looking at the css in force via Firebug it told me the statement in force is from line 1 of the custom css file. However, the statement is not on line 1 of that file. I've got a feeling that the custom file being picked up by my live site is the one (in a different directory structure) on my dev site.
So all the css I tried before getting in touch has never been active. I'm now looking for where the file path to the custom.css file is defined.
Regards, John.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Your statement in your custom CSS file is still wrong.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.054 seconds