File: /home/enamadmin/public_html/aaelearningb/theme/academi/doc.md
# MOODLE - ACADEMI THEME
Academi is an intelligently responsive theme, free from the constraints of Moodle, making it perfect for your academy. It boasts a clean and highly modern design, ideally suited for your Moodle sites. This theme is entirely responsive, ensuring that your readers can enjoy browsing your site on mobile devices or tablets, guaranteeing a seamless experience. We have introduced a new theme design and added extra new blocks to enhance its functionality."
## Requirements: ##
This theme requires Moodle 4.0+
# Installation and Initial Setup
### Installation for Theme Academi
You can install the theme academi plugin using the Moodle plugin installer. Here are the steps to follow:
1. Download the [**Academi**](https://moodle.org/plugins/theme_academi) plugin from the Moodle plugins repository.
2. Copy folder 'academi' and put into theme folder of your moodle system
3. Next log in to your Moodle site as an administrator.
4. Go to "*`Site administration -> Notifications`*" , here on "*`Plugins check`*" page you will see the academi theme in listing.
5. Click the "Upgrade Moodle database now" button displayed on bottom of the page.
6. You will get success message once the theme installed successfully.
7. By clicking "*`Continue`*" button on success page , you will get options to change the academi theme settings.
Steps to set academi theme as default theme for your moodle system
1. Login as site administrator.
2. Go to "*`Site administration -> Appearance -> Themes -> Theme selector`*".
3. Click the "Change theme" button for device type as "Default"
4. It will list all the available themes for "Default device"
5. Then click "Use theme" button on "Academi theme"
6. Next click the "*`Continue`*" button ,thats it.
7. Cheers, you have done it !!!
## Usage & Settings
After installing the theme, it does not do anything to Moodle yet.
To configure the theme and its behaviour, please visit:
"*`Site administration -> Appearance -> Themes -> Academi`*".
There, you find multiple setting pages:
## General
In this tab there are the following settings:
**Logo**
Here, you can upload a complete logo for use as a decoration. This image will be utilized in the logo across all site pages, including the login page. Feel free to use a high-resolution version, as it will be scaled down as needed.
**Favicon**
Here, you can upload a custom image that will be displayed as the favicon for your Moodle website in the browser. If no custom favicon is uploaded, a standard Moodle favicon will be used.
**Primary Color**
With this setting, you can customize your site's primary color from the default color.
**Secondary Color**
With this setting, you can customize your site's secondary color from the default color.
**Header Style**
With this feature, you can modify the header style on the whole site.
***Theme Based***: If you select this theme-based option, the menus will be displayed in the bottom header.
***Moodle Based***: If you select this Moodle-based option, menus are displayed in the top header, and the bottom header will be hidden.
**Inner Page Content Size**
With this setting, you can change the content size option that will serve as the main inner content size across all Moodle inner pages on your site. This selection will not affect the content size of your home page.
***Container***: If you select the "Container" option, the inner page size will automatically be resized to the moodle container size (1140px).
***Moodle default***: If you select the "Moodle default" option, the inner page size will automatically be resized to the Moodle default container size (830px).
***Custom***: If you select the "custom" option, provide a pixel size in the following setting, and the main inner page size will be manually customized.
**Page Content Custom Value**
With this setting, provide the custom pixel value to change the inner page main content size.
**Content Font Size**
With this setting, you can choose the desired font size from the available options to customize the text size for your site's content.
***Default:*** When you select the "Default" option, the Moodle default font size will be applied to your entire site.
***Small:*** When you choose the "Small" option, a font size of "15px" will be applied to your entire site.
***Medium:*** When you opt for the "Medium" option, a font size of "17px" will be applied to your entire site.
***Large:*** When you select the "Large" option, a font size of "18px" will be applied to your entire site.
**Available Courses Display Style**
With this setting, you can change the default design of available courses to our theme's design on the front page.
***carousel***: If you select the "carousel" type, the design of available courses will be changed to a slider carousel style.
***Moodle Based***: If you select the "Moodle based" type, the design of the available courses will be shown in the Moodle default style.
**Combo List Display Style**
With this setting, you can change how the combo lists are displayed, either as collapsed or expanded type.
***collapsed***: If you select this setting, Combo lists are displayed at collapsed type.
***Expanded***: If you select this setting, Combo lists are displayed at expanded type.
**Background Image**
Here, you can upload a background image for the Moodle inner page.
**Login Background Image**
Here, you can upload a background image for the login page.
**Add Back To Top Button**
With this setting, you can control whether or not to enable a "Back to Top" button on your pages.
**Custom CSS**
With this setting, you can customize your CSS style to change the site's appearance.
### Theme Preset
**Theme Preset**
With this setting, you can utilize these options to modify the overall appearance of the theme, incorporating a range of diverse designs and styles. Moreover, we offer several preset files for this theme, including ***Academi***, ***Eguru***, ***Klass***, and ***Enlightlite***. We've introduced this new feature to elevate your Moodle experience, and we've also enhanced the design of additional front page blocks for each preset.
**Additional Theme Preset Files**
With this setting, you can upload your own preset files to alter the theme's appearance.
## HomePage Slider
### Front page Slide show
This feature generates a slideshow with a maximum of twelve slides, allowing you to highlight crucial aspects of your site. The slideshow is designed to be responsive, adjusting the image height based on the screen size. The recommended height is 418px. The width is set to 100%, resulting in a reduced actual height if the width exceeds the screen size. When the screen size is smaller, the height is dynamically decreased without requiring separate images.
**Slide Show Display**
With this setting, you have the option to choose whether you want to hide or display the slideshow.
**Auto Play**
With this setting, you can activate automatic scrolling of slides upon page load by using this option. When enabled, the homepage slider will automatically transition between slides without needing user input or interaction.
**Pause Time**
With this setting, you can adjust the pause or wait time between each slide change in the slideshow using this option. The value is measured in milliseconds, where 1 second is equivalent to 1000 milliseconds.
**Overlay Opacity**
With this setting, you can manage the opacity level of the overlay in the slideshow content using this option. The default value for this option is 0.4, which translates to a 40% opacity. This allows the content behind the overlay to be partially visible.
**Number of slides**
With this setting, begin by using the "Select the number of slides" option and then click the "Save Changes" button at the bottom of the settings page. Subsequently, the page will reload, and you will be provided with options and text fields for configuring the desired number of slides.
### Slide settings
**Status**
With this setting, you can regulate the visibility of a specific slide in the homepage slider. Select the "Disable" option for the slide you want to hide. Opting for "Disable" will prevent the slide from being displayed in the homepage slider, effectively concealing it.
**Slide Image**
Here, you can upload your slide image to be displayed in the homepage slider.
**Slide Content**
With this setting, you can manage the visibility of slider content in the homepage slider. If the option is disabled, the slide content will not be displayed in the homepage slider.
**Slide Caption**
Using these settings, you can input the text that will be displayed on the slide content in the homepage slider.
**Slide Description**
With this setting, you can provide a description for the slide content on the homepage slider.
**Button Text**
With this setting, you can set the text for the button on the slide using this option. If you don't want to include a button on your slide, you can leave this option blank.
**Button URL**
With this setting, you can establish the link for the button on the slide by using this option. Enter the URL or web address where you want the button to direct users when clicked.
**Button Target**
With this setting, when you select this option, clicking the button on the slide will open the linked content in a separate browser tab or window, keeping the original page unchanged.
**Content Width**
With this setting, you can modify the content width of the slide by using this option. The content width will be calculated as a percentage of the main grid width. The default value for this option is 50%, which signifies that the content will occupy half of the available space in the slide.
**Content position**
With this setting, you can specify different positions for the slide content (title, description, and button) within the slide.
## Promoted Course
Welcome to the Promoted Courses section, your gateway to showcasing tailored educational offerings on the forefront of your site's front page. With this dynamic feature, you have the power to spotlight your most relevant and captivating courses, right where visitors land.
Step into a realm of versatile designs specially crafted for the Promoted Courses block. Our team has meticulously developed a range of captivating layouts that seamlessly integrate with your website's aesthetics. Whether you're focused on professional development, academic pursuits, or skill enhancement, this block offers the ideal canvas to highlight the courses that matter most.
Imagine a fluid and immersive experience, where each course takes center stage in its dedicated space. Visitors are drawn into a journey of exploration, guided by a visual narrative that underscores the value of your educational offerings.
**Activate Block**
This option enables you to manage the visibility of the promoted course and effectively control the content displayed on the front page.
**Title**
With this setting, you can input text for the title of the Promoted Course block on the front page.
**Description**
Using this setting, you can provide a description for the title of the promoted course on the site's front page.
**Promoted Courses**
With this setting, you can provide the IDs of promoted courses separated by commas to display them in the Promoted Course block on the site's front page.
## Site Features
**Activate Block**
This option allows you to control the visibility of the site features block and effectively manage the content displayed on the front page.
**Title**
With this setting, you can enter text for the title of the Site Features block on the front page.
**Description**
By utilizing this setting, you can offer a description for the title of the Site Feature block on the site's front page.
**Site Feature Icon / Image**
Using this setting, you can choose to display the site feature as either an icon or an image type on the front page.
***Icon***: By selecting the "Icon" option in the dropdown menu, the site feature will be displayed in an icon-based design on the front page.
**Number of Site Features**
To utilize this setting, start by utilizing the "Select the number of site features" option, then proceed to click the "Save Changes" button located at the bottom of the settings page. Following this action, the page will refresh, and you will gain access to options and text fields for configuring the desired number of site features.
### Site features settings
**Activate block**
This option enables you to control the visibility of a specific site feature within the site features block.
**Title**
Using this setting, you can input the text for the title of a specific site feature within the site features block on the front page.
**Content**
With this setting, you can enter the content for a specific site feature within the site features block.
**Icon**
Using this setting, you can input the name of the icon you want to use for this particular site feature. Only enter what comes after "fa-".
## Marketing Spot
In the "Academi" theme, a marketing spot serves as a prominent area where you can effectively highlight important content, products, or promotions on your site's front page. This feature allows you to grab visitors' attention and convey key messages.
**Activate Block**
This option enables you to manage the visibility of the Marketing spot block and effectively control the content displayed on the front page.
**Title**
Using this setting, you can input text for the title of the Marketing Spot block on the front page.
Enter a catchy and concise title for the marketing spot. This title will draw the visitors' attention and provide context for the content.
**Description**
By utilizing this configuration, you can provide a description for the title of the Marketing Spot on the front page of the site.
**Content**
Through this setting, you can input the content to be displayed in the Marketing Spot on the front page.
Add a brief content description that further explains the purpose of the marketing spot or provides more information about what's being showcased.
**Media**
Use the provided image upload functionality to select and upload an image file. Ensure that the image format is one of the supported types, such as .gif, .jpe, .jpeg, .jpg, .png, .svg, or .svgz. This image will visually represent the content you're promoting.
## Jumbotron
The Jumbotron block in the "Academi" theme offers a chance to create a powerful initial impact and communicate the core of your site or organization. Its central placement makes it an excellent space for delivering concise, compelling, and visually appealing information.
**Activate block**
This option allows you to control the visibility of the Jumbotron block and effectively manage the content displayed on the front page.
**Title**
Utilizing this setting, you can enter text for the title of the Jumbotron block on the front page. Craft a captivating and succinct title for the Jumbotron. This title will capture visitors' attention and offer context for the content.
**Description**
By utilizing this setting, you have the ability to input the content that will be showcased in the Jumbotron on the front page. Include a concise content description that provides additional insight into the purpose of the Jumbotron or offers more details about the content being featured.
**Button Text**
Using this setting, you can specify the text for the button on the Jumbotron using this option. If you choose not to include a button on your slide, you can leave this field blank.
**Button Link**
Through this setting, you can define the link for the button on the Jumbotron using this option. Input the URL or web address where you want the button to redirect users when it's clicked.
**Button target**
Through this setting, upon selecting this option, clicking the button on the Jumbotron will result in opening the linked content in a separate browser tab or window. This action preserves the original page without any changes.
## Footer
Discover our enhanced and highly responsive theme footer block, meticulously designed to elevate both functionality and visual appeal. With an additional footer block that seamlessly integrates, your website's footer is about to undergo a captivating transformation.
Our meticulously crafted theme footer block is engineered to provide an unparalleled user experience. Its enhanced responsiveness ensures optimal display across various devices, from desktops to smartphones, making your website accessible to a wider audience.
Moreover, the new footer block introduces an enticing glow, adding a touch of sophistication to the overall design. This subtle radiance draws attention to your footer section, creating an attractive focal point that engages visitors and encourages them to explore further.
Experience the seamless blend of efficiency and aesthetics as our revamped footer block becomes an integral part of your website's identity. Elevate your online presence with a footer that not only delivers essential information but also enhances the visual appeal of your entire website. Welcome to the future of footers – dynamic, engaging, and designed to captivate.
### Genral Footer Block
**Footer background Image**
In this section, you have the option to upload a background image for the footer block. If you choose to leave this section empty, the default background color will be displayed instead. This allows you to customize the visual appearance of the footer block according to your preferences.
**Footer Overlay Opacity**
Using this setting, you can regulate the opacity level of the overlay within the footer block. This option is effective when a footer background image is present. The default value for this setting is 0.4, resulting in a 40% opacity for the overlay. This transparency enables the content behind it to be partially visible, creating a layered visual effect.
**Copyright**
Using this setting, you can input the copyright information for your site. This copyright notice will be displayed at the bottom of the footer block.
### Footer Block 1
**Activate block**
Through this setting, if you want to deactivate this block in the footer section, simply uncheck the "Activate this block" checkbox.
**Title**
Using this setting, you can input the text for the title of Footer Section 1 in the footer area.
**Footerlogo Enable**
By utilizing this setting, you can manage the visibility of the Footer logo, choosing to either display or hide it within the footer.
**Footer logo**
You can upload your custom footer logo here if you wish to add it to the footer. The recommended dimensions for the image are 80 pixels in height and a reasonable width, with a minimum width of 205 pixels to ensure it fits appropriately within the footer.
**Footnote**
Through this setting, you have the ability to input the content that you intend to display within the footer block. This setting is useful for showcasing your site's information or presenting other activities within the footer block.
### Footer Block 2
**Activate Block**
Through this setting, if you want to deactivate this block in the footer section, simply uncheck the "Activate this block" checkbox.
**Title**
With this setting, you can input the text that will serve as the title for Footer Section 2 within the footer area.
**Info Links**
By utilizing this setting, you have the capability to set up custom Info Links that will be displayed by the theme. Each line can include menu text, an optional link URL, an optional tooltip title, and an optional language code or a comma-separated list of codes. These language codes allow you to display the line to users of the specified language(s) only. The different elements within each line should be separated by pipe characters (|).
### Footer Block 3
**Activate Block**
Through this setting, if you want to deactivate this block in the footer section, simply uncheck the "Activate this block" checkbox.
**Title**
With this setting, you can input the text that will serve as the title for Footer Section 3 within the footer area.
**Address**
Through this setting, you can input your address details, and these details will be displayed in the footer block. This is a way to share your address information with visitors through the footer section of your site.
**Email**
Using this setting, you can input your email address to be displayed in the footer block. This feature makes it easier for visitors to contact you by providing a visible email contact in the footer section.
**Phone No**
By utilizing this setting, you can input your phone number to be displayed in the footer block. This feature is helpful for visitors who may need to contact you via phone, as it provides a visible phone number within the footer section for easy access.
### Footer Block 4
**Activate Block**
Through this setting, if you want to deactivate this block in the footer section, simply uncheck the "Activate this block" checkbox.
**Title**
With this setting, you can input the text that will serve as the title for Footer Section 4 within the footer area.
**Number of Social Media**
Using this setting, first, you need to choose the "Select the number of social media" option. Afterward, click the "Save Changes" button located at the bottom of the settings page. Following this action, the page will refresh, and you'll gain access to options and text fields enabling you to configure the specific number of social media profiles to be displayed within the footer block.
### Social Media
**Activate your social media**
Using this setting, you have the capability to determine which of your individual social media profiles will be showcased in your footer block. If you choose to uncheck the setting for a particular social media platform, that specific platform will not be displayed in the footer block. This allows you to selectively control which social media icons or links are visible in the footer.
**Icon**
Using this setting, you can input the name of the social media icon you want to use, specifically the part that comes after "fa-". This input will correspond to the appropriate icon in the chosen icon set.
**URL**
Through this setting, you can provide a URL link that the social media icon will redirect to when clicked by users. This link will determine where visitors are taken when they click on the respective social media icon.
**Icon Color**
Using this setting, you have the ability to alter the color of your social media icons. If you choose not to change the color of the social media icons, you can leave this field empty, and the icons will be displayed in their default color.
