Bond St is a Premium template. Here is some helpful information pertaining to the template:
|Control panel version||3|
|Slideshow in gallery||YES|
You will find the ability to change about nine(9) colors from the Colors section.
|Color Name||Color Description|
|Title Color:||Colors the logo if no logo file is used.|
|Text Color:||Colors the page text, e-card form and label text, contact form and label text, selected contact form field border, calendar date backgrounds, calendar text, and calendar month arrow buttons. Note that unselected dates on the calendar use the text color setting at an opacity of 30% while selected dates use the text color setting at an opacity of 70%.|
|Body Color:||Colors the body background. If a texture file is specified it will overlap this color.|
|Secondary Color:||Colors the background of the main container using the App alpha 0 to 100 setting to set opacity, the background of the caption text if there is not enough padding around the image to show below the image, lines on page scroll bars when used.|
|Border Color:||Colors the main border, menu lines and indicators, image borders, page scroll bars, borders of contact form fields when not selected, load bar border and background, and thumbnail borders.|
|Default Page Background Color:||Colors the page background if none is defined in the page setting. Colors the background color of the event detail pop-up on the calendar. Also colors the e-card form background.|
|Custom Color 1:||Colors the menu items, copyright text, gallery navigation, any page links (including sub page links), audio player buttons, the full screen, audio, email image, and slide show buttons, the load bar, and event detail pop-up buttons on the calendar.|
|Custom Color 2:||Colors the items colored by custom color 1 on mouse over where a mouse over state exists.|
|Custom Color 3:||Colors the menu and submenu background boxes. Also colors the field backgrounds and send button text on the e-card form.|
bond St allows you to set your own content width and height. You can set it to a standard 3:2 ratio (ex: 1200×800) or something completely different (ex: 900×350) and that is what you would use to size your images. See the ‘Content width’ and ‘Content height’ settings under Special Features for more information. Intro and Gallery images, as well as the image for the contact page should match those settings. Page images should be roughly 80% of the content height setting and 40% of the content width setting. Vertically oriented images are recommended for page images.
|Intro images||Content width setting||Content height setting|
|Gallery images||Content width setting||Content height setting|
|Page images||40% of your content width setting||80% of your content height setting|
|Page textures||Content width setting||Content height setting|
|Contact image||Content width setting||Content height setting|
Enter the desired width of the content area under Site Settings > Template Settings. ex: 1200
Enter the desired height of the content area under Site Settings > Template Settings. ex: 800
Under Site Settings > Intro/Texture upload images for the intro or background image that appears when your site opens. Press the upload new file button under Background/Intro and select a new image to upload. Intro images should be optimized and sized according to the template image specifications (ex: If you have entered your content width to be 1200, then you would size your intro images +200 of that = 1400). Drag and drop the images to reorder them. Press the delete button on the right to delete an image.
To make a page link redirect to some other page (ie. http://google.com) Put the following as the first and only text in the page text: REDIRECT:http://google.com
Music is uploaded into the music area under Site Settings. The jukebox will read ID3 tags from MP3 files. Depending on what music player you use, you may have to “Convert ID3 Tags…” before they are uploaded to your site. Otherwise the jukebox will not be able to read the song/artist information.
To display the availability calendar, create a page called ‘calendar’ under the Pages tab. Manage the calendar’s page settings from the edit page option in the pages tab. To manage the calendar dates and content, go to the Calendar tab. Enter your calendar’s title and description, and press the submit button to save this information. Press the calendar boxes to select or deselect a day.
When editing each page, you have the ability to control a page image, alignment, color, and a background texture. Select the up arrow to upload a page image. Select the page color by clicking the ‘Choose Color’ link below the Page Color header. If no color is selected the ‘Default page color’ setting under Site Settings > Colors is used. Adjust the slider to the right of the page color heading to control the opacity of the page color overlay. Select a background texture from the drop down menu below the Page Texture heading. You can also upload a texture of your own. Keep in mind that the page texture fills the area of the container. If the texture images proportions do not match those of the container, the texture image is cropped by the template to fill the container space. The page color overlays the texture with the opacity setting above. Select a desired page text alignment. Please note that selecting ‘center’ will not accommodate a page image.
if you want a page image to fill the whole background of the page, upload it as your page texture, set the page color opacity to 0, and don’t add a page image at that stage.
Enter the desired amount of padding in pixels between the main border and the images edge. Enter the desired value for intro images in the Intro image padding field and the desired value for gallery images in the Gallery image padding field under Site Settings > Template Settings.
There are four settings for the image borders used throughout bond. Under Site Settings > Template Settings, enter no or 0 in the Show intro image border, Show gallery image border, Show page image border, or Show main border fields to turn the borders off. To turn these settings on enter on.
This setting controls the opacity of main site background. Enter values from 0 to 100 under Site Settings > Template Settings.
Under Site Settings > Template Settings enter the amount of time in seconds an image should display in intro and gallery slideshows before loading the next image.
Under Site Settings > Template Settings enter ‘yes’, ‘on’, or ‘true’ to have the gallery slide show auto start when entering a gallery.
Upload an image for the background texture under Site Settings > Intro/Texture. Press the upload new file button under Texture and select a new image to upload. Texture images should be sized to a minimum of 1400 x 1050 pixels. To remove the texture press the delete button to the right of the image.
***Textures are an easy way to set your site apart and give it depth. We have an incredible set of texture packs to choose from created directly by our developers for you HERE.
Bond’s menu is incredibly versatile. It can be vertically or horizontally oriented and positioned in 6 different spots. Background tabs can be added to the main menu, and menu items can be randomly tilted to mix things up a bit. Menu settings can be found under Site Settings > Template Settings.
This can be set to either horizontal or vertical.
This can be set to left or right if the orientation is set to horizontal. If the orientation is set to vertical, this can be set to top left, top right, bottom left, or bottom right.
Menu item boxes, opacity, width, & tilt
Background boxes can be added to the main menu by setting the Menu item boxes setting to on.
To set the opacity enter a number 0 to 100 in the Menu item box opacity field.
Main menu item box widths can be set to dynamically match the width of the text of that menu item or have a static width equal to the widest menu item. Enter static or dynamic in the Menu item box width field.
Menu items can be randomly tilted by the setting the Menu item random tilt setting to on.
There are two settings for menu item spacing, Menu spacer and Sub menu spacer. Enter the amount of space in pixels between main and sub level items for each setting.
The central container can be set to have two or four rounded corners. Enter two or four in the Rounded corners field under Site Settings > Template Settings.
To turn off the reflective text under logo text (when a text option is selected), page titles, and the contact form send button, enter NO or 0 in the Show title reflections field under Site Settings > Template Settings.
Under Site Settings > Template Settings enter the desired label for the button that opens the portfolio menu.
Under Site Settings > Template Settings enter the desired label for the button that opens the contact form.
To create a caption for an image click on the desired image under Images > Image Bank**. In the caption field enter a few sentences to describe the image. When the image shows up in a gallery on your site, the caption will appear over the image.
** You may need to wait for the entire image bank page to load before you can enter a caption.
Font Modifiers allow you to increase or decrease the size of the text from its default size (set at 0) for your Site Title, Navigation, and Pages. This is most helpful when selecting fonts that render at small sizes.
To assign an image to a category just upload an image to the image bank and name it the same as the category name. If you have a category called Weddings, just upload an image to the image bank called Weddings.jpg.
You can find helpful information on video here.
A good place to start is around 400 width by 100 height in pixels. If you need the logo bigger/smaller, just resize the logo in your image editing program and then re-upload into the admin.
Need to re-brand your logo? We have a great logo design team that can help you make that impact in your business. Check out our logo services HERE and take it to the next level.
It is possible to add social media icons and links to bond. Under Site Settings > Profile under the Social Media section, add a reference to the image for a given social network and a link to a page on that network using the following format:
In this case, the images ‘facebook.png’, and ‘twitter.png’ should be uploaded to the image bank. Both pngs and jpgs can be used for these icons. There are many places to find social media icons for your site. Here is an example of one set.
Social media icons can also be added to the bottom of any page or the contact form by adding the same code found in Site Settings > Profile prefixed by the text ‘SOCIAL MEDIA:’. The final text should look like this at the bottom of the page text section: