The :active pseudo-selector governs the status of the link while you
are actively pressing down on it. It does nothing for the “you are
here” that you want it to have. If you’re using the CSS Menu, it has a
preference for “show current page” and you should look at the options
available to you in that context. If you’re not using CSS Menu, then
you will need to add a classname to your link, and write a matching
style to give it a unique look. So for example, you make a style like
this:
a.here {
color: #ff9;
font-style: bold;
}
Then select the link that you want to be “here” and in the Hyperlink
dialog, click Extended and New, then enter:
Name: class
Value: here
Now when you visit this page, with the here classname added to this
link, you should see it as yellow and bold text.
Walter
On Mar 3, 2011, at 1:01 PM, Julie Maxwell Allen wrote:
Good afternoon,
I am catching up with suggestions that you have made about my new
site.
I have gone to the inspector when the menu html is clicked. I went
under links and chose a color to go visited, hover, and active.
I chose the active color to be yellow. but It does not work. it
shows as green (visited)
The style you have mentioned below is made in edit - styles?
J
Sent from my iPhone
On Mar 3, 2011, at 1:08 PM, Walter Lee Davis email@hidden wrote:
The :active pseudo-selector governs the status of the link while you are actively pressing down on it. It does nothing for the “you are here” that you want it to have. If you’re using the CSS Menu, it has a preference for “show current page” and you should look at the options available to you in that context. If you’re not using CSS Menu, then you will need to add a classname to your link, and write a matching style to give it a unique look. So for example, you make a style like this:
a.here {
color: #ff9;
font-style: bold;
}
Then select the link that you want to be “here” and in the Hyperlink dialog, click Extended and New, then enter:
Name: class
Value: here
Now when you visit this page, with the here classname added to this link, you should see it as yellow and bold text.
Walter
On Mar 3, 2011, at 1:01 PM, Julie Maxwell Allen wrote:
Good afternoon,
I am catching up with suggestions that you have made about my new site.
I have gone to the inspector when the menu html is clicked. I went under links and chose a color to go visited, hover, and active.
I chose the active color to be yellow. but It does not work. it shows as green (visited)
That way you won’t have to worry about applying it anywhere. Simply
make it once, and then every page will have it. Then apply it using
the Hyperlink / Extended / New technique outlined here. Just to be
painfully clear – don’t apply this style to any text, anywhere in
your site. Just make the style and then manually apply the “here”
class using Extended, that way you will know that you have applied it
to the Link proper, not to a Span within the text of the link.
Walter
On Mar 3, 2011, at 2:04 PM, Julie Maxwell Allen wrote:
Thank you.
The style you have mentioned below is made in edit - styles?
That way you won’t have to worry about applying it anywhere. Simply make it once, and then every page will have it. Then apply it using the Hyperlink / Extended / New technique outlined here. Just to be painfully clear – don’t apply this style to any text, anywhere in your site. Just make the style and then manually apply the “here” class using Extended, that way you will know that you have applied it to the Link proper, not to a Span within the text of the link.
Walter
On Mar 3, 2011, at 2:04 PM, Julie Maxwell Allen wrote:
Thank you.
The style you have mentioned below is made in edit - styles?
Yes, but only if your menu is made up out of manually-created links. If you are using the CSS Menu Action, then explore that Action first for its “highlight current page” feature. That will automate the whole process for you.
Yes, but only if your menu is made up out of manually-created links. If you are using the CSS Menu Action, then explore that Action first for its “highlight current page” feature. That will automate the whole process for you.
Other than that it offers built in options that you have to do by hand otherwise.
Often there is no requirement for the sub menus that the CSS Menu action offers but there are other features (backgrounds, borders, link colouring etc.) in there that can be easily applied to enhance an otherwise bog-standard offering .
but when I tried it - I did not like the spacing of it. It either made it to crunched together or to far apart for the frog background and my own liking.
J
On Mar 3, 2011, at 4:23 PM, DeltaDave wrote:
I had no reason to do the css
Other than that it offers built in options that you have to do by hand otherwise.
Often there is no requirement for the sub menus that the CSS Menu action offers but there are other features (backgrounds, borders, link colouring etc.) in there that can be easily applied to enhance an otherwise bog-standard offering .
I noticed when making the style the other A’s has a colon. and you have a period.
I have only done the welcome and the about us page - before I did all and needed to correct.
I dont see it working any thoughts
J
On Mar 3, 2011, at 1:08 PM, Walter Lee Davis wrote:
The :active pseudo-selector governs the status of the link while you are actively pressing down on it. It does nothing for the “you are here” that you want it to have. If you’re using the CSS Menu, it has a preference for “show current page” and you should look at the options available to you in that context. If you’re not using CSS Menu, then you will need to add a classname to your link, and write a matching style to give it a unique look. So for example, you make a style like this:
a.here {
color: #ff9;
font-style: bold;
}
Then select the link that you want to be “here” and in the Hyperlink dialog, click Extended and New, then enter:
Name: class
Value: here
Now when you visit this page, with the here classname added to this link, you should see it as yellow and bold text.
Walter
On Mar 3, 2011, at 1:01 PM, Julie Maxwell Allen wrote:
Good afternoon,
I am catching up with suggestions that you have made about my new site.
I have gone to the inspector when the menu html is clicked. I went under links and chose a color to go visited, hover, and active.
I chose the active color to be yellow. but It does not work. it shows as green (visited)
The colon signifies what’s called a pseudo-selector. a:link, a:hover, etc. are examples of these. They relate to user interaction. Another example is a checkbox or radio button – they have the :checked pseudo-selector, which gets applied to the field when it’s in its checked state.
So these attributes can change after the page has loaded, because the user interacts with the page and causes them to be modified on screen – but not in source code. This is why they are called pseudo-selectors; they differ from a normal selector because they can change after the page has loaded.
Contrast that with say a classname, signified by the dot in a CSS selector. That attribute is set by the HTML, and doesn’t change. Other types of selectors include the tag name (here, that’s an ‘a’ for anchor tag) or the ID, signified in a selector by the # octothorp symbol.
CSS Selector
HTML Code
a.foo
<a class="foo" ...>
#bar
<div id="bar">
div.sidebar h3
<div class="sidebar"><h3>
Building up combinations of these attributes make CSS selectors very precise, capable of reaching in with tweezers and adding the fo’castle to the rigging of your pirate ship in a bottle. Careful use of parent tags to set attributes that you want to “cascade” throughout part or all of the page structure allow you to instantly paint all the type a single color, or all the type in a sidebar a different color, without going through and adjusting the same attribute in dozens of individual styles.
I then highlighted the link word (welcome for instance) on the equal page and then did extended, new, class / here
It seems not to be working.
May I please get a bit of direction on what is going wrong.
thanks
J
On Mar 3, 2011, at 5:12 PM, waltd wrote:
The colon signifies what’s called a pseudo-selector. a:link, a:hover, etc. are examples of these. They relate to user interaction. Another example is a checkbox or radio button – they have the :checked pseudo-selector, which gets applied to the field when it’s in its checked state.
So these attributes can change after the page has loaded, because the user interacts with the page and causes them to be modified on screen – but not in source code. This is why they are called pseudo-selectors; they differ from a normal selector because they can change after the page has loaded.
Contrast that with say a classname, signified by the dot in a CSS selector. That attribute is set by the HTML, and doesn’t change. Other types of selectors include the tag name (here, that’s an ‘a’ for anchor tag) or the ID, signified in a selector by the # octothorp symbol.
CSS Selector
HTML Code
a.foo
<a class="foo" ...>
#bar
<div id="bar">
div.sidebar h3
<div class="sidebar"><h3>
Building up combinations of these attributes make CSS selectors very precise, capable of reaching in with tweezers and adding the fo’castle to the rigging of your pirate ship in a bottle. Careful use of parent tags to set attributes that you want to “cascade” throughout part or all of the page structure allow you to instantly paint all the type a single color, or all the type in a sidebar a different color, without going through and adjusting the same attribute in dozens of individual styles.
I really do want to start learning this so I can start lessening the crutch for each time turning to you. ALso it gives me a better grasp of the inner works.
J
On Mar 3, 2011, at 5:27 PM, Paul Bradforth wrote:
On 3 Mar 2011, at 21:11, Julie Maxwell Allen wrote:
On 3 Mar 2011, at 22:49, Julie Maxwell Allen wrote:
I really do want to start learning this so I can start lessening the crutch for each time turning to you. ALso it gives me a better grasp of the inner works.
This is the correct way to create the style. Next step is to select
the link text of the “here” option in your menu, and open the
Hyperlink dialog. Press Extended, then New, then add the classname
thus: http://scripty.walterdavisstudio.com/class.jpg (you can’t see
it, but the link for Products was selected before that stack of
dialogs was raised above the screen).
Walter
On Mar 3, 2011, at 5:48 PM, Julie Maxwell Allen wrote:
I then highlighted the link word (welcome for instance) on the equal
page and then did extended, new, class / here
It seems not to be working.
May I please get a bit of direction on what is going wrong.
thanks
J
On Mar 3, 2011, at 5:12 PM, waltd wrote:
The colon signifies what’s called a pseudo-selector. a:link,
a:hover, etc. are examples of these. They relate to user
interaction. Another example is a checkbox or radio button – they
have the :checked pseudo-selector, which gets applied to the field
when it’s in its checked state.
So these attributes can change after the page has loaded, because
the user interacts with the page and causes them to be modified on
screen – but not in source code. This is why they are called
pseudo-selectors; they differ from a normal selector because they
can change after the page has loaded.
Contrast that with say a classname, signified by the dot in a CSS
selector. That attribute is set by the HTML, and doesn’t change.
Other types of selectors include the tag name (here, that’s an ‘a’
for anchor tag) or the ID, signified in a selector by the #
octothorp symbol.
CSS Selector
HTML Code
a.foo
<a class="foo" ...>
#bar
<div id="bar">
div.sidebar h3
<div class="sidebar"><h3>
Building up combinations of these attributes make CSS selectors
very precise, capable of reaching in with tweezers and adding the
fo’castle to the rigging of your pirate ship in a bottle. Careful
use of parent tags to set attributes that you want to “cascade”
throughout part or all of the page structure allow you to instantly
paint all the type a single color, or all the type in a sidebar a
different color, without going through and adjusting the same
attribute in dozens of individual styles.
I know the other is easier - but I do want to learn this.
J
On Mar 3, 2011, at 6:03 PM, Walter Lee Davis wrote:
This is the correct way to create the style. Next step is to select the link text of the “here” option in your menu, and open the Hyperlink dialog. Press Extended, then New, then add the classname thus: http://scripty.walterdavisstudio.com/class.jpg (you can’t see it, but the link for Products was selected before that stack of dialogs was raised above the screen).
Walter
On Mar 3, 2011, at 5:48 PM, Julie Maxwell Allen wrote:
I then highlighted the link word (welcome for instance) on the equal page and then did extended, new, class / here
It seems not to be working.
May I please get a bit of direction on what is going wrong.
thanks
J
On Mar 3, 2011, at 5:12 PM, waltd wrote:
The colon signifies what’s called a pseudo-selector. a:link, a:hover, etc. are examples of these. They relate to user interaction. Another example is a checkbox or radio button – they have the :checked pseudo-selector, which gets applied to the field when it’s in its checked state.
So these attributes can change after the page has loaded, because the user interacts with the page and causes them to be modified on screen – but not in source code. This is why they are called pseudo-selectors; they differ from a normal selector because they can change after the page has loaded.
Contrast that with say a classname, signified by the dot in a CSS selector. That attribute is set by the HTML, and doesn’t change. Other types of selectors include the tag name (here, that’s an ‘a’ for anchor tag) or the ID, signified in a selector by the # octothorp symbol.
CSS Selector
HTML Code
a.foo
<a class="foo" ...>
#bar
<div id="bar">
div.sidebar h3
<div class="sidebar"><h3>
Building up combinations of these attributes make CSS selectors very precise, capable of reaching in with tweezers and adding the fo’castle to the rigging of your pirate ship in a bottle. Careful use of parent tags to set attributes that you want to “cascade” throughout part or all of the page structure allow you to instantly paint all the type a single color, or all the type in a sidebar a different color, without going through and adjusting the same attribute in dozens of individual styles.
J
On Mar 3, 2011, at 6:03 PM, Walter Lee Davis wrote:
This is the correct way to create the style. Next step is to select the link text of the “here” option in your menu, and open the Hyperlink dialog. Press Extended, then New, then add the classname thus: http://scripty.walterdavisstudio.com/class.jpg (you can’t see it, but the link for Products was selected before that stack of dialogs was raised above the screen).
Walter
On Mar 3, 2011, at 5:48 PM, Julie Maxwell Allen wrote:
I then highlighted the link word (welcome for instance) on the equal page and then did extended, new, class / here
It seems not to be working.
May I please get a bit of direction on what is going wrong.
thanks
J
On Mar 3, 2011, at 5:12 PM, waltd wrote:
The colon signifies what’s called a pseudo-selector. a:link, a:hover, etc. are examples of these. They relate to user interaction. Another example is a checkbox or radio button – they have the :checked pseudo-selector, which gets applied to the field when it’s in its checked state.
So these attributes can change after the page has loaded, because the user interacts with the page and causes them to be modified on screen – but not in source code. This is why they are called pseudo-selectors; they differ from a normal selector because they can change after the page has loaded.
Contrast that with say a classname, signified by the dot in a CSS selector. That attribute is set by the HTML, and doesn’t change. Other types of selectors include the tag name (here, that’s an ‘a’ for anchor tag) or the ID, signified in a selector by the # octothorp symbol.
CSS Selector
HTML Code
a.foo
<a class="foo" ...>
#bar
<div id="bar">
div.sidebar h3
<div class="sidebar"><h3>
Building up combinations of these attributes make CSS selectors very precise, capable of reaching in with tweezers and adding the fo’castle to the rigging of your pirate ship in a bottle. Careful use of parent tags to set attributes that you want to “cascade” throughout part or all of the page structure allow you to instantly paint all the type a single color, or all the type in a sidebar a different color, without going through and adjusting the same attribute in dozens of individual styles.
