Any way of making embedded style block more elegant?

Previous | Next

Latest post 05-16-2007 3:17 AM by avi. 13 replies.

03-14-2007 6:20 PM

avi
Joined on 02-06-2007
Posts 47

Any way of making embedded style block more elegant?

Hi,

Earlier I posted a question asking 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.

So somebody sent me a good answer, which starts as follows:

In the DWT, set up an editable region in the <head> section and add an
embedded style block:


<style type="text/css">
#masthead a {color: green; /*style for the current page*/}
</style>

Now, my style for the current page consists of quite a few lnes of CSS (about 10 lines, which come after/instead of "#masthead a {" in the above. 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.

tia

avraham

-----------------------------------------------------------

Re: Updating DWT makes it overwrite my code; class/include

>> In the DWT, set up an editable region in the <head> section and add an
embedded style block:
Since I have a lot of CSS code lines for my style, is there any wasy of
specifying a class, or even an include file, instead of

{
   styles for the current page*/
   e.g., color: green;
/*etc.
   etc.*/
}

tnx

- avi

>> In the DWT, set up an editable region in the <head> section and add an
embedded style block:


<style type="text/css">
#masthead a {color: green; /*style for the current page*/}
</style>

</head>

One way round this using CSS without JavaScript, is to give each link an
id, and add CSS to each page that uses that id.

In the DWT, set up an editable region in the <head> section and add an
embedded style block:


<style type="text/css">
#masthead a {color: green; /*style for the current page*/}
</style>

</head>

The a typical link would be:

<li><a href="he_pg02_About_my_Site.htm" id="about">About our
Site</a></li>

On the about page, change the embedded CSS to

#about a {color: green; /*styles for the current page*/}

Change #masthead on other pages to match the corresponding link id.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support:   http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp

"Avi" <Avi@discussions.microsoft.com> wrote in message
news:AD0AED72-84D1-4103-85A0-E3006F92DE4A@microsoft.com:

> Hi all,
>
> I have a navigation bar and a method of highlighting the button that
> corresponds to the current page to which I have just moved. When using DWTs
> with this it seems to mess everything up.
>
> So I need either some JavaScript to highlight the button, something like
>
> <li><a href="he_pg02_About_my_Site.htm" onclick="<put JScript here">About
> our Site</a></li>
>
> or I need some EW VBA code to fix up what the DWT messes up.
> I suppose the JavaScript is the correct way to go. So I would appreciate it
> if somebody could write for this JScript-disadvatanged newbie the few lines
> of code I need to 'grab' a button and highlight its color while the user is
> browsing that button's target page.
>
> For anybody interested in knowing about how DWT messed things up, read on.
>
> 1. I have built a navigation bar using the method of using list items (<li>)
> as the "buttons" by defining #right_col li, #right_col a and #right_col
> a:hover.
>
> 2. To keep highlighted the button that corresponds to the current (sub)page
> I am using the method of giving the whole <body> an ID, e.g., like this for
> the "About my Site"
>
> <body id="about">
>
> 3. I have a class for each <li> item, like this:
>
> <li><a href="he_pg02_About_my_Site.htm" class="about">About our Site</a></li>
>
> 4. I have these body IDs and classes defined in the CSS file like this
>
> /* Highlighting definition */
> #home .home, #about .about, #links .links, #contact .contact
> {
> /* Style for highlighting the "button" of the current page */
> }
>
> 5. Now, I combined the above highlighting method with creating all my pages
> from a single DWT, and I had a few surprises.
>
> To give each <body> an ID (e.g., <body id="about">) I have to update each
> page created from the DWT. So far so good. However, if I have to update the
> appearance of the DWT itself, then it goes and updates all the pages attached
> to it, which is good; but it also returns all other HTML code to the DWT
> default, which in my above example means that since my DWT body is <body
> id="mastbody"> then that's what all the pages are also returned to, which is
> not good.
>
> In addition, the highlighting definition CSS code got broken apart by the
> DWT, splitting it up into separate, sometimes illegal, clauses in the CSS
> file.
>
> So, my question is, is there any way I can protect the HTML code (of my DWT
> attached file) from being updated?
>
> If not, can somebody please write me the line or two of JScript needed to
> highlight my buttons?
>
> tia
>

03-28-2007 2:05 PM In reply to

cdwise
Joined on 12-22-2006
Houston, TX
Posts 540

Re: Any way of making embedded style block more elegant?

Contact

Avi,

That is your class definition - I'm not following your question.

Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

05-08-2007 3:19 AM In reply to

Jonathon VS
Joined on 12-24-2006
Posts 29

Re: Any way of making embedded style block more elegant?

Contact

If you're going to be using it more than once, why use an embedded style block? Why not use an external style sheet?

You could have several pages referencing a single style sheet. If you want specific portions of your website to be different, you could do something like this:

CSS:

#salepage {
   background: #400;
}

