Skip to main content
Inspiring
February 6, 2019
Answered

Change text color of only one heading/shift button down

  • February 6, 2019
  • 2 replies
  • 1072 views

Hello...I am trying to make a couple of small changes that is giving me a huge challenge. On the page, I am trying to change the color of the text for the heading March for Meals only.  Every way I have tried, it ends up changing the color of all of the headings

The second issue is the Donate Now button. I am trying to move it so that it appears directly under the social media icons.

Any assistance would be greatly appreciated!

Aging Disability and Transit Services of Rockingham County

This topic has been closed for replies.
Correct answer BenPleysier

Nope...still no go. I put it at the end of the single page template and multi-column template css pages.


You have got many preventable errors in your document that are most likely creating your problems. Have a look here for more Showing results for http://www.adtsrc.org/index-2-19.html - Nu Html Checker

Despite these errors, you could place an in-line style rule that will change the colour of the menu-item. Just add the highlighted:

<li class="march-for-meals"><a href="march.html" style="color: brown">March for <br>Meals</a></li>

2 replies

Nancy OShea
Community Expert
Community Expert
February 6, 2019

Unless I'm missing something, March for Meals is not a heading <h1>, <h2> or <h3>.  It is a text link inside your navigation bar.   Is that the text color you want changed and if so why? 

Typically all hyperlinks are styled the same way to give users a visual indication of  which ones they have already visited and where they are on the site currently.   Consistent link styles are especially important when working with aged and disabled target users.  Please refer to the latest  Web Accessibility Guidelines.

What are the Web Content Accessibility Guidelines?

Link styles come from the 6 CSS pseudo-classes.

  • a  -- any link
  • a:link -- an unvisited link
  • a: visited -- a visited link from the browser's history folder
  • a:hover -- on mouseover (has no effect on touch screens)
  • a:active -- on click / tap and hold
  • a:focus -- on focus via tab or arrow keys
Nancy O'Shea— Product User & Community Expert
Kevin E.Author
Inspiring
February 7, 2019

Nancy, this is simply a case of doing what the client wants. They want to change the color of that particular link to make it stand out during the promotion month.

Legend
February 6, 2019

Easy one first.

I assume by 'heading March for Meals only' you are refering to the navigation item in the orche colored bar?

If so give your <li> tag a class name:

<li class="march-for-meals"><a href="march.html">March for <br>Meals</a></li>

Then add the below css selector to your css stylesheet:

.march-for-meals a {

color: brown;

}

Now for the more complex one.

Contain your social icons and the donate button in their own <divs>, wrapped in a parent <div> (see below)

<div class="social-icons-donate">

 

<div class="social-icons">

<a href="http://www.twitter.com/adtsrc_nc"><img src="images/twitter.png" title="Link to ADTS Twitter feed " width="35" height="35"  /></a> 

<a href="http://www.instagram.com/age_in_rockingham_county"><img src="images/instagram.png" title="Link to ADTS Instagram page " width="35" height="35"  /></a> 

<a href="http://www.facebook.com/adtsrc"><img src="images/facebook.png" title="Link to ADTS Facebook page " width="35" height="35"  /></a>

</div>

<!-- end social-icons -->

<div class="donate">

<a href="https://adtsrc.networkforgood.com/projects/68585-annual-campaign"><img src="images/Donate-Now.png" title="Click to donate to ADTSRC " height="35"  /></a>

</div>

<!-- end donate -->

</div>

<!-- end social-icons donate -->

</ul>

<!--end main-navigation-->

Then add the following css selectors to your css stylesheet:

.social-icons-donate {

display: flex;

flex-direction: column;

}

.social-icons {

display: flex;

justify-content: space-between;

}

@media screen and (max-width: 768px) {

.social-icons {

justify-content: center;

}

}

Kevin E.Author
Inspiring
February 7, 2019

Okay, I'm tackling the "easy" one first. I have made the changes and uploaded them, but the text color hasn't changed.

John Waller
Community Expert
Community Expert
February 7, 2019

Put the ".march-for-meals a" rule at the bottom of the CSS sheet, after the main navigation style rules.