How can I format the ticket description textarea ?

Hi,
The "Use Support System styles" option in the Support System front end does not go well with my site. I would like use the site default CSS, but there seems to be something in the Support System styling that is over-riding the default CSS and my manual over-rides. I have also had trouble with this styling in the Q&A plugin, particularly the textarea elements. There is no boarder and it is hard for people to see there is a textarea. I have added a separate textarea and line input box to see the style regular elements get, though just using test colors to make them stand out. Can you help me with the exact CSS identifiers to use to over-ride the Support System Textareas and also point me to in general how to find this for wpmudev plugins please? This inability to pick up the custom css styling is something I've had trouble with for a while and am trying to make more use of these excellent plugins, and I would really like to know "the key" to styling these elements. The default "use styling" or "light/dark" style options generally do not fit well in my themes. In particular I would like to be able to style buttons, textareas, input boxes and option picking, and sometimes when I add these to my CSS the plugin elements do not pick up the styles, like I have to be more specific or the styling is being applied after mine. I've read the documentation for the Q&A and Support System I believe and don't easily see the css elements and classes to reference to over-ride these. I can see it flash where it picks up my style for a moment then flashes back to a white textarea with no border.
Thank you!
Aurelio

  • Kasia Swiderska

    Hello Aurelio,

    I checked your custom styles in Divi options and they are way too general to override styles of Support system.
    Also you are not targeting them with right selectors - that is why you can see that flash from green to white. When page loads textarea is covered with TinyMCE html output and it is using different tags there.
    Please use element inspector in your browser to find right selectors https://developer.chrome.com/dimage_classevtools

    I've added example code that will add border to text editor

    #wp-support-system-ticket-message-wrap {
        border: 1px solid black;
    }

    As you can see i used wp-support-system-ticket-message-wrap id (you can see it on my screen). if you use code inspector you will see that elements have classes and IDs you can use in styles - also you can combine parent element selectors with child selector to be more specific.
    http://www.w3schools.com/cssref/css_selectors.asp

    There is no one general way to add custom styles - elements have to be inspected to see what classes or id they have and then using those add own styles.

    Let me know if you have more questions.

    kind regards,
    Kasia

  • Aurelio

    Thank you! The wp-support-system-ticket-message-wrap selector was exactly what I was looking for. I will work on using the inspector to find these selectors. That is a very helpful tip. I have been viewing the page sources in text and getting lost trying to find the right selector/combination of selectors, trying to apply styles to the classes and IDs I found that "might have" been it, but the inspector helps a lot.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.