Oxygen

Oxygen is a clean, stylish and professionally designed responsive Joomla template suitable for business sites, portfolios and blogs. The template supports K2 and uses our popular component Minitek Wall.

  • PHP 5.3.10+

  • MySQl 5.1+ with InnoDB support

  • Apache 2.x+ with mod_mysql, mod_xml, mod_zlib

  • GD library support

  • cURL library support

  • Minimum PHP memory limit: 64MB

The template consists of the following files:

  • Quickstart package

  • Template file

  • T3 plugin

  • Minitek Wall - component

  • Minitek Wall - module

  • Minitek Slider - module

The template's Home page is created with the following modules:

  • Minitek Slider - module

  • Minitek Wall - module

  • K2 Tools - module (K2 must be installed)

  • Custom HTML - module

  • Menu - module

The template offers two installation methods: the Manual installation and the Quickstart installation.

The Manual installation is preferred if you just want to install the template to an existing website which already has some content. However, keep in mind that when you install the template to an existing website, you will also have to reconfigure your modules because the new template has different module positions.

The Quickstart installation is the best solution if you are building a brand new website and you want to achieve the same look as the one in the template demo. The Quickstart zip file typically contains Joomla! as well as all extensions used in the demo of the template. All content, modules and menus are already configured exactly like in the template demo.

Quickstart Installation Guide
Manual Installation Guide
  1. Go to Module Manager and click on New. Select Login or Search or K2 Tools.

  2. Configure the module as you please and select the appropriate position:

    • Login module: Position login-popup
    • Search module: Position search-popup
    • Other module: Position top-popup

  3. Go to Template Manager and click on Oxygen - Default - Home. Under the tab Minitek select an image in the field Modal Background. This image will be displayed as background in the module positions of step 2.

<div class="col-xs-12 mn-home-contact">
	<div class="col-xs-12 col-sm-9 mn-desc">Want to know more or do you have any kind of an idea or suggestion? All you have to do is to send us your message and we will get back as soon as possible.</div>
	<div class="col-xs-12 col-sm-3 text-center"> <a class="btn btn-primary pull-right" href="#"> See Our Work </a> </div>
</div>
<div class="row">
	<div class="col-xs-12 col-md-4 mn-features text-center duration2 mn-on-scroll animated fadeInUp">
		<div class="mn-features-inner">
			<div class="mn-features-ico"><i class="mn-ficons-webdev"></i> </div>
			<div class="mn-features-title">
				<h3><a href="#">Web Development</a></h3>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-4 mn-features text-center duration3 mn-on-scroll animated fadeInUp">
		<div class="mn-features-inner">
			<div class="mn-features-ico"><i class="mn-ficons-webdesign"></i></div>
			<div class="mn-features-title">
				<h3><a href="#">Web Design</a></h3>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-4 mn-features text-center duration4 mn-on-scroll animated fadeInUp">
		<div class="mn-features-inner">
			<div class="mn-features-ico"><i class="mn-ficons-branding"></i></div>
			<div class="mn-features-title">
				<h3><a href="#">Great Branding</a></h3>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="mn-module-title">
		<h2>TEAM LEADERS</h2>
	</div>
	<div class="col-xs-12 col-md-6 mn-team duration2 mn-on-scroll animated fadeInUp">
		<div class="mn-team-inner">
			<div class="mn-team-img col-sm-4 col-md-4"> <img src="/images/oxygen/team/team1.jpg" alt="team1" class="img-circle"> </div>
			<div class="mn-team-desc col-sm-8 col-md-8">
				<h5>Michael Scott</h5>
				<h4>Advertiser / CEO</h4>
				<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-6 mn-team duration3 mn-on-scroll animated fadeInUp">
		<div class="mn-team-inner">
			<div class="mn-team-img col-sm-4 col-md-4"> <img src="/images/oxygen/team/team2.jpg" alt="team2" class="img-circle"> </div>
			<div class="mn-team-desc col-sm-8 col-md-8">
				<h5>Pam Beesly</h5>
				<h4>Graphic / Web Designer</h4>
				<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 mn-team">
		<hr>
	</div>
	<div class="col-xs-12 col-md-6 mn-team duration2 mn-on-scroll animated fadeInUp">
		<div class="mn-team-inner">
			<div class="mn-team-img col-sm-4 col-md-4"> <img src="/images/oxygen/team/team3.jpg" alt="team3" class="img-circle"> </div>
			<div class="mn-team-desc col-sm-8 col-md-8">
				<h5>Jim Halpert</h5>
				<h4>Web Developer / Statistics</h4>
				<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-6 mn-team duration3 mn-on-scroll animated fadeInUp">
		<div class="mn-team-inner">
			<div class="mn-team-img col-sm-4 col-md-4"> <img src="/images/oxygen/team/team4.jpg" alt="team4" class="img-circle"> </div>
			<div class="mn-team-desc col-sm-8 col-md-8">
				<h5>Dwight Schrute</h5>
				<h4>Marketing  / Business Analysis</h4>
				<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
			</div>
		</div>
	</div>
