Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #15672

    I have been trying to change the css to create a new button or change the orange button style all together. Ideally I would like this style of button for the orange button:

    button.css3button {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    color: #ffffff;

    padding: 10px 20px;

    background: -moz-linear-gradient(

    top,

    #ff8a1d 0%,

    #ff8001);

    background: -webkit-gradient(

    linear, left top, left bottom,

    from(#ff8a1d),

    to(#ff8001));

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    border: 1px solid #dd6b01;

    -moz-box-shadow:

    0px 1px 3px rgba(000,000,000,0.5),

    inset 0px 0px 2px rgba(255,255,255,0.7);

    -webkit-box-shadow:

    0px 1px 3px rgba(000,000,000,0.5),

    inset 0px 0px 2px rgba(255,255,255,0.7);

    box-shadow:

    0px 1px 3px rgba(000,000,000,0.5),

    inset 0px 0px 2px rgba(255,255,255,0.7);

    text-shadow:

    0px -1px 0px rgba(000,000,000,0.2),

    0px 1px 0px rgba(255,255,255,0.3);

    }

    Where would I enter this css, or how can I edit buttons for the Choices theme. I tried entering the specific hex color in the buttons shortcode menu when asked for background color but that has no change on the button at all and it defaults to either gray or the standard theme color button when I make changes like that. Please let me know as I would like to have some custom buttons.

    Thanks,

    Doug

    #88465

    Hi,

    On the shortcode button, add a special class on it. Then on your custom.css, add the style that you wanted.

    Regards,

    Ismael

    #88466

    Sorry I am a bit novice at this could you explain a bit more, possibly provide an example?

    Thanks!

    #88467

    Hi dnelsonuf,

    Go to the Content Editor(this is where you place the content of your page or post), you will see the shortcode button, after you have generated the short code, the button code will look something like this:

    [button link="http://kriesi.at"]Purchase[/button]

    just add a class, let’s name it my_special_button, the new code should look something like this:

    [button link="http://kriesi.at" class="my_special_button"]Purchase[/button]

    Then go to: wp-content/themes/choices/css/custom.css or you can just go to Quick CSS and add the styling to your button, just integrate your code above, it should look something like this:

    .my_special_button {
    color: #000;
    }

    Just replace the attributes and you can replace the name of the class. Hope this helps. :)

    Regards,

    Ismael

    #88468

    This still has made no changes to my register button, here is the page: http://www.staging-sealtrainingadventures.com/programs/seal-adventure-challenge/

    I tried both ways once by entering it in the custom.css and then I tried it in the Quick CSS as well. Neither way worked the button color did not change even when I tried simply entering a color: for the css instead of all the stuff above?

    What is going on it looks like the themes styles are overriding whatever I put in there?

    #88469

    Hi dnelsonuf,

    Is the register button you want to change? You can use this selector:

    .avia-button.register {

    }

    Hope this helps. :)

    Regards,

    Ismael

    #88470

    Thank you, that worked! One last question how would I apply a hover and active state to that button? The first part of css works great its just the hover and active states that don’t seem to be working correctly now:

    .avia-button.register {

    color: #fef4e9;

    border: solid 1px #da7c0c;

    background: #f78d1d;

    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

    background: -moz-linear-gradient(top, #faa51a, #f47a20);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#faa51a’, endColorstr=’#f47a20′);

    }

    .avia-button.register , .avia-button.register:hover {

    background: #f47c20;

    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));

    background: -moz-linear-gradient(top, #f88e11, #f06015);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f88e11′, endColorstr=’#f06015′);

    }

    .avia-button.register:active {

    color: #fcd3a5;

    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));

    background: -moz-linear-gradient(top, #f47a20, #faa51a);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f47a20′, endColorstr=’#faa51a’);

    }

    Thanks for all the help!

    #88471

    Hi,

    Just add a hover style on this

    .avia-button.register:hover  {

    }

    Regards,

    Ismael

    #88472

    I have tried that in the quick CSS and it does not work, this is what I put in there below the button style:

    .avia-button.register:hover{

    color: #fff

    background: #f47c20;

    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));

    background: -moz-linear-gradient(top, #f88e11, #f06015);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f88e11′, endColorstr=’#f06015′);

    }

    On hover the font changes to gray and not white like it is specified in the above css?

    #88473

    Any idea on how to fix this? as you can see it still isn’t working the way it should on that page.

    #88474

    Hi dnelsonuf,

    You forgot to add a semi-colon(;) after the color: #fff. Try to add the semi-colon, and it should work. If not, try to add the !important. :)

    Regards,

    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘How to Change a Button Styles’ is closed to new replies.