0
Welcome Guest! Login
0 items Join Now

Roksprocket tabs styling

    • _Mark's Avatar
    • _Mark
    • Sr. Rocketeer
    • Posts: 104
    • Thanks: 0

    Roksprocket tabs styling

    Posted 10 years 8 months ago
    • I hope this is a simple question/solution - on the attached image, the tabs are in grey. I would like to change the colour (specifically the highlight colour for the day of the week, but probably the text colour too).

      Please can anyone advise where I would find this styling information? Or do I have to create a custom css? Many thanks in advance. The template is Rt_paradigm.

      Rgds, Mark
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Roksprocket tabs styling

    Posted 10 years 8 months ago
    • Yes, it can be changed with CSS.

      Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Regards, Mark.
    • The following users have thanked you: _Mark

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • _Mark's Avatar
    • _Mark
    • Sr. Rocketeer
    • Posts: 104
    • Thanks: 0

    Re: Roksprocket tabs styling

    Posted 10 years 8 months ago
    • This message contains only secure information that is visible to MrT, moderators and administrators
    • Last Edit: 10 years 8 months ago by MrT.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Roksprocket tabs styling

    Posted 10 years 8 months ago
    • Use this code...
      .sprocket-tabs .sprocket-tabs-nav > li.active > .sprocket-tabs-inner, .sprocket-tabs .sprocket-tabs-nav > li.active:hover > .sprocket-tabs-inner {
          background-color: red;
          color: blue;
      }

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      Regards, Mark.
    • The following users have thanked you: _Mark

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • _Mark's Avatar
    • _Mark
    • Sr. Rocketeer
    • Posts: 104
    • Thanks: 0

    Re: Roksprocket tabs styling

    Posted 10 years 8 months ago
    • Many thanks - works a treat! What about changing the colour of the item text? Can I add something else to the custom css too?
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Roksprocket tabs styling

    Posted 10 years 8 months ago
    • Use this code...
      .sprocket-tabs-panels > .sprocket-tabs-panel {
          color: blue;
      }

      Learn to use either, Firebug in Firefox, or Chrome Developer Tools in Chrome, they will save you hours on things like this and they're very easy to use.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.060 seconds