Theme Customization

 

Customize the template with joomlacell amazing propositions. 

Make your website to look professional from start to finish. 

Inside the Modal zip located 5 unique examples, such as AOS, SVG and JS Libreries.    

 


 

Basic Modules

 

Upload to Joomla backend the module Custom CSS Zip. Included in the installation package of your Joomla Techvile Template.

UNZIP the package of the module mod flexi customcode and upload to Joomla backend. Included in the installation package of your Joomla Techvile Template.

 

 

Go to modules choose the module of Custom Css and mod flexi customcode and place the code.

 

 

 

In Advance menu and to check box "Use an external CSS file?" choose the options No.

 

 

Choose the module mod flexi customcode.

 

 

Place the code here -in case of JAVA SCRIPT use in the first and the end <script>...</script>.

Then in the Additional menu bar activate the options "Load Plugin Content".

 

 
 

 AOS EXAMPLE

Upload to Joomla backend the aos-master.zip. Included in the installation package of your Joomla Techvile Template.

Place the AOS identifier in your FTP Admin Panel in the manage files area and files, in the Techvile template file index.php, below the HEAD tag*.

 

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>

AOS.init();

</script>

  

 

 

*In some cases you can place in the same spot some script libraries tags like above. 

 

Place the the texts or the images in the editor and the Css code in the Costume Css module.

 

 

Example in the html editor:

<div>
<div class="item" style="text-align: center;" data-aos="fade-up">This Is a Test for many reasons</div>
<div class="item" style="text-align: right;" data-aos="fade-left"><img src="/images/new/oia-416136_1920.jpg" width="520" height="328" /></div>
<div> 

 Example in the Css module:

* {
box-sizing: border-box;
}

item {
width: 100px;
height: 10px;
margin: 2px auto;
padding-top: 5px;
background: blue;
background:rgba(0,0,4,0.9);
text-align: center;
padding-top: 100px;
background: grey;
font-size: 2em;

 

We can see the result here: https://drystoneestate.com/index.php/area 

 

 

SVG EXAMPLE

Upload to Joomla backend the svg-logo.zip and svg-modal.zip. Included in the installation package of your Joomla Techvile Template.

Place the SVG identifier in your FTP Admin Panel in the manage files area and files, in the Techvile template file index.php, below the HEAD tag*.

 

Place the the HTML code in Module Flexi Custom code and the Css code in the Costume Css module.

 

 

Example in the html editor:

<html>
<head>
<title>SVG Animation</title>
<link rel="stylesheet" href="/pc.css">
</head>
<body>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>

</html>

 Example in the Css module:

 *
{
margin: 0;
padding: 0p
}
body
{
background-image: linear-gradient(rgba(2,5,2.-10), rgba(2,5,2.-10)), url(pc.jpg);
background-size: cover;
background-position: center;
}
#Capa_1
{
width: 300px;
margin: 2% auto;
display: block;
}

We can see booth of the results here: https://drystoneestate.com/index.php/contact

 

 

 

JS LIBRARIES EXAMPLES

Place in your FTP Admin Panel in the manage files area and files section, in the Techvile template file index.php, just before the close tag </body>.

Place the Js code in Flexi customecode module and in the module of Css costume place the css code too.

Example JS Libraries: https://cdnjs.com/libraries