Difference between revisions of "Design"

From SimplyBook.me
Line 14: Line 14:
 
*Tender
 
*Tender
 
*SimpleBeauty
 
*SimpleBeauty
 +
*Hugo
  
from old ones:
 
*Bootstrap Square Rainbow
 
*Joy Bootstrap
 
  
Those themes support flexible timeline and have the option to adjust the colors of your booking page.</div>
+
Those themes support all new functionality and have the option to adjust the colors of your booking page.</div>
 
</div>
 
</div>
 
<br/>
 
<br/>
Line 27: Line 25:
 
You can change timeline in Settings // Design // Logo, background and timeline // Timeline type drop-down<br/>
 
You can change timeline in Settings // Design // Logo, background and timeline // Timeline type drop-down<br/>
 
[[File:Logo settings new.png | center ]]<br/>
 
[[File:Logo settings new.png | center ]]<br/>
There are 6 types of timeline:<br/>
+
There are 7 types of timeline:<br/>
[[File:Timeline settings.new.png | center ]]<br/>
+
[[File:Timeline settings new.png | center ]]<br/>
 
:'''Slots weekly''' - shows available time in the intervals equal to your service duration for a week. Starts counting from the first available time.
 
:'''Slots weekly''' - shows available time in the intervals equal to your service duration for a week. Starts counting from the first available time.
 
:'''Modern''' - shows available time in the intervals equal to your service duration for a day. Starts counting from the first available time.
 
:'''Modern''' - shows available time in the intervals equal to your service duration for a day. Starts counting from the first available time.
 
:'''Flexible weekly''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration for a week. Starts counting from the first available time.
 
:'''Flexible weekly''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration for a week. Starts counting from the first available time.
 
:'''Flexible''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration for a day. Starts counting from the first available time.
 
:'''Flexible''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration for a day. Starts counting from the first available time.
:'''Classes''' -  shows available time for providers for chosen date. Starts counting from the first available time of all providers.
+
:'''Modern provider''' -  shows available time for providers for chosen date. Starts counting from the first available time of all providers.
 
:'''Flexible provider'''- shows available times for providers in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration. Starts counting from the first available time on selected date.
 
:'''Flexible provider'''- shows available times for providers in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration. Starts counting from the first available time on selected date.
 +
:'''Classes'''- shows available times for classes in the intervals equal to class duration. Starts counting from the first available time.
 +
 
<br>
 
<br>
 
If you have services that have fixed start times, you can try using [[Custom_Features#Appointment_at_Fixed_Time| Appointment at fixed time]] Custom Feature.
 
If you have services that have fixed start times, you can try using [[Custom_Features#Appointment_at_Fixed_Time| Appointment at fixed time]] Custom Feature.

Revision as of 10:23, 4 October 2017

Where to change theme?

In Settings // Design // Themes & Colors.

Theme select new.png


Recommended themes
  • Default
  • Tender
  • SimpleBeauty
  • Hugo


Those themes support all new functionality and have the option to adjust the colors of your booking page.


Where to change timeline?

You can change timeline in Settings // Design // Logo, background and timeline // Timeline type drop-down

Logo settings new.png

There are 7 types of timeline:

Timeline settings new.png

Slots weekly - shows available time in the intervals equal to your service duration for a week. Starts counting from the first available time.
Modern - shows available time in the intervals equal to your service duration for a day. Starts counting from the first available time.
Flexible weekly - shows available time in the intervals equal to your timeframe duration for a week. Starts counting from the first available time.
Flexible - shows available time in the intervals equal to your timeframe duration for a day. Starts counting from the first available time.
Modern provider - shows available time for providers for chosen date. Starts counting from the first available time of all providers.
Flexible provider- shows available times for providers in the intervals equal to your timeframe duration. Starts counting from the first available time on selected date.
Classes- shows available times for classes in the intervals equal to class duration. Starts counting from the first available time.


If you have services that have fixed start times, you can try using Appointment at fixed time Custom Feature.


Where to change logo and background?

In Settings // Design // Logo, background and timeline.

Logo settings new.png


Logo and banner.png


Advanced design options with Custom CSS

Custom CSS allows to change the styles of different elements, hide them, change fonts, colors, font-sizes, etc. If you know CSS coding, please use tools of browser to find identifiers of elements and write rules in the settings of Custom Feature.

If you have no deep knowledge of CSS, please check this link with common CSS requests or contact support and they will try to find the best solution for you.


HTML description field for events

HTML description fields feature allows inserting HTML formatting (background and font color, bold, italic, underline, alignment and other HTML elements) for Service, Service Providers, Locations and Categories description fields.