|
| |
No macros? - CSS for hiliting nav button of "current" page
View related threads:
(in this forum
| in all forums)
|
Logged in as: Guest
|
|
|
avi_m
Posts: 11
Joined: 5/13/2007
Status: offline
 |
No macros? - CSS for hiliting nav button of "curre... - 5/13/2007 15:35:32
Hi all - new newbie here.
RE: Using DWT and highlighting the tab/button of the current page - could do with a text macro
I needed to know how to stop DWT wiping out local code updates in pages attached to it. My code updates are to make the selection button of each (sub)page remain highlighted so that it flags where you are (you'd think this would be straightforward...).
So somebody sent me a good answer, like this:
------
In the DWT, set up an editable region in the <head> section
and add an embedded style block:
<!-- #BeginEditable "navstyle" -->
<style type="text/css">
#masthead a {color: green; /*style for current page*/}
</style>
<!-- #EndEditable -->
-------
But I have to change #masthead for each page of course (#about, #contact, etc.), my style for the current page consists of quite a few lines of CSS:
#masthead a { /* Keep button for current page "pressed"*/
/* Block of CCS code */
color: #FFDDEB;
text-decoration: none;
/* 3-D - Non-pushed ... */
background-color: #FF468B;
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
So I was wondering, is it possible to replace all those lines with some class name or something? Otherwise, with say 20 sub-pages, I will have to repeat those 10 CCS lines in every file, like this
#about { /* in the About this Site page */
/* That block of CCS code above */
}
#contact { /* in the Contact Us page */
/* That very same block of CCS code above */
}
etc
etc
I would want to replace that block with a 'C' type macros. No macros in Expression...?
tia
- avi
< Message edited by avi_m -- 5/14/2007 6:11:06 >
|
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: No macros in Expression...? - 5/13/2007 17:17:15
Can you not just stick that CSS into the main stylesheet and forget about having it within the page itself That'd be much easier to handle.
How are you marking up the link itself - there are several ways of doing this depending on what you prefer.
If you've got ids for the links already set up then what you can do is to add in an id to the body tag of each page (so the home page would have id="home" in the body tag etc etc).
Then in the CSS you do this:
#home #masthead a, #aboutpage #about a, #contactpage #contact a
{
color: #FFDDEB;
text-decoration: none;
/* 3-D - Non-pushed ... */
background-color: #FF468B;
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
Thus the CSS is looking for the page with the relevant body tag and then when it finds it it looks for the other id. This is one of the two methods I use - the other's no use to you as EW doesn't play well with PHP.
One single set of rules in the external stylesheet - changeable in a single edit.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
avi_m
Posts: 11
Joined: 5/13/2007
Status: offline
|
RE: No macros in Expression...? - 5/14/2007 5:20:04
Thanks for the response, Tailslide.
That's an idea that looks good. I didn't remember that CSS allows you to string IDs together and then EW looks for them in order. While I have done the w3schools CSS tutorial a couple of times, it only takes you to a certain level. (Some of the way thru I realize that been here done that…)
So I to the best of my understanding of what you mean, I proceeded as follows:
1. I moved the CSS block to the main stylesheet exactly as you showed me.
2. In answer to your question how am I marking up my link, here for example, are the HTML/CSS statements I am now using for my first three buttons in my vertical side navigation bar:
<li id="home"><span lang="he"><a href="default-real.htm">Home page</a></span></li>
<li id="about"><span lang="he"><a href="he_pg02_About_the_Amuta.htm" >About us</a></span></li>
<li id="screams"><span lang="he"><a href="he_pg03_Rebbes_Screams.htm">Why we're screaming</a></span></li>
3. Here is the crunch: you tell me "add in an id to the body tag of each page ..."
>> If you've got ids for the links already set up then what you can do is to add in an id to the body tag of each page (so the home page would have id="home" in the body tag etc etc).
So, I marked as an editable region the body tag of the DWT, as follows:
<!-- #BeginEditable "body_name" -->
<body id="mast_page">
<!-- #EndEditable -->
(I think I have been here before, about two months ago...I only work on Web stuff very part time for charity...)
4. I saved the DWT and it updated all the pages connected to it, inserting the editable region exactly as above.
5. Now, I updated that editable region of each page to be the local id (as defined in the CSS block, like #aboutpage #about a, #contactpage #contact a, as you said) to the body tag of each page (so the home page would have id="home" in the body tag etc etc).
So, in the About page I have ...
<!-- #BeginEditable "body_name" -->
<body id="about_page">
<!-- #EndEditable -->
and in the "Why we're screaming" page I have ...
<!-- #BeginEditable "body_name" -->
<body id="screams">
<!-- #EndEditable -->
etc etc
6. I purposely made some negligible change to the DWT, and so again it went and updated all the HTMs attached to it.
Then I check that editable region in each page to make sure that it was not affected by that DWT update, and ...
... lo and behold ...
.. unfortunately the DWT update returned all pages to its own "mast_page" id in the body tag, as follows:
<!-- #BeginEditable "body_name" -->
<body id="mast_page">
<!-- #EndEditable -->
So we see that EW doesn 't recognize <body> as being a valid place to make into an editable region.
So this method worked for non-DWT designs. I remember it was at this point that I sent this question, and somebody replied to move the editable region into the heading, and putting inside it a class declaration, and that WAS recognized by EW, but then I got a new problem, of all that duplicate text.
Also, I just checked the main CSS page again, and I see it broke up the single style declaration into separate items, like this. Which is also what I remember happened last time.
#contact_page #contact a
{
color: #FFDDEB;
text-decoration: none;
/* 3-D - Non-pushed ... */
background-color: #FF468B;
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
#about_page #about a
{
color: #FFDDEB;
text-decoration: none;
/* 3-D - Non-pushed ... */
background-color: #FF468B;
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
#home_page #home a
{
color: #FFDDEB;
text-decoration: none;
/* 3-D - Non-pushed ... */
background-color: #FF468B;
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
Thanks,
avi
quote:
ORIGINAL: Tailslide
Can you not just stick that CSS into the main stylesheet and forget about having it within the page itself That'd be much easier to handle.
How are you marking up the link itself - there are several ways of doing this depending on what you prefer.
If you've got ids for the links already set up then what you can do is to add in an id to the body tag of each page (so the home page would have id="home" in the body tag etc etc).
Then in the CSS you do this:
#home #masthead a, #aboutpage #about a, #contactpage #contact a
{
color: #FFDDEB;
text-decoration: none;
/* 3-D - Non-pushed ... */
background-color: #FF468B;
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
Thus the CSS is looking for the page with the relevant body tag and then when it finds it it looks for the other id. This is one of the two methods I use - the other's no use to you as EW doesn't play well with PHP.
One single set of rules in the external stylesheet - changeable in a single edit.
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: No macros in Expression...? - 5/14/2007 5:35:14
Ahh what a pain!!
Sorry Avi - I'm so used to hand-coding and not having to put up with the "fun" little issues thrown up by these sort of editors!
There's a couple of options that I can think of.
Firstly, manually add in an id of "current" to the appropriate link item on each page replacing the current ids. Then just have a single rule in the stylesheet for #current.
Secondly, use a server-side language to tell the page what page it is and then add in "current" to the appropriate link item. I use PHP to do this but unfortunately EW doesn't work with PHP so that's no use at all!!
The first option is the simplest but I don't know if it's suitable for your purposes. Hopefully someone more familiar with DWTs will be along to lead you down the correct path.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
avi_m
Posts: 11
Joined: 5/13/2007
Status: offline
|
RE: No macros in Expression...? - 5/14/2007 6:04:51
And I had probably better explain the reason why I want this CSS block external to the DWT page, since, after all, the whole DWT is general, anyway - so why do I want the CSS block outside...?
The answer is that, although this DWT accounts for many of the pages in my site, there are many pages of a different design, e.g., my front page. In addition, it may very well happen that in the future I will need a number of DWTs. However, the coloring and shape of my navigation bar buttons (as given by the CSS block) will remain constant throughout the whole site.
So that's why I want this CSS block external to the DWT page.
Thanks,
avi
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
