Jump to content
TNG Community
Pops57

Same element, different css coding

Recommended Posts

Pops57

I'm making some modification to template 20 for my site. In attempting to change some css color coding, I'm running into what appears to be the same element in different places. On the Home page, in the leftnavmenu, under the ancestors section (div#ancestors.fieldname), category items, the css coding for those bulleted items is "a.link, a:active, div.icons a". If I make that change, then over in the admin section, at Admin | Setup | Configuration, those menu items (General Settings, Template Settings, etc.) are also White (#fff) and the element appears to be that same "a.link, a:active, div.icons a".

I admit I may be wrong in my analysis, or I may not be making the css changes as I should. I am making the changes in mytngstyle,css. Any thoughts or suggestions?

Thanks,

Mike

Cat. Items.JPG

Admin Config Menu.JPG

Share this post


Link to post
Share on other sites
Ken Roy

Template 20 was designed to use a light background with dark text, mainly because I am color-blind and have difficulty reading any text on dark backgrounds.  Sorry, but I do not have the time to figure out what you need to change but the template works like the other TNG templates and the same CSS class is used in more than one place.  I am starting to feel like I should never have provided my personal template changes to Darrin to include into TNG.

Template 20 was built using Template 4 but does not use tables for formatting but rather uses divs for the formatting.   If you compare the css definitions for Template 4 it might give you a clue as to what colors you could use where

Share this post


Link to post
Share on other sites
Pops57

Thank you Ken. I understand. I really like the capabilities of multiple stories, and menus in Template 20, and the flexibility of adding links to multiple families/ branches. It is the best suited for those capabilities I have found yet in the available templates. Just thought I'd try to match the colors I had been using in T207.

I will figure it out or stick with the light background as you intended.

Thanks again,

Mike

Share this post


Link to post
Share on other sites
Ken Roy

Mike,

I know nothing about Template 207 since it is a commercial template and may not be using the same css elements as the original TNG Templates.  As I indicated Template 20 was built on the same framework as Template 4 so you might be able to compare the templatestyle.css definitions of both templates and get a clue on changing the colors to use a darker background.

Best regards in your endeavor.

Share this post


Link to post
Share on other sites
Marsha

Hi Mike,

Template 207 is built on a different grid system, but uses css elements that are in all TNG templates. In order to do what you want done, you'll need to split the css into different styling choices. For instance:

a.link, a:active, div.icons a {color #fff;} All three elements have the same styling with the link color being white.

If you wanted the a.link & a:active  to be a different color, you would split them like this:
a.link, a:active {color #800000;} This link color is now maroon
div.icons a {color: #fff;}

Splitting elements apart can be done on any css file.

Marsha
https://genealogywebtemplates.com

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×