Change Logo

Logo is your website trademark, it’s the first thing you will want to change in your site. Learn how to setup a perfect logo with our framework.

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.

Setup logo
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.

Adjust logo with Sun Framework
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:

Set logo in 2 rows

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

Learn More

This article is from “Getting Started" series. A series that help new users speed up their development process and utilize every feature in JSN Sun Framework.

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Rate this article
(1 Vote)