Edit and/or Create More Layouts

From IThemes Codex
Jump to: navigation, search

Tipsy comes with six current layouts that you can choose from to style your Tipsy tooltips. You can edit any existing layout OR create a new one to suit your needs.

Make a BackupBuddy backup of everything before you proceed, or at least download the existing styles to your computer as a backup. You can also always download the latest Tipsy from your Member's Area, unzip it on your computer and upload only the wp-content/plugins/tipsy/layouts in case you want to restore the default layouts (in case you accidentally mess up something that you want to undo).

  • Remember: if you edit any existing default layout that comes with Tipsy, all your changes will be lost when you upgrade Tipsy to any newer version.
Edit Existing Layout
  • To edit any existing layout display:
    • Go to wp-content/plugins/tipsy/layouts folder
    • Go into the layout you want to edit. Each layout is ordered in the manner it is shown in your Tipsy Group Settings area, from left to right.
    • Edit the style.css file in that folder to your liking.
    • Save. Your Tipsy will now be shown according to your styling changes in the style.css file.

Note that you will have to edit any existing layout again after upgrades, as upgrading to any new Tipsy version would override the default templates with never versions. It is recommended that you instead create a new layout, as explained below.

Create New Layout
  • To create a new Tipsy layout, you can do one of the following 2:
    • 1 : Create a new folder in the wp-content/plugins/tipsy/layouts folder
      • Put a style.css file in that folder and any image with the name screenshot.png
      • Put any form of styling you wish in that style.css file. You can check the existing layout folders to copy paste the styling classes from.
    • 2 : Duplicate any existing folder in the wp-content/plugins/tipsy/layouts folder and work on that css file.
      • Go to the wp-content/plugins/tipsy/layouts folder
        • If you are using a control panel like cPanel, duplicate any folder and give it any different name you wish.
        • If you are using an FTP program, download any layout folder to your computer, rename it, and then upload it back up.
      • Edit the style.css file in that newly duplicated/renamed/uploaded folder to suit your needs.

After you edit any existing layout OR create a new Tipsy layout, simply go into any Tipsy Group Settings and choose the appropriate Layout image for the styling you just worked on in the new folder.

  • Remember:
    • 1 : Each image shown in Tipsy Group Settings page corresponds to the folder order list in the wp-content/plugins/tipsy/layouts folder. So if you click on the 4th image on your Tipsy Group Settings page, you are basically choosing the 4th folder, listed alphabetically, in the wp-content/plugins/tipsy/layouts folder.
    • 2 : If you edit any existing default Tipsy layout instead of creating a new Tipsy layout, all your changes will be lost when you upgrade to a newer version. Upgrading results in all the default files, including the default templates, to be overwritten also. You will have to redo the changes again if you choose this route. Better option would be to create a new layout as explained above.

← Back to Tipsy Codex Home

Personal tools
iThemes Codex
Codex Navigation