change styles of default support system styles using css

hi
I want to change the look of each of the pages of the support system using css
support page, submit new ticket page and faq page
I want to change colors, fonts, sizes and remove certain text etc
Please give me the generic css codes for doing this on each page and this way I can play around with it myself
for example - the code for changing the font size
the code for changing the font color
the code for changing text
the code for removing add files
the code for changing the color of the boxes
Basically every code I need to fully customize each page as I want
Thank you

    Bojan Radonic

    Hey there @michael, hope you're well today!

    Since you're using child theme the best way to add CSS would be to add it in you child theme style.css Each of those pages has unique page ID which we can use in the selector to target that specific page with different styles. You're going to need that only if you want different styles for each of those pages.

    Those selectors are:

    Support Page - .page-id-435
    Submit new ticket Page - .page-id-564
    FAQs Page - .page-id-566

    So first things first, I'll need you to let me know which parts of the text you're looking to change (font size, color), also adding test tickets, questions and faqs could help in order so we can see those changes made.

    To remove add files please try adding the following:

    .support-system-attachments {
      display: none;
    }

    To change the border, font size and color of the font in the select box, please try adding the following:

    #support-system select {
    border-color: #ccc;
    color: rgba(0,0,0,0.75);
    font-size: 12px;
    }

    To change the border, font size and color of the font in of input fields please try adding the following:

    #support-system input[type="text"], #support-system input[type="password"], #support-system input[type="date"], #support-system input[type="datetime"], #support-system input[type="datetime-local"], #support-system input[type="month"], #support-system input[type="week"], #support-system input[type="email"], #support-system input[type="number"], #support-system input[type="search"], #support-system input[type="tel"], #support-system input[type="time"], #support-system input[type="url"], #support-system input[type="color"], #support-system textarea {
      border-color: #ccc;
      color: rgba(0,0,0,0.75);
      font-size: 12px;
    }

    Note that in both cases above these are original values and to change them you'll have to replace the following:

    -color hex value (#ccc) to change the color of the border, you can use sites similar to this one to get hex value for the color of your choice: http://www.color-hex.com/
    -rgba color for color of the text, you'll find more info about that here http://www.w3schools.com/cssref/css_colors_legal.asp
    -numeric value in font size to change the size of the font.

    Hope this helps

    Best regards,
    Bojan

    Bojan Radonic

    Hey @michael,

    To do that you just have to add page id class (.page-id-435) to the selector. So for example if you want to target select box on support page your code would look like this:

    .page-id-435 #support-system select {
    border-color: #ccc;
    color: rgba(0,0,0,0.75);
    font-size: 12px;
    }

    Also please note that in code in my previous post (for example the code for input fields) there are multiple selectors which are separated by comma, in order to target to specific page you'll have to add page id class to each selector, for example:

    .page-id-435 #support-system input[type="text"], .page-id-435 #support-system input[type="password"], .page-id-435 #support-system input[type="date"] and so on..

    Hope this helps

    Best regards,
    Bojan