To publish a menu module in the menu module position, you must first create a menu. To do so, just go to Extensions > Module Manager, create a new Menu module and publish it in the menu position of the template.

Module in Menu Position

It is possible to put any module in a menu location. The module name is used as menu item and the module content appears in the dropdown.

Menu Styles

Three different styles of menus are available: the Navbar with its associated mega dropdown, Navs featuring an accordion effect in sidebars, and Subnavs which appear in the toolbar or in the footer. Warp will automatically format the menu based on its module location.

Configuring the logo in Joomla is quite simple. Simply create a Custom HTML module in the logo position. Once this is done, you can add your markup in the Custom output field.

For example, use the following code:

<img src="/images/my-logo.png" width="220" height="60" alt="logo" />

Warp 7 also offers the logo-small position, where you can display a different logo image for smaller viewport sizes.

The general theme section enables you to manage the actions and the overall look of your theme.

Style

The style section includes the Customizer. Click on the Customizer button to create your own style or to adjust an existing style. Once the customizer is loaded, you can easily adjust colors, fonts, margins, and other settings of the theme. The customizer only saves the modified variables and automatically converts them into CSS.

Development

1. LESS Developer Mode

If you choose the first option, the web browser will instantaneously turn your LESS files into JavaScript code when you open a page. This set-up is suitable for testing. It is not advised to turn on the developer mode in a live website since the frequent conversion process is not efficient.

2. Dynamic Styles

The second option allows the browser to obtain CSS from a URL. This is advantageous if you desire to experiment with different looks for your online page. Switch off this option when your website is launched.

3. Compile LESS to CSS

To complete your alterations to the LESS files, press the Compile LESS button and all your alterations will be assembled into the concluding CSS.

It is important that you avoid creating any new code in the /styles/STYLE-NAME/css/ folders, as this content will be replaced each time the Compile LESS button is pressed.

Compression

To reduce the amount of time it takes for a page to load, select one of the available compression options.

Custom Favicon / Custom Icons

First, you need to select the fallback icon (favicon.ico). Next, choose an icon in PNG format with a resolution of 512x512 pixels. After saving, visit your website, and the script will automatically generate icons in the following formats:

• 32x32px // Default fallback for most desktop browsers.
• 128x128px // Chrome Web Store icon & Small Windows 8-Star Screen Icon
• 152x152 // iPad Retina with iOS >= 7
• 167x167px // iPad Retina with iOS >= 10 (in practice iOS will still use 152×152)
• 180x180px // iPhone Retina
• 192x192px // Google Developer Web App Manifest Recommendation
• 196x196px // Chrome for Android home screen icon

Afterward, the corresponding meta links are added to the head section of each page.

Responsive

The viewport meta tag manages the appearance of a website on mobile devices. If it is not set, then the standard width of the website on mobile devices will remain the same as it does on desktops, which is 980px. The handheldfriendly tag was used initially to spot mobile content in AvantGo browsers, but it has become a usual way to recognize mobile pages.

Error Settings

The refresh meta tag should be used cautiously, as it takes the control of a page away from the user. Using this tag will cause a failure in W3C's Web Content Accessibility Guidelines.

Bootstrap

By opting for this choice, you can turn off Bootstrap. This helps to quicken the page loading speed when you only employ the Joomla blog and articles.

Content

Enable or disable the Desiner branding and the Warp branding.

Modules

Establish the standard module designs for the relevant positions.

Once you choose a style for a single module in the module settings, this style will be overwritten.

Learn how to control the look and feel of your Joomla site using theme styles, and how to create your own.

The Warp customizer simplifies your workflow by allowing you to add new styles without any CSS knowledge. It is divided into two sections. The left-hand vertical bar shows the settings for the theme and on the right, you can see your selected theme. All changes made to the customizer will be shown instantly on the right side preview.

Styles

Your customization is defined by a set of LESS variables called a style.

Create a New Style

1. Select a style within the customizer.
2. To duplicate a style, hit Copy and enter a new name.
3. You can now create your own style.
4. Once you are satisfied with your adjustments, hit Save and the customizer will save your style LESS files into the /styles/STYLE-NAME/style.less folder and compiles the CSS files into /styles/STYLE-NAME/css folder.

To undo your modifications within a theme style, hit the reset button to return the theme values to their default state.

Usage

The customizer displays only a certain number of variables by default. These variables are most commonly used in your theme. You can choose among several customizer modes to determine how much detail you want to customize your theme.

You can control the positioning of different layout parts using the layout settings.

This section allows for easy and flexible arrangement of your content. It gives the option to enable or disable system output, customize the layout of theme widgets and modules positions, and select a pre-designed style through the customizer. It also allows for storing custom layout profiles and assigning them to various pages.

Layout Manager

The layout manager allows for the creation of new layouts and the assignment of them to specific pages. A default layout is provided by Warp as a reference.

Create a New Layout

To create a new layout, perform the following steps:

1. Create a layout by clicking Add and entering a name.
2. That's it! You can start customizing your layout.
3. To finalize, select the appropriate pages for your layout within the scrollable box located at the bottom of the layout setting page.

Style

This option allows you to apply a style to your layout. When combined with the customizer and the layout manager, it provides a high level of flexibility when styling your pages.

Layout

This options includes the addition of breadcrumbs above the content, a fade-in effect for the page, a container to the page for a boxed layout, and the ability to apply different max-widths to the container by using classes.

The options also include setting for the HTML Body tag, using sections to divide the content into differently styled blocks, utilizing the .uk-container class to provide a max-width and wrap the main content of the website, selecting grid layout for each position, adjusting the sidebar widths and alignment, enabling or disabling a sticky navigation, and creating an off-canvas sidebar that slides in and out of the page, which is useful for mobile navigation.

Content

To hide the main system output, select this option. This can be useful when you want to only display modules on certain pages without leaving extra space.

Additionally, it allows you to enable or disable the To-top scroller.

Load Javascript

This options load the javascript video player from vimeo.com and/or the javascript library for the Open Street Map Pro component, the necessary scripts need to be included in the webpage.

Article Style

This options is about customizing the appearance of articles and blogs on a website using the UIkit framework. The options include using a title overlapping style in the article view, a specific blog card style, and options for displaying images within cards without spacing. Additionally, the UIkit framework includes various modifiers that can be used to add specific styles to cards, and different size modifiers can be applied to cards to adjust their padding.

Social Buttons

You can activate the Social buttons option which will enable users to share articles with others via small widgets located below Joomla articles. The 2 Click Social Buttons option is privacy-safe, as buttons are not loaded until the user clicks on them.

Additional Scripts

You can insert your Google Analytics tracking code or any other additional scripts in this section. Before the closing body tag in the theme, they will be added.

Manage your Joomla module styles and settings.

Modules can be displayed in various styles with additional icons and badges. In the Warp Modules overview, modules are grouped according to the positions in which they are published. Additionally, you can filter them by keyword and positions to which they are assigned.

Settings

This table gives you an overview of all available module options.

Add additional settings for managing and organizing your menus. You can filter menu items based on where they are positioned.

Menu Settings

The following table provides details about the additional menu settings.