Nitpicky stuff :)

#1

Hi James,

Some nitpicky questions here, when you have a chance. I know we can set up our calendar appearance. These are the options I’m given that I can change:

image

When I preview my calendar, this is what it looks like:

image

image

Questions:

  1. How do I change the border around the pink buttons to match? It looks like it is white right now and I would prefer it to either be the same color as the button (pink) or the text (black).
  2. Is there a way to make the service bold and the provider not bold? Maybe that is on purpose, but I would want my service to have the emphasis.
  3. How do I change the color of the text to be black? I don’t think any of my calendar text options are set to white.
  4. How do I change the color of the button? I think the text is black but if I change any of the calendar text options I have to white, it changes the text in my pink or yellow buttons to white also, can’t remember which of the three text options it is.
  5. How can I change the color of the VoD Classes button and text (this is a personal translation, it normally says Workshop)? That peach and white really doesn’t go with my theme.

Finally, if I click on description, it looks like this.

image

I resized my photo, but it still is significantly larger than the class description. Is it possible to make the description image larger or the resource image smaller?

Thank you! Litsu

#2

Whilst I don’t see why the border is different to the background, I think all your problems can be solved by the excellent new feature of custom CSS that James has introduced: bottom-right of the Calendar settings page. To use it, of course, you have to have an understanding of CSS and how it works. Google it: there’s loads. Importantly, it is non-destructive so you can happily play and delete what doesn’t work.

To change the button border, try adding the following into the custom CSS box:

.btn.btn-primary {
border-color: [hex code or color name];
}

As a start, find out about DevTools in Chrome or IE/Edge. This allows you to find the particular “class” being applied to individual items and even play around with the settings to perfect what you want before adding to the Smoothbook calendar custom CSS.

In this way, you have a great deal of control over how your calendar looks. It’s really useful!!

1 Like
#3

Thank you for the suggestion. I am not familiar with CSS and am afraid I might mess things up totally…but at least, like you said, it’s not permanent. I’ll have a play.

#4

Thanks @Ian_M1, yes that would be the best way of doing this.

@Litsu_R you can’t do any permanent damage by experimenting with the custom CSS (at worst you can just delete it).

Hope that helps!

#5

@james, @Ian_M1
Brilliant! I love how much control we have to make our calendar ours. After playing with the custom CSS, this is what it looks like now.

image

I can’t get the VoD Classes border color to change to black. In the custom CSS, I have:

.calendar-main .shift-container .is-workshop span {
display: inline-block;
float: right;
padding: 1px 10px;
margin-left: 5px;
font-style: italic;
color: #000000;
border-color: #000000;
background-color: #da1d81;
font-size: 0.9em;}

Any advice? And also changing the resource image size…is that something I can also do in the custom CSS?

Last thing, after I make changes to the custom CSS, save, and hit preview calendar, a red warning window pops up and then disappears. It happens in the space of only a second. I have tried to screen capture but it is too fast. How can I figure out what it is? Only started happening after I started playing with the custom CSS>

Litsu

#6

Please provide a link to your calendar. One really needs to inspect it to tell.

James will need to address your last two points, although you could just try adding CSS to control the image and see if it works!!

Ian

#7

@Ian_M1

Here it is. I’ll keep playing with it and see if I can get it to work.

https://cal.smoothbook.co/fit-life-lemonade-calendar#/class

#8

@james
I still can’t read what it says, but from the snippets I could see, I think the system doesn’t like anything but letters/numbers in the organization name? I wanted it to list my name and company:

 Litsu R (FIT for Life and Lemonade)
 Litsu R - FIT for Life and Lemonade

I get the red warning pop-up window. If I take the () or - out, no warning.
Is there any way to be able to add those characters as acceptable?

#9

Hi @Litsu_R,

I’m seeing black borders on the buttons, that seems to be working now?

Yes the ‘slug’ / customised url needs to be url friendly. I’m pretty sure I did some checking / filtering on that but it’s possible that some characters are incorrectly getting through. Sorry - you will need to use url friendly characters in the slug.

Thanks, James

#10

@james

Hi, yes…I keep on playing with the custom CSS. I love it! I just can’t figure out if there is a way to decrease the size of the resource image. When I try to inspect the element, I can’t see where I can change the size.

I wasn’t talking about the slug…but the organization name under organization settings. It seems to be working okay with the parentheses now.

Cheers!

#11

Ok that’s a weird one, I will look into that!