New to the community? Start here

Change Button Colors in Appointments +

Hi There,

I am hoping to be able to change the default color for the "Next Month" button on my Appointments + page.

The URL is: http://sanctitycenter.com/?page_id=2350&preview=true&preview_id=2350&preview_nonce=99fa883f72

I'm not really sure what code to use to make the button more visible by changing the color?

Cheers!

  • George
    • Accounts - Team Leader

    Hi @Shane and welcome to the forums!

    Unfortunately, the provided link isn't accessible
    (I get this message : You do not have permission to preview drafts.)

    But you may customize it from settings

    Just go to your dashboard>Appointments+>settings>general and scroll down
    You will see Color Set option

    From there choose > Custom

    Then you may add whatever code fits your style!

    For Color codes you may copy-paste from this link

    Hope that helps!
    Kindly regards,
    George

  • Shane
    • Flash Drive

    Hi Tom,

    Yep, it works great!Thanks George!

    Now though, the font needs attention: The font has a drop-shadow, and a black hover-over color that I'd like to be able to change. I'm also not actually sure how to change the font color itself.

    Thanks so much for the help guys! Loving how it's coming together!

  • George
    • Accounts - Team Leader

    Hi@ Shane, maybe this is what you're looking for

    div.next a {
    background: #E3E4FA !important;
    color: #fff !important;
}

div.previous a {
    background: #E3E4FA !important;
    color: #fff !important;
}

    (Without any hover action or shadows)
    hope that helps,
    George

  • George
    • Accounts - Team Leader

    If you want, you may choose your own colors from here and replacing the ones in the code i've provided you.

    Background: is for button color
    color: is for font color

    So now you may customize it your way!
    Keep up the good work!
    Cheers,
    George

  • Shane
    • Flash Drive

    Hi George,

    Thanks! Looking good! Though, it would be ideal to have a more 'button' like appearance. The issue before was that the font colors weren't looking good with the hover/shadow effects because of the colors of the font. But, I would still like to have the button have some hover effect. Also, some way of making it pop from the page a little more- I think they use a gradient of some sort on the original button- would be fantastic.

    Cheers!

  • George
    • Accounts - Team Leader

    Hi @Shane

    I suggest if you haven't installed any plugin for customizing CSS to install
    "My Custom CSS" so it will be realy easy making all this changes.

    After installation and activation, you may copy-paste css codes and you're set!

    Try this code please: 

    .appointments-pagination a {
	-moz-box-shadow:inset -29px -17px 50px -28px #c5abdb;
	-webkit-box-shadow:inset -29px -17px 50px -28px #c5abdb;
	box-shadow:inset -29px -17px 50px -28px #c5abdb;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8c00ff), color-stop(1, #a200ff) );
	background:-moz-linear-gradient( center top, #8c00ff 5%, #a200ff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c00ff', endColorstr='#a200ff');
	background-color:#8c00ff;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	border:1px solid #e8b7e8;
	display:inline-block;
	color:#ffffff;
	font-family:Arial Black;
	font-size:16px;
	font-weight:bold;
	padding:4px 35px;
	text-decoration:none;
}

.appointments-pagination a:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a200ff), color-stop(1, #8c00ff) );
	background:-moz-linear-gradient( center top, #a200ff 5%, #8c00ff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a200ff', endColorstr='#8c00ff');
	background-color:#a200ff;
}

    I've made that really easy and quick using this link

    I believe now you've got all the tools to customize what ever you need.

    Hope that helped and your issue is resolved!

    Kindly regards,
    George

  • Shane
    • Flash Drive

    Hi George,

    Thanks for the code and link. The theme that I am using actually has a feature like My Custom CSS, but still a great tip!

    I've tried the button generator, and it looks great on the generator website, but it behaves strangely on the appointments + site. I'm not sure if the plugin is adding a black text hover on the button? It's not the end of the world if I can't get the button effect going- I just wanted it to be as visible as possible. Thanks for the continuing help!

  • George
    • Accounts - Team Leader

    Hi Shane!

    The button generator just creates the css code for you.
    You have to manually assign the destination of the code (meaning button/attributes)

    If you look again at the code I provided you earlier you will see :

    1.appointments-pagination a {.....}
    2.appointments-pagination a:hover {....}

    1 is for button color
    2 is for hover color

    I've just checked your site and it is clear that you didn't change hover color "destination" so your css code (hover option) isn't assign in any element of your theme (button)

    Hope that helps,
    George

  • Shane
    • Flash Drive

    George,

    Great! Hover is working! (Though still a little differently than I tried to create via that handy link)

    But, the text isn't reflected my style choices on the link either. I'm hoping to keep white text, but the text is staying gray/black?

    Thanks again for helping me with this!

  • George
    • Accounts - Team Leader

    Hi Shane

    Ive just installed appointments+ on my test site and tested again the code i've provided you... For me it's behaving as it supposed to! I even changed 4 themes.

    Please check at your theme css settings (where you place css code) that you
    removed previous codes! The first codes i've posted had "!important" attribute which meant to override other.

    I also noticed something strange on your "previous month" button.

    I can't really tell if there is an issue with your theme (could change to twenty twelve and check that) or just the way css code was added.

    I believe that "keeping" clean is the best method!
    Not too much!

    You could simply delete all changes you've made (keep css codes if you want in a simple text file) from the beginning of this process and start over.
    If you follow the instructions you will see how easy it can be.

    you could see this link too

    (I like how simple and "clean look" your site is, in my personal opinion as I said, not too much!)

    Kindly regards
    George

  • Shane
    • Flash Drive

    HI George,

    Your right, I did have some of the old code in there-oops!

    I tried with twenty twelve, and the current code that I am using isn't working at all there! This must be an issue with how I am putting in the code.

    This is the code that I am using right now:
    .appointments-pagination a {
    -moz-box-shadow: 8px 1px 10px -4px #9862c4;
    -webkit-box-shadow: 8px 1px 10px -4px #9862c4;
    box-shadow: 8px 1px 10px -4px #9862c4;
    background-color:#7941e0;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #693fc4;
    display:inline-block;
    color:#ffffff;
    font-family:Verdana;
    font-size:24px;
    font-weight:normal;
    padding:12px 50px;
    text-decoration:none;
    }.appointments-pagination a:hover {
    background-color:#8255eb;
    }.classname:active {
    position:relative;
    top:1px;
    }

    I totally agree that simple is best! I didn't expect this to be an issue really- I'm surprised that one can't just change the colors of the button provided with the plugin more easily.

    Cheers!

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.