Support Center

How can I adjust the look and feel of my Shuttlerock site to match my existing website?

Last Updated: Jan 23, 2015 10:13AM NZDT
Shuttlerock allows you to add custom HTML and CSS to your site, which enables fairly fine-grained customization. The best outcome is a seamless journey from your main site to your subdomain and vice versa. Using custom HTML/CSS, you can alter backgrounds with colours and images, change the colour of buttons and have a full header and footer that looks like your main site with drop down functionality. The basic wireframe image and layout of the content boards remains the same. 

The design can be customized in the Design section under the Settings menu.

Any HTML you add in the 'Site' section for 'Custom Header' will appear at the very top of the page, before anything else, and any 'Custom Footer' HTML will appear at the bottom of the page.

Any 'Custom CSS' will be included as the last item in the <head>, so you can over-ride any of the built-in page styles. You can also include javascript in the HTML header if you want (jQuery is already included beforehand), so you can inject HTML into other areas of the page if you need to.

The main body of the site currently has a maximum width of 940px. The header can be full-width however. It uses the Bootstrap responsive CSS framework, so you can use any of the bootstrap CSS classes in the HTML if you wish. More information on this is available here : .

The 'responsive' aspect of the site allows it to scale down nicely for mobile phones and tablets - this is good to keep in mind to avoid hard-coding fixed-widths etc in the site, which may make the the site harder to use on mobile.

One final thing to keep in mind is that the whole site is hosted securely under https:// , so any images etc that are served as http:// rather than https:// may raise a security warning in the user's browser. You don't need to worry too much about this while you're developing the design, but feel free to send us some images if you want us to host them under https:// for you.

Custom Design Management

For more on set up take a look at our learning video -
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found