Announcement

Collapse
No announcement yet.

Need some help with stylevars for a dark theme

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [Site Builder] Need some help with stylevars for a dark theme

    I'm working on a dark theme for my site so that my users can optionally use it if so desired. I'm running into a couple of issues though. For the life of me, I cannot figure out what stylevars influence the following colors:

    Click image for larger version

Name:	Unread forum green.jpg
Views:	223
Size:	4.3 KB
ID:	4439781

    In this image, what stylevar influences that greenish-blue tinge on the icon for forums that have unread/new posts? The icon up top looks good, but that's the one for forums that don't have any unread posts. I'd like it to not have a greenish tinge if possible. Alternatively, will I just have to upload custom icons to work around this?


    Click image for larger version

Name:	Green Arrorws.jpg
Views:	79
Size:	5.1 KB
ID:	4439782

    In this image, a similar green tinge shows up on the arrows. I'd like it for those arrows to be grey or even a light blue. The arrows are typically light blue on a "light" theme, but some stylevar is almost overlaying another color on top and turning the arrows green. Cannot figure out what.


    Click image for larger version

Name:	Colors.jpg
Views:	106
Size:	109.7 KB
ID:	4439783
    In this image is a lot to take in.
    1. What stylevar(s) influences the color of these buttons/text on posts?
    2. What stylevar(s) influence this color? As you can see, the icons are purple. I have no purple used anywhere in any stylevar that I can see. Like the previous issue with the green, I get the feeling there is a color that is overlaying another causing this weird purple blend to show up. I'd like for these to be either blue or grey.
    3. Same deal here. What stylevars should I look at? Would really prefer if these weren't green and purple.
    4. What stylevars are used to potentially change these from having black text on a light background to having light text on a dark background?

    Any help would be appreciated.

    Oh also, what stylevar sets the background color of the first post in a thread? I thought it was Global Palette Accent Color 03 but that did not change anything when I tested.

  • #2
    Are you basing your style off the Dark Theme that ships with vBulletin?

    Re icons: The icons are controlled by the style variables in the "Icons" group of the Style Variable Editor. The greenish would be Blues in the default style so you'll have to adjust the blue colors to get what you need.

    1-3. The same Icon style variables control these images.

    You can see how all SVG images are affected by adding /special/css-examples to your site URL and scrolling down to the Sprite (css_b_icon.css) section.


    4. Change the value of the ckeditor_image_path to dark.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      Originally posted by Wayne Luke View Post
      Are you basing your style off the Dark Theme that ships with vBulletin?

      Re icons: The icons are controlled by the style variables in the "Icons" group of the Style Variable Editor. The greenish would be Blues in the default style so you'll have to adjust the blue colors to get what you need.

      1-3. The same Icon style variables control these images.

      You can see how all SVG images are affected by adding /special/css-examples to your site URL and scrolling down to the Sprite (css_b_icon.css) section.

      4. Change the value of the ckeditor_image_path to dark.
      HUGE thanks for those tips! I had no idea about that css-examples page and my God, that thing is brilliant for testing this stuff out. I also had no idea there was an included dark image path for the editor. That's actually awesome.

      Turns out that some of the purple colors were caused by the "Steel 02" setting. Changing it to a grey worked out very well.

      I also had to change some of the Blue colors (specifically Blue 02-05) to a grey to get rid of the greenish hue on some of the buttons.

      Also, to answer your first question: I built this based off of the light theme we use on the site, which itself was built off of a purely default vB5 theme. I had not used the Dark Theme that ships with vBulletin as a basis.

      Thank you so so much. I'm still working on the theme a bit so if I run into any other questions, I'm sure I'll be back here. Sure beats trying to figure this out at 2AM like I attempted last night.


      EDIT: Ok, just 2 more questions:

      1: What stylevar handles the color of the font when you're typing inside the WYSIWYG editor? Not the output, just when typing? Assuming there is one.

      2.
      Click image for larger version  Name:	Font.jpg Views:	1 Size:	13.5 KB ID:	4439826
      In the above image, is there a way to change the font from black to white (or whatever color) where it says "No file chosen" next to the "Choose File" button? If not, no biggie. I tried changing "popup_text_color" but that didn't change that line.


      Sorry for all the questions. Stylevars were never my strong suit.
      Last edited by Zips; Tue 5 May '20, 8:03pm.

      Comment


      • #4
        Sorry to double post. Giving it a little bump since those edits obviously don't make a thread unread.

        Any idea about #1 in the previous post's edit? Font color when typing in the editor? Not a big thing, so if it's not obvious don't worry about it.

        Plus, if you have any ideas about #2 above (reposted below as well), would be great. If not, it's no problem.


        In the above image, is there a way to change the font from black to white (or whatever color) where it says "No file chosen" next to the "Choose File" button? If not, no biggie. I tried changing "popup_text_color" but that didn't change that line.

        Comment

        Related Topics

        Collapse

        Working...
        X