HTML:

<body id="salepage">

All of your styles would be in a single place; then all you'd have to do is link to your style sheet file.

Jonathon VS Freelance Web Artist www.jonathonvs.com

Filed under: css

05-13-2007 5:52 AM In reply to

avi
Joined on 02-06-2007
Posts 47

Re: Any way of making embedded style block more elegant?

Contact

Thanks for the response, Jonathon.

I know it's taking me a while, but all my Web work is done in the background, while making a living takes higher priority. Hope you can get your head back into this one (- it took me a half an hour to remember where I was in this...). Sorry.

>> If you're going to be using it more than once, why use an embedded style block? Why not use an external style sheet?

Right, but this embedded style block (in fact a class definition - as Cheryl points out) is intentionally inside an editable region and has a name change for each page that its supposed to appear in, this being an essential part of Ron Symonds answer (see his email quoted at the end)

e.g., in the "About this Site" page the clas defn. line will be "#about a {color: green; /*style for the current page*/}"

in the "Contact Us" page, this class defn. line will be "#Contact a {color: green; /*style for the current page*/}"

So......I was wondering since my CSS def. inside the {...} is (currently) a bit longer than "color:green", it is:

#masthead a { /* Keep button for current page "pressed"*/
      color: #FFDDEB;
       text-decoration: none;
       /* 3-D - Non-pushed ... */
       background-color: #FF468B;
       position: relative;
       top: 1px;
       left: 1px;
       border-color: #000 #aaa #aaa #000;
}

how can I take just that block of CSS and put it in one place and just have a macro type thing that would represent it.

In the C language I could somewhere define a macro something like this:

define Pressed \
       color: #FFDDEB;\
       text-decoration: none;\
       /* 3-D - Non-pushed ... */\
       background-color: #FF468B;\
       position: relative;\
       top: 1px;\
       left: 1px;\
       border-color: #000 #aaa #aaa #000;

and so I could then have :

#about { /* in the About this Site page */
Pressed
}

#contact { /* in the Contact Us page */
Pressed
}

and then whenever I want to change what pressed looks like I just change that macro.

Get the point?

Tnx,

- avi

Jonathon VS:

If you're going to be using it more than once, why use an embedded style block? Why not use an external style sheet?

You could have several pages referencing a single style sheet. If you want specific portions of your website to be different, you could do something like this:
CSS: #salepage { background: #400; } HTML: <body id="salepage">
All of your styles would be in a single place; then all you'd have to do is link to your style sheet file.

05-13-2007 5:53 AM In reply to

avi
Joined on 02-06-2007
Posts 47

Re: Any way of making embedded style block more elegant?

Contact

Thanks for your response, Cheryl.

See my explanation of what I mean in my continuation to Jonathon's response in this thread of mine.

Tnx,

- avi

cdwise:

Avi,

That is your class definition - I'm not following your question.

05-13-2007 9:31 PM In reply to

cdwise
Joined on 12-22-2006
Houston, TX
Posts 540

Re: Any way of making embedded style block more elegant?

Contact

I really don't see what you hope to accomplish by adding on some macro. If you have a definition for pressed all you need to do is copy it to the page in question.

Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

05-14-2007 3:05 AM In reply to

Jonathon VS
Joined on 12-24-2006
Posts 29

