Change logo and basic setting

You can change and adjust your logo with JSN Template follow these steps:

Step 1: Access JSN template style setting.

Step 2: On Layout tab, select the “Logo" element, often placed in Heading section.

Step 3: Configure your logo with the element setting on the right side.

	1. Select your website logo
	2. Select your mobile logo
	3. Add alternative text to your logo image
	4. Add URL to your logo
	5. Set class for your custom CSS styling

Adjust the size of your logo

With JSN Template, you can change the size of the logo by dragging the column contain the logo element like this.

Note: Since the template is based on Bootstrap Framework, the logo will be automatic resize to the maximum size of the contained column.

Use CSS code to resize your logo

Beside resize the image itself, you can resize the logo height with custom css by adding this custom CSS code. You can locate the custom css file follow this link.

.sunfw-logo .img class="border-image"-responsive {
height: Xpx;
}

* With X is your desire number measured in pixel (px)

Center your logo

Center your logo by adding this custom CSS code. You can locate the custom css file follow this link.

.sunfw-logo > a {
display: inline-block;
}

.sunfw-logo {
text-align: center;
}

Note: Since the template follows Bootstrap framework, this code also help you center your logo in the contained layout column.

Set logo element take up 2 rows in layout

To do that, you can setup your layout follow this image:

Tips for setting up logo

1. It is best to use PNG as your logo image format due to its transparent ability that fit with most background.

2. For the most part, 250 px (width) x 100 px (height) are the optimal logo dimensions for a web page. Below we’ve listed a few logo dimensions for the two most common layouts.

• For horizontal layout:
• 250 px x 150 px
• 350 px x 75 px
• 400 px x 100 px
• For vertical (square) layout:
• 160 px x 160 px