Look and feel tab

The Look and Feel tab lets you set the site-wide layout, type styles, colors and icon options.  It's in the Admin Panel > Admin Home > More Options > Look and Feel section.



The top section provides a strip of layout suggestions.  Clicking on these automatically change the settings below.  This works similar to the Layout tab, but allows you finer control over the settings.


 

Type styles


This section styles the type throughout the site.  Click on each heading to modify the type style. 



To set the Name text (text that displays your name) or Body text (the text used throughout the site) click on the respective heading, and you can select a font like so:



Click More fonts... to see additonal font choices.  Three Font style lists are available. 



The first list contains a few recommended fonts for the site.  The next two lists are as follows:

Google Fonts
This is a list of all fonts available at fonts.google.com

Advanced
This allows inputting a web font name, or a font name imported with a custom stylesheet.  This is only recommended for Advanced users.

Font size
Set the font size in pixels.

Font color
Click into the textbox and use the color picker to set the color.


Type style sections


The full list of type style headings includes the following:

Name text
This is the artist's name at the top left, or center, of the site.

Body text
This is the text on every page throughout the site.

Big image text
This is the text below larger images on your site.

Small image text
This is the text below smaller images on your site.  Depending on which layout you are using, this type style may not be used on your site.

Nav text
This is the text in the navigation links that go across the top or down the left side of your site.

Footer text
This is the (usually) small text at the bottom of your site.

PDF text
This is the text used in different automatically generated PDFs throughout your site.
 

Website colors


To change these colors, click into the setting, and a color picker will appear.

Background
This the background color of every page on your site.

Section separators
These small thin lines are used to separate sections of text and images throughout the site.  To make these separators invisible, set them to the background color.


Phones and tablets


Your site can reformat itself for mobile devices like so:



To do enable this (recommended) check Resize for small screens like so:




Display artist's name
If checked No, the artist's name will not appear at the top of the site on mobile devices.  This can save some space on small screens.

Enable zooming
This enables pinch zooming on mobile devices, but also gives you less you control over the site layout.

Nav appearance
When a visitor clicks on the menu icon on a mobile device, the navigation links can appear like so:

Animate down




Push down
This option works the same as animate down, but with no animation.

Flyout



Menu icon
Set the style of the mobile menu icon.  When clicked, this displays the navigation links.

Menu icon color
Set the menu icon color.

Optimize galleries on phones and tablets
This option displays gallery images as a tall vertically scrolling page of images on mobile devices (recommended).
 

Custom CSS and JavaScript


This option allows you to inlude CSS and JavaScript code, or link to a remote file.  This is only recommended for advanced users.


Other settings


Below are some other options available on the Look and Feel tab:



Fade in gallery images
This loads your images with a gradual per-image fade-in as the page loads.

Allow visitors to save images
When checked No, this disables saving images via right-click or dragging to the desktop.  (It's important to note that saving images from any website using other methods is still possible.)

Use a background image
This provides various options for uploading a background image.  It may be tiled, full screen, and/or only visible on the home page.  For a full screen image, upload a JPEG image that is around 1800 pixels wide and 1100 pixels tall.  As well, it's best if this image is no larger than 500 KB  to 1000 KB in size (for a faster page load).
 

Site-wide icons


These icons are used throughout your site can be styled or interchanged with custom image icons you upload. 

Loading icon
This is the icon that sometimes displays when certain parts of the site are loading.  you can change this by doing the following:
 
  • Click on the Loading icon link
  • Click the Browse... or Choose File... button and select a custom loading icon.
  • Click Save Changes at the bottom of the page.

When using a custom loading icon, it's best to upload an animated gif file.  These can be often found online at sites like ajaxload.info.



Browser tab icon
This icon is displayed in a visitor's browser tab.  For example:



You can upload your own icon by trying the following:
 
  • Click on the Browser tab icon (favicon.ico) link
  • Click on the Browse... or Choose File... button and select a custom image (less than 50 KB in size)
  • Click Save Changes at the bottom of the screen

You can also use a site like favicon.cc to create the image you upload.

Other icons
You can change most of the icons throughout the site.  If you can't find color and size combination that works for you, click the Use pixel image option, and then upload your own custom-made gif image.  (NOTE: The Use pixel image option is displayed very lightly because it is a rarely used feature for advanced users )



Checking Use pixel image and then clicking the icon name, allows uploading an image file directly.