Differences

This shows you the differences between two versions of the page.

Link to this comparison view

stylesheets [2013/05/10 10:57] (current)
admin created
Line 1: Line 1:
 +====== Advanced Look & Feel Customisation ======
  
 +<WRAP important>**Technical**: This section requires an understanding of Cascading Style Sheets</WRAP>
 +
 +If you know a little CSS, you can customise virtually anything on Tour My App. For example, you can make your tour box look like this:
 +
 +{{:tourmyapp.png?nolink|}}
 +
 +This page describes how to go about doing that.
 +
 +==== Basic CSS Customization ====
 +
 +The idea with CSS customisation is to write your own stylesheets that override the default stylesheet provided by Tour My App. All you have to do is to create your style rules, and then include them in your application. The rules can be in a separate CSS file, or included in the page itself.
 +
 +<WRAP important>Make sure you include your rules **after** you have included the tourmyapp.css file.</WRAP>
 +
 +The following CSS selectors can be used to customise the main styles:
 +
 +  * ''#tourmyapp .tourmyapp'': This is the base element for the tour box. You can set your main font style and sizes as well as background colours (or images if you want), borders, rounded corners and drop shadows
 +  * ''#tourmyapp .tourmyapp-close'': Styles for the close tour button
 +  * ''#tourmyapp .tourmyapp-toolbar'': Styles for the bottom toolbar (which contain the step count and Next button)
 +  * ''#tourmyapp .tourmyapp-step-index'': Styles for the step count message
 +  * ''#tourmyapp .tourmyapp-nxt_button'': Styles for the Next/Finish button
 +
 +==== Tour message formatting ====
 +
 +You can also override the default formatting (eg: styles for bold, italics etc) that is used in the content pane of the box. 
 +
 +  * ''#tourmyapp .tourmyapp-content'': Base tourmyapp content selector
 +  * ''#tourmyapp .tourmyapp-content strong'': Styling for bold elements
 +  * ''#tourmyapp .tourmyapp-content em'': Styling for italics
 +  * ...and so on for any other element in the content pane
 +
 +==== Creating title bars ====
 +
 +If you look at the image above, you'll see a title bar for the message box. How was that done?
 +
 +Creating a title bar is essentially a custom styling for the Heading element in the content pane. Here is how to do that:
 +
 +  - First, in your tour my app content, add a heading, like this ''### Welcome''. This will create a 3rd level heading in the content box
 +  - Next, style the H3 element in the content pane, like so: ''#tourmyapp .tourmyapp-content h3 { background: green; color: white; margin: 0; }'' 
 +  - This will make the heading with a green background with white text, making it look like a part of the message box. You can add a background image, CSS3 gradients or just about anything.
 +
 +You can use the same technique to add all kinds of snazzy effects to your tour boxes. Let your imagination go wild 8-)