Style rules outside of the style sheet

[McKern]

(Context: this is not TNG-bashing. In fact, I'm a fan. Also, what little I know about website development/design I've learned via online tutorials, trial and error, etc, in my fragmented spare time. I still have a LOT to learn and I don't begin to assume that something that doesn't make sense to me is wrong or stupid/misguided.

In other words, this is a legitimate "help me understand" question addressed to those who know more about the subject than I do.)

Over the past couple of weeks I've been dealing with some problems with my (heavily customized/edited) drop menu in Explorer. After fiddling with the rules in the style sheet regarding mnav, I worked out most of the issues, except one odd quirk--i.e., the borders disappeared between the items listed under the third heading as soon as the mouse hovered over any item on the list.

Eventually, using "view source," I found this line in the header:

<style type="text/css">#mnav li:hover #third, #mnav li.sfhover #third {right: 0px;}</style>.

I added the following to my style sheet and things are working fine.

!#mnav li:hover #third, #mnav li.sfhover #third {

right: 0px;

border-bottom: 1px solid #777;

border-top: 1px solid #777;

}

My question: why are so many style rules in the php files, rather than the style sheet? E.g., is this basically hold-over practice from days before CSS became so widely used?

Finding this rule in the header seem particularly odd to me. It seems that it would have been just as easy to put this in the style sheet, rather than in genlib.php--a few hundred lines removed from other style rules pertaining to the drop menu.

Thanks for any insights,

Bridget

[Russellgs]

(Context: this is not TNG-bashing. In fact, I'm a fan. Also, what little I know about website development/design I've learned via online tutorials, trial and error, etc, in my fragmented spare time. I still have a LOT to learn and I don't begin to assume that something that doesn't make sense to me is wrong or stupid/misguided.

In other words, this is a legitimate "help me understand" question addressed to those who know more about the subject than I do.)

Over the past couple of weeks I've been dealing with some problems with my (heavily customized/edited) drop menu in Explorer. After fiddling with the rules in the style sheet regarding mnav, I worked out most of the issues, except one odd quirk--i.e., the borders disappeared between the items listed under the third heading as soon as the mouse hovered over any item on the list.

Eventually, using "view source," I found this line in the header:

<style type="text/css">#mnav li:hover #third, #mnav li.sfhover #third {right: 0px;}</style>.

I added the following to my style sheet and things are working fine.

!#mnav li:hover #third, #mnav li.sfhover #third {

right: 0px;

border-bottom: 1px solid #777;

border-top: 1px solid #777;

}

My question: why are so many style rules in the php files, rather than the style sheet? E.g., is this basically hold-over practice from days before CSS became so widely used?

Finding this rule in the header seem particularly odd to me. It seems that it would have been just as easy to put this in the style sheet, rather than in genlib.php--a few hundred lines removed from other style rules pertaining to the drop menu.

Thanks for any insights,

Bridget

Bridget,

You didn't say what version of TNG you are using. Most of these where integrated into the templatestyle.css files in the new version and any changes that you make would be put in your mytngstyle.css file.

Russ

[Ken Roy]

Bridget,

You didn't say what version of TNG you are using. Most of these where integrated into the templatestyle.css files in the new version and any changes that you make would be put in your mytngstyle.css file.

Russ

Bridget,

I would recommend that you provide the feedback directly to Darrin to move style information from the code to the style sheets, to eliminate problems for people who integrate TNG with CMS or other environments.

I believe the line is generated by genlib.php and as you discovered it probably should be in genstyle.css.

[McKern]

Bridget,

I would recommend that you provide the feedback directly to Darrin to move style information from the code to the style sheets, to eliminate problems for people who integrate TNG with CMS or other environments.

I believe the line is generated by genlib.php and as you discovered it probably should be in genstyle.css.

Ken and Russ,

Thank you for the comments/info. I'm glad to learn that the issue I was having with style rules in files other than the style sheet has been addressed in 7.0.

I'm still using 6.2, but I will be upgrading soon. I put off the upgrade because of all the edits in my files. However, I've backed out almost all of the changes that involved edits to the tables, replaced with simpler alternatives (live and learn), so I'll be moving to 7.0 very soon.

I'll still need to redo edits to the .php files. After much trial and error, I managed to add ID numbers to names and family names to Family ID numbers in most instances in 6.2 when one is displayed without the other. I'm sincerely hoping that it will be relatively easy to transfer these edits to 7.0.

I believe I saw a reference to another forum regarding TNG--perhaps focused on technical issues, but I can't find that reference. True? if so, where?

Bridget

[Ken Roy]

Ken and Russ,

Thank you for the comments/info. I'm glad to learn that the issue I was having with style rules in files other than the style sheet has been addressed in 7.0.

I'm still using 6.2, but I will be upgrading soon. I put off the upgrade because of all the edits in my files. However, I've backed out almost all of the changes that involved edits to the tables, replaced with simpler alternatives (live and learn), so I'll be moving to 7.0 very soon.

I'll still need to redo edits to the .php files. After much trial and error, I managed to add ID numbers to names and family names to Family ID numbers in most instances in 6.2 when one is displayed without the other. I'm sincerely hoping that it will be relatively easy to transfer these edits to 7.0.

I believe I saw a reference to another forum regarding TNG--perhaps focused on technical issues, but I can't find that reference. True? if so, where?

Bridget

Bridget,

