How do I edit the look and feel of my responsive SilkStart site?

Note: This page refers to options available for responsive SilkStart sites. If you don't see options available in your site please contact us to see about upgrading your SilkStart site.

To start, log into your Admin panel, and navigate to Site > Look and Feel.

SilkStart features a number of tools that you can use to completely customize the look and feel of your SilkStart site.

Main Colour

Choose the key colour for your site, using the RGB values for the colour. This colour is used as the background colour for your top toolbar, and for all headings on your site.

Header, Logo, and Favicon

• Upload your organization's logo: This will appear on the left side of your navigation bar.
• Logo display height and width: Scale your logo to an appropriate size. Note: Your logo should not be taller than the nav bar.
• Navbar height: Set the height for your navigation bar. If the nav bar and logo should be the same size, set the nav bar height to 16px more than the height of your logo.
• Favicon: upload a favicon, which will replace the standard SilkStart favicon on your site.

Social Network Links

Add social media links directly to your website's footer.

Enter the address for any social media sites that your organization uses, and an icon for that site will be added to the user toolbar. For example, adding http://www.twitter.com/SilkStart in the X (formerly Twitter) section will add the X icon and link to the SilkStart X page in the footer of all pages.

Fonts

• Base font: The base font is used in most places on your site, including as the default font on your custom webpages and tools.
• Heading font: The heading font is used in titles, section headings, and on your custom webpages.
• Learn more about using fonts here!

Colours

Colours entered in these sections override the colour styles for different parts of your pages. If these fields are left blank, SilkStart will use the default system styles for your page.

Hover over the question mark next to each field to learn more about which parts of your site are styled by these fields.

Custom SCSS

Users who are familiar with CSS or SASS can use this area to fully customize the look of their SilkStart site. SilkStart compiles SCSS code entered into this field into CSS.

If you are comfortable with CSS, but not familiar with SASS, you can add CSS code into this area.

SilkStart will not explicitly override your custom CSS without your permission, however, updates to the SilkStart system may change the names or layouts of elements on your site. For this reason, organizations that choose to enter their own custom CSS are responsible for maintaining their own code.

Taxonomy

• Sign up button text: The text that will appear in the button next to each plan on your /join page.
• Renew button text: The text that will appear in the button next to each plan when a member is renewing their membership.
• Member login text: The text for the login button on your site.

Search

Choose whether you want to show a site-wide search box on all pages of your site.

Banners & Images

• Default Banner: Upload a banner image that will be used when a banner hasn't been set for a custom page or applications page. See How do I customize the banner images on my site? for more information on updating banners.
• Error Page Image: Upload a banner that will be used for your error page. If no image is uploaded then no banner will appear on the page.

Footer

• Footer widgets: By default, your footer will show contact details, upcoming events widget, recent articles widget, and your Facebook feed. At any time, you can use the drop down to change what will show in each column of the footer.
  • Contact Details: Information will be pulled from what has been entered in your admin panel under Settings > Organization Information
  • Recent News: If you have enabled and posted to your Article app then the latest two articles will be listed.
  • Upcoming Events: If you have enabled the Events app then the next two upcoming events will be listed.
  • Blog Posts: If you have enabled and posted to your Blog app then the latest two blog posts will be listed.
  • Facebook Widget: You can have a Facebook widget appear in the footer if you have entered a Facebook page URL under Social Network Links on the Look and Feel page. As well you will need to have social logins turned on (Settings > Social Integrations). See the following FAQ to set up social logins.
  • Custom: When selected an additional field will appear below for you to enter custom HTML. This could be your own HTML or you can enter other web widgets HTML here to have it appear in your footer.
• Logo: The footer logo is an inverted version of your logo that you upload at the top of Look and Feel.