Jump to content
TNG Community
Danita

Menu colors in Kloosterman method

Recommended Posts

Danita

I've been using the Kloosterman method to my satisfaction for awhile now, but one thing I simply can't figure out.  On kloosterman.be, template colors from one of the templates other than the default.  No matter what I do, I seem to get the default template colors, so I made my menu colors similar just to avoid dealing with it.  It's been awhile though, and I'm getting ready to do another part of our family, and I'd like to be able to get TNG to use a different template color scheme.  My site is https://family.zanre.com - compare https://www.kloosterman.be/genealogy/surnames.php to https://family.zanre.com/genealogy/surnames.php - I'm just stuck with the old default template colors.  Does anyone know what I'm doing wrong?  I've even tried copying one of the other template folders to "template1" but it doesn't help.  I really didn't see anything in the setup instructions that would cover this.  I feel like I'm just overlooking something basic!  If I turn back on "select template" I can see the template I have chosen, but turning it off (which is what makes the actual system work), just gives me the default template again.

Thanks for any assistance you can provide.

Danita

 

Share this post


Link to post
Share on other sites
theKiwi

I use the plugin,  for TNG-WordPress, not the Kloosterman method, but what I think you'll have to do is make changes in the file mytngstyle.css to change the colours of the elements that are showing the original TNG colouring to match the style of your WordPress.

You should have template switching turned off and use the mytngstyle.css file that is in the css folder in the main TNG directory. Go through genstyle.css and copy out the elements you want to change, paste them into mytngstyle.css and then alter their properties.

Roger

Share this post


Link to post
Share on other sites
fluffy82

Not sure if it works for everyone or if it's just me, but I can simply use the built in css-editor in WordPress. Any rule added there overrides the TNG style sheets. This way I don't need to each time download, modify and upload the mytngstyle.css file. Changes are imminent, all I need to do is refresh the screen and see if the rule I added works how I expected it to, and save of modify it.

To avoid too much clutter in the css, I actually emptied the TNG style sheet and rewrote most of the rules in the WordPress editor. Things like tables and buttons are already defined in the theme so they were ok. But this is only my OCD speaking, you don't have to empty that file.

Share this post


Link to post
Share on other sites
KevyNC
Quote
On 8/5/2020 at 5:55 AM, fluffy82 said:

Not sure if it works for everyone or if it's just me, but I can simply use the built in css-editor in WordPress. Any rule added there overrides the TNG style sheets

 

Think this is my next project (or one of anyway), some of my themes padding, spacing, and font, it not what I am looking for (although may be better suited for  more devices)

Share this post


Link to post
Share on other sites
klooster

Find the color you want to change (I use the Color picker extension in Chrome), for instance the light blue color in the menu in your website is #E0E0F7. 

Find that color in genstyle.css and change it into the color you want.

You can also check what class, id or div name that color has in genstyle.css and override that class, id or div in WP, CUSTOMIZE, EXTRA CSS  with the color code you want.

Example:

CHANGE:

div.innercontainer, ul.tngdd .langmenu, ul.tngdd .stubmenu {
    border-bottom: 1px solid #aaa;
    background-color: #E0E0F7;
}

INTO

div.innercontainer, ul.tngdd .langmenu, ul.tngdd .stubmenu {
    border-bottom: 1px solid #aaa;
    background-color: #THE COLOR CODE YOU WANT !important;
}

Do not forget to put !important and the semicolon behind the new color code.

 

Good luck

Share this post


Link to post
Share on other sites
fluffy82
2 hours ago, klooster said:

Find that color in genstyle.css and change it into the color you want.

But remember that you will have to do this again every time there's an update, as for most updates and upgrades the genstyle.css is replaced by a new standard one.

Another solution would be to copy the code you want to change in mytngstyle.css. But I find it a hassle to download the file through ftp, change something, upload it, check if it works, download again, make new changes, upload again,...

If you use my method, the built in css editor in WordPress, you can just make live changes on your website and see it change immediately. 

Share this post


Link to post
Share on other sites
klooster

That’s what I already posted:

”You can also check what class, id or div name that color has in genstyle.css and override that class, id or div in WP, CUSTOMIZE, EXTRA CSS  with the color code you want.”

That’s what I do and recommend.

Share this post


Link to post
Share on other sites
cfj
5 hours ago, fluffy82 said:

But remember that you will have to do this again every time there's an update, as for most updates and upgrades the genstyle.css is replaced by a new standard one

Use mytngstyle.css

If you're changing styles on things, this should be done in the file mytngstyle.css by copying the block you want to modify from genstyle.css and pasting it into mytngstyle.css and making the changes there. This prevents you losing the changes when there is an upgrade to TNG

Share this post


Link to post
Share on other sites
fluffy82

 

6 minutes ago, cfj said:

Use mytngstyle.css

That's what I wrote right below the part you quoted ;)

Share this post


Link to post
Share on other sites
Danita

Thanks everyone!  I'm sorry it has taken so long to get back to you!  I have checked to "email me", but I never get notifications (probably my anti-spam server needs whitelisting for this site).  And of course I took a break from my project and am just now getting back to it! 

I'm working on this today, and hopefully your comments will set me on the proper path!

Danita

 

Share this post


Link to post
Share on other sites
Danita

Update - this is working fine - there are some glitches where some areas do not change the color, and then later they do change.  I though it might be a cache issue, but switching to a different browser doesn't help.  I've searched for every instance of the color I'm trying to change in the css files, and believe I have them all, but still some phantoms remaining.  But overall, I'm pleased with doing this directly in WordPress.

Thanks for all of your help!

Danita

 

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

×