While the style rules or hard-coded bgcolor= in the template topmenu.php and footer.php have been replaced with new classes in genstyle.css or the templatestyle.css for the specific template, the problem you surfaced

Eventually, using "view source," I found this line in the header:

<style type="text/css">#mnav li:hover #third, #mnav li.sfhover #third {right: 0px;}</style>.

I added the following to my style sheet and things are working fine.

!#mnav li:hover #third, #mnav li.sfhover #third {

right: 0px;

border-bottom: 1px solid #777;

border-top: 1px solid #777;

}

should be sent to Darrin in a direct mail for his consideration to change the code in the future and move the style statement from genlib.php to genstyle.css.

[jimflack]

I just thought I'd add my two penneth if thats ok. I'm using TNG v7.03 and I just viewed source on a page of mine and the the following seems to apply.

There is a page in the TNG prog called "MYSTYLESHEET.CSS" - and its added to the page head virtually at the end. SO if you put YOUR style rules in there - it will overwrite whatever commands (style rules) come in any style pages in the program before it.

CSS itself stands for Cascading StyleSheets - basics meaning you set a style rule, and that rule cascades to every page UNLESS its changed. Like being in the army - always obey the last instruction.

So for example if all Darrin's CSS said make the font color PINK- but in YOUR "mystylesheet.css" you said make the font color GREEN - then if 'mystylesheet.css" is the last one in the pecking order - its the LAST COMMAND and all font should now be GREEN - regardless of Darrin's earlier coding.

So in reality as that page comes last - you can over-ride all the previous style commands there.

I just hope i got the gist of the question right

[Mike Goodstadt]

Jim, whilst what you say is not incorrect it must be noted that an awful lot of hardcoded / inline style is present in the TNG html.

By hardcoded / inline I am talking not only about style specified in the header but also, and more importantly, about the 'style' attribute on tags and layout attributes on tables. To be properly compliant all this must be removed to stylesheets, preferably external.

If this is not implemented in future versions we will have to continue to resort to the property qualifier '!important' to get the desired effect on many ID and classes. This defeats any attempts to generate clean and simple templates.

Furthermore there are many discrepancies in layout and style between the various charts which can make styling a nightmare if not impossible, as in the case of a relationship chart... Anyhow I look forward to seeing Bridget's revised '!important' site

Mike

[Ken Roy]

Jim, whilst what you say is not incorrect it must be noted that an awful lot of hardcoded style is present in the TNG html.

By hardcoded I am talking not only about style specified in the header but also, and more importantly, about the 'style' attribute on tags and layout attributes on tables. To be properly compliant all this must be removed to stylesheets, preferably external.

If this is not implemented in future versions we will have to continue to resort to the property qualifier 'important!' to get the desired effect on many ID and classes. This defeats any attempts to generate clean and simple templates.

Furthermore there are many discrepancies in layout and style between the various charts which can make styling a nightmare if not impossible, as in the case of a relationship chart... Anyhow I look forward to seeing Bridget's revised 'important!' site

Mike

Mike,

I would recommend that when you discover hard-coded styles within the TNG code that you provide that information directly to Darrin. He is the only one who ultimately can change the TNG code. Any changes made by users would only be a TNG modification.

[Mike Goodstadt]

I was not suggesting a mod - just the use of '!important' on certain elements in user stylesheets.

You are though quite right that Darrin should know and I am preparing an extensive list of what needs to be extracted to stylesheets and how to unify the methods used to layout and style charts.

However as this implies a careful reconstruction of the template's stylesheet to ensure continuity (especially in charts) for many users it is a job I would prefer not to rush.

All the best,

Mike

[Ken Roy]

I was not suggesting a mod - just the use of important! on certain elements in user stylesheets.

You are though quite right that Darrin should know and I am preparing an extensive list of what needs to be extracted to stylesheets and how to unify the methods used to layout and style charts.

However as this implies a careful reconstruction of the template's stylesheet to ensure continuity (especially in charts) for many users it is a job I would prefer not to rush.

All the best,

Mike

Mike,

I don't understand what you mean by the user of important! element. A re-design of the templates to allow continuity and potentially to standardize certain elements so they all use the same class in each template might be in order. However, I know only enough about style sheets to get into trouble.

Hopefully those who work with style sheets on a daily basis or as part of their job can help make the whole environment easier to manage and control.

[Mike Goodstadt]

By following any definition of a style attribute with the text '!important' you override / break the CSS hierarchy (external, internal, inline).

For example the main navigation menu link icons have all sorts of attributes assigned directly within the html (inline):

<img width="20" hspace="4" height="20" border="0" align="left" alt="" style="vertical-align: middle;" src="tng_names.gif"/>

Overriding this with external or internal CSS not possible unless you state that the change is '!important'. In this example I make the icons disappear:

#mnav a img {

background-color: #666 !important;

width: 0px !important;

height: 0px !important;

border: none !important;

}

This is NOT good practice and only to be used when given no other choice as it can really mess up accessibility. Both inline and '!important' styles force users to use your style when they may need a special peronalised stylesheet to aid usability.

Mike

Notes:

• There are some properties used in TNG which are impossible to override like 'hspace' in the above example icon as they are deprecated (officially retired) and so have no equivalent in CSS. Hopefully these will be removed in a future release of TNG as they can mess up a template's layout and style.
• Sometimes there is Javascript at work which generates elements you wish to style for example the menu (a Sucker Fish technique) so I also make that '!important' too.