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: 

Comments

This is a great post. How exciting to see Stanford Basic come to life!

I'm in the process of converting a couple of sites over to Drupal, and this post --plus your next one on CSS Injector-- will really help me out. Drupal has such a steep learning curve, but now I'm almost at the top, thanks to Stanford's great network of experts.

How did you get your name to be "Megan ....
Web designer". Mine just says "jshrager" ?!?

Hey Jeff, The way to change your site title is from the admin menu: Configuration > System > Site Information. Hope that helps!

Hi Megan, I have a quick question that is hopefully applicable to others. In the Stanford Light theme, how do I remove the page title ("About Me") in your screenshot from displaying? Thanks!

So, we don't have a theme option available in any of our themes to hide the page titles. Often we create a CSS Injector rule called "Hidden Page Titles" and just add CSS there to hide them. For example: .page-node-31 h1.page-title { display: none; } -- hope this helps!

Be selective in hiding the page titles, however. Drupal (in general) and our themes (in particular) set the page title as an <h1> element. For usability and accessibility reasons, there should be an <h1> element on every page. (E.g., for screenreader users who navigate a page by the headings.)

See Writing for the Web: Titles and Headings for more information.