0
Welcome Guest! Login
0 items Join Now

Change the Color of entire Header Position in Gantry Framework

Last Post
Search Topic
    • Labon's Avatar
    • Labon
    • Jr. Rocketeer
    • Posts: 22
    • Thanks: 0

    Change the Color of entire Header Position in Gantry Framework

    Posted 10 years 9 months ago
    #1124777
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22291
    • Thanks: 3228
    • messin' with stuff

    Re: Change the Color of entire Header Position in Gantry Framework

    Posted 10 years 9 months ago
    • You'll need a custom css file...

      This is how to create a custom CSS override file 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 [yours would just be 'gantry']). 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"

      More here: www.gantry-framework.org/documentation/j...custom_stylesheet.md
      Even more here: www.rockettheme.com/forum/free-joomla-st...-or-less-custom-file


      drop this in your custom css file:
      #rt-header {
background-color: #fff;
}

    • The following users have thanked you: Labon

    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1124801
    • Labon's Avatar
    • Labon
    • Jr. Rocketeer
    • Posts: 22
    • Thanks: 0

    Re: Change the Color of entire Header Position in Gantry Framework

    Posted 10 years 9 months ago
    • That worked like a charm. I'm sure this is similar code, what about making the background of the feature positions black (accomplished) but I don't know how to make the text, link, and hover link white?
    • Last Edit: 10 years 9 months ago by Labon. Reason: Added more detail
    #1125280
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22291
    • Thanks: 3228
    • messin' with stuff

    Re: Change the Color of entire Header Position in Gantry Framework

    Posted 10 years 9 months ago
    • Always check the Styles tab in the Template Manager > default MASTER template first to see if you can modify any stylistic settings there first... then for custom CSS get familiar with Firebug or Chrome Developer Tools (my preference)

      Inspect HTML and CSS in real-time with Developer Tools:
      developers.google.com/chrome-developer-tools/
      developer.mozilla.org/en-US/docs/Tools

      In Chrome I went to your site... I highlighted "Address" (a module title in the Features position) and right-clicked and went to "Inspect Element"... in the 'Style' tab/pane on the right I see the following CSS coding setting the styling for this element:
      .title, .component-content h2 {
color: #303030;
text-shadow: 1px 1px 0 #ffffff;
border-bottom: 1px solid #d1d1d1;
-webkit-box-shadow: 0 1px 0 #ffffff;
-moz-box-shadow: 0 1px 0 #ffffff;
box-shadow: 0 1px 0 #ffffff;
}
.title, .component-content h2 {
font-size: 28px;
line-height: 30px;
font-weight: normal;
letter-spacing: normal;
margin-top: 0;
padding-bottom: 15px;
margin-bottom: 15px;
}

      So to make the Text white we would place this in our custom css file:
      .title, .component-content h2 {
color: #fff;
}

      So... maybe you wanted the link like that... just repeat that process on the link... I'll do "hover" next...

      I right clicked on "This email address is being protected from spambots. You need JavaScript enabled to view it." and went to inspect element... in my main 'Elements' tab/pane I see the HTML as:
      <a href="mailto:bvhaase@frontier.com">bvhaase@frontier.com</a>

      so I right click on that code in the Elements pane and go to "Force element state: hover" --- now in the 'Styles' tab/pane I can see this code is set:
      a:hover {
color: #303030;
}

      //quick note: for Hover code you generally want the "parent" element... so if that was wrapped in an unordered list for example we'd set the <li> tag to Hover

      So we could drop that in our custom css file and change the hex value... but it's gonna change that sitewide since it isn't any more specific than an "<a>" tag... so if it were me I'd adjust the code like this:
      #rt-feature a:hover {
color: #303030;
}
    • Last Edit: 10 years 9 months ago by Matt.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1125293
    • Labon's Avatar
    • Labon
    • Jr. Rocketeer
    • Posts: 22
    • Thanks: 0

    Re: Change the Color of entire Header Position in Gantry Framework

    Posted 10 years 9 months ago
    • I think I understand most of what you wrote. Except the code on making the text white:

      .title, .component-content h2 {
      color: #fff;
      }

      Will that make all module headings white? or only the ones in featured?

      Woud the correct code be:
      #rt-feature .title, .component-content h2 {
      color: #fff;
      }

      For me this is a big step so I thought I'd ask as I get started in attempting the steps and then I'll test to see what happens.

      Thanks again!
    #1125317
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22291
    • Thanks: 3228
    • messin' with stuff

    Re: Change the Color of entire Header Position in Gantry Framework

    Posted 10 years 9 months ago
    • Labon wrote:
      Will that make all module headings white? or only the ones in featured?
      All module titles AND any <h2> tags in your Articles (component-content is the joomla area for mainbody/articles)... including the Article title itself

      Labon wrote:
      Woud the correct code be:
      #rt-feature .title, .component-content h2 {
      color: #fff;
      }

      It'd be:
      #rt-feature .title {
color: #fff;
}

      New to HTML/CSS? Learn for FREE:
      www.codecademy.com/tracks/web
    • Last Edit: 10 years 9 months ago by Matt.

    • The following users have thanked you: Labon

    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1125325

Time to create page: 0.088 seconds