Re: Any way of making embedded style block more elegant?

Contact

From my understanding, you're trying to define a set of styles you can use several times, am I correct? Not being a procedural language, CSS has no such functionality. If you're going to be calling a style twice, though, you can use a comma:

#about, #contact {
  						    color: #FFDDEB;
  	    text-decoration: none;
  	    /* 3-D - Non-pushed ...  */
  	    background-color: #FF468B;
  	    position: relative;
  	    top: 1px;
  	    left: 1px;
  	    border-color: #000 #aaa #aaa #000;
 }

I'm not sure how a macro would differ from this approach if all you are doing is calling the same styles twice. In my understanding of macros (I've worked with VBA before), they're a set of instructions that can be called several times at will (variants are procedures, functions, methods, subroutines, etc.). I've never programmed in C before, so I may not understand your exact problem, but if you want to call the same style rules twice, a comma between the areas you wish to apply the style will suffice. I hope that answers your question.

Jonathon VS Freelance Web Artist www.jonathonvs.com

Filed under: css

05-14-2007 6:45 AM In reply to

avi
Joined on 02-06-2007
Posts 47

Re: Any way of making embedded CSS style block into external

Contact

>> If you have a definition for pressed all you need to do is copy it to the page in question

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. I wanted to learn how to do things right. My CSS styles inside the {...} comprise about 10 lines, and so I just wanted to know if there is a way of putting them outside the DWT (again coz I need the same CSS definition also in the main page (not connected to this DWT) and also other DWTs.

----------------------

Actually, the same goes for a different solution that you gave earlier, namely:

So I am still trying to enhance the answer of Ron Symonds: http://www.microsoft.com/communities/newsgroups/en-us/default.aspx?dg=microsoft.public.expression.webdesigner&mid=dc652b3c-5005-4941-ab56-64fecb0517de,

But the problem is the same: these solutions require a <style> or id Selector defintion that is LOCAL, and I am asking is there a way of taking the CSS styling out of the DWT and making it external.

Maybe it's a good idea to recap why I am on this: I simply wanted the nav button of each page to "light up" when its page is current. So somebody sent the solution, which worked. But the solution did not work one I moved to a DWT. Then I asked how to make it work with DWT, and Ron Symonds sent me a different solution: to declare an ID Selector in the header area and make it into an editable region (so I can then change #masthead on other pages (to #about, #contact, etc.) to match the corresponding link id).

Thanks,

Avi

cdwise:
I really don't see what you hope to accomplish by adding on some macro. If you have a definition for pressed all you need to do is copy it to the page in question.

05-14-2007 7:00 AM In reply to

avi
Joined on 02-06-2007
Posts 47

Re: Any way of making embedded style block more elegant?

Contact

Thanks for your response, Jonathon.

>> If you're going to be calling a style twice, though, you can use a comma:

Yes, but I would like to somehow take the "guts" of the style definition (from "color: #FFDDEB;" until "border-color: #000 #aaa #aaa #000;") out of the DWT, and in the DWT just have some sort of reference to the style CSS guts.

Also on this, see my most recent response to Cheryl.

Thanks,

Avi

Jonathon VS:

From my understanding, you're trying to define a set of styles you can use several times, am I correct? Not being a procedural language, CSS has no such functionality. If you're going to be calling a style twice, though, you can use a comma:
#about, #contact { color: #FFDDEB; text-decoration: none; /* 3-D - Non-pushed ... */ background-color: #FF468B; position: relative; top: 1px; left: 1px; border-color: #000 #aaa #aaa #000; }
I'm not sure how a macro would differ from this approach if all you are doing is calling the same styles twice. In my understanding of macros (I've worked with VBA before), they're a set of instructions that can be called several times at will (variants are procedures, functions, methods, subroutines, etc.). I've never programmed in C before, so I may not understand your exact problem, but if you want to call the same style rules twice, a comma between the areas you wish to apply the style will suffice. I hope that answers your question.

05-14-2007 7:24 AM In reply to

avi
Joined on 02-06-2007
Posts 47

