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 3 months ago
    • I have done the same thing to my Graffito template - as far as adding a mycustomstyle.css to the css directory and the mycustomstyle.php to the features directory but it also is not working.

      I thought by adding those files you would not need to add the code to the index file?
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 3 months ago
    • Which version of Gantry are you guys using?
    • 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 3 months ago
    • Hi there prim!

      I'm under graffito V1.0 and Gantry 4.1.4.

      I was able to run with the following code lines added on my custom CSS file:

      body.main-bg-purple {
      background-size: cover;
      background-color: #007749 !important;
      }

      .main-bg-purple {
      background-color: none;
      background-image: none;
      }
      .main-bg-purple .rt-bg {
      background-image: none;
      }

      But I still keep index.php modified with the style CSS file there. 8)

      Hugs :D
    • BCS Group's Avatar
    • BCS Group
    • Hero Rocketeer
    • Posts: 363
    • Thanks: 2

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 2 months ago
    • Hi
      I want to change the background color of Showcase A module. I assume I have to create a custom css file but I can't get it to work. I want to change the background from black to purple #71487A.

      I downloaded the mycustomstyle.zip - unzipped the the file- uploaded mycustomstyle.php to template feature folder

      Created a custom CSS file

      @charset "utf-8";
      /* CSS Document */
      #rt-showcase .rt-block {background-color: #71487A}

      I loaded it to /public_html/bcs-build2.com/templates/rt_leviathan/css

      Nothing happened.
      Joomla 2.5.8
      www.bcs-build2.com

      Any thoughts?
      bcsgroup
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29361
    • Thanks: 954
    • Volunteer

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 2 months ago
    • Seems to work for me?
      Did you clear your cache?
    • WillRoz's Avatar
    • WillRoz
    • Rocketeer
    • Posts: 55
    • Thanks: 0
    • Developer

    Re: Tutorial - How to Add Custom CSS File

    Posted 6 years 11 months ago
    • Is this information valid anymore?

      I know that since Gantry 4 you can add a custom css file to certain templates by creating a custom css file named 'exact_templatename-custom.css' and placing it in the template's css folder.

      Does this method work for the stock Gantry template as well, or are the instructions provided above still valid?

      Thanks,
      Will
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29361
    • Thanks: 954
    • Volunteer

    Re: Tutorial - How to Add Custom CSS File

    Posted 6 years 11 months ago
    • both ways work ... it's up to you what you like.
      I like do it via feature because I often organize my css in different files.
  • Re: Tutorial - How to Add Custom CSS File

    Posted 6 years 11 months ago
    • I am trying to change the background in the attached document. I added the mycustomstyle.css and mycustomstyle.php files as suggested and included the only code in the mycustomstyle.css file as:

      /* .rt-container.main-surround #rt-header {
      background-color: white !important;
      } */

      As suggested in another post. Is there anything else I need to do? The above is not working.

      This image is hidden for guests.
      Please log in or register to see it.
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: Tutorial - How to Add Custom CSS File

    Posted 6 years 11 months ago
    • Not sure exactly what you're trying to achieve, but several things I can say.

      1. Always include a link to your site.
      2. What template are you using? On what version of Joomla? The custom CSS methods are different for different versions of Joomla and different versions of the Gantry Framework.
      3. The code you put there from your CSS file is commented out. Anything between /* and */ is ignored.

      What you have:
      /* .rt-container.main-surround #rt-header {
      background-color: white !important;
      } */

      What it should be:
      .rt-container.main-surround #rt-header {
      background-color: white !important;
      }

      By commenting out the CSS, you are teeling the browser not to use anything that is commented out.
    • Thank you.

      Ali Samii
  • Re: Tutorial - How to Add Custom CSS File

    Posted 6 years 11 months ago
    • 1. Site = working local on a new site editing the Voxel template.
      2. Joomla 3.0

      I am trying to change the color behind the section and next to where the logo exists. In the picture previously attached it does not appear to be assigned to any position. I want the entire section to be black, without changing the entire theme. Hopefully the new image will help explain.

      This image is hidden for guests.
      Please log in or register to see it.

Time to create page: 0.104 seconds