-
Useful information….
I want to create mobile version of site, but with non-resposive template.
I am not professional php-developer.. but i can do something….1) Turn off responsive
2) Create a new layout
3) Create a new block-content.
t3_blanktplsblocks copy file mainbody.php and rename it f.e. mobile_mainbody.phpI needed to display only “compotent”. If you needed too, edit file like this.
[PHP]<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 – 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*//**
* Mainbody 3 columns, content in center: sidebar1 – content – sidebar2
*/
defined(‘_JEXEC’) or die;
?><div id=”t3-mainbody” class=”container t3-mainbody”>
<div class=”row”><!– MAIN CONTENT –>
<div id=”t3-content” class=”t3-content <?php echo $this->getClass($layout, $col) ?>” <?php echo $this->getData ($layout, $col++) ?>>
<jdoc:include type=”component” />
</div>
<!– //MAIN CONTENT –></div>
</div> [/PHP]
4) Lets start to edit our layout (created at second step) (folder> templatest3_blanktpls)[PHP]<?php
/**
*——————————————————————————
* @package T3 Framework for Joomla!
*——————————————————————————
* @copyright Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @authors JoomlArt, JoomlaBamboo, (contribute to this project at github
* & Google group to become co-author)
* @google group: https://groups.google.com/forum/#!forum/t3fw
* @link: http://t3-framework.org
*——————————————————————————
*/defined(‘_JEXEC’) or die;
?><!DOCTYPE html>
<html lang=”<?php echo $this->language; ?>” dir=”<?php echo $this->direction; ?>” class='<jdoc:include type=”pageclass” />’><head>
<jdoc:include type=”head” />
<?php $this->loadBlock (‘head’) ?>
</head><?php
jimport(‘joomla.application.web.webclient’);
$client = new JWebClient($userAgent = null, $acceptEncoding = null, $acceptLanguage = null);
if ($client->__get(‘mobile’) == 1)
{
if (@$_COOKIE[‘MobileVersion’] == 1 || @$_COOKIE[‘MobileVersion’] == 0)
{
?>
<body style=”margin: 10px;”>
<style>
a
{
margin: 20px;
padding: 20px;
font-size:55pt;
line-height: 100px;
}
input {padding:5px; border:2px solid #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size:40pt;
}
input:focus {border-color:#333; font-size:40pt; }input {padding:5px 15px; background:#ccc; border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; font-size:40pt; }
</style>
<form>
<label>
<input type=”hidden” name=”mobileswitcher” id=”textfield” value=”1″>
</label>
<label>
<input type=”submit” name=”button” id=”button” value=”Go to FULL VERSION of WebSite”>
</label>
</form><div style=”background-color: #0097ee; color: #FFFFFF; margin-top: 50px; margin-bottom: 20px;”>
<b style=”font-size: 40pt; line-height: 70px;”>Welcome to<br> MyWeb-Site.<br>Mobile Version.</b>
</div><form name=”Menu1″>
<label>
<input type=”hidden” name=”ShowContent” id=”textfield” value=”1″ >
<input type=”hidden” name=”option” id=”textfield” value=”com_content” >
<input type=”hidden” name=”view” id=”textfield” value=”article” >
<input type=”hidden” name=”id” id=”textfield” value=”181″ >
<input type=”hidden” name=”Itemid” id=”textfield” value=”374″ >
</label>
<label>
</form>
<form name=”Menu2″>
<label>
<input type=”hidden” name=”ShowContent” id=”textfield” value=”1″ >
<input type=”hidden” name=”option” id=”textfield” value=”com_content” >
<input type=”hidden” name=”view” id=”textfield” value=”article” >
<input type=”hidden” name=”id” id=”textfield” value=”196″ >
<input type=”hidden” name=”Itemid” id=”textfield” value=”374″ >
</label>
<label>
</form>
<form name=”Menu3″>
<label>
<input type=”hidden” name=”ShowContent” id=”textfield” value=”1″ >
<input type=”hidden” name=”option” id=”textfield” value=”com_content” >
<input type=”hidden” name=”view” id=”textfield” value=”article” >
<input type=”hidden” name=”id” id=”textfield” value=”181″ >
<input type=”hidden” name=”Itemid” id=”textfield” value=”374″ >
</label>
<label>
</form>
<form name=”Menu4″>
<label>
<input type=”hidden” name=”ShowContent” id=”textfield” value=”1″ >
<input type=”hidden” name=”option” id=”textfield” value=”com_content” >
<input type=”hidden” name=”view” id=”textfield” value=”article” >
<input type=”hidden” name=”id” id=”textfield” value=”181″ >
<input type=”hidden” name=”Itemid” id=”textfield” value=”374″ >
</label>
<label>
</form>
<form name=”Menu5″>
<label>
<input type=”hidden” name=”ShowContent” id=”textfield” value=”1″ >
<input type=”hidden” name=”option” id=”textfield” value=”com_content” >
<input type=”hidden” name=”view” id=”textfield” value=”article” >
<input type=”hidden” name=”id” id=”textfield” value=”181″ >
<input type=”hidden” name=”Itemid” id=”textfield” value=”374″ >
</label>
<label>
</form>
<form name=”Collaps”>
<label>
<input type=”hidden” name=”ShowContent” id=”textfield” value=”0″ >
</label>
<label>
</form><?php
if (isset($_GET[“ShowContent”]) && $_GET[“ShowContent”] == 1)
{
echo “<div style=”background-color: #FF9EBE; color: #FFFFFF; margin:30px;”><a href=”#” style=”color: #FFFFFF;” onclick=”document.forms[‘Collaps’].submit(); return false;”>Collaps Menu</a></div>”;
$this->loadBlock (‘mobile_mainbody’);
}
?>
<div style=”background-color: #999; color: #FFFFFF; margin:30px;” width: 100%; height:100%; position:relativ;”><a href=”#” style=”color: #FFFFFF;” onclick=”document.forms[‘Menu1’].submit(); return false;”>First Menu</a></div>
<div style=”background-color: #0097ee; color: #FFFFFF; margin:30px;” width: 100%; height:100%; position:relativ;”><a href=”#” style=”color: #FFFFFF;” onclick=”document.forms[‘Menu2’].submit(); return false;”>Second Menu</a></div>
<div style=”background-color: #BA003E; color: #FFFFFF; margin:30px;” width: 100%; height:100%; position:relativ;”><a href=”#” style=”color: #FFFFFF;” onclick=”document.forms[‘Menu3’].submit(); return false;”>Third Menu</a></div>
<div style=”background-color: #0097ee; color: #FFFFFF; margin:30px;” width: 100%; height:100%; position:relativ;”><a href=”#” style=”color: #FFFFFF;” onclick=”document.forms[‘Menu4’].submit(); return false;”>4th Menu</a></div>
<div style=”background-color: #BA003E; color: #FFFFFF; margin:30px;” width: 100%; height:100%; position:relativ;”><<a href=”#” style=”color: #FFFFFF;” onclick=”document.forms[‘Menu5’].submit(); return false;”>5th Menu</a></div><?php
if (isset($_GET[“mobileswitcher”]) && $_GET[“mobileswitcher”] == 1)
{
SetCookie(“MobileVersion”,””);
SetCookie(“MobileVersion”,”2″);Header(‘Location: ‘.$_SERVER[‘PHP_SELF’]);
}
}
if (@$_COOKIE[‘MobileVersion’] == 2)
{
echo “Полная версия”;
?>
<form>
<label>
<input type=”hidden” name=”mobileswitcher” id=”textfield” value=”2″>
</label>
<label>
<input type=”submit” name=”button” id=”button” value=”Back to mobile version”>
</label>
</form>
<?php
if (isset($_GET[“mobileswitcher”]) && $_GET[“mobileswitcher”] == 2)
{
SetCookie(“MobileVersion”,””);
SetCookie(“MobileVersion”,”1″);Header(‘Location: ‘.$_SERVER[‘PHP_SELF’]);
}?>
<?php $this->loadBlock (‘header’) ?>
<?php $this->loadBlock (‘mainnav’) ?>
<?php $this->loadBlock (‘mainslider’) ?>
<?php $this->loadBlock (‘spotlight-1’) ?>
<?php $this->loadBlock (‘mainbody’) ?>
<?php $this->loadBlock (‘spotlight-2’) ?>
<?php $this->loadBlock (‘navhelper’) ?>
<?php $this->loadBlock (‘footer’) ?>
<?php
}
} else {
?>
<body>
<?php
if ($client->__get(‘browser’) == 17)
{
echo ‘<div style=”background-color: #e6e6e6″>’;
echo ‘<p style=”text-align: center;”>Your broser is <b>INTERNET EXPLORER </b>’;
echo ‘<p>Its bad browser, use other please!</p>’
echo ‘<a href=”https://www.google.com/chrome”><img src=”/images/icons/docs/chrome.png” width=”32″ height=”32″ /> Google Chrome</a>,’;
echo ‘<a href=”http://www.opera.com/ru/download”><img src=”/images/icons/docs/opera.png” width=”32″ height=”32″ /> Opera</a>,’;
echo ‘<a href=”http://www.mozilla.org/ru/firefox/new/”><img src=”/images/icons/docs/firefox.png” width=”32″ height=”32″ /> Firefox</a><br>’;
echo ‘</div>’;
}?>
<?php $this->loadBlock (‘header’) ?><?php $this->loadBlock (‘mainnav’) ?>
<?php $this->loadBlock (‘mainslider’) ?>
<?php $this->loadBlock (‘spotlight-1’) ?>
<?php $this->loadBlock (‘mainbody’) ?>
<?php $this->loadBlock (‘spotlight-2’) ?>
<?php $this->loadBlock (‘navhelper’) ?>
<?php $this->loadBlock (‘footer’) ?>
<?php } ?>
</body></html>
[/PHP]5) What we need to know.
jimport(‘joomla.application.web.webclient’);
Very useful library of joomla to determine information about user.
f.e. which browser is used to display site.if you want to display your component always delete if-block>
[PHP]if (isset($_GET[“ShowContent”]) && $_GET[“ShowContent”] == 1)
{
echo “<div style=”background-color: #FF9EBE; color: #FFFFFF; margin:30px;”><a href=”#” style=”color: #FFFFFF;” onclick=”document.forms[‘Collaps’].submit(); return false;”>Collaps Menu</a></div>”;
$this->loadBlock (‘mobile_mainbody’);
} [/PHP]Menu control:
<input type=”hidden” name=”option” id=”textfield” value=”com_content” >
// component to display<input type=”hidden” name=”view” id=”textfield” value=”article” >
// What to display category of articale<input type=”hidden” name=”id” id=”textfield” value=”181″ >
// ID of articale<input type=”hidden” name=”Itemid” id=”textfield” value=”374″ >
// id of Menu Item (in joomla manager menu)If you have other questions, i answer with pleasure.
6) To see result i recommed to use Opera Mobile Emulator
http://www.opera.com/developer/opera-mini-simulatorRESULT>
PS. How to upload file.zip to forum?
Viewing 3 posts - 1 through 3 (of 3 total)This topic contains 3 replies, has 2 voices, and was last updated by
userid1988 11 years ago.
We moved to new unified forum. Please post all new support queries in our New Forum
My first and last tutorial for T3-Blank. Mobile version and non responsive tmpl.
Forums Public Forums T3 Framework My first and last tutorial for T3-Blank. Mobile version and non responsive tmpl.
Viewing 3 posts - 1 through 3 (of 3 total)
