Highlighted

Change text color of only one heading/shift button down

Explorer ,
Feb 06, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

Views

253

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Change text color of only one heading/shift button down

Explorer ,
Feb 06, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

Views

254

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 06, 2019 0
LEGEND ,
Feb 06, 2019

Copy link to clipboard

Copied

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;

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2019 1
Explorer ,
Feb 06, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2019 0
Adobe Community Professional ,
Feb 06, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2019 0
Explorer ,
Feb 06, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2019 0
Adobe Community Professional ,
Feb 06, 2019

Copy link to clipboard

Copied

Increase the specificity of the rule:

.main-navigation .march-for-meals a {

     color: brown;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2019 0
Adobe Community Professional ,
Feb 07, 2019

Copy link to clipboard

Copied

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>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2019 0
LEGEND ,
Feb 07, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Kevin+E.  wrote

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

Have you also uploaded your css stylesheet as I don't currently see the css selector below include in it?

.march-for-meals a {

color: brown;

}

You've added the class to the <li> I can see that.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2019 0
Explorer ,
Feb 07, 2019

Copy link to clipboard

Copied

This one did it...thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2019 0
Explorer ,
Feb 07, 2019

Copy link to clipboard

Copied

I believe I have. What specific style sheet should it be?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2019 0
LEGEND ,
Feb 07, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Kevin+E.  wrote

I believe I have. What specific style sheet should it be?

There is only one stylesheet linked to your page:

multiColumnTemplate.css

The css selector should have been in that stylesheet BUT it wasnt. However If this is only temporary then using an inline css style, as suggested, is ok. You don't need the class="march-for-meal" applied to the <li> since youre not using the css selector workflow.

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

Now all you have to do is ensure your inline css style is applied to all your pages where you want the link to be a different color as it doesn't look like you are using a workflow which automatically includes your navigation on every page.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2019 0
Adobe Community Professional ,
Feb 07, 2019

Copy link to clipboard

Copied

<it doesn't look like you are using a workflow which automatically includes your navigation on every page.>

A very good point.  Server-Side Includes for sitewide navigation are a must have.

Server-Side Includes with PHP

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2019 0
Adobe Community Professional ,
Feb 06, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2019 1
Explorer ,
Feb 06, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2019 0