Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade

 
 

AARFIE SUPPORT

How do I align my header image or logo?

If you purchased or upgraded your Big Cartel theme after 29th November 2011, please refer to Aarcade Support instead of the following article.

close message

Note: This article applies only to themes that have a full-width header area.

If you have not uploaded a header image, and you simply want to align your header text (i.e. Shop Title), please refer to How do I edit my Big Cartel theme fonts?

Create a Full-Width Image

The easiest way to align your header image is to create a full-width header image, using your preferred image editing application, and then place your logo exactly where you want within that image.

Following are the full-width values of some of our popular themes:

Uptown:
Downtown:
Heartbreaker:
Invisible Light:
Milk:

1000px
1000px
976px
940px (padding on) / 1000px (padding off)
980px (padding on) / 1000px (padding off)

For example, if we have the logo:

Example Logo

and upload it to our Uptown theme, it appears left-aligned by default:

Logo Alignment in Big Cartel

If we then increase the width of our logo image to Uptown’s full width value, i.e. 1000px, and then position the logo where we want it (in this case the center):

Example Logo Wide

and upload it to our Uptown theme, we get:

Center Logo in Big Cartel

Using CSS

As an alternative to the full-width image method described above, you can use custom style coding to align your header image.

For example, to center align your header image you could add the following code to your custom style coding area:

.has_img a#header_logo { margin: 0 auto; float: none; }

or to right align the image:

.has_img a#header_logo { margin: 0; float: right; }

Click the Save button after making changes to your custom style coding.

Alternative CSS

Some themes use different coding for the header image, in which case the above CSS methods may not work. If this is the case for your theme, use the following alternative code (instead of the above code) in your custom style coding area to center align the image:

.has_img #header_logo a { margin: 0 auto; float: none; }

or to right align the image:

.has_img #header_logo a { margin: 0 0 0 auto; float: none; }

Click the Save button after making changes to your custom style coding.

Last Modified: 28th July, 2011

Other ‘Big Cartel’ Articles...

Big Cartel support articles generally relate to Aarfie-developed Big Cartel themes purchased from the shop or created for a custom project.