Nunaliit Tutorial: Replacing the atlas title text with an image

Description: One of the simplest ways to give your atlas a custom look is by replacing the atlas title text with your own atlas logo. This tutorial provides instructions on this task, producing similar results as shown in the comparison example below.

Default Text Title (left) vs. Image Title (right)

Default Text Title (left) vs. Image Title (right)

Step 1: Start by copying the replacement title image file to the atlas htdocs directory. For this example I’ve created an images directory containing a file called logo.png, which is 200px in width and 50px in height.

Note: If you’re creating an image, the Nunaliit title bar’s height is 70px by default. If you want to maintain the dimensions of the original title bar, you should make the height of the logo no larger than that.

Step 2: Replace the existing navigation document title attribute (located in the nunaliit_navigation.json file) with an empty string, “” (see example below). Note: This is required to prevent the title text from appearing over top of the image.

	"nunaliit_type": "navigation"
	,"title": ””
	. . .

Step 3: With the title text removed and the image file added to the htdocs directory, the remaining steps focus on updating the atlas CSS style rules. All style changes made to the atlas should be defined in the atlas.css file located in the htdocs/css/ atlas directory.

The first style change is to assign the image as the background of the previous title text location, identified by the class ‘.nunaliit_title’ which is located within the ‘.nunaliit_atlas’ div. Copy the following example CSS code to the atlas.css file which defines the background as using the image file logo.png located in the images directory. Note: you will need to update the background URL to your file’s location in the htdocs directory and also update the dimensions to your desired image size.

.nunaliit_atlas .nunaliit_title {
    background: url(../images/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 50px;

At this point, your atlas should display your image in the atlas title location, once the atlas is updated. If its not appearing, make sure the location of the file is correct for the background URL.

Step 4: The final step is to increase the size of the title link to match the size of the new title image using padding. This will result in the background image behaving similar to the text title when clicked by a user.

Copy the following CSS code into the atlas.css file and update the padding to match the dimensions of your image. For example if your image is 180px wide and 60px high, you will need the following rule “padding: 30px 90px”.

.nunaliit_atlas .nunaliit_title_link {
	/* 	25px padding added to the top and bottom sides
		100px padding added to the left and right sides */
	padding: 25px 100px;

Congratulations, you have now successfully replaced your default title text with a logo.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s