Using the Design Layout tools.

As discussed in the Custom Themes page, we have incorporated LESS (a variation of CSS) into each of our themes. This gives the user the ability to change an aspect of their site very easily.

To make changes to the look and feel of your site, click on the "appearance" button.
 
 
To update the colors of your layout, click on the button that says "designer."

 

This will open the layout designer menu.

On the left side you will have a menu with various options to change colors and text styles.
On the right you will see your site and the changes taking place as they are modified.

The Revert Button:

The revert button will revert any changes you have made in the design editor back to their original settings as found in the LESS file of the theme. This will discard any changes you have made to your themes design.

The Finished Button:

The finished button essentially publishes the changes you have made to the design of your site. After you have clicked on the Finished button it will take you back to the main menu of the SquareHook tool. Once you have clicked to the finished button and you are happy with the look of your site, you can click on the "Visit Site" button found at the top of your screen to view the updated styles.

 

Adding/Adjusting a Banner

If you are looking to switch out a banner, the steps are simple!  Once you've clicked on the Appearance button, select the "Banners" icon.

 
Select the +Add Banner button to begin adding scrolling banners.
 
Under your banner, there will be a small cloud icon.  Select it to upload an image to your banner.


Once you have added an image, be sure to fill in the appropriate information, including a title or description.

You also have the option to edit the HTML if you so choose.

Be sure to select the Save Settings to save your changes.

Our tool allows you to drag and drop to reorder the banners, by selecting any of the blue boxes and dragging it to the specified area.

 
 

SquareHook provides the option for users to edit the HTML/CSS/Javascript. But we always offer this option with a caution.  Making an error in the code may cause your layout look and feel to change.  To edit your code, select the "</> code" icon.

 

Select a layout you would like to edit, by double clicking your mouse over the desired layouts.   You can edit the content at your leisure.  Be sure to select the file folder to save once you're done editing the layout.

Changing Your Website Theme

You can change your website theme at any time, so if you ever change your mind-don't worry.  The change is a breeze.  Just select the "change theme" icon.


The current theme will show in the upper left corner of your theme.  You can select any other theme, but scrolling over that theme and selecting the blue button to set the layout.