Hello @ all PragmaMx Community
In the same reflexion of AlaMobile,
i wanna make a template can be used on every type of hardware, Computer/Table/Mobile...
So i try to convert html 5 Responsive themes to PragmaMx.and need your help :morning:
It's work a little bit but stay some problems. My biggest is a Jquery conflicts with other module use javascript.
Also it's difficultto do it work without touch header.php
for exemple, in my last "working" test i put CSS in settings.php and Javascript in header.php
header.php :
<head>
<title><?php echo $pagetitle ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo _CHARSET ?>" />
<meta http-equiv="Content-Language" content="<?php echo _DOC_LANGUAGE ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="expires" content="0" />
<meta name="revisit-after" content="10 DAYS" />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="resource-type" content="DOCUMENT" />
<meta name="distribution" content="GLOBAL" />
<meta name="rating" content="general" />
<meta name="author" content="<?php echo htmlspecialchars(strip_tags($GLOBALS['sitename'])) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($GLOBALS['metakeywords']) ?>, pragmaMx <?php echo PMX_VERSION ?>" />
<meta name="generator" content="pragmaMx <?php echo PMX_VERSION ?> - by http://pragmaMx.org" />
<meta name="copyright" content="Copyright (c) <?php echo Date("Y") ?> by <?php echo htmlspecialchars(strip_tags($GLOBALS['sitename'])) ?>" />
<meta name="description" content="<?php echo htmlspecialchars(strip_tags($GLOBALS['slogan'])) ?>" />
<script type="text/javascript" src="includes/javascript/debugmode.js"></script>
<script type="text/javascript" src="includes/javascript/jquery/jquery.colors.js"></script>
<script type="text/javascript" src="themes/colorstest/js/bootstrap.js"></script> <!-- Bootstrap -->
<script type="text/javascript" src="themes/colorstest/js/filter.js"></script> <!-- Filter JS -->
<script type="text/javascript" src="themes/colorstest/js/jquery.carouFredSel-6.1.0-packed.js"></script> <!-- CarouFredSel -->
<script type="text/javascript" src="themes/colorstest/js/jquery.flexslider-min.js"></script> <!-- Flexslider -->
<script type="text/javascript" src="themes/colorstest/js/jquery.isotope.js"></script> <!-- Isotope -->
<script type="text/javascript" src="themes/colorstest/js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto -->
<script type="text/javascript" src="themes/colorstest/js/jquery.tweet.js"></script> <!-- Tweet -->
<script type="text/javascript" src="themes/colorstest/js/custom.js"></script> <!-- Main js file -->
and i put css in settings.php of theme
pmxHeader::add_style(MX_THEME_DIR . '/style/bootstrap.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/font-awesome.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/flexslider.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/prettyPhoto.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/style.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/bootstrap-responsive.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/forms.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/news.ss');
pmxHeader::add_style(MX_THEME_DIR . '/style/patch_ie.css');
pmxHeader::add_style(MX_THEME_DIR . '/style/print.css');
inside this lineof header.php, i've renamhed te jquery.js file given with the original theme and put inside pmx jquery folder for test
<script type="text/javascript" src="includes/javascript/jquery/jquery.colors.js"></script>
- the navigation don't work when i use ther original jquery.js file from system
- the navigation don't work with any module use javascript like forums (http://www.tradezone.fr/trade-zone/Forum.html)
- the navigation don't work also if i use a bottom javascript navbar like you can see on http://TradeZone.fr homepage
- the navigation work good when i use in modules don't use Javascript like legal (http://www.tradezone.fr/trade-zone/legal.html) (only a right side block don't wanna come but all the left and top navigation works.)
- I also don't know how center block can take right and left block space when they're not active (like in working legal module).
- Another bug come when your minimize the Window, an empty area stay at the top of site, and i've the same error with multiple thème i've tried to convert
So PragmaMx globally working with responsive theme but it's stay little things to do for adapt thèmes.
Thanks all the community for your support and for your trust in PragmaMx.
If you can wait, i send you a download link from a finished Responsive themes.
This you can use as sample.
If you use Responsive themes, you don't need the als Mobile Modules
Hallo Peter,
ich kann mir vorstellen, dass es nicht nur mich interessieren würde, wenn du den Link zu einem Responsive Pmx-Theme auch hier rauslegen würdest. :thumbup:
Dann könnte man mal sehen wie das gestrickt wird und evtl. selbst für vorhandene, eigene Themes übernehmen.
Ja kann ich auch machen.
Bin heute noch nicht dazu gekommen.
Danke Peter !
Thanks for you support
I'm interrested by your work.
You can send me a link, i need many themes for my website, and yes moeller, maybe it's will help us for convert
over html 5 themes. So i really want to convert the theme i show you, and other themes i like.
Themes i tested works you can use all modules and blocks but i get problems with javascript jquery inclusion and header keep a blank space. Yes with a responsive theme it's not necessay to use alamobile,
and you can acces to every modules. I think it's a good solutions for make multiplatform website.
For me the principal problem i for integrate external mixed java(jquery)/css inclusion
regards.
shorty
A demo you can watch here: http://www.pusdorf.de
Resize the Browserwindows to view the efects.
I will make at the seceond Christmas Day a pmx_blank fit for Responsive design and put it in the PMX Downloads.
Hallo,
ich finde, man kann mit 'Media Queries' jedes tabellenloses Theme so anpassen, dass es sich der Auflösung des jeweiligen Gerätes anpasst. Habe schon vor langer Zeit mal damit gespielt... Derzeit ist bei mir so, dass wenn die Auflösung kleiner als 600px wird, sich die ganze Seite responsiv verhält. Und das ist Geräte-unabhängig... Funktioniert also auch im Browser, wenn ihr den schmaler macht.
Das ganze beginnt bei mir ab 600px abwärts, weil ich der Meinung bin, dass so ein 7-Zoll-Tablet im Querformat durchaus groß genug sind, um eine Seite (zumindest meine) in normal-Größe anzuzeigen.
Damit das ganze auch im Forum funktioniert musste ich weg von diesem zwei-Spalten-System und hin zu einer Spalte, somit passt sich auch das Forum sehr schön an die jeweilige Größe.
lg
Zitat von: cihan am 24 Dezember 2013, 18:53:31
Hallo,
ich finde, man kann mit 'Media Queries' jedes tabellenloses Theme so anpassen, dass es sich der Auflösung des jeweiligen Gerätes anpasst. Habe schon vor langer Zeit mal damit gespielt... Derzeit ist bei mir so, dass wenn die Auflösung kleiner als 600px wird, sich die ganze Seite responsiv verhält. Und das ist Geräte-unabhängig... Funktioniert also auch im Browser, wenn ihr den schmaler macht.
Das ganze beginnt bei mir ab 600px abwärts, weil ich der Meinung bin, dass so ein 7-Zoll-Tablet im Querformat durchaus groß genug sind, um eine Seite (zumindest meine) in normal-Größe anzuzeigen.
Damit das ganze auch im Forum funktioniert musste ich weg von diesem zwei-Spalten-System und hin zu einer Spalte, somit passt sich auch das Forum sehr schön an die jeweilige Größe.
lg
Responsive design = Media Queries ;)
Nur müssen die css Dateien für die Media Queries erst mal geschrieben werden.
Was bei etwas komplexeren Themes lange dauern kann.
Das Theme auf der von mir Verlinkten Seite stammt von mir und werde dieses, mit Absprache des Seitenbetreibers, in abgewandelter Form als Vorlage in den Download packen.
Happy Merry Christmas @ll community :elf:
re and thank you for your responses :smile:
So the theme you show me seems be functionnal :thumbup:
but is it working with blocks right and left simulatenous :quest
have you found a way to include java/css can be used for converting themes ?
In your theme you use only the jquery library of pmx core or it's possible to use multiple library.
I put this questions because i also continue to hope the theme i show u can perfectly work with pragmamx
regards
Zitat von: shorty am 25 Dezember 2013, 07:16:44
...
but is it working with blocks right and left simulatenous :quest
....
The Blocks left and right, yes it's works.
At the first in Mobile devices the content will shown and than came the blocks:
header
header menu
Middle content
left Block
right Block
Zitat von: shorty am 25 Dezember 2013, 07:16:44
...
have you found a way to include java/css can be used for converting themes ?
...
Yes, i have modified the
header.php (in pmx-root) to use
Media Queries.
And in the Themes i added the Media Queries css files.
You need jQuery (from PMX-Core. Maybe you must update it to 1.8.3) only, if you will use the Bootstrap/Flat UI Frameworks or other jQuery plug-ins.
The
"converting" does the Media Queries in the css files, no javascript needed for that.
Zitat von: shorty am 25 Dezember 2013, 07:16:44
...
In your theme you use only the jquery library of pmx core or it's possible to use multiple library.
....
You should use the jQuery version from PMX-Core and take only the necessary plug-ins in the Theme, if the pmx-core don't have it.
If the Plug-Ins needed a Version higher as 1.6.4 Update it to a Version < 1.9.0.
The Version >= 1.9.0 is a UTF-8 Version
Multiple jQuery Versions can make conflicts.
.
Zitat von: shorty am 25 Dezember 2013, 07:16:44
...
I put this questions because i also continue to hope the theme i show u can perfectly work with pragmamx
...
If you used my Theme as a template it 100% with pragma running, even with the 2.0.
Thanks for your support :)
It's help me a lot :
ZitatIf the Plug-Ins needed a Version higher as 1.6.4 Update it to a Version < 1.9.0.
So i've update to 2.0.2 and it's working better. (only a right side widget don't wanna work. So i delete it.)
I've modified the colors, and i will start to try to put a bottom navigation bar tomorrow or next year.
Also i see you sucribe on the wrong website. normally if you try to acces with a mobile phone or a tablet. the testing website http://tradezone.fr/trade-zone/ redirect you to another testing website http://tradezone.fr/services/ [old relase of same template]
I've also find a solution for the bug come when your minimize the Window, an empty area stay at the top of site. It was a padding-top in the css i've moved and duplicate in other top tables of the theme and it's works better.
It stay many blocks positionnement problems. also to fix right block at the right side (come on the left side of center blocks or if they stay à right the don't take all the page and let a blank space). Also i've thinked to replace original navigation menu by blocks content but i don't know how/if it's possible to automated with personalise css of blocks <ul> <li>, <li>²..., <span> of blocks
<li class="has_sub"><a href="#" class="br-blue"><i class="icon-list-alt"></i> Services <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
<ul class"nameofclass">
<li>content</li>
</ul>
<li class="has_sub"><a href="#" class="br-green"><i class="icon-list-alt"></i> Services <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
<ul class"nameofclass">
<li>content</li>
</ul>
Also i'm thinking its better to put center blocks (main content) before left and right blocks in minimized mode, but i don't know if it's possible because the lefts blocks are written before in the html code. Like this mobile user who consult the website can acces more easily to the content.
So i'm really interresting to try your theme, can you send me a download link ?
I also can give links the theme if somedy also wanna work on it.
Happy new year @ all PragmaMx best cms community
Regards.
re @ all community ;)
I've also a cache problem similaire to this message from sitki
Loginform and other fuctions i try to call appears in bad way like
-:_f19d6c115201e2f3827fd39085067e44_:-loginform} instead {loginform}
I try to change settings.php true/false :
define('MX_THEME_CACHABLE', true);
and the visitors cache in admin area but without succes like you can see on header & footer of the testing websites.
http://www.pragmamx.org/Forum-topic-28232-start-msg182479.html#msg182479
i try to read this but i've don't find a solution @ this time.
http://www.pragmamx.org/doku.php?id=faq:allgemein:wie_wirkt_sich_das_cache_zuruecksetzen_aus
regards
shorty
Let me finished the sample Theme.
In this you will find all you neeed.
:pardon: Danke !
http://www.pragmamx.org/Downloads-pmx-blank-bootstrap-style-Responsive-Design-view-863.html
:thumbup: i will try it :smile:
Did it help you?
re :)
It's great job, it will be helpful but at this time it's not really helping me.
I don't now where is the conflict for the displaying of bottom navbar & for login form.
http://www.tradezone.fr/services/
thanks for your support
Try this:
<nav>
<!-- main-nav -->
<!-- Navbar -->
<div id="headmenu">
<div class="navbar page-content">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- START Loginform -->
<div id="loginForm" class="pull-left">
{LOGINFORM}
</div>
<!-- END Loginform -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="/" class="tohome"><i class="icon-home icon-large"></i> {_THEME_GOTOHOME}</a></li>
<!-- START headmenue -->
<li class="active"><a tabindex="-1" href="#">Home</a></li>
<li><a tabindex="-1" href="#">About</a></li>
<li><a tabindex="-1" href="#">Services</a></li>
<li><a tabindex="-1" href="#">Products</a></li>
<li><a tabindex="-1" href="#">Contact</a></li>
<!-- END headmenue -->
</ul>
</div>
<!--//.nav-collapse -->
</div>
</div>
</div>
<!-- //navbar -->
<!-- //main-nav -->
</nav>
<Edit>
And for the Navigation use the Menumanarger or the bootstrap navigation.
</Edit>
:thumbup:
Thanks, loginform works now !
My navbar works also, it was a human mistake.
the reason was i've forgot to add the navbar functions inside the php file.
So it stay some graphical ajustement now, and i think the new pmx blank responsive will help a lot :)
I also wanna ask community for a syntax inside settings.php for put different html pages for different modules.
It's working with two modules but i can't put one more if or elsif, i don't know why :gruebel:
working syntax for use a second template in some modules
if (mxIsUser())
{
if (mxModuleActive('Troc') && ('Forum')) {
define('MX_THIS_THEMEFILE', 'index.html');
}
else
define('MX_THIS_THEMEFILE', 'theme.html');
}
NOT working test for try to put a third html page for other modules
if (mxIsUser())
{
if (mxModuleActive('Troc') && ('Forum')) {
define('MX_THIS_THEMEFILE', 'blog1.html');
}
elseif (mxModuleActive('Webmasters') && ('Videos')) {
define('MX_THIS_THEMEFILE', 'blog2.html');
}
else
{
define('MX_THIS_THEMEFILE', 'theme.html');
}
}
I try to put different html for guest and the possibility to choose different pages for each modules for members and guest.
Thanks BDM design for your great support ;)
Regards.
Try this:
if ( mxIsUser() )
{
if ( mxModuleActive('Troc') && (MX_MODULE == 'Forum') )
{
define('MX_THIS_THEMEFILE', 'blog1.html');
}
elseif ( mxModuleActive('Webmasters') && (MX_MODULE == 'Videos') )
{
define('MX_THIS_THEMEFILE', 'blog2.html');
}
else
{
define('MX_THIS_THEMEFILE', 'theme.html');
}
}
Thanks for you fast response :smile:
I need to purge cach for see effects of modifications,
it's not working for me, i try many ways without success. :morning:
See my PM
Shorty:
In the settings.php line 149:
define('MX_THIS_THEMEFILE', 'theme.html');
change to:
/* Dateiname des templates */
if ( mxIsUser() )
{
if ( mxModuleActive('FAQ') && (MX_MODULE == 'FAQ') )
{
define('MX_THIS_THEMEFILE', 'faq.html');
}
elseif ( mxModuleActive('Feedback') && (MX_MODULE == 'Feedback') )
{
define('MX_THIS_THEMEFILE', 'contactus.html');
}
else
{
define('MX_THIS_THEMEFILE', 'theme.html');
}
}
else
{
define('MX_THIS_THEMEFILE', 'theme.html');
}
Do it the same way, otherwise it will not work
Use MX_IS_USER not mxIsUser()
Thanks for you support :)
i will try like this
Thanks you ! :drinks:
it's works great like this if cache is turned off in settings file :BD:
Finally javascript works good when i put calls in settings files
Don't need to touch header.php So i think the problem was the version of jquery :thumbup:
Now I.E and Firefox really works differently...
I.E block the left blocks on top so i will try to understand why... :morning: