-
In this post, we will suggest you how to add the background image to menu item’s page on our recent T3 templates by using the page class suffix. As a example, we will add the background images to the menu item’s page of JA Mitius template.
This topic will be related to customizing our template files, so that you should backup your files & follow below steps carefully:
Step 1. Loading page class suffix function in template layout
We will add the the function of loadding page class suffix in current template layout by opening templatesja_mitiustplsdefault.php file, replace 20th line:
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">with
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" class="<?php $this->bodyClass(); ?>">Note: You can ignore this first step when you work with our JA Smashboard template. In some cases, you will need to apply this step in other layout files in templates/ja_template/tpls/ folder according to the layout in the template styles which are being assigned to the menu items.
Step 2. Define page class suffixes in custom.css file
In this step, you need to define the page class suffixes with your new background image in the custom.css file, the suffix should have below format:
.page_suffix_name body {
background-image: url(" your_bg_image_path");
background-size: 100% 100%;
}
i.e. I want to name a page suffix “body-bg-1” with a background image body-bg-1.jpg, so the codes should be:.body-bg-1 body {
background-image: url("../images/body-bg-1.jpg");
background-size: 100% 100%;
}
Note: Make sure that you uploaded the background images into /templates/ja_template/images/ path. The ‘../’ in css class is understood as templates/ja_template/ path.
There are some T3 templates that we don’t include a custom.css file in the template installation package, you need to create this file in templates/ja_template/css/ folder, then to add below red line into templatesja_templateetcassets.xml:
<stylesheets>
<file>css/custom.css</file>
</stylesheets>Step 3. Add page class suffix to menu item
After defining the page class suffixes with the background images, you can add the page lass suffix name into Page class box of Page Display Options in the backend of menu item. The added texts should be:i.e: body-bg-1
Note: Make sure that you leave a space before “body-bg-1” text.
That is all !!!
Hi,
It will be quitely different here. On using Module class suffix, you can pass the step 1, and in step 2 the class suffix of module on our T3 templates should be:
.module.mod-hilite1 {
background: #1ba1e2;
color: #fff;
}– mod-hilite1 is the class suffix name. You will need to put into Module class suffix option in the backend of module.
This topic contains 3 replies, has 2 voices, and was last updated by 
We moved to new unified forum. Please post all new support queries in our New Forum