Re: Any way of making embedded CSS style block into external

Contact

Isn't there just a way of defining an ID selector or CSS style in terms of a previously existing CSS style?

avi

05-14-2007 3:27 PM In reply to

Jonathon VS
Joined on 12-24-2006
Posts 29

Re: Any way of making embedded CSS style block into external

Contact

No, because most of the time you can simply use that style, so the W3C didn't think to create it.

However, you can assign an ID or a class to your body tag itself:

<body class="about_page">

And in your style sheet:

.about_page a#about_link { /* Styles for your selected link */ }

That way you don't have to have any local CSS if you don't want.

Jonathon VS Freelance Web Artist www.jonathonvs.com

Filed under: css

05-14-2007 6:50 PM In reply to

avi
Joined on 02-06-2007
Posts 47

Re: Any way of making embedded CSS style block into external

Contact

Okaaayyy.......

But I think I will then be left with the same problem of duplicating all the CSS code, namely for .about_page, .contact_page, etc.

Not only that, but when you put <body class="about_page"> inside an editable region, EW doesn't recignise it as such and when you do DWT update it returns all those <body> tabs to the generic version in the DWT.

Now I have come around a full circle - this was where I started.

But now, to continue your line of thought, without me first trying this out, coz I'm really too tired, pray could you tell me if this should give me what I want:

And in my style sheet:

.current_page a#about_page#about_link a#contact_page#contact_link <etc> { /* Styles for your selected link - and appearing just once :-) */ }

No...it's not going to work, again coz EW DTW mistakenly doesn't recognize <body class="about_page"> as editable

Btw, actually, when I already tried something similar, after doing a DWT update, EW ripped apart the big multi declaration (".current_page" in the above analogue) into its components and made a complete declaration for each of a#about_link, a#contact_link, etc. I.e. that's a big bug. Actually, the fact that DWT doesn't recognize <body> inside a DWT editable region is also a big bug. If it had worked I'd have been finished with this long ago...

This is crazy...

Avi

Jonathon VS:
No, because most of the time you can simply use that style, so the W3C didn't think to create it.

However, you can assign an ID or a class to your body tag itself:

<body class="about_page">

And in your style sheet:

.about_page a#about_link { /* Styles for your selected link */ }

That way you don't have to have any local CSS if you don't want.

05-14-2007 10:35 PM In reply to

Jonathon VS
Joined on 12-24-2006
Posts 29

Re: Any way of making embedded CSS style block into external

Contact

Hmm ... that's strange that ExWeb doesn't like you using <body class="~"> in an editable region. I'm assuming it's the same with <body id="~">? Since you're only using the body ID once per document, it does essentially the same thing.

If that doesn't work and what you've told me is true, you may want to file a bug report.

Jonathon VS Freelance Web Artist www.jonathonvs.com

Filed under: Expression Web, bugs, css

05-16-2007 3:17 AM In reply to

avi
Joined on 02-06-2007
Posts 47

Re: Any way of making embedded CSS style block into external

Contact

I tried it with <body id="~">. I assume the same happens with class="~". Can't see what the diff is. It's obviously the editables around the <body > tab that EW DWTs don't digest. I assume that since this is a borderline situation ( not inside the heaeder and not inside the body) that MS just did not consider the situation.

>>If that doesn't work and what you've told me is true, you may want to file a bug report.

2 bugs. (1) as above and (2) the DWT rips apart that long CSS declaration of IDs and instead duplicates them, declaring each ID separately and duplicating the CSS code, which destroys the whole idea.

So how do you file a bug report?

This sort of bug is what seems to make so many people want to throttle MS and its most famous person: MS gives great stuff then smashes it up in some basic way eg like Word's inability to do reliable auto numbered and bulleted lists.

Thanks,

avi

Jonathon VS:

Hmm ... that's strange that ExWeb doesn't like you using <body class="~"> in an editable region. I'm assuming it's the same with <body id="~">? Since you're only using the body ID once per document, it does essentially the same thing.

If that doesn't work and what you've told me is true, you may want to file a bug report.

Page 1 of 1 (14 items) | RSS