0
Welcome Guest! Login
0 items Join Now

Tutorial - How to Add Custom CSS File

  • Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 7 months ago
    • I made the steps what are in your tutorial, but something for me.
      My custom css file is loaded, but the template.css file is override it.
      What can I do about it? (I use Joomla 1.7 and somaxiom template)

      Thanks for help!
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 7 months ago
  • Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 7 months ago
    • Thank you so much Henning!
      I'm sorry for my inattention. I read this post before...
  • Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 7 months ago
    • works for 1.7 as well. for those who wondering like i could
    • YeeP's Avatar
    • YeeP
    • Hero Rocketeer
    • Posts: 287
    • Thanks: 0

    Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 7 months ago
    • I have a css class that is defined directly on an element (js file) via gantry. It is effecting a frameless integration of a forum I am running. I am hoping that I can integrate a new css class that I can call from the suffix of the integration to help get around this. However, from what I hear,
      when a css rule is on a element directly it has priority..

      Here is what I see in firebug:
      <label class="rokradios rokterms rokradios-active" for="terms1">
          <input id="terms1" type="radio" checked="checked" value="all" name="terms" style="position: absolute; left: -10000px;">
          Search for all terms or use query as entered
          </label>

      Js file resides here: /libraries/gantry/admin/widgets/radios/js/radio.js
      /**
           * @version     3.2.8 August 1, 2011
           * @author      RocketTheme http://www.rockettheme.com
           * @copyright   Copyright (C) 2007 - 2011 RocketTheme, LLC
           * @license     http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
           */
           
          var InputsExclusion = ['.content_vote'];
           
          var InputsMorph={version:1.7,init:function(){InputsMorph.rtl=$(document.body).getStyle("direction")=="rtl";InputsMorph.list=new Hash({all:[]});var a=$$(".g-surround input[type=radio]");var d=$$(InputsExclusion.join(" input[type=radio], ")+" input[type=radio]");d.each(function(b){a=a.remove(b);});a.each(function(b,c){InputsMorph.setArray("list","all",b);if(InputsMorph.list.hasKey(b.name)){InputsMorph.setArray("list",b.name,b);}else{InputsMorph.list.set(b.name,[b]);}InputsMorph.morph(b,"radios").addEvent(b,"radios");});a=$$("input[type=checkbox]");d=$$(InputsExclusion.join(" input[type=checkbox], ")+" input[type=checkbox]");d.each(function(b){a=a.remove(b);});a.each(function(b,c){InputsMorph.setArray("list","all",b);if(InputsMorph.list.hasKey(b.name)){InputsMorph.setArray("list",b.name,b);}else{InputsMorph.list.set(b.name,[b]);}InputsMorph.morph(b,"checks").addEvent(b,"checks");});},morph:function(e,d){var h=e.getNext(),g=e.getParent(),f=e.name.replace("[","").replace("]","");if(h&&h.getTag()=="label"){e.setStyles({position:"absolute",left:"-10000px"});if(InputsMorph.rtl&&window.gecko){e.setStyles({position:"absolute",right:"-10000px"});}else{e.setStyles({position:"absolute",left:"-10000px"});}if(InputsMorph.rtl&&(window.opera||window.ie)){e.setStyle("display","none");}if(window.ie7){e.setStyle("display","none");}h.addClass("rok"+d+" rok"+f);if(e.checked){h.addClass("rok"+d+"-active");}}else{if(g&&g.getTag()=="label"){if(InputsMorph.rtl&&window.gecko){e.setStyles({position:"absolute",right:"-10000px"});}else{e.setStyles({position:"absolute",left:"-10000px"});}if(InputsMorph.rtl&&(window.opera||window.ie)){e.setStyle("display","none");}g.addClass("rok"+d+" rok"+f);if(e.checked){g.addClass("rok"+d+"-active");}}}return InputsMorph;},addEvent:function(e,d){e.addEvent("click",function(){if(window.opera||window.ie){if(e.opera){InputsMorph.switchReplacement(e,d);}e.opera=(d=="checks")?false:true;}else{InputsMorph.switchReplacement(e,d);}});if(window.opera||window.ie||(e.getNext()&&!e.getNext().getProperty("for"))){var g=e.getNext(),f=e.getParent();if(g&&g.getTag()=="label"&&(window.ie||(window.opera&&!e.opera))){g.addEvent("click",function(){if((window.opera||window.ie)&&!e.opera){e.opera=true;}e.fireEvent("click");});}else{if(f&&f.getTag()=="label"||(e.getParent()&&!e.getParent().getProperty("for"))){f.addEvent("click",function(){e.fireEvent("click");});}}}return InputsMorph;},switchReplacement:function(l,k){if(k=="checks"){var j=l.getNext(),c=l.getParent(),a="rok"+k+"-active";var i=((j)?j.getTag()=="label":false);var b=((c)?c.getTag()=="label":false);if(i||b){if(i){if(j.hasClass(a)&&i){j.removeClass(a);}else{if(!j.hasClass(a)&&i){j.addClass(a);}}}else{if(b){if(c.hasClass(a)&&b){c.removeClass(a);}else{if(!c.hasClass(a)&&b){c.addClass(a);}}}}}}else{InputsMorph.list.get(l.name).each(function(e){var d=e.getNext(),f=e.getParent();var h=l.getNext(),g=l.getParent();$$(d,f).removeClass("rok"+k+"-active");if(d&&d.getTag()=="label"&&h==d){e.setProperty("checked","checked");d.addClass("rok"+k+"-active");}else{if(f&&f.getTag()=="label"&&g==f){f.addClass("rok"+k+"-active");e.setProperty("checked","checked");}}});}},setArray:function(f,e,h){var g=InputsMorph[f].get(e);g.push(h);return InputsMorph[f].set(e,g);}};window.addEvent("domready",InputsMorph.init); 

      I could do a CTRL-R and replace every instance of "absolute" with "relative" but I would guess that would have a bad effect on gantry radio buttons all together.

      This problem is holding me back from any forward movement on the site as any instance of a radio button on the forum has the text on top of it. If anyone could help I would REALLY appreciate it.
      :oops:
    • spitfire's Avatar
    • spitfire
    • Sr. Rocketeer
    • Posts: 152
    • Thanks: 0

    Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 7 months ago
    • Just what I was looking for THANKS worked perfectly.
  • Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 3 months ago
    • Hi,

      I am new to rockettheme and joomla. I wanted to change the h4 color for my site by creating a new class and inheriting from the current h4 and changing the color . Can you let me know how I can do this?

      Thanks

      Mike
  • Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 3 months ago
    • Hi, I solved it thanks.
    • livetemp_'s Avatar
    • livetemp_
    • Jr. Rocketeer
    • Posts: 23
    • Thanks: 0

    Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 2 months ago
    • Hi Arifin,

      I have joomla 1.7 using syndicate 1.6.2 and gantry 3.2.15, it's a linux setup.

      I can't get mycustomstyle.css to load, the file permissions are correct, it is just not loading in joomla 1.7, when I check firebug, it does not show mycustomstyle.css as a style sheet

      I also have joomla 1.5 install which work great, using firebug on that setup I see the mycustomstyle.css loaded on the right. I performed the exact same setup on joomla 1.7 and it does load it.

      Any ideas? spent ages looking into it..really tearing my hair out at this stage.
      Regards.
    • livetemp_'s Avatar
    • livetemp_
    • Jr. Rocketeer
    • Posts: 23
    • Thanks: 0

    Re: Tutorial - How to Add Custom CSS File

    Posted 12 years 2 months ago
    • Incidentally the last question open to all of course. Appreciate help from any one on the post.

Time to create page: 0.094 seconds