Skip to content Skip to navigation

Styling on Sites: Introduction to Stanford Basic Theme Settings

This is the first post in a multi-post series on styling your Sites site. In this post I'll get you aquainted with the Stanford Basic theme settings and what you can do without adding any additional CSS.

So, below is my personal site on Sites before I've changed any of the theme settings. To get this ready, I added some homepage content, a new site title and slogan, and a block in the second sidebar to list some of my links I want to share. This is a good start, but I want a custom look and feel. I have a logo I want to add, and a background pattern. 

My site, before

Most people get stuck here with their site on Sites and are dissatified with the way it looks. The theme you see here (aka the "skin" or "look and feel" of the site) is called Stanford Basic, and it is reall just that — a basic start for your site's theme. The best part about Stanford Basic is that it is such a great place to start if you want to customize your site's theme. In this series we will go deep into using CSS Injector to style your site, but in this post I simple want to introduce you to some basic changes you can make through the theme settings.

So, let's take a look at the theme settings for Stanford Basic. From your admin bar at the top, go to Appearance -> Settings -> Stanford Basic (see below for a screenshot).

Stanford Basic theme settings in the admin menu

Let's go through the settings that are available to us using this theme settings page. The first section lets us toggle on and off various elements from the page. This is a handy quick way to change some of the defaults. For example, if you wanted no logo, or to hide the site slogan, you could uncheck those here.

toggle display section

The next section enables us to use the default block S logo, or upload our own. I have a custom logo image I want to use, so I will unheck the checkbox and upload my own custom logo image.

Adding my custom logo

Next we can change the color palette to one of the ones provided by the theme. Here I've selected the warm gray palette.

Choosing a color palette

After this, we can adjust the layout of the site. I have chosen a wider sidebar in a fixed layout.

Choosing width of sidebar and layout

The next section lets us upload a background image and tile it if we wish. I have a repeatable diamond pattern I want to use, so I have uploaded that image here.

Adding a repeatable background image

Lastly, I'm going to change the border style to a rounded border style.

changing border styles

Save your configuration and viola! You can really do a lot just with a couple images and some custom theme settings.

My site, after

In the next post in this series, I will introduce you to using the CSS Injector module to begin customizing the styles on your site.

Categories: