Artist Series 1 Sample

Artist Series 1 Screen

Artist Series 1 is a Premium template. Here is some helpful information pertaining to the template:

Design Details

Template type PREMIUM
Control panel version 3
Supports categories YES
Contact form YES
Supports logo YES
Slideshow in gallery YES

Site Colors Settings:

Go to Site Settings/Colors in your site control tools

You will find the ability to change colors from the Colors section.

Color Name Color Description
Title Color: Colors the title if no logo file is used.
Text Color: Colors the page text and contact form borders.
Body Color: Colors the body background. If a texture file is specified it will overlap this color. Body color also colors menu item text when highlighted.
Secondary Color: Not used
Border Color: Colors the border elements found throughout the site.
Page Background Color: Colors the main content area background. This element’s opacity can be modified in template settings.
Custom Color 1: Colors the main menu items, copyright text, scroll bar elements, and icons in the lower right corner of the site. Note that scroll bar backgrounds use custom color 1 at 50% opacity. Custom color 1 also colors gallery thumbnails if the thumbnail mode is set to either solid squares or solid circles and no custom thumbnail colors are set.
Custom Color 2: Colors elements colored by custom color 1 on mouse over.
Custom Color 3: Colors the calendar event detail background.

Image Sizes

All images should be uploaded to your image bank and optimized for the web. The following are recommended sizes.

Image Width Height
Gallery images 1200* 800*
Page images 400* 600*

*These sizes are only recommendations and can be adjusted based on your needs. It is important to consider the size of the images and average browser window size. For instance, larger images will fit available space better on larger screens but will also have larger files sizes and take longer to download.

Special Features / Template Settings

Page controls

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.

Page Linking

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

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. Please use version 2.4 for best results. It may be necessary to enter artist and song information if either is not defined.

Contact Form

To display the contact form, select the add contact form check box at the bottom of the page to which you wish to add the contact form.

Font Modifiers

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.

Texture File

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.

App Opacity

Enter a value from 0 to 1 for the desired opacity level of the main content area background under Site Settings > Template Settings in the App opacity field. For example, entering .8 would result in the main background being 80% opaque.

Rounded Corners

Enter ‘yes’ under Site Settings > Template Settings in the Rounded corners field to turn the rounded corner feature on. This affects the main content area background, gallery images, intro images, page images, and scroll bars.

Content Padding

Enter the desired number of padding in pixels between gallery images, intro images, and page content and the main content area background under Site Settings > Template Settings in the Content padding field.

Menu Position

The menu can be positioned on the left or right side of the main content area. Enter ‘left’ or ‘right’ in the Menu position field under Site Settings > Template Settings.

Logo Size

A good place to start is around 200 pixels wide by 100 pixels high. If you need the logo bigger/smaller, just resize the logo in your image editing program and then re-upload into the admin.

Logo Design
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.

Logo Position

The logo can be positioned either above or adjacent to the container. Enter ‘above’ in the Logo position field under Site Settings > Template Settings to place the logo above the main content container. Enter ‘adjacent’ in the Logo position field to place the logo next to the main content container.

Mouse Following Gallery Navigation

Navigation arrows that follow the mouse when it is over the main content area in an image gallery can be turned on and off. Enter ‘on’ or ‘off’ in the Use mouse following gallery arrows field under Site Settings > Template Settings.

Thumbnail Mode

There are four different thumbnail modes available. Under Site Setting > Template Settings in the Thumbnail mode field, enter ‘image squares’ for a 3 column view of square images, ‘image circles’, for a 3 column of circle images, ‘solid circles’ for an 8 column view of solid color circles, or ‘solid squares’ for an 8 column view of solid color squares.

Thumbnail Colors

If the thumbnail mode is set to either ‘solid squares’ or ‘solid circles’, custom colors can be entered in the Thumbnail colors field under Site Settings > Template Settings. Color values should be hex code values and separated by commas. For example:

#8CC63F, #F15A29, #00A79D, #29AAE2, #6D6F71, #D7DF23, #D1D3D4, #FBB040, #C2B59B

Transition Time

Enter the desired transition time in seconds for intro and gallery images under Site Settings > Template Settings in the Transition time field.

Transition Type

There are three different transitions available. Under Site Settings > Template Settings in the Transition type field, enter fade for a simple ‘fade’, ‘wipe’, or ‘slide’.

Slideshow Speed

Under Site Settings > Template Settings enter the amount of time in seconds an image should display in gallery slideshows before loading the next image.

Auto Start Slideshow

Under Site Settings > Template Settings enter ‘yes’, ‘on’, or ‘true’ to have the gallery slide show auto start when entering a gallery.

Video

You can find helpful information on video here. To add a video to a page, add the following text to a page:

VIDEO:file_name.m4v

file_name.m4v should be the name of the video file to be added to the page from the video bank.

Animated Elements

There are custom animated elements that can be turned on or off globally for the site, or for individual pages and galleries. If you would like to add more animations to your site, just simply submit a ticket HERE with that request.

Under Site Settings > Template Settings there are fields to show or hide each animated element. Enter ‘yes’ to display an element globally throughout the site. To display an element on a specific page, select the appropriate checkbox at the bottom of the page. To display an element on a specific gallery, select the appropriate checkbox after clicking the settings button at the top of the gallery page. Note that global element settings must be set to ‘no’ to show an element only on specific pages or galleries.

While each element has a default set of colors, each elements colors can be set manually.

Grass
To change the color of the grass element, enter the desired hex code color in the Grass color field under Site Settings > Template Settings. For example:
#7B885E

Birds
To change the color of the birds element, enter the desired hex code color in the Birds color field under Site Settings > Template Settings. For example:
#000000

Flowers
To change the color of the flowers element, enter the desired hex code colors in the Flowers color field under Site Settings > Template Settings. There must be four values entered, separated by a comma. For example:
#000000, #BF1E2D, #00A79D, #F7931E
The first color colors the flower outline and stem. The second, third, and fourth colors color the fill colors of the three flowers.

Tree
To change the color of the tree element, enter the desired hex code colors in the Tree color field under Site Settings > Template Settings. There must be two values entered, separated by a comma. For example:
#6D6F71, #8CC63F
The first color colors the tree trunk, and the second colors the leaves.

Clouds
To change the color of the clouds element, enter the desired hex code colors in the Clouds color field under Site Settings > Template Settings. There must be two values entered, separated by a comma. For example:
#000000, #A1C0DA
The first color colors the cloud outlines, and the second color colors the cloud fills.

Balloons
To change the color of the balloons element, enter the desired hex code colors in the Balloons color field under Site Settings > Template Settings. There must be four values entered, separated by a comma. For example:
#000000, #A1C0DA, #00A79D, #D1D3D4
The first color colors the balloon outlines and strings. The second, third, and fourth colors color the fill colors of the three balloons.

Wagon
To change the color of the wagon element, enter the desired hex code colors in the Wagon colors field under Site Settings > Template Settings. There must be two values entered, separated by a comma. For example:
#8CC63F, #666666
The first color colors the wagon handle bar, body, and inner wheel rings. The second color colors the outer color of each wheel.

Kite
To change the color of the kite element, enter the desired hex code colors in the Kite colors field under Site Settings > Template Settings. There must be five values entered, separated by a comma. For example:
#000000, #6EC38D, #B8D988, #FEE777, #ACCECB
The first color colors the outline elements throughout the kite element. The second, third, forth, and fifth colors color the individual colored elements throughout the kite body and tail elements.

Pinwheels
To change the color of the wagon element, enter the desired hex code colors in the Pinwheels colors field under Site Settings > Template Settings. There must be one or four values entered, separated by a comma. For example:
#000000, #6699CC, #97B48F, #E87657, #E8D651
The first color colors the stick elements. The second, third, and forth colors color the individual pinwheels. Only one color is used for each pinwheel if a custom color is used.

Clothesline
To change the color of the clothesline element, enter the desired hex code colors in the Clothes colors field under Site Settings > Template Settings. There must be five values entered, separated by a comma. For example:
#000000, #6699CC, #97B48F, #E87657, #E8D651, #AE83E8
The first color colors the line and pin elements. The second, third, forth, and fifth colors color the individual pieces of clothing in the following order: shirt, socks, underwear, bikini bottom, bikini top, and boxer shorts. Only one color is used for each piece of clothing if a custom color is used.

Social Media

Social media icons and links to networks like facebook and twitter can be added to Artist Series 1. 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:

facebook.png,http://facebook.com/myIDHere
twitter.png,http://twitter.com/myIDHere

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.

Help & Support

Submit a Support Ticket »


© 2017 BIG Folio Inc. • All rights reserved
Terms and Conditions