Blogs » Admin Panel » Appearance » Inspira Theme

Inspira Theme

  • The Inspira Theme has special settings and configurations allowing you more control over the design of your site. 

    Important

    When working with Inspira, it's very important to enable development mode after changing any settings for this theme. We recommend that you enable and then immediately disable development mode after doing any changes for this theme. 

    Inspira has a "Custom CSS" section to allow for CSS changes that you need to make. This allows you to make changes that won't be impacted by upgrades. Please read the full tutorial below before making any changes.

    Step-by-step guide

    Some settings below are only for specific landing page designs.

    You'll need to be logged into your Admin Panel.

    1. Navigate to "Inspira Theme."
       

    Global Settings

    Set Landing Page of Inspira Theme

    You have a few choices for your guest landing page design and layout. To choose one, click the bubble to the left of the choice and save changes when done.

    The following screenshots are for the default style. Your style choice may look different.

    Layout 1

    Layout 1 gives a layout with various widgets, a banner and widgets for custom text and images as well as a different footer layout with links, logo and more.

    Footer:

    The banner, feature, counter, landing page app, and popular widgets are controlled via the Layout Editor. Click "Edit" to edit one of the widgets or click "x" to delete. 

     

    Landing Page Banner

    You can edit the landing page banner to change the banner and height. You need to have uploaded a banner in order to choose one. The default height is 550. There must be at least one banner image for this widget to show. If you load more than one widget, the images will rotate. You can also edit the heading and description that shows with each image. This screenshot shows just one of the four available banner selections with heading and description.

    Landing Page Features

    The landing page features are the text and image widgets seen in the "Why Choose Us" banner. Edit the widget to change each as you want it. For the Icon, use Font Awesome v5 icons.

     

    Landing Page Popular Widgets

    You can set the title, amount to show and which way you prefer the plugin entries to show - popular by views, friends, members or comments depending on which widget you are editing.  

    Landing Page Service Widget

    You can edit the Title and Description of this widget, and also the feature title, description and Font Awesome icon.

    Landing Page Counter Widget

    You can change the title, description, heading and images for this widget. You'll need to have uploaded images you want to use for the background and right side image in order to change these. You can also edit each counter value and text.

    Landing Page App Widget

    You can add your links to your mobile apps, edit the heading and description for this widget. Please note that the "Title" can be added but it is generally left blank for this widget.

     

    Layout 2

    Layout 2 has a more compact landing page and shows an image and login widget. You can change the image by following the landing page banner tutorial.

    Header Options for Logged in Members

    Choose the header options for members that are logged in by checking or unchecking the boxes to the left of each selection.

    Header Options for Non-Logged in Members

    Choose the header options for guests by checking or unchecking the boxes to the left of each selection.

     

    Header Logo

    Choose your default logo. You'll need to have uploaded one in the File & Media manager first.

    Header Logo for Contrast Mode

    Choose a logo for contrast mode. In case your default logo isn't looking good in contrast mode. You can also choose the same logo you chose for the default logo.

    Menu Position

    Choose between horizontal or vertical main menu position.

    Menu Item Count

    Enter the number of menu items to show in the main menu. This will create a  "More+" menu item under which the remaining menu items will be shown in a dropdown. Enter "0", if you want to show all menu items in this widget and do not want to show "More+"

    Show Sub Menus

    Choose whether to show submenus for the main menu plugins. The screenshot below shows the submenus enabled.

    Show Accessibility Options

    This allows you to choose whether to show the accessibility widget or not. Please note that most areas now require websites to be handicap accessible. If not accessible, there can be hefty fines in some areas. Please check with the laws in your area before disabling this.

    Landing Page Header Logo

    You can choose any logo for your guest landing page.  We recommend a dimension of 200x200 for the logo if using Landing Page Design 2.

    Landing Page Menu Item Count

    Enter the number of menu items to show in the main menu. This will create a  "More+" menu item under which the remaining menu items will be shown in a dropdown. Enter "0", if you want to show all menu items in this widget and do not want to show "More+"

    You can configure your footer features via the settings here.

    Footer Logo

    Choose a footer logo for your website. You need to have uploaded one in the File & Media manager.

    Footer Background Image 

    Choose a footer background image if you want one. You need to have uploaded one in the File & Media manager.

    Enable Quick Links

    Do you want to enable quick links to your preferred links in the footer?

    If you choose Yes, the the menu items will display links which have been configured from your menu manager.

    Enable Footer Menu Links

    Do you want to enable the SocialEngine default links in the footer?

    If you choose Yes, the the menu items will display links which have been configured in your menu manager.

    Left Column

    This is the text that shows in the footer left column. You can leave any field blank if you don't want to show it.

    Left Column Description

    Enter the left column description. 

    Left Column Location

    Enter the left column location. You can put any text here. It does not generate a map link so you can even get creative. 

    Left Column Email

    Enter the left column email.

    Left Column Phone

    Enter the left column phone.

    Right Column

    This is the text that shows in the footer right column. You can leave any field blank if you don't want to show it.

    Right Column Heading Text

    Enter the right column heading text.

    Right Column Description

    Enter the right column description.

     

    Color Schemes

    You can choose from three color schemes or make your own. Click the "Color Schemes" tab to view the choices. Note that in order to make color changes you'll want to create a custom theme (see below).

     

    Choose a color by clicking it and clicking "Save Changes.

    Create a new theme by clicking "Add New Custom Theme." (Recommended if you want to change colors and other CSS or the theme layouts.)

    Enter the new theme name and choose which theme to clone. Save changes when done by clicking "Create." Activate the theme by clicking on it and saving changes. Don't forget to change to Development mode and then back to Production mode in order to see changes on your site.

     

    Manage Fonts

    You can configure the font settings for this theme on your website. You can also choose to enable Google Fonts or use web safe fonts. Click the "Manage Fonts" tab to configure your fonts. Be sure to save it after.

     

    Custom CSS

    Inspira theme has a special section for you to add custom CSS for items that can't be changed in the Color Schemes section. This helps to prevent any issues with upgrading and allows you easier access to change CSS for your site. See below for an example of changing CSS.
    Example of Changing CSS
    We recommend using browser tools to find your CSS, such as Inspect (right click in chrome and choose Inspect):
    Using the above tool, let's see how to change the hashtag CSS for the Trending Hashtag widget. Perhaps we want to make it stand out more.
     
    Using the Inspect tool, we can find the CSS. Right click on the hashtag and choose Inspect.
     
    You'll see the CSS details in the bottom of the page, in the inspect tool, on the right:
     
    Copy the code:
    And paste it into the input box in the Custom CSS page:
    We want to change the text color so we need to add the following as well as a closing curly brace:
     
    .layout_core_hashtags_cloud ul>li>a {
    color: #2817bd;
    }‚Äč

     

    Save it and be sure to enable/disable development mode. You should see the following:
    Voila! 

    Tip!

    Remember to enable and disable development mode after making any changes!