Tutorial - How to Add Custom CSS File
-
-
- Martin Tomczyk
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
-
-
-
- Ruth
- Rocketeer
- Posts: 55
- Thanks: 0
-
Arifin FinLy wrote:
Ruth wrote:As I mentioned, I solved my issues using the com_gantry style sheets - all is great here.I'm working with the straight gantry template - to build a custom version. I would like to accomplish two things - one - I would like to add a body background image vs. the color within the style chooser - The other, I would like to add a background image to the entire header which is the top rt.container.Hello Ruth,
I've added a custom style sheet and it's listed in the index.php of the template. Some small changes that I've made such as adding module styling have worked, but not adding the background image. I even went so far as to comment out the background color in Style1 which is my default and add it there as well as in my custom style sheet but no joy. (cleared the cache)
After reading this post I modified the mycustomsyle.php as custom.php and also modified the file to reflect that and loaded it just in case that might also help, but again no joy.
I haven't attempted the header image yet, but was trying to solve this first.
Any help would be much appreciated. There are just a few cosmetic changes and then this site is done and I can flip the IP.
Thanks in advance
Ruth
Could you please open a new thread as this thread is just a tutorial how to "add" the custom css file but not how to "custom" the style? You may reply me back here with your thread and I will check to tweak or customize it
Thanks
-
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
-
Ruth wrote:
Arifin FinLy wrote:Great. Glad to hear you solved it, Ruth. Feel free to open a new thread if you have any further issue. Will be happy to assist youRuth wrote:As I mentioned, I solved my issues using the com_gantry style sheets - all is great here.I'm working with the straight gantry template - to build a custom version. I would like to accomplish two things - one - I would like to add a body background image vs. the color within the style chooser - The other, I would like to add a background image to the entire header which is the top rt.container.Hello Ruth,
I've added a custom style sheet and it's listed in the index.php of the template. Some small changes that I've made such as adding module styling have worked, but not adding the background image. I even went so far as to comment out the background color in Style1 which is my default and add it there as well as in my custom style sheet but no joy. (cleared the cache)
After reading this post I modified the mycustomsyle.php as custom.php and also modified the file to reflect that and loaded it just in case that might also help, but again no joy.
I haven't attempted the header image yet, but was trying to solve this first.
Any help would be much appreciated. There are just a few cosmetic changes and then this site is done and I can flip the IP.
Thanks in advance
Ruth
Could you please open a new thread as this thread is just a tutorial how to "add" the custom css file but not how to "custom" the style? You may reply me back here with your thread and I will check to tweak or customize it
Thanks
-
-
-
- Malestorm
- Rocketeer
- Posts: 61
- Thanks: 0
- Art Restoration & Sales, Tech Contractor
-
Arifin --
Concerning the problem with the ordering of the CSSMartin, I am sorry, but I would not consider this is an issue related to my tutorial. I just provided the way how you can add custom css to your Gantry site. I don't have idea how about re-ordering them. Could you please kindly open a new thread asking for this request about re-ordering the css file in your site?
Don't you really feel your statement is a cop out. Your solution in the tutorial is not working for overriding CSS - and that is probably the primary reason people are wanting to add custom css.
If you cannot figure out a fix for the problem your should update your original posting in the tutorial to indicate the limits of the solution so others don't waste time implementing a solution that does not really work.
-
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
-
Arifin --
Concerning the problem with the ordering of the CSS
.....
Don't you really feel your statement is a cop out. Your solution in the tutorial is not working for overriding CSS - and that is probably the primary reason people are wanting to add custom css.
.......
Hello Malestorm,
I do understand your inquiry about the ordering of the CSS files, but again, this is really different scenario with the tutorial I provided here.
If you code your css correctly with more specific selector, I am very sure it will work well as I have done a lot of stuff like that to fix or customize the members issue in this forum. I will explain more about this in the next reply.
The primary reason why I create this tutorial is, some members here ask how to add custom css code without editing the template.css so they don't need to worry if they update their template and get the original files overwritten.
To explain more about what I provide in this tutorial, I will write it again here:
- This is a tutorial how to add a custom css file in your Gantry based site without needing to hack any original core file or template file, and without worrying to lose the changes when the template or Gantry get updated.
- This is NOT a tutorial how to ordering the css file loaded or called in your Joomla
- This is also NOT a tutorial how to customize your site
Malestorm wrote:.....Again, I think there is nothing wrong here as we have different scenario here. I create this tutorial in my free time to help people here, so I don't need to waste any other people time. There is no issue I should figure out here.
If you cannot figure out a fix for the problem your should update your original posting in the tutorial to indicate the limits of the solution so others don't waste time implementing a solution that does not really work.
Again, please understand what is my goal to provide this tutorial instead of using "sharp" words, such as "waste time", "If you cannot figure out..", "... does not really work", which against the fact
I provide a tutorial how to use the custom code below and added that in the first thread too.
Hope that makes sense and feel free to give me your thoughts or comment. I will be gladly to explain
-
The following users have thanked you: Rick Ghaly
-
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
-
How to Add Custom CSS Code Correctly
The most frequently asked custom code I found in this forum is, how to reduce the space (margin or padding) for some element. For instant, mostly they are caused by the default .rt-block element. So, I will explain how to use the proper custom css code to override the default code.
1. For example, we want to reduce the .rt-block padding and margin in showcase. In Gantry template, you will find:2. With firebug, you will see that the default margin and padding has been defined as:<div id="rt-showcase"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block"> Content here </div> </div> </div>
/* Grid Block */ .rt-block {padding: 15px;margin-bottom: 10px;position: relative;}
3. If we want to override the padding and the margin and put it in the custom css file above, please check the following:
WRONG CODEReason why it will not work well:.rt-block {padding: 5px; margin-bottom:5px;}
- There are many other elements that use .rt-block and they will get affected by this change
CORRECT CODEPlease note that you need to put #rt-showcase in front of .rt-block, so we can ensure that the .rt-block which get affected by the custom code is only the one inside the #rt-showcase div.#rt-showcase .rt-block {padding: 5px; margin-bottom:5px;}
-
-
-
- Ed Croteau
- Sr. Rocketeer
- Posts: 173
- Thanks: 0
-
I'm sorry but I installed the PHP and CSS files, made my changes to the CSS but no luck on the latest Crystalling with latest Gantry.
I don't see a "feature" to enable in Gantry nor do I see how to "enable" this new functionality if it is necessary. Any other suggestions how to get it to work ?
Thanks,
Ed
-
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
-
Ed Croteau wrote:
I'm sorry but I installed the PHP and CSS files, made my changes to the CSS but no luck on the latest Crystalling with latest Gantry.By the term "installed" you mentioned, did you put the php file to features folder and the css file to the css folder? Could you please provide your website link so we can see and check the problem?
I don't see a "feature" to enable in Gantry nor do I see how to "enable" this new functionality if it is necessary. Any other suggestions how to get it to work ?
Thanks,
Ed
-
-
-
- Ed Croteau
- Sr. Rocketeer
- Posts: 173
- Thanks: 0
-
Yes, installed by FTP'ing the CSS file and PHP into the template's folders as you describe.
My URL is www.jedzebel.com but the button I'm trying to style is not on that page, it's on this page www.jedzebel.com/wholesale-info/wholesale-information.html . As of now I've gone back to putting the <style> tag right in the HTML of the modules/articles on that second page. I can remove the tags so you can see if I see that you are responding quickly (don't want to stay live with no buttons!).
Thanks,
Ed
-
-
-
- Arifin FinLy
- Preeminent Rocketeer
- Posts: 17372
- Thanks: 18
-
Hello Ed,
I checked your site. Could you please disable the Gantry Cache and Gzipper first? After that, please clear the Joomla caches as sometimes the change will be only shown after you clear the caches.
-
Time to create page: 0.078 seconds