What's the easiest way to adjust the Support System front end text colors?

Hi,
I am trying the new front end on the support system for a client and it seems real nice so far.
One problem I am having is the text color conflicting with the site theme. This site has a dark paragraph background with white text and light blue links, so the dark lettering is invisible.
I think this color is coming from the actual plugin since regular text and other things display fine, just this plugin text (x tickets) is hidden so far. I was looking for where to adjust the front end text color or CSS but did not see it. I have a basic site CSS over-ride section I can put it in, but looking at the various divs and classes, what is the best place (div, class, etc.) to over-ride the plugin's text colors on the front end please? I also get this same issue with the "Submit a new ticket" text when adding a ticket.
I can manually over-ride as I encounter hidden text against this dark theme, but would you let me know the easiest way to make sure all the front end text is aligning with the site's color scheme?
If the plugin doesn't over-ride the site's color scheme, and you think the issue is with the theme itself, would you let me know that too please? I can manually fix what I see now but I'm worried about updates, class names changing or my fixes not being permanent or taking into account certain elements as the usage increases.
Thanks!

  • Aurelio

    I am seeing other sections too where things are out of synch with the site's theme.
    There appears to be a bit of hard-coded coloring I don't see how to easily change, or if I am just over-looking where this plugin's color options are, please let me know.
    If adjusting every single element is too much, is there a simple "light on dark" option which should align better with the rest of this site's theme?
    Thank you

  • Aurelio

    Hi Michelle,
    This is an intranet site I'm currently redeveloping, for a HIPAA sensitive client I'm not allowed to enable external access for, using a commercial theme I'm not allowed to use on my own external test sites either...
    I am thinking it is anywhere in the plugin that hard codes the text as dark and background colors as white, it is over-riding the theme text colors and conflicting. I wish I could enable external access on this, since I know that would make it easier on both ends. I am looking through incsub-support.css to try to find what is conflicting but seeing hundreds of coloring references and am a little lost. :slight_smile:
    If there are no color settings or scheme options, is there maybe a list of this plugins main text css elements I can try to over-ride myself? I am trying to make a list of all the elements in incsub-support.css it is setting text to dark shades or setting the background elements too light for this color scheme, but if you had a list of main elements I can try to over-ride, maybe I could try that?
    Some plugins that have color schemes like this include options to adjust elements, or pick from a few schemes. Do you know if there are plans to make this color scheme more flexible, like plugin options?
    Is it just because the front end feature is new this one does not? If there any plans to make this more flexible and compatible I can manually over-ride what's necessary for now knowing it will all work out.
    There are so many hard coded color elements I'm a tad concerned updates may break my piecemeal overrides, but if options are on the way it's not as big a concern.
    This weekend I can test this on a similar light text on dark background site I can give you access to.

  • Aurelio

    Hi Michelle!
    Sorry for the delay. I just installed an open, dark theme I like on a different site to see if it's doing the same thing. I opened access to that site for you.
    I really like the look of Support Tickets. It looks really good on that background as well as a standard light one, for most places. The same parts of the text I posted screenshots for from the other site are invisible against this one too though.
    Any tips you can give or CSS you can help identify to override would be greatly appreciated.
    I have a section under appearances from a custom css plugin we can throw any overrides in.
    Please let me know if the access isn't working right.
    thank you for the help!

  • Aurelio

    Hi Michelle,
    I thought I had it but I cannot control what's in those white panels yet.
    I am coming close, but support system has some parts that are called by scripts that are kind of hard for my basic understanding to backtrack how to over-ride. I am using the same css on np.i as on buddy. I apologize, I am unable to give access to buddy, since that's more regulated, but if you can please help figure out what css elements are in those white frames on support requests, so I can change the invisible parts to be more prominent against dark themes requiring white font for basic areas, so much appreciated.
    Thank you!

  • Aurelio

    This isn't perfect but it's working to keep everything contrasted and I can tweak from here! Sorry this is sloppy just adding things to yours and Patrick's help, but it's working perfect to start tweaking and cleaning up from and wanted to let you know it's working! Thank you.

    .can-edit {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    
    .panel-body {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    
    input, .description {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    
    h1, h2, h3, h4, h5 {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    
    .row, .inline-list, .support-system-ticket-meta, .first, .support-system-reply-message,
    	.nav, .nav-tabs, li, .ig-error-field, .form-group, .col-md-3, .control-label,
    	.col-lg-9, #expert-content-tabs, .nav, .nav-tabs, a
     {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
  • Ignacio

    Hi @Aurelio.

    I see that you managed to solve it. Support System includes many, many styles that overrides the theme styles. I made the styles for white bakcgrounds that are the most common backgrounds so any theme with a dark background will need to overwrite a few CSS rules.

    As you have seen is not such a big deal but I'm changing some styles in every release. Front End styles are not perfect yet and some classes may vary from one version to another.

    Regards.
    Ignacio.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.