</div>
<div class="row mn-stats">
	<div class="col-md-6 mn-stats-desc mn-on-scroll animated fadeInLeft duration3">
		<p class="mn-stats-title">OUR SKILLS IN NUMBERS</p>
		<p class="mn-stats-text text-justify">Statistics can say in more detail about our skills levels. These are the things that we are good at and this is why we stand from the crowd.</p>
	</div>
	<div class="col-md-6 mn-stats-progress"> <span>Web Design & Development</span><span class="pull-right">%</span><span class="pull-right mn-stats-counter" data-from="0" data-to="60" data-speed="4000">0</span>
		<div class="progress ">
			<div class="progress-bar mn-on-scroll-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only"></span> </div>
		</div>
		<span>Advertising & Marketing</span><span class="pull-right">%</span><span class="pull-right mn-stats-counter" data-from="0" data-to="80" data-speed="4000">0</span>
		<div class="progress">
			<div class="progress-bar mn-on-scroll-progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only"></span> </div>
		</div>
		<span>Business Analysis</span><span class="pull-right">%</span><span class="pull-right mn-stats-counter" data-from="0" data-to="90" data-speed="4000">0</span>
		<div class="progress ">
			<div class="progress-bar mn-on-scroll-progress" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only"></span> </div>
		</div>
		<span>Branding</span><span class="pull-right">%</span><span class="pull-right mn-stats-counter" data-from="0" data-to="60" data-speed="4000">0</span>
		<div class="progress">
			<div class="progress-bar mn-on-scroll-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only"></span> </div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-xs-12 col-md-4 mn-skills text-center">
		<div class="mn-skills-inner">
			<div class="mn-skills-ico"><i class="mn-ficons-craft"></i> </div>
			<div class="mn-skills-title">
				<h3><a href="#">Web Development</a></h3>
			</div>
			<div class="mn-skills-desc">
				<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-4 mn-skills text-center">
		<div class="mn-skills-inner">
			<div class="mn-skills-ico"><i class="mn-ficons-craft"></i></div>
			<div class="mn-skills-title">
				<h3><a href="#">Web Design</a></h3>
			</div>
			<div class="mn-skills-desc">
				<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-4 mn-skills text-center">
		<div class="mn-skills-inner">
			<div class="mn-skills-ico"><i class="mn-ficons-craft"></i></div>
			<div class="mn-skills-title">
				<h3><a href="#">Great Branding</a></h3>
			</div>
			<div class="mn-skills-desc">
				<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="mn-clients text-center">
		<div class="col-md-3 mn-clients-inner"> <img src="/images/oxygen/clients/client1.png" border="0" alt=""> </div>
		<div class="col-md-3 mn-clients-inner"> <img src="/images/oxygen/clients/client2.png" border="0" alt=""> </div>
		<div class="col-md-3 mn-clients-inner"> <img src="/images/oxygen/clients/client3.png" border="0" alt=""> </div>
		<div class="col-md-3 mn-clients-inner"> <img src="/images/oxygen/clients/client4.png" border="0" alt=""> </div>
	</div>
</div>
<div class="row">
	<div class="mn-module-title">
		<h2>AMAZING FEATURES</h2>
	</div>
	<div class="col-xs-12 col-md-4 mn-services text-center duration2 mn-on-scroll animated fadeInUp">
		<div class="mn-services-inner">
			<div class="mn-services-img"> <img src="/images/oxygen/services/services1.jpg" border="0" alt="">
				<div class="mn-services-title">
					<h3 class="mn-flexbox"><a href="#">Premium Design Services</a></h3>
				</div>
			</div>
			<div class="mn-services-desc text-center">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum consequat turpis, quis malesuada urna porta nec. </p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-4 mn-services text-center duration3 mn-on-scroll animated fadeInUp">
		<div class="mn-services-inner">
			<div class="mn-services-img"> <img src="/images/oxygen/services/services2.jpg" border="0" alt="">
				<div class="mn-services-title">
					<h3 class="mn-flexbox"><a href="#">Exceptional Web Development Skills</a></h3>
				</div>
			</div>
			<div class="mn-services-desc text-center">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum consequat turpis, quis malesuada urna porta nec. </p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-md-4 mn-services text-center duration4 mn-on-scroll animated fadeInUp">
		<div class="mn-services-inner">
			<div class="mn-services-img"> <img src="/images/oxygen/services/services3.jpg" border="0" alt="">
				<div class="mn-services-title">
					<h3 class="mn-flexbox"><a href="#">Cutting Edge Branding Experiences</a></h3>
				</div>
			</div>
			<div class="mn-services-desc text-center">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum consequat turpis, quis malesuada urna porta nec. </p>
			</div>
		</div>
	</div>
</div>

Check out the detailed documentation of the T3 Framework.

This website uses cookies so that we can provide you with the best user experience. By clicking "Accept" you agree to cookies being used in accordance with our Cookies Policy.

Search