customising navigation strip colours in transmogrified

[the_wildlings]

hello kind code-mages,

we are using the dark forest style for transmogrified. we have 2 questions.

1) is it possible to make the navigation strip display in custom colours, on a style where that is not an option on the customisation page (such as our current one)? both of the default colour gradients hurt our eyes.

2) is there a way to customise the colours of the text input box & dropdown menu box in the navigation strip (for the sitewide search function)? despite our accessibility settings, they are defaulting to a glaring white background with black text, which is painful for us.

we read through the ~color, page:navigation & navigation strip tags, and did not find these answers. could any generous wizards help us?

thankyou very much in advance.

Comments

[london_fan]

Hello there,

hopefully I understood your questions correctly, so that my answer is helpful. I compiled a bit of code for you using the colors of your current style. I also changed the text and link colors to match, so you don't have to deal with the default bright text color. Feel free to change things around to make them meet your needs. Good Luck!

/* Background and text color of the nav strip */
#lj_controlstrip {
background: #123322; /
color: #408460;
border-bottom: 0px solid #123322;
}

/* Removing the dividing lines bewtween the nav strip areas*/
#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks {
border: 0;
}

/* Link color of the nav strip */
#lj_controlstrip a {
color: #408460;
}

/* Status text "You're viewing..." */
#lj_controlstrip_statustext {
color: #408460;
}

/* Search and Dropdown menu colors */
#lj_controlstrip input#search, #lj_controlstrip select {
background: #408460;
color: #123322;
border: 0;
}

[the_wildlings]

oh wow, that all works beautifully! :D you understood perfectly, thankyou so very much!! it's made everything so much better! <3

we appreciate you labelling each piece of code too, this helps us understand and learn more from reading the code! and thankyou for taking the time & effort to pick colours from our current style, that's very thoughtful of you!

thanks so much for your help, kind code-ninja! (we love the icon, by the way! XD it's so funny!)

[london_fan]

You are most welcome. Glad I could help. I thought that labelling things might be helpful, especially for code that isn't exactly self-explanatory. That way you'll know what to change to make it suit your preferences and can fiddle around with the values. :)

Thank you! I found that CSS-Ninja joke really funny when I saw it the first time and had to make an icon of it. :D

[the_wildlings]

haha, it's a great icon! perfect colour choices for it, too. we had to lean close and squint to read it, which is the most appropriate way for it to be and only makes the joke work better! x3

thankyou, yes, it was very helpful! not only did it help us know where to look if we wanted to adjust something you'd set, it helped us figure out how to do more by ourselves!

thanks to your clearly labelled code, we were able to work out how to change the other bits of text in the navbar, and the "log out" "go" etc buttons, too! this is what we came up with for them, with your code to help:

/* navbar text "Reload page in style:" */
#lj_controlstrip_search {
color: #408460;
}

/* navbar text on reading page "Filter:" */
#lj_controlstrip_actionlinks {
color: #408460;
}

/* navbar button colours */
#lj_controlstrip input {
background-color: #0c1f14;
color: #358060;
border-color: #09160f;
padding: 1px;
}

thanks again, it was great to meet you!

[london_fan]

Yes, a lot of people wonder about the extremely low contrast of the icon, but appreciate the joke all the more once thy figure it out. :D

Oh, your navigation strip looks fantastic with the Dark Forest theme now. I love your additional changes. Congratulations!

Thank you, the same to you! :)

[the_wildlings]

lol yes, at first glance we didn't see anything in the icon at all! which is just how it should be, haha. x3

oh, thankyou very much! *w* :D <3 yeah, we're very happy with it. and now everyone in our plural community (gentle_beasts) wants to use our & your code with their own colours for their journals, haha! you helped make something that turned out very popular! thanks again for everything, we appreciate your help so much.

[london_fan]

You're most welcome! Happy to hear that my help goes a long way!