How to Customize the Website Design Files

Q

Can I customize my website design?

A

Gutensite is an open platform that allows designers to customize any portion of the website design. This makes it easy for our design partners to design, install, and setup new websites. And it also empowers our clients who want the freedom to work with third party designers or to have their own internal design team work directly on customizing their website.

Steps to Access the Design Files

  • Create a new Admin Account for your designer and assign them "basic access" and the "design" access key, plus any other access they need.
  • Login with any account that has the "design" access key, and go to the Design section. You can find this by going to "Content" and clicking the large "Design" button.
  • In the sidebar of the Design section, go to the link that says "Design Files".

Getting Started

  • Documentation.
    • Gutensite: Read the available Gutensite 1.0 Documentation to learn more about Gutensite 1.0. Pay particular attention to the Installs section which will help you understand how to interact with the design.
    • Smarty: Gutensite 1.0 uses the popular Smarty 2.0 template engine to embed variables and programming logic into HTML files. It's basically just the HTML that you know and love with a few simple variables and logic tags for if statements, and loops.
  • Report Mode. If your page goes blank, you probably have a parse error in your Smarty Template. Turn on report mode to see the error, by appending ?report=gutensite to the end of your URL.
  • Available Variables. If you need to know which variables are available on any given page, you can look at the Standard Variables on the documentation page, or include the smarty {debug} code in any template and then turn on report mode and you'll get a popup with all the available variables.
  • File Relevance. Most of the files we give you access to should never need to be touched. But if you need help figuring out which file controls the template for a specific page, ask us and we can help.

Remember!

  • Scope. When you are editing templates, the HTML will be injected inside the <body> tag. So you should not paste in <html>, <head> or <body> tags within your templates. Gutensite adds those automatically based on the page that is using the template. 
    • If you need to customize header metadata (e.g. description, keywords, etc), Go to "Site Map" (main menu) > "Advanced" (tab) > "Page Settings" (in sidebar) > find the relevant page and edit, then click the "SEO" tab.
    • If you need custom CSS, edit the related CSS for that content type. If it's CSS for every page, put it in the site/css/site.css, if it's the CSS just for a specific content type put it in that local CSS, e.g. blog/css/blog.css

Features

  • Customized Versions. Your website will use the most customized version of a file that exists. If you are using a free template, it will use the template's home page, shell, css and maybe a few other custom files for specific content type pages. But all other pages will use the Gutensite core files since no versions have been customized in the CMS. But if you edit any of these core files, or template files, the system will save a customized version in your hosting account. Then Gutensite will always use your customized version instead of the template or core file versions.
  • Revert to Original. If you customize a version of a file and realize you don't want it anymore, or you mess something up really bad, you can easily click the "revert to original" button, and  your version will be archived and Gutensite will begin using the core version of the file again. We recommend that you copy and paste your customized version into an offline document so that you still have access to the code in case you want to reference it again.
  • Staging and Development. At the moment, when you edit a file, it will save directly to the live server. So the changes you make will be visible immediately. In the near future, we will begin saving these files into the staging mode, so that you can develop and test in a safe environment only visible for viewing in staging mode. Then when everything looks the way you want it to look, you can push the files live.

Basic Customization

If you want to make a custom design, you can do this by editing 3 simple files.

  • CSS for the Entire Site
    • File: /site/css/site.css
    • Purpose: This is where you would specify the styles for the template design shell and home page design. It would also usually contain any custom link colors, or common classes used throughout the website.
  • Home Page Template
    • File: /site/site.home.tpl
    • Purpose: This is the HTML/Smarty template that controls the layout of the home page. See 1.0 docs for options.
  • Secondary Pages Shell Template
    • File: /site/site.shell.tpl
    • Purpose: This is the HTML/Smarty template for the shell design wrapper for every other page of your website (the home page usually is assigned an empty shell). See 1.0 docs for options.

Advanced Customization

  • File Locations
    • When referencing images or other included templates, pay attention to which version of the file you are referencing, e.g. the core, template, or custom version of a file.
    • If the default images are in the template, then your CSS needs to reference /templates/{template_name}/site/images/my_img.jpg, but if you are referencing your own images that you uploaded, you need to reference /content/site/images/my_img.jpg.
    • In the file editor folder list view, the files are color coded to indicate which version is being used.
  • Core CSS
    • File: site/css/core.css
    • Purpose: Gutensite has some css basic CSS resets and styles that load on every website before the template design site.css is applied.
    • Customize: In future versions, we plan on replacing this with a modified clone of Twitter Bootstrap to serve as a base for every design. But until that happens, you can customize this core.css with whatever CSS resets or bootstrap or boilerplate css you prefer. Just be aware of the classes that we reference in our CSS, and consider making your own version of those styles in your CSS.
  • Content Type CSS
    • Files: the files for content type specific CSS are found in their content type folders, e.g.
      • /about/css/about.css (controls profiles, testimonials)
      • /articles/css/articles.css (controls topical articles)
      • /blog/css/blog.css (controls blogs)
      • /calendar/css/calendar.css (controls calendars)
      • etc.
    • Purpose: The default Gutensite 1.0 content types have been carefully customized to look good, but they do not inherit styles as elegantly as we would like. 
      • That's something that we will remedy in 2.0. But for now, that means if you set a link color or H1 style in your core.css or site.css it may not affect the header or link on your profile list page because there is a specific style set in the /about/css/about.css which controls the layout of the page as well as the header and link colors.
      • This is annoying if you want to set one style for an element and have it propogate throughout the website. So you can overcome this by editing the individual content type CSS files, and removing the specialized styling that is overriding the core css files.
      • You could also technically empty out the entire content type css, so it's just a blank file. But if you do that, the page will not layout correctly, so you need to provide at least some basic layout styles.
  • Images
    • You can upload your own custom design images to the relevant folder. For site designs, we recommend the /site/images/ folder.
  • Fonts
    • If you need to add custom fonts, we recommend Google Fonts API or some other similar font repository, e.g.
    • @import url(http://fonts.googleapis.com/css?family=Playfair+Display:400italic,400|Playfair+Display+SC);
  • Alternative Shell Templates
    • The website will use the /site/site.shell.tpl for all secondary pages. But if you need special shells for special pages, that's super easy to accomplish by cloning the code from the main shell, modifying the content, and saving it with a "site.shell_*" custom name, e.g. site.shell_about_landing_page.tpl
    • Once an alternative shell exists, you can edit the page settings for any page (or advanced menu settings for any entire section of your site) and choose that custom shell which displays by that name, e.g. "* Custom About Landing Page *".
  • Alternative Content Layouts
    • You can easily add alternative layout options for content types by creating additional versions of any content type template and saving it with a name that ends in "_*.tpl", e.g. site.basic_pages_marketing.tpl, or blog.home_fancy_layout.tpl
    • Once you have an alternative layout created, you will be given an option to select the standard or alternative layout and the website will display the page using that layout.
    • You can make alternative versions of the following layouts.
      • Basic Pages
        • List: site.basic_pages.tpl
      • Blog
        • List: blog.home.tpl
      • Communities
        • List: communities.home.tpl
      • FAQ
        • List: faq.home.tpl
      • News
        • List: news.home.tpl
      • Portfolio
        • List: portfolio.home.tpl
      • Profiles
        • List: profiles.home.tpl
      • Articles
        • List Page: articles.home.tpl
      • Store
        • List: store.categories.tpl