Button Default
[latepoint_book_button]
The [latepoint_book_button] shortcode is inserted into any location of your site allowing you to launch the application from a button.
This button differs to the [latepoint_book_form] in that the booking screen floats above the existing page rather then displacing the content you have.
Default Button
Syntax
[latepoint_book_button]Options
- bg_color – To change the background color of the button (default is blue – #1449ff)
- border – changing the border
- border_radius – Corner radius size
- caption – Text that is used for a button label (default is “Book Appointment”)
- font_size – The font size for the button label
- margin – The margin around the button
- padding – Padding for the button content
- text_color – option to change the color of the text (default is white – #ffffff)
Options
Syntax
[latepoint_book_button options="value"]Background Button Color
bg_color – This changes the background color of the button.
The button default is #1449ff (latepoint blue) with the default text color of #ffffff (white).
Background color change
Syntax example
[latepoint_book_button bg_color="#827c7c"]CSS Border – Shorthand property
border – The border property is a shorthand property
There are 3 shorthand properties the follow the CSS formatting rules. You can set the following border properties:
- border-width
- border-style (required)
- border-color
Border width, style and color
Syntax example
[latepoint_book_button border="2px dotted #a10303" bg_color="#827c7c"]border-style
Some standard border types are:
- dotted – Defines a dotted border
- dashed – Defines a dashed border
- solid – Defines a solid border
- double – Defines a double border
- groove – Defines a 3D grooved border. The effect depends on the border-color value
- ridge – Defines a 3D ridged border. The effect depends on the border-color value
- inset – Defines a 3D inset border. The effect depends on the border-color value
- outset – Defines a 3D outset border. The effect depends on the border-color value
- none – Defines no border
- hidden – Defines a hidden border
border-width
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
border-color
The border-color property is used to set the color of the four borders.
The color can be set by:
- name – specify a color name, like “red”
- HEX – specify a HEX value, like “#ff0000”
- RGB – specify a RGB value, like “rgb(255,0,0)”
- HSL – specify a HSL value, like “hsl(0, 100%, 50%)”
- transparent
Border Radius
The border-radius property is used to add rounded borders to the button.
Border radius
Syntax example
[latepoint_book_button border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]Button Label
Caption changes the text button label.
Caption
Syntax example
[latepoint_book_button caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]Size of the Font
The font_size parameter is used to change the size by px of the text in the label.
Font_size
Syntax example
[latepoint_book_button font_size="25px" caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]Margins and Padding around the button
Margins
This refers the the space around the button from the borders edge in px for top, right, bottom and left.
Padding
The padding properties are used to generate space around an element’s content, inside the defined borders.
Margin and Padding Syntax
All the margin and padding properties can have the following values:
- auto – the browser calculates the margin
- length – specifies a margin or padding in px, pt, cm, etc.
- % – specifies a margin or padding in % of the width of the containing element
- inherit – specifies that the margin or padding should be inherited from the parent element
To shorten the code, it is possible to specify all the margin or padding properties into one property.
The margin or padding property is a shorthand property in the order of top, right, bottom and left.
Margins and Padding
Syntax margin example
[latepoint_book_button margin="10px 20px 5px" font_size="25px" caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]
Syntax padding example
[latepoint_book_button padding="50px 50px" margin="10px 20px 5px" font_size="25px" caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]
Text Color
Last in the formatting line is the text_color property.
Text Color
Syntax example
[latepoint_book_button text_color=#a10303" padding="50px 50px" font_size="25px" margin="10px 20px 5px" caption="Mind Exploration" border_radius="15px" border="5px dotted #a10303" bg_color="#827c7c"]Final result
With the right combinations you should be able to match the button to your theme colors, look and style.
Centering your LatePoint button on the page
Using a div to center
This is not one of the easiest things to do as your theme and custom style sheets may interfere with the layout.
An option is to change your editing mode to “Code Editor” and to wrap your shortcode with a div with text centering styling.
- Position your cursor where you need the shortcode.
- Switch to Code editor from the options menu.
3. Paste the div with styling and your LatePoint shortcode like the below:
<div style="width:290px;margin:auto;text-align:center;">[latepoint_book_button selected_service="11" selected_service_extra="3"]</div>This should now have place your shortcode into the center of the screen.
Switch back to visual editor once you are done.