Custom CSS for leading blog article
-
-
- baroninn
- Newbie
- Posts: 4
- Thanks: 0
-
Hey rockettheme community
I wanted to share a "How-To" changing the leading blog article CSS
This is good if you want the leading article to stick out from all others.
All other articles will stay the same.
- This will only affect the leading article in a blog
Open this file :/templates/<YourTemplate>/css/template.css
Put this code to the end of the css file :/* Blogg Leading Article */ .rt-leading-articles {background: none) 50% -80px repeat-x; border-radius: 10px; padding: 10px; box-shadow: 5px 5px 42px #888888; margin-bottom: 50px;}
The background image might be different from your template.
Rockettheme offers a wide range of different backgrounds
So you might want to change the <style7> and <gradient-bg3> to your pleasing
I hope this helps someone , it took me a day to figure this out
Here is a picture of how this code will look for the nebulae template.
This image is hidden for guests.
Please log in or register to see it. - Last Edit: 9 years 5 months ago by Kat05.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Thanks for sharing but...
Never, ever change original template files. Do all custom CSS changes in a custom CSS file or they will be overwritten by templates updates otherwise.
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_iridescent would be rt_iridescent-custom.css). 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"
I also wouldn't use an image - I'd use a proper gradient instead. You can use this tool to generate code http://www.colorzilla.com/gradient-editor/ .
Finally, that code might not work in all templates as the template structure can vary too.
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.
-
-
-
- baroninn
- Newbie
- Posts: 4
- Thanks: 0
-
I figured someone would have something to say about that ..
I tried your solution.
created template-custom.css and put it in the same folder as template.css
cut the custom code from template.css and put it inside the template-custom.css
i can see that gantry is loading the file ,,, but its not working
No changes to the website...
So...
But thanks for the comment
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
if you literally mean that file name then that's incorrect - you have to use the real template name not "template"
read my instruction carefully - if you were using audacity template for example you would create a file called
rt_audacity-custom.css and put that in /templates/rt_audacity/css folder
Also, you have to make sure that your statements have sufficient CSS specifity to effect an override of the templates statements too. Google "CSS specifity" to learn more.
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.066 seconds