0
Welcome Guest! Login
0 items Join Now

Tutorial - How to Add Custom CSS File

    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • You can try to use !important. Example...

      font-size: 14px !important;
    • Please reply with a direct link to the issue & create a new thread for each new issue.

      A template is only as good as the content that goes into it ;) - DanG
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • I know that...
      Can you please explain how to override the default css without hacking the core gantry css or using the !important property or using a more specificity css because this may not be possible every time.

      I don't want to use the !important property.
      It's not the right way to work.

      Does the custom css file override the default css properties or not?
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • Yes it overrides the default CSS.
    • Please reply with a direct link to the issue & create a new thread for each new issue.

      A template is only as good as the content that goes into it ;) - DanG
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • Hi prim
      Thank you for your reply.
      :)

      Please look here:
      funkycyclewear.com/

      I tried to override the menu text color to red (I know it's ugly but this is for test purposes) and it's not working..

      Can you figure out why?
    • ismadman's Avatar
    • ismadman
    • Sr. Rocketeer
    • Posts: 186
    • Thanks: 3

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • I added through firebug to your custom css file
      .menutop a {
           color: #FF0000 ! important;
      }

      instead of what you have
       
      .menutop li > .item, .roknewspager .active .roknewspager-content, body ul.roknewspager-numbers li, body .roknewspager-numbers li.active, #rt-body-surround .roknewspager .roknewspager-h3 a, .readonstyle-button .readon span, .readonstyle-button .readon .button, .roktabs-wrapper .roktabs-links ul, #rt-body-surround .module-content ul.menu a:hover, .rg-grid-view .tag, .rg-list-view .tag, .rg-detail-slicetag .tag, .rg-detail-filetag .tag, .module-content .menu li#current.active > .item, #rt-main .module-content .menu li.active.current > a, .module-content .menu li#current.active > a {
          color: RED;
      }

      it worked fine
      why are you saying !important isn't correct?

      Your custom css file will always be there and !important will override what you want.
      If you dont want to use !important then you would have to go through the menu classes and id's to override .
    • Why isn't beer free ?
      I OWE DanG : 4
      This image is hidden for guests.
      Please log in or register to see it.

      *Payable when it reaches 24
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • Thank you ismadman.

      What I did is copy the exact css specificity from the fusionmenu.css file.

      I saw that the exact code in the custom css file was not overriding the fusionmenu.css this is why I asked this.

      Please answer this: From what I undersand now is that the custom css file is not overriding when there is an exact css code only if I use the !important property or use a more specificity css code.
      Is it correct?
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • Nobody knows?
      Anyone?
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29361
    • Thanks: 954
    • Volunteer

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • you should not rely on the loading order of css files.
      I would always add some css specificity.
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • Ok
      Thank you for this.
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • I have tried this new Gantry 4 tutorial, but it just won't have any effect on my template's CSS...

      Before I used to do it the following way and it worked.
      www.rockettheme.com/magazine/dec-2011/13...cket-theme-templates

      I am using the Panacea template and the name of the file I have created is "rt-panacea-custom.css".
      "rt-panacea" is the name of the template folder...I also tried "panacea-custom.css" and plain old "custom.css" but it still won't work...what am I doing wrong?
    • You can call me George
      J2.5.8, Panacea v1.6.6 - www.eks-ik.eu
      J2.5.8, Syndicate 1.6.5

Time to create page: 0.096 seconds