How to add Schedule button

Hey, EarthlyBeauty!

Have you tried a plugin like MaxButtons where you can make your own buttons and link them to wherever you like? (It creates a short code that you can drop anywhere on the page you like.

No, I haven’t thought of that. I will give it a try.

Stupid Question, now that I add the plug in how to I use it?

This compliments the following above question. I found a few youtube video on maxbutton.

Another option would be to put a text widget into a sidebar, and link it to schedulicity. You could then make it look like a button by using the CSS that’s used to style the other buttons on the site. Those buttons use the class “sidebar-buttons”

So for example, I could put a text widget into the custom sidebar widget area. Then I put in the HTML to make it a link. So if I’m trying to link to www.remarpro.com with a button that says “Schedule An Appointment” I would go like this

<a href="https://www.remarpro.com">Schedule An Appointment</a>

Then, to make it look like a button, I would add the CSS class like this:

<div class="sidebar-buttons"><a href="https://www.remarpro.com">Schedule An Appointment</a></div>

I was able to embed the following widget into my site from Schedulicity.com:

<img src=”//cdn.schedulicity.com/images/schedulenow_lt_blue4_lg.png” alt=”Online scheduling” title=”Online scheduling” border=”0″ />

but I want it to look like the same button that you have used in your design of the site, how can I do this. How can I customize the above widget and use it in the context of your design.

P.S. There is a text widget that they have as well.

OH!
The below link you gave me I copied it into the text box, tested it noted it goes to a wordpress page, than I tried adding the replacing wordpress with schedulicity.com, but it still took me to the wordpress page. What did i do incorrectly.
<div class=”sidebar-buttons”>Schedule An Appointment</div>

The schedulicity widget for the previous post is, it seem to have deleted a portion of it.
<img src=”//cdn.schedulicity.com/images/schedulenow_lt_blue4_lg.png” alt=”Online scheduling” title=”Online scheduling” border=”0″ />

i hope you read this before you reply:

good news! i manage to get figure out how to use the code you sent me. go to bmorewellcoop.com to see it. now my question is how to move it up and resize it.

i apologize for my lack of patience and allowing more time for me to figuring out how to use the code you so graciously sent me.

This is another topic:

I need to create buttons to link to the form page, Latest News, and Location and hours that look like the buttons on the home page. Do I do this using a widget like “MaxButton” or is there another way you would suggest?

Is there away that I can encase all the button that I am creating on the right, with a boarder like on the home page once I am done creating them.

Or is there a button maker that will allow you to create buttons like the one on your home page right side?

again i hope you read this before you reply:

i used the same code to create the form page, but i don’t know how to adjust the length or more it around.

also, how to encase it in the outline as the home page buttons.

i can duplicate the other page buttons once i create the page.

woman, sometimes it takes me a moment to figure out just what i am doing. most of the time i get this light bulb coming on…

Ok, if you’re trying to style like the front page, those links are in a class called “right-front-page-boxes”

So you’ll have to put a class on your link just like you did to make your request an appointment link look like a button.

So if this was your link

<a href="https://www.remarpro.com">Schedule An Appointment</a>

You would put the class on in like this

<div class="right-front-page-buttons">
   <a href="https://www.remarpro.com">Schedule An Appointment</a>
</div>

If you have more than one link, then you just put the class around the whole group. Like this

<div class="right-front-page-buttons">
   <a href="https://www.remarpro.com">Schedule An Appointment</a>
   <a href="https://otherpage.org">Print forms</a>
</div>

If you want to make adjustments to the styling, you’ll need to make sure you use a child theme. Then you can paste this onto the style.css file of your child theme.

.right-front-page-boxes {
    float: right;
    background-color: #EEE;
    border-radius: 10px;
    border: 1px solid #D2D2D2;
    width: 38.2%;
}

.right-front-page-boxes a {
    padding: 5px 25px;
    border-radius: 10px;
    border: 1px solid #D2D2D2;
    display: block;
    margin: 10px;
    font-family: open_sans_semiboldregular;
    font-size: 20px;
    text-decoration: none;
    color: #000;
    line-height: 110%;
}

Those are the settings from the main stylesheet that control that class. So you can play around with it and see how it and see what the changes do. The changes in the child theme will override the settings in the parent theme, and will not be overwritten by theme updates.

Here’s the thing though. You’re copying the front page buttons, so if you make changes to the width or height, it will also change on the front page. So if you want to be able to make changes on the other pages without affecting the front page, all you need to do is make up your own class.

So instead of wrapping the links in

<div class="right-front-page-buttons">
  links here
</div>

you could make one up like this. Lets use the hypothetical name “my-cool-link-buttons”

<div class="my-cool-link-buttons">
   link here
   link here
   link here
</div>

Then put this in your child themes style.css file

.my-cool-link-buttons {
    float: right;
    background-color: #EEE;
    border-radius: 10px;
    border: 1px solid #D2D2D2;
    width: 38.2%;
}

.my-cool-link-buttons a {
    padding: 5px 25px;
    border-radius: 10px;
    border: 1px solid #D2D2D2;
    display: block;
    margin: 10px;
    font-family: open_sans_semiboldregular;
    font-size: 20px;
    text-decoration: none;
    color: #000;
    line-height: 110%;
    background-color:#4ca3ff
}

So you could change the width on my-cool-link-buttons 38.2% to something else, and see how it looks.

You cold also add something like “margin-top:25px” to move it. And if you botch it all up, all you need to do is delete it and try again. when you delete the code from the child theme, the parent theme will take back over.

Sorry, all of the places I used the word “buttons” should be “boxes”

Hi Derek

Go to me site Bmorewellcoop.com and you see that it looks like.

I use the following code:
<div class=”my-cool-link-boxes”>
link here
link here
link here
</div>
Changed it to this:
<div class:”my-cool-link-boxes”>
<a href=”https://www.schedulicity.com/scheduling/BCAVSL
“>Schedule An Appointment </div>
New Patient Forms</div>

And the following CSS:
.my-cool-link-boxes{
float: right;
background-color: #EEE;
border-radius: 10px;
border: 1px solid #D2D2D2;
width: 38.2%;
}
.my-cool-link-boxes a {
padding: 5px 25px;
border-radius: 10px;
border: 1px solid #D2D2D2;
display: block;
margin: 10px;
font-family: open_sans_semiboldregular;
font-size: 20px;
text-decoration: none;
color: #000;
line-height: 110%;
background-color:#4ca3ff
}
What was created was just text links, no button (boxes) like on the home page. I tried adding
<div class=”sidebar-buttons”></div>
It produce the same type of buttons but as before with the same type of uniformed dimension. The size was determined by the amount of text.

I don’t know what I am doing wrong, help!

There’s a few things I can see.

You’re not closing your links with a
You’re using a : instead of a =
It also looks like you’re using smart quotes, as if your typing your code out using a word processor like Word and then pasting it in. If you’re going to do that, you should turn off smart quotes.

It should look more like this:

<div class="my-cool-link-boxes">
   <a href="https://www.schedulicity.com/scheduling/BCAVSL">Schedule An Appointment</a>
   <a href="https://bmorewellcoop.com/forms/">New Patient Forms</a>
</div>

So paste that in, and if it still doesn’t work I’ll take a closer look.

Also, your style sheet looks like this:

#wrapper2 {
   max-width: 990px;
   margin: 0 auto;
}
#wrapper3 {
   box-shadow: 0 3px #505050;
.my-cool-link-boxes {
    float: right;
    background-color: #EEE;
    border-radius: 10px;
    border: 1px solid #D2D2D2;
    width: 38.2%;
}

.my-cool-link-boxes a {
    padding: 5px 25px;
    border-radius: 10px;
    border: 1px solid #D2D2D2;
    display: block;
    margin: 10px;
    font-family: open_sans_semiboldregular;
    font-size: 20px;
    text-decoration: none;
    color: #000;
    line-height: 110%;
    background-color:#4ca3ff
}

You don’t have a closing “}” after your #wrapper3 styles. That breaks everything below it.