You can copy any template from Joomla admin panel. Follow these steps to copy the template

1. Go to Template Manager, enter into Templates section.
2. Enter into the template you want to copy.
3. From the bottom right side of this page you will find Copy Template section. Here give the name of your template and click on the Copy template button.
4. Now go back to template manager Styles section and here you will find the copied template.
5. You're Done!

After copying the new template, some module positions may need to assign/configure again and also you have to re-configure template back-end options as previous.

Adding css

Our powerful Expose framework gives you the ability to add CSS from admin panel's template settings. Just go to Template Settings => Developer => Custom CSS Or you can also write css from template folder => css and edit template.css or any other css file you want.

Changing logo size

Logo size depends on your logo image size, so if you want bigger size, just upload a big logo image and it will calculate the size itself. Sometimes logo doesn't take it's full width and height. For example if you publish logo in top-1 position and you publish 3 modules in top position, from default setting all the module will take width of 4 grid each. But if the logo is bigger than the width allocated then it will not take it's full width & height. In this case you have to assign more grid to it. Go to template settings => Layouts. In this section you will be able to set the width of any module positions.

Disabling component from any page

In order to disable component from any page please go to Template Settings => Advanced => Component Disable & enable this option. Beside this option you will see a input field Component disable menu IDs here give the menu ID for that corresponding page.

Changing container width of templates

Open responsive-1200px-min.less and go to this line

// Fixed grid
#grid > .core(100px, 0px);

Change 100 to any other value you want. It will decrease or increase the width of each grid of your template.

Changing background image for different module positions

At first paste your image into template folder => images => backgrounds folder Now login to your site's admin panel, go to Template settings => Styles => Custom Style & enable it. Now bottom of it there is several option for specific module position. Select that image from Background Image dropdown. This way you can select different images for different positions.

LESS is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. (Learn more: https://lesscss.org/)

LESS Usage in Expose

Expose framework has Built-in LESS support. You can write LESS code directly. Template LESS style files located in Template less folder.

You have to Enable LESS compiler from template admin to compile LESS files.

Open templateDetails.xml, find this line

<?php /** End Offcanvas **/ endif;?>

1. Go to Extensions->Template Manager->Open Template (like: Tx_Appy)
2. Click on Developer tab, Add your own CSS code to Custom CSS Box, click to save from right top and You are done!

From file manager

We write all the styles for our template in LESS files which you'll get inside template_folder => less. If you are capable of writing LESS code you can edit LESS files here.

But remember to enable LESS compiler from admin panel to compile this LESS codes into CSS. To enable go to template's admin panel's Developer tab where you'll find Compile less option, just make this enable.

But if you are not familiar with LESS then there is css folder where you'll get all the compiled css files. You can make your style adjustments here also, but in this case LESS Compiler should remain Disable.

Adding new LESS/CSS file

1. At first create new LESS file inside LESS folder. For example new.less
2. Open index.php Find this line $expose->addLink(array('typography.less','template.less'),'less');
3. Add your file name into that line, for example $expose->addLink(array('typography.less','template.less','new.less'),'less');

For CSS file just create it inside CSS folder, no need to add this file anywhere else.

API

New Social Widget

Open templateDetails.xml, scroll down to widgets settings and search for the following line

<field name="spacer-social" type="spacer" text="SPACER_SOCIAL_WIDGET_LABEL" description="SPACER_SOCIAL_WIDGET_DESC" />

Here copy and paste any of the social-twitter, social-facebook and make required changes for your social media.

Copy social.php from libraries => expose => widgets Paste it into template’s widget folder. Open it, copy & paste any of the li and make required changes.

Upload image for your social media into templates images folder => social-icons Go to templates folder => less => widgets.less open it and scroll down to social section. Now add code to link the image you’ve uploaded.

Now login to your admin panel and go to Template’s settings => Developer => Compile Less Enable this option, now the changes you’ve made into widgets.less will be compiled into CSS.

To create a new module position, you have to open default template root via Extensions > Template Manager > activated default template link and edit the templateDetails.xml file. Once you opened templateDetails.xml, you can notice all built-in positions are wrapped within <position></position> tag. Now add your prefered module position name in <positions></positions> tag. I termed my module position name “Service”, Have a look on image below, how I wrapped module position name in <position></position> tag.

Step 02

To create your new module position setting, scroll a down to the layout Setting area, copy the following code and paste in layout setting section. I have named my position Sevice, just rename Service with your prefered one.

<field name="service-chrome" type="moduleschrome" max-mods="6" class="remove-lbl"
        default="service-1:standard,service-2:standard,service-3:standard,service-4:standard,service-5:standard,service-6:standard" description="MODULE_CHROME_DESC">
        <option value="standard">Standard</option>
        <option value="tabs">Tabs</option>
        <option value="accordion">Accordion</option>
        <option value="basic">Basic</option>
</field>

Step 03

Now head over to the Template Manager from Extensions Menu, click activated template link from Style column (My active template is Bolt), click on layout tab from left sidebar, refresh the Layout Manager hitting ctrl + F5 and hit Save and Close.

Now you can see in the image below our custom module position SERVICE_LABEL has been created.

Now you can publish your modules in your newly created position