Knowledge Base

Lion

Version: 1.1.0
Release Date: September 13, 2023

Installation

Unzip the Provided Package

  • Begin by unzipping the provided package to a location on your local system.

Upload Directories

  • Upload the ‘lion-launcher’ directory to the root of your Question2Answer website, where qa-config.php resides.
  • Upload the ‘lion’ directory to qa-theme/ of your Question2Answer website.
  • Upload the ‘lion-option’ directory to qa-plugin/ of your Question2Answer website.

Installation Complete!

You have successfully installed the Lion Theme and its associated components on your Q2A site. Follow the subsequent sections to activate and configure the theme as per your preferences.

Activation

  1. Log in with administrative credentials.
  2. Navigate to Admin > General.
  3. Choose Lion for both the Site Theme and the Theme for mobiles.
  4. Activation complete!

Requirements

1. File Permissions

Ensure the lion-colors.php file located at qa-theme/lion/css/ has a permission set of 744. This should be your primary checkpoint if you encounter color discrepancies or layout issues.

2. Default Theme Options

  1. Sign in as an Administrator.
  2. Access the Admin section.
  3. In the Admin sub-navigation, locate and click on the Lion Options (typically the last sub-navigation item).
  4. Within the options page, click the Factory Reset button to establish the database record, ensuring that theme settings are operational.

Settings

For optimal performance of the Lion theme, adhere to the settings below:

Users Settings

Navigate to Admin > Users

Maximum size for storing avatars
minimum 512 pixels
Default avatar
Use a square image like 512 x 512 pixels
It should have 1:1 aspect ration.
Avatar size on user profile page
400 pixels
Avatar size on top users page
400 pixels
Avatar size on questions
64 pixels
Avatar size on answers
64 pixels
Avatar size on comments
32 pixels
Avatar size on question lists
42 pixels
Avatar size on message lists
20 pixels

Lists Settings

Navigate to Admin > Lists

Length of Users page
30
Set length to a factor of 3. This is essential as the Users page utilizes a 3-column grid.

Theme Options & Color Settings

The Lion theme empowers users with the flexibility to tailor theme colors to their specific needs, whether it aligns with their brand’s identity or personal preferences. We’ve strived to maintain simplicity in our settings, ensuring an intuitive and user-friendly experience when personalizing your theme’s colors.

Configuring Theme Options

1. Accessing Theme Color Settings

  • Login to your Q2A website as an Admin.
  • Navigate to the Admin section.
  • Within the Admin sub-navigation, locate the Lion Options menu item. ( It’s typically positioned at the end of the list).

2. Color Customization Options

Body Background Color
Defines the main background color for larger screens and desktops.
Mobile Body Background Color
Sets the document background color specifically for mobile devices, optimizing the mobile theme experience.
Body Text Color
Establishes the default text color, prevalent across most elements on the site.
Primary Color
Dictates the dominant theme color, influencing various elements for visual consistency.
Secondary Color
Determines the secondary theme color, offering a visual balance alongside the primary color.
Success Color
Specifies the color for success messages or indicators.
Danger Color
Designates the color for warnings or error messages.
Mobile Sub Nav Background Color
Sets the background color of the sub-navigation bar within the mobile theme.
Mobile Sub Nav Text Color
Determines the text color for sub-navigation items in the mobile theme.
Tag Background Color
Chooses the background color for tags in questions and tag widgets.
(Note: The Tags page relies on the primary color setting for its background)
Tag Text Color
Sets the color for tag text.

Launcher Branding

Ensure a seamless mobile experience by customizing the Launcher, which acts as both an icon and a splash screen for mobile users.

Steps to Customize the Launcher

1. Access the Configuration File

  • Navigate to the mainfest.json located in your-q2a-root/lion-launcher/.
  • Open the file using a plain text editor (e.g., Notepad, Sublime).

2. Modify the Branding Placeholders

  • Update "short_name": "YOUR BRAND" with your brand (e.g., “Lion Theme”). This represents the launcher icon text.
  • Replace "name": "YOUR BRAND NAME OR ONE LINE DESCRIPTION" with your brand’s description (e.g., “Lion by Q2A Market”). This text is displayed on the splash screen beneath the logo.
  • Update "description": "YOUR DESCRIPTION" with a brief description of your brand.

3. Replace the Logos

  • In the lion-launcher directory, you will find three logos. Replace these while maintaining the original file names.
  • Ensure the logos are of the following sizes: 192×192, 96×96, and 48×48 pixels.

Configuration File Sample

{
	"short_name":  "YOUR BRAND",
	"name":  "YOUR BRAND NAME OR ONE LINE DESCRIPTION",
	"background_color":  "white",
	"description":  "YOUR DESCRIPTION",
	"theme_color":  "#7A532E",
	"icons":  [
		{
			"src":  "launcher-icon-1x.png",
			"type":  "image/png",
			"sizes":  "48x48"
		},
		{
			"src":  "launcher-icon-2x.png",
			"type":  "image/png",
			"sizes":  "96x96"
		},
		{
			"src":  "launcher-icon-4x.png",
			"type":  "image/png",
			"sizes":  "192x192"
		}
	],
	"start_url":  "/",
	"display":  "standalone"
}

Third-Party Support

OnSite Notification Plugin (By: q2apro)

The Lion theme is now compatible with the Onsite Notification plugin. Once the plugin is integrated into the qa-plugin directory and initialized according to its prescribed steps, users will notice a notification bell adjacent to the top bar’s search button.

Changelog

Version 1.1.0 (13th September 2020)
  • Fixed bugs to match with Question2Answer 1.8.8
  • Fixed bugs to support PHP8.*
  • Optimize code for performance
Version 1.0.5 (25th April 2020)
  • Added support to match with Q2A 1.8.3
  • Onsite Notification plugin support**(1)**
  • Fixed empty sub-nav array warning
Version 1.0.5-beta (24th January 2019)
  • Fixed mobile login button issue for iOS with new design
  • Replaced login/auth box with the dropdown to provide a better experience.
  • Fixed drawer elements order for RTL
  • Replaced/Renamed lion-desktop*.css with lion-large*.css
  • get_auth_button() function is removed
  • There are a few more CSS fixes.
Version 1.0.4-beta (9th January 2019)
  • Fixed mark-up-related issue to match with Q2A 1.8.2
  • Changed variable name $mainfest to $manifest
  • Removed unwanted arguments from $this->components->head_metas()
  • Removed @todo note for dynamic address bar color for mobile theme
Version 1.0.3-beta (25th September 2018)
  • Theme color options plugin
  • Added dedicated theme option panel
  • Database version record
  • Fixed a few design and layout issues
  • iZModal updated
  • Fixed answer box padding and margin issue
  • Fixed a few more reported bugs
  • Added Ticket and Feature request button
Version 1.0.2-beta (16th April 2018)
  • RTL support added
  • Fixed action button visibility for guest
  • Fixed a few design and layout issues
Version 1.0.1-beta (6th March 2018)
  • Added desktop support
  • Fixed a few design issues with the mobile version

Videos

Important Note

Q2A Market ensures compatibility with a range of third-party plugins. However, it’s crucial to understand that any concerns or issues specific to individual plugins should be directed to their respective developers. Our primary focus is on ensuring seamless integration, but the direct functionality and troubleshooting of these plugins remain under the purview of their creators.

Knowledge Base