Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Styling the Phone Link in Agility 3 Top Header Area
Avatar
Penni Smith
Foresthill, CA
Member
Members

Community Member
Forum Posts: 17
Member Since:
December 31, 2012
sp_UserOfflineSmall Offline
1
May 31, 2017 - 5:42 pm
sp_Permalink sp_Print

I am trying to find the proper selector to change the coloring of the phone link in the top header area. I have tried

#phone_number a

.phone_link a

#top_header_area a

#top_header_area #phone_number a

a .phone_link

p.phonelink a

and probably some other variations I don't remember.  Nothing works.  The selector a{} styling seems to prevail.

I am using the default coloring, no changes, and the phone number and heading are barely visible.  I don't really understand why you don't have them colored differently.  I was able to change the heading color using #top_header_area .heading as a selector, but have not been able to find the right selector combination that will change the link coloring. 

Avatar
Pierre Cote
Moderator
Members

Moderators

Community Member
Forum Posts: 1160
Member Since:
September 21, 2014
sp_UserOfflineSmall Offline
2
May 31, 2017 - 6:49 pm
sp_Permalink sp_Print

Hi

It would help if you could share the site link of the site, thanks.

Pierre ( postrophe )

Avatar
Penni Smith
Foresthill, CA
Member
Members

Community Member
Forum Posts: 17
Member Since:
December 31, 2012
sp_UserOfflineSmall Offline
3
June 6, 2017 - 3:40 am
sp_Permalink sp_Print

I really don't see why a link would matter -- this is part of Agility.  But the site is currently at http://sitedev.wordandwebsmith.com/.

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
4
June 6, 2017 - 7:29 am
sp_Permalink sp_Print

OK, so let's look at your selectors to see why it didn't work:

  1. #phone_number a - there is no element on the page with an id of phone_number - thus this won't work
  2. .phone_link a - this will work - there is a p tag with the class of phone_link and it contains an a tag
  3. #top_header_area a - this will work too - there is a div with the id of top_header_area and it contains the a tag.  However this is way too broad a brush and #2 above would be better
  4. #top_header_area #phone_number a - again, there is nothing on the page with the id of phone_number.  It won't work
  5. a .phone_link - there is no a tag containing something with the class of phone_link - this won't work
  6. p.phonelink a - there is no p tag with the class of phonelink on the page - it won't work.

The HTML hierarchy is:

<div id="top_header_area" class="area_wrapper">
   <div class="page_wrapper">
     <div id="top_header_columns" class="columns_2">
       <div class="half">
         <div class="phone_number">
           <p class="phone_link">
             <a href="tel:+5302100173">(530) 210-0173</a>

Selectors that would be good practice -  in order of Rick's preference

  1. .phone_link a
  2. .phone_number .phone_link a
  3. #top_header_area .phone_link a
  4. .phone_number a

Selectors that would work that wouldn't be good practice - from bad to worse

  1. .half .phone_number .phone_link a
  2. #top_header_columns .half .phone_number .phone_link a
  3. .columns_2 .half .phone_number .phone_link a
  4. .columns_2 .half a - this one is probably the worst in that it works but is way too generic and thus will affect too many other links
  5. and lots lots more.

So how do you figure this out yourself?

There is a pattern for selectors.

  1. First - named element must actually exist and exist within the hierarchy of the element you are trying to affect.  So since "phonelink" doesn't exist it can't be used in the selector.
  2. The container is on the left and the contained is on the right.  So the a tag is contained in a p tag with the class of phone_link.  The container on the left is then phone_link and the contained is a - thus .phone_link a
  3. Which means that the space in between pieces of a selector indicate a parent/child - container/contained relationship.  You know this relationship exists in the selector .phone_link a because of the space between .phone_link and a.
  4. The corollary then is that the lack of space that there isn't a parent/child relationship.  Thus p.phone_link has no space so you know that the p and the phone_link are one and the same element.  Similarly #top_header_area.area_wrapper refers to the main wrapping div - while #top_header_area .area_wrapper refers to an element that doesn't exist.

 I gotta go for a walk - I will return

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
5
June 6, 2017 - 8:44 am
sp_Permalink sp_Print

Wow - I sure said #4 poorly.  Let's try the corollary again.

So the space between ".phone_link" and "a" in ".phone_link a" indicates a parent/child relationship with "phone_link" being the parent and "a" being the child.  That is the left side of the space is the parent and the right side of the space is the child.

When there is no space - as in "p.phone_link" that indicates a SELF relationship - that is both the "p" and the ".phone_link" refer to the same HTML element.

Note that in the hierarchy above there is no element that can be described by "p .phone_link"  although there is one that can be described by "p.phone_link".  The space is essential for getting it right.

Having said all of this - Agility has a setting for this.  

 

Which solves the need to understand this.

You will find the setting under Skin Design >> Typical Font Styles >> Phone Number Link Style

Avatar
Penni Smith
Foresthill, CA
Member
Members

Community Member
Forum Posts: 17
Member Since:
December 31, 2012
sp_UserOfflineSmall Offline
6
June 7, 2017 - 11:41 pm
sp_Permalink sp_Print

Thanks, Rick.

Did you actually try the CSS?  I had tried .phone_link a.  I tried it again, along with #top_header_area .phone_link a and neither worked.  Then I saw your second response and was able to change the color there, though I had wanted to change it to bold as well.  I still don't understand why the CSS doesn't work as you say it should.

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
7
June 8, 2017 - 6:30 am
sp_Permalink sp_Print

Yes - I tried the CSS.

So if the CSS isn't working the way you expect then...

  1. You have a caching issue - if you are using Chrome it could be browser caching - check the css.css source to make sure you are seeing an updated css file.
  2. You have an error in CSS above the new CSS rules.  By looking at your css.css file I see that you don't have any custom CSS - so this isn't the issue. 

It's probably caching - or something has gone horribly wrong.

Avatar
Pierre Cote
Moderator
Members

Moderators

Community Member
Forum Posts: 1160
Member Since:
September 21, 2014
sp_UserOfflineSmall Offline
8
June 8, 2017 - 8:42 am
sp_Permalink sp_Print sp_EditHistory

Hi

I have tried

Where do you add your new CSS ? You need to add them in your Thesis > Custom CSS.

Pierre ( postrophe )

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
9
June 8, 2017 - 10:38 am
sp_Permalink sp_Print

The fact is that CSS always works as I say it does - my little discourse is 100% accurate both factually and technically.  If it doesn't appear to be working then something else is wrong.

But the basic rules of inheritance and specificity are absolute.  You may as well ask me "If the earth resolves around the sun then why can't I see it today?".  There could be lots of reasons why you don't see the sun but none of them cast doubt on the fact that the earth actually does revolve around the sun.

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
20 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1428

Brian Tozer: 1004

Carolin: 982

Heidi Hafner: 508

John Cunningham: 423

Reece Morrel: 353

Newest Members:

emma62755

sharonmarks

emma80233

Tijs de Jong

Daniel Frey

mutek

Forum Stats:

Groups: 8

Forums: 46

Topics: 6995

Posts: 34796

 

Member Stats:

Guest Posters: 6

Members: 6761

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent