Custom CSS files
-
-
- phpnewfie
- Rocketeer
- Posts: 65
- Thanks: 0
-
Hi
I think it would be good to have some clarification on where custom css files go and how they are named. I have seen at least 4 different variations in different posts from your moderators:
templatename-custom.css in css folder
templatename-custom.css in compiled-css folder
templatename-custom.css in custom folder
templatename-custom.less in less folder
I believe they all work (although I would never put it in compiled folder since I regularly empty it
during development)
I continue to use the first example which works, but I and I'm sure others may find this inconsistency confusing.
Thanks
Ken
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
The first one is the one that is correct - all the rest are wrong - so please can you provide links to the topics where MODS have used any of the others.
This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
So taking Lexicon as an example the file would be called rt_lexicon-custom.css and placed in /templates/rt_lexicon/css folder
Now, if you are talking about a LESS file rather than CSS then that is different...
For LESS you use the filename of the LESS file that you want to override. So, to do overrides for template.less then your override file would be called template-custom.less and places in the LESS folder. So, again taking Lexicon as an example for an override of template.less it would be template-custom.less placed in folder /templates/rt_lexicon/less
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.
-
-
-
- Ponyack
- Sr. Rocketeer
- Posts: 126
- Thanks: 0
-
Do you need to add a declaration like this at the top of the document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" www.w3.org/1999/xhtml ">
Thanks,
John
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
No because that's HTML not CSS.
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.
-
-
-
- Bernhard
- Newbie
- Posts: 1
- Thanks: 0
-
Hi I inserted above in the instructions in the folder emplate four css. These are also displayed in the admin area under the css folder. However, these are not involved with. Do I need to refer to the css files somewhere?
Thank you in advance for help
Erik
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Bernhard - I don't really understand what you are asking... I can only reiterate to follow these instructions for creating a custom CSS file...
This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
So, taking "Epsilon" template as an example the file would be called rt_epsilon-custom.css and places in /templates/rt_epsilon/css folder.
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.
-
-
-
- Sanjay Rath
- Sr. Rocketeer
- Posts: 124
- Thanks: 2
- Teacher, Civil Service, Engineer
-
For Wordpress we have to attach it to style.css else the styles are not adding automatically. For example, rt_vermilion-custom.css when placed in ...wp-content/themes/rt_vermilion/css is not automatically imported by Gantry. If instead we add the import code in the style.css this works fineI wonder why?
@import url('css/rt_vermilion-custom.css'); - Last Edit: 10 years 3 months ago by Sanjay Rath. Reason: code needed to be added
- 'Namaste' from Sanjay Rath
"In one word, this ideal is that you are divine." Swami Vivekananda.
-
-
-
- bweb
- Rocketeer
- Posts: 52
- Thanks: 0
-
I'm having problems with the CSS override file working. Here's what I have done.
1. I have created the file: rt_vermilion-custom.css
Added this to CSS file:
#rt-header .rt-social-buttons .rt-block {padding: 15px 15px 0; margin: 0px 0px 0px 0px ;}
#rt-header .rt-logo {padding: 15px 10px 5px 10px;}
#rt-header {margin-bottom: 0px;}
2. Placed this file in the folder: ../wp-content/themes/rt_vermilion_wp/css/
3. And then I added: "@import url('css/rt_vermilion-custom.css');" to style.css
4. Placed this file in: ../wp-content/themes/rt_vermilion_wp/
Still do not have overrides working and I'm stumped. Why would you need the style.css addition when you DO NOT advise this in your main documentation? Can someone please update this to make our troubleshooting easier?
Thanks,
Brian
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
This question was about JOOMLA not WORDPRESS - please raise your own topic in the appropriate wordpress forum.
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.
-
-
-
- Nicola Fleming
- Hero Rocketeer
- Posts: 395
- Thanks: 9
-
Hi Mark, here is a link to a tutorial for custom css which I think is out of date now.
www.rockettheme.com/forum/gantry-solved-...-file?start=0#533658
Regards, Nicola
-
Time to create page: 0.058 seconds