Big Cartel Theme Support

How do I style my shop Header text?

How do I style my shop Header text?

Using theme settings and features

The colour, size and font of your header text can be set in your theme settings in your Aarcade admin. To update these settings for your installed theme, see How do I edit my theme's styles and options?

You can also upload a header image / logo that will replace your shop header text as detailed in the article How do I upload and style my own logo or header image for my Big Cartel theme?

Additional header text styling

To add further styling (i.e. not colour, size or font, which is covered above and in section Page specific styling below) to your header text, add the following CSS to your custom style coding area — see Where do I add custom style code?:

/* Header text styling */
#header, h1#header {
    font-style: italic;
}

You can then add CSS-standard font and text properties to this style as needed. In the above example the header text will be in italics.

As another example, let’s say our theme forces an all capitals header by default. To change this to all lowercase, our style would be:

/* Header text styling */
#header, h1#header {
    text-transform: lowercase;
}

For more information on text and font styling, refer to the CSS-text tutorial and the subsequent pages therein.

Page specific styling

You can create page specific header styling by applying the method detailed in our article Using the body tag to create page specific custom styles. If we wanted our last example to be applied only to the page we titled About Us, we would have:

/* Header text styling */
body#about-us #header,
body#about-us h1#header {
    text-transform: lowercase;
}

Although global colour, size and font should always be set via the method detailed at the beginning of this article, there may be cases where you wish to apply a change to one (or all) of these on a specific page. The the CSS-text tutorial and its subsequent pages provide details on setting these styles.

For example, setting a custom font size on the home page only:

/* Header text styling */
body#home-page #header,
body#home-page h1#header {
    font-size: 60px;
}

When setting a custom header text colour, we must consider that the #header element contains a link tag (i.e. clicking the header text links to the home page by default). A custom colour style must also target this link tag, as link tags typically have a unique colour setting that must be overridden. For example:

/* Custom home page site header colour */
body#home-page #header,
body#home-page h1#header,
body#home-page #header > a,
body#home-page h1#header > a {
    color: #ffffaa;
}

Mobile specific styling

You can create mobile specific header styling by applying the method detailed in our article Using the body tag to create page specific custom styles. The .mobile-ui-on body class will only be active when the mobile user interface is on. So, our mobile specific header styling will use this class as follows:

/* Mobile header text styling */
.mobile-ui-on #header,
.mobile-ui-on h1#header {
    font-style: italic;
}

AarcadeHow do I style my shop Header text?