0
Welcome Guest! Login
0 items Join Now

Tutorial - How to Add Custom CSS File

  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 11 months ago
    • Thank you for this Arifin. This tutorial has helped me understand what is going on with CSS. Please keep up the good work.

      P.S. I wish people would not use strong terms when criticizing work such as this one. It would be more helpful to just ask your questions in a professional manner. It gets frustrating sorting through that to get what you intended to say and what I need to do to get it working.

      Thanks again....
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29361
    • Thanks: 954
    • Volunteer

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 11 months ago
    • Hayat's Avatar
    • Hayat
    • Sr. Rocketeer
    • Posts: 138
    • Thanks: 1

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 11 months ago
    • Great tutorial, thank you!
      I have a little question.
      Is the custom CSS file only for the new css codes that I add?
      Or can I use it as a way to save all the changes I make to the templates (just in case an updated version of the templates comes up, I don't want to loose all my formatting)

      If I change something in my usual css file, say this:
      /* Core */
      body, a:hover, #rt-main .component-block .noblock .module-surround {color: #323232;}
      a {color: #F85200;}

      (I changed the colour of the font)
      Should I place it in my custom CSS file just like this?
      So even if the new css file has another colour, it will take the data from my custom file?

      Thank you.
    • Aurna's Avatar
    • Aurna
    • Newbie
    • Posts: 7
    • Thanks: 0

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 11 months ago
    • Hi there

      Hoping someone can help. I've been playing around with the preset's and custom css, and so far it'a all worked fine. I was able to create a custom css page and added it to the .index.php and it loaded fine, on every single page of the site.

      What I would like however is to use several preset's on the website. So green menu /background 1 for page 1, green menu/background 2 for page 2 etc.

      I worked out how to do this and have quickly used up my 8 preset's. So decided to try make my own custom preset. I've copied one of the sets and added in the images (Style 9) and the Style9.css in the appropriate folders and got it to show in Gantry as a style selection (by adding it to gantry.config.php) and although it says it's selected Style 9, when I inspect the page in Firebug it's actually loaded Style 8.

      http://www.aurna.co.uk/tsw-templar

      So the question is, how do I create a preset which includes it's own images folder and css sheet and get it on it's own page without it affecting the other pages on my website.

      I am a total novice, so please be gentle!
      Thanks
      Mel
    • MasterH's Avatar
    • MasterH
    • Sr. Rocketeer
    • Posts: 137
    • Thanks: 1

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 11 months ago
    • I changed the font-size for all modules, but i want to change it for 1 module.
      How can i add this in the Custom CSS? Can i add a module id (how)?
      .module-content ul li a {font-size: 1em;line-height: 1.8em;}
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 11 months ago
    • Wondering similar to a poster above: Can I use this file to save ALL custom changes? For instance, I followed a tutorial on how to add the social media buttons to the top of the Fresco template, and this required making some code changes to several different files throughout the site. I can see how making those code changes in the core files, then clicking to update a template or module within J2.5 might break all those carefully-made changes. Thus, being able to make these changes in a file that will NOT be changed by automatic updates makes a LOT of sense.

      Haven't tried the custom changes yet, but I have uploaded the proper files and expect to see if it's working for me shortly.

      Thanks for a great tutorial! As others have said, it would be great if this was made standard in all RT templates.

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

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 11 months ago
    • It depends on how the 3rd party stuff is written really. If it has its own naming convention then i think you can use the overriding custom.css. 8)
    • 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 11 months ago
    • Ok, having a tiny little problem here. I'm sure it could be fixed with this specificity thing, but honestly my head is having a really hard time wrapping itself around the info on that page. I'm sure this is a simple thing, so I'm hoping someone can just tell me what I need to change. Sometimes if I see an actual example related specifically to what I'm trying to do, it will help my brain grasp the complexities of the issue at hand better and allow me to move forward with OTHER similar issues easier.

      I've loaded the mycustomcss.css file, and it does seem to at least be taking care of my social icons customizations, but I also tried to change the height and width of the logo area using this file and it doesn't seem to be overwriting the original template.css styling yet.

      www.yourbusybee.com/rmsbeta/

      Thanks in advance.

      ~Laura
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 11 months ago
    • proton5's Avatar
    • proton5
    • Hero Rocketeer
    • Posts: 368
    • Thanks: 0

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 10 months ago
    • Hi,

      I recommend strongly include the files suggested by Arifin FinLy in www.rockettheme.com/forum/index.php?f=33...06162&rb_v=viewtopic in every template since now and forever.

      I have a developer subscription with gavick.com and they already have included that modification in every template since the begining of this year if I good remember.

      Do you have plans to do that?.

      Regards.

Time to create page: 0.114 seconds