RocketTheme - TOPIC: Tutorial - How to Add Custom CSS File (9/21)

Welcome Guest! Login

0 items Join Now

- hotscotch
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- Henning wrote:
  no wonder ... you have css compression on. Disable that to see the file ...
  Hi Henning,
  
  Thanks for you quick response! I'm not seeing that option under the Panacea Template. Do you know where else it might be?
  
  -scott
#787662
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- RokGZipper-plugin ... disable that.
#787663
- hotscotch
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- hotscotch wrote:
  Henning wrote:
  no wonder ... you have css compression on. Disable that to see the file ...
  Hi Henning,
  
  Thanks for you quick response! I'm not seeing that option under the Panacea Template. Do you know where else it might be?
  
  -scott
  Ok.. I found it. It's under the ADVANCED TAB and called GANTRY ZIPPER.
  
  I'll give it another try and see if I make any progress in changing the main body background.
  
  -scott
#787665
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- I can see it now
  The the Gantry GZipper woud have been my next guess ...
  
  Use compression only when your site is 100% done ...
#787672
- hotscotch
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- Henning wrote:
  I can see it now
  The the Gantry GZipper woud have been my next guess ...
  
  Use compression only when your site is 100% done ...
  I really like the Gantry system and am slowly getting used to it.
  
  I'm trying to change the #rt-body-bg2 (since there lies the #FFFFFF color) and have added the following code to the mycustomstyles.css:
  
  #rt-body-bg2 {background-image: url(..templates/rt-panacea/images/body/light/main_panel_01.png) no-repeat !important;}
  
  Nothing is happening.
  
  I also tried adding changing the syntax to:
  
  div#rt-body-bg2 {background-image: url(..templates/rt-panacea/images/body/light/main_panel_01.png) no-repeat !important;}
  
  Still nothing. This color is declared in the template as part of the Panacea Style Tab. Won't the mycustomstyles.css override it?
  
  -s
#787678
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- the rule should work but the image does not exist:
  
  vortexwellness.com/templates/rt-panacea/...ht/main_panel_01.png
#787683
- hotscotch
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- Henning wrote:
  the rule should work but the image does not exist:
  
  <a class="postlink" href=" vortexwellness.com/templates/rt-panacea/...ht/main_panel_01.png "> vortexwellness.com/templates/rt- ... nel_01.png</a>
  I missed typed it in the post:
  
  it should be:
  
  vortexwellness.com/templates/rt_panacea/...ht/main_panel_01.png
  
  I'm still not seeing a change. In fact, the code appears to get stripped away, although you can see it when you edit the mycustomstyles.css.
  
  The template has a drop down menu for background color choices but no images.
  
  Doesn't the mycustomstyles.css override it?
#787722
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- Did you clear your browser cache?
  Your site looks ok now. In fact it looks really nice
  
  Btw. you need to add enough css-specificity to your new css rules
  coding.smashingmagazine.com/2007/07/27/c...ngs-you-should-know/
  its not enough to just add a rule to a custom css-file ...
#787766
- hotscotch
- Jr. Rocketeer
- Posts: 39
- Thanks: 0
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 8 months ago
- Thank you!
  
  Using Firebug, I wound up copying a whole block of code rather than just the #div and pasted it into mycustomstyles.css. I had to use an absolute path for the image, change some items to !important and it popped in.
  
  After this project is done I might even try to add a new Style Feature to the template's GUI, which would be really cool and make it a lot easier to make background changes.
  
  At least the hard part is done and I can now color some menu li and make the content more attractive.
  
  Thanks again for your help!
  
  Best,
  Scott
#787774
- Dan Walker
- Elite Rocketeer
- Posts: 529
- Thanks: 21
- Designer/Developer
Re: Tutorial - How to Add Custom CSS File

Posted 12 years 7 months ago
- One difficulty with this approach is that with the code, mycustomstyle.css is loaded before template.css, so if the selector is the same, template.css will override mycustomstyle.css. The solution is to replace the addstyle code in the mycustomstyle.php file with the following code:
  $gantry->addStyles(array('template.css','mycustomstyle.css'));
  It would be nice to add this as an integral feature of gantry and make sure that mycustomstyle.css is loaded last of all stylesheets.
- Dan Walker - Web Designer & Developer @ Top Webs Network
  Custom Joomla & Wordpress Websites
#806904