Unfortunately It does not suit my needs. I am not

Unfortunately It does not suit my needs. I am not a developer so I cannot modify the appearance of the front end to match my website. I was hoping it would blend well with my theme but it has not.

I know It is not your fault but i would kindly ask for a refund. I clearly don't expect you to made the modifications for me so that all I can really do. Thanks in advance!

  • Michelle Shull

    Hi, Giovanni!

    We can absolutely help with some CSS if you need it, we can likely make Support System blend right into your theme with just a bit of work.

    If you'd still like a refund, I can send you to our billing department. We're not authorized to issue refunds on the forums, but one of our fabulous account specialists can help you out here.

    Use our Contact Form, and select "I have a billing question" from the dropdown. In the subject line, type ATTN: Account Specialist.

    Before you do, we'd love to at least try to make Support System look pretty on your site. :slight_smile: If you want to give us some ideas about what you'd like to see, we're all happy to take a look. :slight_smile:

    Thanks!

  • Michelle Shull

    Hey Giovanni!

    This should get all the buttons and labels matching your theme. I borrowed the styling from the buttons on your pricing table on the front page.

    #support-system .button.tiny.success {
      color: #fff;
      border-color: #ac1100;
      background-color: #ff2a13;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    #support-system .button.tiny.success :hover {
    background-color: #ac1100;
    }
    
    #support-system .button.small {
      color: #fff;
      border-color: #ac1100;
      background-color: #ff2a13;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.small :hover{
    background-color: #ac1100;
    }
    
    #support-system .button.tiny.secondary {
      color: #fff;
      border-color: #ac1100;
      background-color: #ff2a13;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.tiny.secondary :hover {
    background-color: #ac1100;
    }
    
    #support-system .label.success {
    background-color: #ff2a13;
    font-size: 12px;
    font-weight: 600;
    }

    Do you have a custom CSS plugin? If you've got Jetpack, it comes with one; some themes include a CSS editor, or you can get a plugin, like this one: https://wordpress.org/plugins/simple-custom-css/. Or, if you're using a child theme, you can just add this to the CSS file for your child theme.

    My screenshot shows what you should see after the custom CSS is added.

    Hope this helps!

  • Michelle Shull

    Got it!
    I added the new CSS to your site already, double check to make sure I got all the buttons. It was a tricky one!

    Here's the complete CSS I added:

    #support-system button:hover, #support-system button:focus, #support-system .button:hover, #support-system .button:focus {
    background-color: #ac1100 !important;
    }
    
    #support-system .button.tiny.success {
      color: #fff;
      border-color: #ac1100;
      background-color: #ff2a13;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    #support-system .button.tiny.success :hover {
      color: #fff;
      border-color: #ac1100;
      background-color: #ac1100;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.small {
      color: #fff;
      border-color: #ac1100;
      background-color: #ff2a13;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.small :hover{
      color: #fff;
      border-color: #ac1100;
      background-color: #ac1100;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.tiny.secondary {
      color: #fff;
      border-color: #ac1100;
      background-color: #ff2a13;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.tiny.secondary :hover {
      color: #fff;
      border-color: #ac1100;
      background-color: #ac1100;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.expand {
      color: #fff;
      border-color: #ac1100;
      background-color: #ff2a13;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.expand :hover{
      color: #fff;
      border-color: #ac1100;
      background-color: #ac1100;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    #support-system .button.tiny {
      color: #fff;
      border-color: #ac1100;
      background-color: #ff2a13;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .button.tiny :hover {
      color: #fff;
      border-color: #ac1100;
      background-color: #ac1100;
      margin-bottom: 0.66em;
      text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
      box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
      border-radius: 0.25em;
    }
    
    #support-system .label.success {
    background-color: #ff2a13;
    font-size: 12px;
    font-weight: 600;
    }

    Fancy buttons all around! Beerz for all! (But not till I'm done with my shift, boss!)

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.