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 10 months ago
    • I think you should ask that in the WordPress forum.
    • 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
    • Andy Miller's Avatar
    • Andy Miller
    • Preeminent Rocketeer
    • Posts: 9918
    • Thanks: 92
    • Web Kahuna

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 10 months ago
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 10 months ago
    • Hi Andy, does that mean that the customcss functionality is now built-in to all gantry-based templates and all we need to do (if we have previously created the customcss as per Arifin's instructions) is to rename that file [template]-custom.css?

      Another question I have that is related is that by using Arifin's instructions with a slight modification (loading an array of CSS files), I can actually control the loading order of the CSS files, and ensure that my custom CSS is the last to load and therefore has the highest priority in the cascade of external stylesheets. Does this built-in functionality of Gantry address issues where the template's default template.css file sometimes overruled the custom styles I had added to my customcss file unless I used the !important attribute?

      I also modified Arifin's suggested solution to include an array for loading .js files in a specific order. Does Gantry 4.0.x have a built-in functionality for that? Am I using the best solution to add new .js files to the template that will be upgrade/update protected?

      I am using the Voxel template, and also Gantry plain vanilla.
    • Thank you.

      Ali Samii
    • MiD-AwE's Avatar
    • MiD-AwE
    • Jr. Rocketeer
    • Posts: 35
    • Thanks: 1

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 10 months ago
    • Is there a solution like this for the gantry4? I very much want a full page background and gantry 4 does not seem to care that I followed this tutorial. Maybe I'm missing something?

      Sorry for the stupid question, I found the answer: www.gantry-framework.org/documentation/j...-a-custom-stylesheet
    • Last Edit: 7 years 10 months ago by MiD-AwE.
    • A wise person will not attempt to "reinvent the wheel" but use it along the way to greater things. GNU/GPL is the wheel of our age.
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 10 months ago
    • MiD-AwE's Avatar
    • MiD-AwE
    • Jr. Rocketeer
    • Posts: 35
    • Thanks: 1

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 10 months ago
    • Arifin FinLy wrote:
      MiD-AwE wrote:
      Is there a solution like this for the gantry4? I very much want a full page background and gantry 4 does not seem to care that I followed this tutorial. Maybe I'm missing something?
      For Gantry 4, there is a documentation for this
      www.gantry-framework.org/documentation/j...-a-custom-stylesheet
      Thank you.
    • A wise person will not attempt to "reinvent the wheel" but use it along the way to greater things. GNU/GPL is the wheel of our age.
    • ismadman's Avatar
    • ismadman
    • Sr. Rocketeer
    • Posts: 186
    • Thanks: 3

    Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 9 months ago
    • I followed this tutorial www.gantry-framework.org/documentation/j...-a-custom-stylesheet and it wouldn't show that my custom.css file was loading in firebug ( rt_fracture-custom.css )
      After I cleared my gantry caches in joomla then they loaded and worked as advised.
      Seems no-one else has had this problem so I'm wondering why mine wouldn't show until clearing those caches.
    • 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
    • Hi!
      Please answer this:
      Does adding a custom css file override other properties ?

      I tried changing the text color of the top menu to red but it's not overriding..

      I see in firebug that the property is loaded but it's not override the older one.

      How can I resolve this?

      Here is my website:
      funkycyclewear.com/
    • 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
    • as Arfin explained you need to add some css specificity to your rules.
  • Re: Tutorial - How to Add Custom CSS File

    Posted 7 years 8 months ago
    • Thank you for your reply.

      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 used the same css specificity as it is in the core gantry fusionmenu css file.

      I thought that the [template_name]-custom.css file should override the default css every time...

      Thank you.

Time to create page: 0.108 seconds