pragmaMx Support Forum

pragmaMx => Themes & Design => Thema gestartet von: AlternativeComputing am 15 Januar 2014, 14:52:52

Titel: pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 15 Januar 2014, 14:52:52
Moin Moin,

Bei dieser Themes Art ist es Wichtig, das die Logos als SVG Dateien abgespeichert werden.
Das hat mit den Retina-Displays und TV's zu tun, damit die Logos gestochen scharf bleiben.

Weitere Fragen bezüglich der Anpassung an Eure Bedürfnisse, könnt Ihr hier stellen.

Bei dieser Theme handelt es sich um eine HTML 5 Theme und kann ohne Probleme im PragmaMx 2.x weiterverwendet werden.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: Kuddel am 23 Februar 2014, 15:21:22
Moin Peter,
mir gefällt das Theme richtig gut!
Es lässt das alte "pmx-blank" ja reichlich bieder aussehen.

btw.
Abändern des Facebook- & Twitter-Links war easy, aber wo ändere ich die Vorgabe für das Logo?  :gruebel:

Beste Grüße aus HH

Kuddel™ :bye:
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 23 Februar 2014, 16:06:51
Moin Kuddel,

Im Ordner der Theme ist ein Ordner "templates", dort in der theme.html die Zeilen 68 - 72:



                     <div class="head-topleft">
                       <div id="logo">
                           <a href="./" ><img src="images/demo-logo.svg" alt="logo" /></a>
                       </div>
                     </div>



demo-logo.svg gegen Dein Bild Tauschen.

Dann in Ordnern:

css/desktop
css/mobile
css/tablet

in der header.css



.head-topleft {
  -webkit-border-radius: 14px 0 0 0;
  -moz-border-radius: 14px 0 0 0;
  border-radius: 14px 0 0 0;
  background-color: #fff;
  height: 8em;
  width: 50%;
}



und




#logo img {
  background-color: #fff;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -webkit-border-radius: 14px 0 0 0;
  -moz-border-radius:  14px 0 0 0;
  border-radius:  14px 0 0 0;
  padding: 0 0 0 0;
  float: left;
  min-height: 7.75em;
  max-height: 10em;
  width: 100%;
}



Für die Verwendung mit dem PragmaMx 2.x muss in der theme.php folgendes geändert werden:

Zeile 13 - 16:

Von



define('_THISTHEME_', dirname(__FILE__));

/* Sprachdatei auswaehlen */
mxGetLangfile(_THISTHEME_ . DS . 'language');




in



define('_THISTHEME_', __DIR__);

/* Sprachdatei auswaehlen */
mxGetLangfile(__DIR__);



Sonst werden die Sprachdateien nicht gefunden.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: Kuddel am 23 Februar 2014, 16:38:57
alter Verwalter!
ich hatte, statt des Logos, an ein Banner (468x60, gif) gedacht... :red:
und das Ganze auch noch "center" statt am Rand!
Naja, probieren wir es mal  :pardon:
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 23 Februar 2014, 17:43:47
Banner geht auch, findest Du in den selben Dateien.

Schau Dir dazu die Zeilen 76 - 80 in der themes.html an:



                     <div class="head-topleft">
                       <div id="logo">
                           <a href="./" ><img src="images/demo-logo.svg" alt="logo" /></a>
                       </div>
                     </div>

                     <div class="head-topright">

                          <!-- START banner top --> // Z. 76
                          <!-- <div id="banner">
                            {BANNER1}
                          </div> -->
                          <!-- END banner top --> Z. 80
                     </div>
                   </div>



Das könnte dann bei Dir so aussehen:



       <!--  header -->
       <header>
       <div id="header" class="page-content">

               <div id="head-top">
                          <p class="noscreen noprint">
                            <em>{_THEME_SKIP_LINKS}:</em>
                            <a href="#main">{_THEME_SKIP_CONTENT}</a>,
                            <a href="#headmenu">{_THEME_SKIP_NAVIGATION}</a>,
                            <a href="#search">{_THEME_SKIP_SEARCH}</a>.
                          </p>

                     <div class="head-topbanner">

                          <!-- START banner top -->
                          <div id="banner">
                            {BANNER1}
                          </div>
                          <!-- END banner top -->
                     </div>
                   </div>

               <div id="head-middle">
                 <div class="head-middleleft">
                     <!-- START searchform -->
                     <div id="search">
                       {SEARCHFORM}
                     </div>
                     <!-- END searchform -->
                 </div>

                 <div class="head-middleright">
                     <!-- START Socialmedia -->
                     <div id="sm-toolbar">
                           <a class="rss-button" href="{LINK_RSSFEED}" class="pull-right" data-toggle="tooltip" target="_blank" title="{_THEME_RSS}"><i class="icon-rss icon-large"></i></a>
                           <a class="facebook-button" href="{LINK_FACEBOOK}" class="pull-right" data-toggle="tooltip" target="_blank" title="{_THEME_FACEBOOK}"><i class="icon-facebook icon-large"></i></a>
                           <a class="twitter-button" href="{LINK_TWITTER}" class="pull-right" data-toggle="tooltip" target="_blank" title="{_THEME_TWITTER}"><i class="icon-twitter icon-large"></i></a>
                     <!-- END Socialmedia -->
                     </div>
                     <!-- START Loginform -->
                     <div id="loginForm" class="pull-left">
                       {LOGINFORM}
                     </div>
                     <!-- END Loginform -->
               </div>
             </div>

         <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>

                     <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>

       </div>
       </header>
       <!-- //header -->



Dann in Ordnern:

css/desktop
css/mobile
css/tablet

in der header.css



.head-topleft {
  -webkit-border-radius: 14px 0 0 0;
  -moz-border-radius: 14px 0 0 0;
  border-radius: 14px 0 0 0;
  background-color: #fff;
  height: 8em;
  width: 50%;
}

.head-topright {
  -webkit-border-radius: 0 14px 0 0;
  -moz-border-radius: 0 14px 0 0;
  border-radius: 0 14px 0 0;
  background-color: #fff;
  height: 8em;
  width: 50%;
}



ändern in



.head-topbanner {
  -webkit-border-radius: 14px 14px 0 0;
  -moz-border-radius: 14px 14px 0 0;
  border-radius: 14px 14px 0 0;
  background-color: #fff;
  height: 8em;
  width: 100%;
}



Die 14px solltest Du in % Werte umwandeln.

Die benötigte Anweisung für den Banner, damit sich die Größe ändert, findest Du in folgender css Anweisung:



#banner {
  float: right;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  margin: 2.5% 2.5% 0 0;
  border: 1px solid #000;
  min-height: 2.9em;
  max-height: 5.9em;
  min-width: 10%;
  max-width: 100%;
  border-radius: 0.250em 0.250em 0.250em 0.250em;
  box-shadow: 0 0.167em 0.167em rgba(0, 0, 0, 0.1);
}



// Edit:

Wie es sich mit den Banner und der Größe verhält, kannst Du hier sehen: http://www.pusdorf.de (http://www.pusdorf.de)

// Edit ende
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 24 Februar 2014, 15:03:15
@Kuddel:

Wie schaut diese Anweisung bei Dir aus?




#banner {
  float: right;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  margin: 2.5% 2.5% 0 0;
  border: 1px solid #000;
  min-height: 2.9em;
  max-height: 5.9em;
  min-width: 10%;
  max-width: 100%;
  border-radius: 0.250em 0.250em 0.250em 0.250em;
  box-shadow: 0 0.167em 0.167em rgba(0, 0, 0, 0.1);
}



Mach mal folgendes:




#banner {
  float: right; <-- auf none stellen
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  margin: 2.5% 2.5% 0 0;  <---- Hier auf 50% 50% 0 0 stellen
  border: 1px solid #000;
  min-height: 2.9em;
  max-height: 5.9em;
  min-width: 10%;
  max-width: 100%;
  border-radius: 0.250em 0.250em 0.250em 0.250em;
  box-shadow: 0 0.167em 0.167em rgba(0, 0, 0, 0.1);
}

Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 24 Februar 2014, 18:31:46
die css Dateien befinden sich in:

pmx-blank_bootstrap-style/style
pmx-blank_bootstrap-style/style/desktop/
pmx-blank_bootstrap-style/style/mobile/
pmx-blank_bootstrap-style/style/tablet/

und nicht wie ich vorher schrieb in den Ordnern

pmx-blank_bootstrap-style/css/desktop
pmx-blank_bootstrap-style/css/mobile
pmx-blank_bootstrap-style/css/tablet

Sorry das war mein Fehler  :red:
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: ScottyOSX am 26 Februar 2014, 15:26:01
Hallo, wo kann ich denn die Hintergrundfarbe ändern?
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 26 Februar 2014, 15:51:03
pmx-blank_bootstrap-style/style/layout.css:



#main {
   background-color: #f7f7f7;
   min-height: 54em;
   padding: 0;
   position: relative;
   padding-bottom: 2%;
   box-shadow: 0 -12px 10px -10px rgba(0, 0, 0, 0.1) inset;
}



pmx-blank_bootstrap-style/style/desktop/style.css:
pmx-blank_bootstrap-style/style/mobile/style.css:
pmx-blank_bootstrap-style/style/tablet/style.css:


body {
   background: #ffffff;
   color: #333333;
   font-size: 75.0%;
   line-height: 1.5;
   padding-top: 2em;
   padding-bottom: 2em;
}

.body-page {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
}

#main {
   background-color: #f7f7f7;
   min-height: 54em;
   padding: 0;
   position: relative;
   padding-bottom: 2%;
   margin-top: 1.5em;
   box-shadow: 0 -12px 10px -10px rgba(0, 0, 0, 0.1) inset;
}

#footer {
  background-color: #ffffff;
}



pmx-blank_bootstrap-style/style/desktop/header.css:
pmx-blank_bootstrap-style/style/mobile/header.css:
pmx-blank_bootstrap-style/style/tablet/header.css:


#header {
   background-color: #f7f7f7;
   -webkit-border-radius: 14px 14px 0 0;
   -moz-border-radius: 14px 14px 0 0;
   border-radius: 14px 14px 0 0;
   height: 100%;
}

#head-top {
   background-color: #fff;
   -webkit-border-radius: 14px 14px 0 0;
   -moz-border-radius: 14px 14px 0 0;
   border-radius: 14px 14px 0 0;
   height: 8em;
   width: 100%;
}

#head-middle {
   background-color: #fff;
   height: 3.75em;
   width: 100%;
}

.head-topleft {
   -webkit-border-radius: 14px 0 0 0;
   -moz-border-radius: 14px 0 0 0;
   border-radius: 14px 0 0 0;
   background-color: #fff;
   height: 8em;
   width: 50%;
}

.head-topright {
   -webkit-border-radius: 0 14px 0 0;
   -moz-border-radius: 0 14px 0 0;
   border-radius: 0 14px 0 0;
   background-color: #fff;
   height: 8em;
   width: 50%;
}

.head-middleleft {
   background-color: #fff;
   width: 40%;
}

.head-middleright {
   background-color: #fff;
   width: 60%;
}

#header .header-top {
  background-color: #ffffff;
  -webkit-border-radius: 14px 14px 0 0;
  -moz-border-radius: 14px 14px 0 0;
  border-radius: 14px 14px 0 0;
}

#header .header-middle {
  background-color: #ffffff;
  height: 100%;
  margin-top: 10%;
}



Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: ScottyOSX am 26 Februar 2014, 20:35:42
Super ... Vielen Dank.
Titel: Re:pmx-blank bootstrap-style Responsive Design / Wie ändert man das Logo
Beitrag von: Fokuna2 am 03 Oktober 2014, 17:53:34
@ an allen, die diese Theme auch nutzen.

Ich habe nun ein logo.png  mit Transparent Hintergrund erstellt, leider kann und weiss ich nicht wie ich mein Logo in eine logo.svg umwandel kann. Denn der oben genannte Text einfach mit logo.png auszutauschen nutzt nicht. Dann wird nämlich überhaupt kein Logo angezeigt.

Kann mir jemanden helfen, vielen Dank.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: icebreaker am 03 Oktober 2014, 20:03:54
Hi Fokuna2

Da es sich bei dem SVG Dateityp um Vector handelt, benötigst du zur Umwandlung entweder ein Vectorprogramm wie Inkscape (Linux), oder CorelDraw (Windows). Es gibt aber auch die Möglichkeit, die Dateien direkt im Internet umzuwandeln. Gebe mal in der Suchmaschine "png to svg" ein und dann wirst du was finden.

Gruß
icebreaker
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: doggie am 28 November 2014, 21:23:22
wo finde ich dieses Theme oder ne Demo   :gruebel:
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: Fokuna2 am 29 November 2014, 19:56:54
@dogie
momentan ist
das Thema für mich gelöst.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: Kuddel am 04 April 2015, 01:12:27
Moin Moin,
durch die hervorragende Hilfe von Nudels ist meine Homepage mittlerweile komplett überarbeitet worden und hat die pmx-blank bootstrap style als Standart-Theme verpasst bekommen. Mittlerweile nervt auch der Google-Bot nicht mehr wegen Fehlern in der mobilen Darstellung  :pardon:
War ein hartes Stück Arbeit, inkl. Provider-Wechsel & Austausch des Adsence-Anbieters, aber, ich finde, es hat sich gelohnt (http://www.0815-info.com/)!!!

Provider: allinkl.com <---> Host Europe
Adsense: Google <--->Criteo.com

Ein dickes DANKESCHÖN an BdMDesign für dieses tolle Theme!!!
Und natürlich an Andreas für die immense Zeit und Hilfe beim Umbau!
Many, many THX!!!
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 12 Juli 2015, 14:29:35
Danke für die Blumen Kuddel  :BD: :pardon:
Und vielen Danke an Deine Helfer, es freut mich das Dir diese Theme gefällt.

Es wird noch eine Version mit Bootstrap 3 folgen.
Da ich gerade an einer Seite für meinen Spiele Mod arbeite und dort Bootstrap 3 eingesetzt werden soll.

Jetzt aber erst mal 2 Fixes:

Zuerst der Viewportfix:

Für die diejenigen, die diese Theme einsetzen und  noch keine Metaanweisung mit dem Viewport in der root/header.php haben, sollten diesen Fix anwenden da sonst die Mobilgeräte Eure Seite nicht sauber anzeigen:

Geht dazu in Euer PMX Root und öffnet dort die header.php mit einen Editor Eurer Wahl.

Nun sucht Ihr den Block



<title><?php echo pmxHeader::get_meta('title'?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<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="<?php echo pmxHeader::get_meta('revisit'?>" />
<meta name="language" content="<?php echo _DOC_LANGUAGE ?>" />
<meta name="robots" content="<?php echo pmxHeader::get_meta('robots'?>" />
<meta name="resource-type" content="<?php echo pmxHeader::get_meta('resource-type'?>" />
<meta name="distribution" content="<?php echo pmxHeader::get_meta('distribution'?>" />
<meta name="rating" content="<?php echo pmxHeader::get_meta('rating'?>" />
<meta name="author" content="<?php echo pmxHeader::get_meta('author'?>" />
<meta name="keywords" content="<?php echo pmxHeader::get_meta('keywords'?>" />
<meta name="generator" content="pragmaMx <?php echo PMX_VERSION ?> - by http://pragmaMx.org" />
<meta name="copyright" content="<?php echo pmxHeader::get_meta('copyright'?>" />
<meta name="description" content="<?php echo pmxHeader::get_meta('description'?>" />
<link rel="stylesheet" href="<?php echo $stylesheet ?>" type="text/css" />



nun  fügt Ihr zwischen den Zeilen



<meta http-equiv="expires" content="0" />
<meta name="revisit-after" content="<?php echo pmxHeader::get_meta('revisit'?>" />



folgende Zeile ein:



<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">



Nun sollte es so aussehen:



<meta http-equiv="expires" content="0" />
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<meta name="revisit-after" content="<?php echo pmxHeader::get_meta('revisit'?>" />



Anmerkung: das user-scalable = no ist nicht zwingend nötig, das müsst Ihr testen ob Eure Seite mit oder ohne dieser Funktion arbeiten soll.
Es kann auch sein, das ein einfaches



<meta name="viewport" content="width=device-width, initial-scale=1.0">



reicht, auch das müsst Ihr testen.
Dann Abspeichern, hochladen und nun den Seiten Cache leeren/zurücksetzen.

Das war es dann auch schon.

Wenn nicht, hänge ich hier einen Überarbeiteten Satz CSS Code mit an.
Siehe auch: http://www.bdmdesign.org/Forum-topic-72.html (http://www.bdmdesign.org/Forum-topic-72.html)

Der css_menu zeigt nur zwei Level Fix:

Da der Scriptcode, der für das CSS Menü verwendet wurde, nur die 2 Ebenen zu lässt hier der Fix für mehr Ebenen:

Bitte gehe in dem Themesordner -->  templates und öffne da die theme.menu.html mit einen Editor Deiner Wahl.

Nun ersetze den kompletten Code mit diesen hier:


<?php
/**
 * pragmaMx - Web Content Management System.
 * Copyright by pragmaMx Developer Team - http://www.pragmamx.org
 * $Id: theme.menu.tpl.html,v 1.2.2.1 2012-03-05 13:19:14 tora60 Exp $
 */

if ($this->level===0) { 
  
/* jQuery Bibliothek fur Klapp, Target und Hoverfunktionen einbinden */
  
switch (true) {
    case 
$this->is_ie === 6:
      
pmxHeader::add_jquery();
      
pmxHeader::add_script(PMX_JAVASCRIPT_PATH 'mx_menu_ie6.js');
      break;
    case 
$this->js_end;
      
pmxHeader::add_jquery();
      
pmxHeader::add_script(PMX_JAVASCRIPT_PATH 'mx_menu.js');
      break;
  }
?>


<ul class="nav">
 <?php foreach ($this->items as $key => $item) { ?>
   <li <?php echo $item['class'?>>
     <a <?php echo $item['href'] . $item['title'?> class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
       <?php echo $item['caption'?>
       <span class="icon-bar"></span>
   </a>
   <?php echo $item['subtree'?>
   </li>
 <?php ?>
</ul>

 <?php if($this->js_end) { ?>

<script type="text/javascript">
/*<![CDATA[*/
<?php echo $this->js_end ?>

/*]]>*/
</script>
 <?php 
} else { 
?>


<ul class="dropdown-menu">
 <?php foreach ($this->items as $key => $item) { ?>
   <li class="dropdown-submenu">
     <a <?php echo $item['href'] . $item['title'] . $item['class'?>><?php echo $item['caption'?></a>
     <?php echo $item['subtree'?>
   </li>
 <?php ?>
</ul>

<?php ?>


Das sollte schon mal das CSS Menü Problem beheben.
Siehe auch: http://www.bdmdesign.org/Forum-topic-69.html (http://www.bdmdesign.org/Forum-topic-69.html)


Jetzt zu der Frage, warum in dieser Theme Vektorgrafiken und Webfonts anstelle von Gif, jpeg, png und CO eingesetzt werden.

Dies wird hier http://blog.kulturbanause.de/2012/04/websites-und-bilder-fur-high-resolution-displays-retina-optimieren/ (http://blog.kulturbanause.de/2012/04/websites-und-bilder-fur-high-resolution-displays-retina-optimieren/) am besten erklärt.


Demo: http://demo.bdmdesign.org (http://demo.bdmdesign.org)
Download: http://www.pragmamx.org/Downloads-pmx-blank-bootstrap-style-Responsive-Design-view-863.html (http://www.pragmamx.org/Downloads-pmx-blank-bootstrap-style-Responsive-Design-view-863.html)
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 12 Juli 2015, 17:35:39
Peter, kannst Du für den Laien bitte noch einmal erklären was diese Änderung mit dem Viewport bewirkt. Also was sich optisch verändert. Danke Dir!
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 12 Juli 2015, 17:43:12
Nudel Du brauchst das nicht.

Das mit dem Viewport wird hier gut erklärt:

http://maddesigns.de/meta-viewport-1817.html (http://maddesigns.de/meta-viewport-1817.html)

Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 12 Juli 2015, 17:58:02
 :quest Ich hab auch Dein Theme im Einsatz Peter.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 12 Juli 2015, 18:03:59
Ja Sorry, hab das mit Kuddel verwechselt :(

Aber Du brachst den Fix nicht. Öffne mal Deine Seite im Browser, rechsklick am Rand und dann den Quelltext anzeigen lassen:


<meta http-equiv="expires" content="0" />
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = yes, width = device-width" />
<meta name="revisit-after" content="8 days" />
<meta name="language" content="de" />


Das steht bei Dir auf der Peugeotseite.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 12 Juli 2015, 18:19:07
Jupp, hab den Fix ja auch grad eingebaut. :gruebel:
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 12 Juli 2015, 18:21:10
Ok. Dann ist jut.

Hatte Dich da echt mit Kuddel verwechselt. Sorry noch mal.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: alaniso am 13 Juli 2015, 13:12:56
Hallo AlternativeComputing.

zum Thema Viewport:
ZitatFür die diejenigen, die diese Theme einsetzen und  noch keine Metaanweisung mit dem Viewport in der root/header.php haben, sollten diesen Fix anwenden da sonst die Mobilgeräte Eure Seite nicht sauber anzeigen:

Geht dazu in Euer PMX Root und öffnet dort die header.php mit einen Editor Eurer Wahl.

hätte ich eine Anmerkung:

Durch die Änderung in der header.php geht du eine "Modifikation" im Standard-pmx ein.

Diese lässt sich umgehen, indem in der zum Theme gehörenden Datei theme.php der folgende Eintrag aufgenommen wird (z.B. ganz am Ende):

// Responsive Design
$viewport='content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width"';
pmxHeader::set_meta("viewport",$viewport);



Dadurch setzt PragmaMX die "Viewport"-Angabe in den Header - ohne Modifikation.

Anmerkung an die Entwickler: (z.B. Olaf  ;) )
In einigen "Anleitungen" gibt es zu lesen, dass die Viewport-Angabe direkt am Anfang des <header> gesetzt werden muss.
Evt. kann dies im core von PragmaMX geändert werden, dass dieser nicht am Ende hinzugefügt wird, sondern gleich an den Anfang!

Bis dahin viele Grüße,
André
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 13 Juli 2015, 17:00:21
Zitat von: alaniso am 13 Juli 2015, 13:12:56
Hallo AlternativeComputing.

zum Thema Viewport:
ZitatFür die diejenigen, die diese Theme einsetzen und  noch keine Metaanweisung mit dem Viewport in der root/header.php haben, sollten diesen Fix anwenden da sonst die Mobilgeräte Eure Seite nicht sauber anzeigen:

Geht dazu in Euer PMX Root und öffnet dort die header.php mit einen Editor Eurer Wahl.

hätte ich eine Anmerkung:

Durch die Änderung in der header.php geht du eine "Modifikation" im Standard-pmx ein.

Diese lässt sich umgehen, indem in der zum Theme gehörenden Datei theme.php der folgende Eintrag aufgenommen wird (z.B. ganz am Ende):

// Responsive Design
$viewport='content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width"';
pmxHeader::set_meta("viewport",$viewport);



Dadurch setzt PragmaMX die "Viewport"-Angabe in den Header - ohne Modifikation.

Anmerkung an die Entwickler: (z.B. Olaf  ;) )
In einigen "Anleitungen" gibt es zu lesen, dass die Viewport-Angabe direkt am Anfang des <header> gesetzt werden muss.
Evt. kann dies im core von PragmaMX geändert werden, dass dieser nicht am Ende hinzugefügt wird, sondern gleich an den Anfang!

Bis dahin viele Grüße,
André


Danke dafür.
Nur fehlt im PMX 2.2.2 in der header Class genau die Anweisung für den Viewport.
Wenn Du das aber so schon funktionsfähig eingebaut hast, werde ich das so übernehmen.

Habe mit Olaf schon geschnackt. Das mit der korrekten Viewportanzeige wird kommen.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 28 Juli 2015, 19:54:14
Ich bin zu blöd die Pfadangaben für die Layouts von "tablet" und "mobile" zu finden. Habe gerade einige fehlerhafte Pfadangaben im Log-File gefunden.

gesucht wird laut Log: /meinedomain/themes/pmx-blank bootstrap-style/style/desktop/tablet und /meinedomain/themes/pmx-blank bootstrap-style/style/desktop/mobile

Die Struktur sieht aber so aus:

/desktop
/tabelt
/mobile

Was ja auch richtig ist. Wo kann ich den Fehler korrigieren?
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 28 Juli 2015, 20:13:29
Im Orner der Theme -> style muss ein Ordner tablet sein.

Wenn da ein Ordner tabelt im Ordner sytyles ist, diesen in tablet umbenennen.

Und im Ordner "styles -> desktop" darf kein Ordner drin sein.
Die styles.css im Ordner styles muss so aussehen:


@charset "utf-8";
/**
* pragmaMx - Web Content Management System.
* Copyright by pragmaMx Developer Team - http://www.pragmamx.org
* $Id: style.css,v 1.12 2012-02-10 09:46:04 tora60 Exp $
*/

@import url(desktop/style.css);
@import url(tablet/style.css);
@import url(mobile/style.css);
@import url(layout.css);
@import url(header.css);
@import url(nav.css);
@import url(font-awesome.css);
@import url(font-awesome-ie7.css);
@import url(buttons.css);
@import url(alert.css);
@import url(pagination.css);
@import url(tooltip.css);
@import url(datepicker.css);
@import url(switch.css);



a {
 color: #000000;
 text-decoration: none;
}

a:hover,
a:focus {
 color: #d9230f;
 text-decoration: underline;
}

a:focus {
 outline: 5px auto -webkit-focus-ring-color;
 outline-offset: -2px;
}

a:hover,
a:active {
 outline: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
 display: block;
}

audio,
canvas,
video {
 display: inline-block;
 *display: inline;
 *zoom: 1;
}

audio:not([controls]) {
 display: none;
}

sub,
sup {
 position: relative;
 font-size: 75%;
 line-height: 0;
 vertical-align: baseline;
}

sup {
 top: -0.5em;
}

sub {
 bottom: -0.25em;
}

#map_canvas img,
.google-maps img {
 max-width: none;
}

button,
input,
select,
textarea {
 margin: 0;
 font-size: 100%;
 vertical-align: middle;
}

button,
input {
 *overflow: visible;
 line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
 padding: 0;
 border: 0;
}

button,
html input[type="button"],
input[type="submit"],
input[type="reset"] {
 -webkit-appearance: button;
 cursor: pointer;
}

label,
select,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="radio"],
input[type="checkbox"] {
 cursor: pointer;
}

input[type="search"] {
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
 -webkit-appearance: none;
}

textarea {
 overflow: auto;
 vertical-align: top;
}

p {
 margin: 0 0 10px;
}

small {
 font-size: 85%;
}

strong {
 font-weight: bold;
}

em {
 font-style: italic;
}

cite {
 font-style: normal;
}

ul,
ol {
 padding: 0;
 margin: 0 0 10px 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
 margin-bottom: 0;
}

li {
 line-height: 20px;
}

ul.unstyled,
ol.unstyled {
 margin-left: 0;
 list-style: none;
}

ul.inline,
ol.inline {
 margin-left: 0;
 list-style: none;
}

ul.inline > li,
ol.inline > li {
 display: inline-block;
 *display: inline;
 /* IE7 inline-block hack */

 *zoom: 1;
 padding-left: 5px;
 padding-right: 5px;
}

dl {
 margin-bottom: 20px;
}

dt, dd {
 line-height: 20px;
}

dt {
 font-weight: bold;
}

dd {
 margin-left: 10px;
}

hr {
 margin: 20px 0;
 border: 0;
 border-top: 1px solid #eeeeee;
 border-bottom: 1px solid #ffffff;
}

abbr[title],
abbr[data-original-title] {
 cursor: help;
 border-bottom: 1px dotted #999999;
}

abbr.initialism {
 font-size: 90%;
 text-transform: uppercase;
}

blockquote {
 padding: 0 0 0 15px;
 margin: 0 0 20px;
 border-left: 5px solid #eeeeee;
}

blockquote p {
 margin-bottom: 0;
 font-size: 17.5px;
 font-weight: 300;
 line-height: 1.25;
}

blockquote small {
 display: block;
 line-height: 20px;
 color: #999999;
}

blockquote small:before {
 content: '\2014 \00A0';
}

blockquote.pull-right {
 float: right;
 padding-right: 15px;
 padding-left: 0;
 border-right: 5px solid #eeeeee;
 border-left: 0;
}

blockquote.pull-right p,
blockquote.pull-right small {
 text-align: right;
}

blockquote.pull-right small:before {
 content: '';
}

blockquote.pull-right small:after {
 content: '\00A0 \2014';
}

q:before,
q:after,
blockquote:before,
blockquote:after {
 content: "";
}

address {
 display: block;
 margin-bottom: 20px;
 font-style: normal;
 line-height: 20px;
}

code,
pre {
 padding: 0 3px 2px;
 font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 font-size: 12px;
 color: #333333;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

code {
 padding: 2px 4px;
 color: #d14;
 background-color: #f7f7f9;
 border: 1px solid #e1e1e8;
 white-space: nowrap;
}

pre {
 display: block;
 padding: 9.5px;
 margin: 0 0 10px;
 font-size: 13px;
 line-height: 20px;
 word-break: break-all;
 word-wrap: break-word;
 white-space: pre;
 white-space: pre-wrap;
 background-color: #f5f5f5;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, 0.15);
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
}

pre.prettyprint {
 margin-bottom: 20px;
}

pre code {
 padding: 0;
 color: inherit;
 white-space: pre;
 white-space: pre-wrap;
 background-color: transparent;
 border: 0;
}

.pre-scrollable {
 max-height: 340px;
 overflow-y: scroll;
}

form {
 margin: 0 0 20px;
}

label,
input,
button,
select,
textarea {
 font-size: 14px;
 font-weight: normal;
 line-height: 20px;
}

input,
button,
select,
textarea {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

label {
 display: inline-block;
 margin-bottom: 5px;
}

select,
textarea,
input[type="text"],
input[id="startdate"],
input[id="enddate"],
input[id="deadline"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
 display: inline-block;
 height: 20px;
 padding: 4px 6px;
 margin-bottom: 10px;
 font-size: 14px;
 line-height: 20px;
 color: #555555;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
 vertical-align: middle;
}

input,
textarea,
.uneditable-input {
 width: auto;
}

textarea {
 height: auto;
}

textarea,
input[type="text"],
input[id="startdate"],
input[id="enddate"],
input[id="deadline"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
 background-color: #ffffff;
 border: 1px solid #cccccc;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 -webkit-transition: border linear .2s, box-shadow linear .2s;
 -moz-transition: border linear .2s, box-shadow linear .2s;
 -o-transition: border linear .2s, box-shadow linear .2s;
 transition: border linear .2s, box-shadow linear .2s;
}

textarea:focus,
input[type="text"]:focus,
input[id="startdate"]:focus,
input[id="enddate"]:focus,
input[id="deadline"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
 border-color: rgba(82, 168, 236, 0.8);
 outline: 0;
 outline: thin dotted \9;
 /* IE6-9 */

 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
 box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

input[type="radio"],
input[type="checkbox"] {
 margin: 4px 0 0;
 *margin-top: 0;
 /* IE7 */

 margin-top: 1px \9;
 /* IE8-9 */

 line-height: normal;
}

input[type="file"],
input[type="image"],
input[type="reset"],
input[type="submit"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
 width: auto;
}

select,
input[type="file"] {
 height: 30px;
 /* In IE7, the height of the select element cannot be changed by height, only font-size */

 *margin-top: 4px;
 /* For IE7, add top margin to align select with labels */

 line-height: 30px;
}

select,
form select,
td select,
select[size] {
 display: inline-block;
 height: 100%;
 padding: 4px 6px;
 margin-bottom: 10px;
 font-size: 14px;
 line-height: 30px;
 width: auto;
}

select[multiple] {
 height: auto;
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
 outline: 5px auto -webkit-focus-ring-color;
 outline-offset: -2px;
}

.uneditable-input,
.uneditable-textarea {
 color: #999999;
 background-color: #fcfcfc;
 border-color: #cccccc;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
 -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
 cursor: not-allowed;
}

.uneditable-input {
 overflow: hidden;
 white-space: nowrap;
}

.uneditable-textarea {
 width: auto;
 height: auto;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
 color: #999999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
 color: #999999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
 color: #999999;
}

input.tooltip-info {
 background-image: url(../../../images/info.gif);
}

input.tooltip-info,
input.tooltip-question {
 background-color: transparent !important;
 background-position: center;
 background-repeat: no-repeat;
 border: none !important;
 color: inherit;
 cursor: help !important;
 display: inline;
 height: 20px;
 margin: 0 !important;
 padding: 0 !important;
 vertical-align: top;
 width: 20px;
}

input.tooltip-question {
 background-image: url(../../../images/question.gif);
}

.radio,
.checkbox {
 min-height: 20px;
 padding-left: 20px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
 float: left;
 margin-left: -20px;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child {
 padding-top: 5px;
}

.radio.inline,
.checkbox.inline {
 display: inline-block;
 padding-top: 5px;
 margin-bottom: 0;
 vertical-align: middle;
}

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
 margin-left: 10px;
}

.input-mini {
 width: 60px;
}

.input-small {
 width: 90px;
}

.input-medium {
 width: 150px;
}

.input-large {
 width: 210px;
}

.input-xlarge {
 width: 270px;
}

.input-xxlarge {
 width: 530px;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
 cursor: not-allowed;
 background-color: #eeeeee;
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
 background-color: transparent;
}

.control-group.warning .control-label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
 color: #d9831f;
}

.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
 color: #d9831f;
}

.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
 border-color: #d9831f;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
 border-color: #ac6819;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ebb473;
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ebb473;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ebb473;
}

.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
 color: #d9831f;
 background-color: #fcf8e3;
 border-color: #d9831f;
}

.control-group.error .control-label,
.control-group.error .help-block,
.control-group.error .help-inline {
 color: #d9230f;
}

.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
 color: #d9230f;
}

.control-group.error input,
.control-group.error select,
.control-group.error textarea {
 border-color: #d9230f;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
 border-color: #a91b0c;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f46a5a;
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f46a5a;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f46a5a;
}

.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
 color: #d9230f;
 background-color: #f2dede;
 border-color: #d9230f;
}

.control-group.success .control-label,
.control-group.success .help-block,
.control-group.success .help-inline {
 color: #3d9400;
}

.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
 color: #3d9400;
}

.control-group.success input,
.control-group.success select,
.control-group.success textarea {
 border-color: #3d9400;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
 border-color: #286100;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67fa00;
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67fa00;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67fa00;
}

.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
 color: #3d9400;
 background-color: #dff0d8;
 border-color: #3d9400;
}

.control-group.info .control-label,
.control-group.info .help-block,
.control-group.info .help-inline {
 color: #029acf;
}

.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
 color: #029acf;
}

.control-group.info input,
.control-group.info select,
.control-group.info textarea {
 border-color: #029acf;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
 border-color: #02749c;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #3acbfd;
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #3acbfd;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #3acbfd;
}

.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
 color: #029acf;
 background-color: #d9edf7;
 border-color: #029acf;
}

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
 color: #b94a48;
 border-color: #ee5f5b;
}

input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
 border-color: #e9322d;
 -webkit-box-shadow: 0 0 6px #f8b9b7;
 -moz-box-shadow: 0 0 6px #f8b9b7;
 box-shadow: 0 0 6px #f8b9b7;
}

.form-actions {
 padding: 19px 20px 20px;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: #f5f5f5;
 border-top: 1px solid #e5e5e5;
 *zoom: 1;
}

.form-actions:before,
.form-actions:after {
 display: table;
 content: "";
 line-height: 0;
}

.form-actions:after {
 clear: both;
}

.help-block,
.help-inline {
 color: #7b7b7b;
}

.help-block {
 display: block;
 margin-bottom: 10px;
}

.help-inline {
 display: inline-block;
 *display: inline;
 /* IE7 inline-block hack */

 *zoom: 1;
 vertical-align: middle;
 padding-left: 5px;
}

.input-append,
.input-prepend {
 display: inline-block;
 margin-bottom: 10px;
 vertical-align: middle;
 font-size: 0;
 white-space: nowrap;
}

.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input,
.input-append .dropdown-menu,
.input-prepend .dropdown-menu,
.input-append .popover,
.input-prepend .popover {
 font-size: 14px;
}

.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
 position: relative;
 margin-bottom: 0;
 *margin-left: 0;
 vertical-align: top;
 -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}

.input-append input:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
 z-index: 2;
}

.input-append .add-on,
.input-prepend .add-on {
 display: inline-block;
 width: auto;
 height: 20px;
 min-width: 16px;
 padding: 4px 5px;
 font-size: 14px;
 font-weight: normal;
 line-height: 20px;
 text-align: center;
 text-shadow: 0 1px 0 #ffffff;
 background-color: #eeeeee;
 border: 1px solid #ccc;
}

.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn,
.input-append .btn-group > .dropdown-toggle,
.input-prepend .btn-group > .dropdown-toggle {
 vertical-align: top;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
}

.input-append .active,
.input-prepend .active {
 background-color: #84ff2e;
 border-color: #3d9400;
}

.input-prepend .add-on,
.input-prepend .btn {
 margin-right: -1px;
}

.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
 -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}

.input-append input,
.input-append select,
.input-append .uneditable-input {
 -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}

.input-append input + .btn-group .btn:last-child,
.input-append select + .btn-group .btn:last-child,
.input-append .uneditable-input + .btn-group .btn:last-child {
 -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}

.input-append .add-on,
.input-append .btn,
.input-append .btn-group {
 margin-left: -1px;
}

.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
 -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}

.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
}

.input-prepend.input-append input + .btn-group .btn,
.input-prepend.input-append select + .btn-group .btn,
.input-prepend.input-append .uneditable-input + .btn-group .btn {
 -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}

.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
 margin-right: -1px;
 -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}

.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
 margin-left: -1px;
 -webkit-border-radius: 0 0 0 0;
 -moz-border-radius: 0 0 0 0;
 border-radius: 0 0 0 0;
}

.input-prepend.input-append .btn-group:first-child {
 margin-left: 0;
}

input.search-query {
 padding-right: 14px;
 padding-right: 4px \9;
 padding-left: 14px;
 padding-left: 4px \9;
 /* IE7-8 doesn't have border-radius, so don't indent the padding */

 margin-bottom: 0;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
}

input[type="text"][name="query"] {
 padding-right: 14px;
 padding-right: 4px \9;
 padding-left: 14px;
 padding-left: 4px \9;
 /* IE7-8 doesn't have border-radius, so don't indent the padding */

 margin-bottom: 0;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
}

/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
}

.form-search .input-append .search-query {
 -webkit-border-radius: 14px 0 0 14px;
 -moz-border-radius: 14px 0 0 14px;
 border-radius: 14px 0 0 14px;
}

.form-search .input-append .btn {
 -webkit-border-radius: 0 14px 14px 0;
 -moz-border-radius: 0 14px 14px 0;
 border-radius: 0 14px 14px 0;
}

.form-search .input-prepend .search-query {
 -webkit-border-radius: 0 14px 14px 0;
 -moz-border-radius: 0 14px 14px 0;
 border-radius: 0 14px 14px 0;
}

.form-search .input-prepend .btn {
 -webkit-border-radius: 14px 0 0 14px;
 -moz-border-radius: 14px 0 0 14px;
 border-radius: 14px 0 0 14px;
}

.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
 display: inline-block;
 *display: inline;
 /* IE7 inline-block hack */

 *zoom: 1;
 margin-bottom: 0;
 vertical-align: middle;
}

.form-search .hide,
.form-inline .hide,
.form-horizontal .hide {
 display: none;
}

.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
 display: inline-block;
}

.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
 margin-bottom: 0;
}

.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
 padding-left: 0;
 margin-bottom: 0;
 vertical-align: middle;
}

.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
 float: left;
 margin-right: 3px;
 margin-left: 0;
}

.control-group {
 margin-bottom: 10px;
}

legend + .control-group {
 margin-top: 20px;
 -webkit-margin-top-collapse: separate;
}

.form-horizontal .control-group {
 margin-bottom: 20px;
 *zoom: 1;
}

.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
 display: table;
 content: "";
 line-height: 0;
}

.form-horizontal .control-group:after {
 clear: both;
}

.form-horizontal .control-label {
 float: left;
 width: 160px;
 padding-top: 5px;
 text-align: right;
}

.form-horizontal .controls {
 *display: inline-block;
 *padding-left: 20px;
 margin-left: 180px;
 *margin-left: 0;
}

.form-horizontal .controls:first-child {
 *padding-left: 180px;
}

.form-horizontal .help-block {
 margin-bottom: 0;
}

.form-horizontal input + .help-block,
.form-horizontal select + .help-block,
.form-horizontal textarea + .help-block,
.form-horizontal .uneditable-input + .help-block,
.form-horizontal .input-prepend + .help-block,
.form-horizontal .input-append + .help-block {
 margin-top: 10px;
}

.form-horizontal .form-actions {
 padding-left: 180px;
}

table {
 max-width: 100%;
 font-size:100%;
 background-color: #f7f7f7;
 border-collapse: collapse;
 border-spacing: 0;
}

table.list th,
table.list tr.head,
table.list td.head {
 background-color: #E7CD01;
 background-image: -moz-linear-gradient(top, #E7CD01, #E7AA02);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E7CD01), to(#E7AA02));
 background-image: -webkit-linear-gradient(top, #E7CD01, #E7AA02);
 background-image: -o-linear-gradient(top, #E7CD01, #E7AA02);
 background-image: linear-gradient(to bottom, #E7CD01, #E7AA02);
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbebe9', endColorstr='#fff7d7d3', GradientType=0);
}

.table {
 width: 100%;
 margin-bottom: 20px;
}

.table th,
.table td {
 padding: 8px;
 line-height: 20px;
 text-align: left;
 vertical-align: top;
 border-top: 1px solid #dddddd;
}

.table th {
 font-weight: bold;
}

.table thead th {
 vertical-align: bottom;
}

.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
 border-top: 0;
}

.table tbody + tbody {
 border-top: 2px solid #dddddd;
}

.table .table {
 background-color: #f7f7f7;
}

.table-condensed th,
.table-condensed td {
 padding: 4px 5px;
}

.table-bordered {
 border: 1px solid #dddddd;
 border-collapse: separate;
 *border-collapse: collapse;
 border-left: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
}

.table-bordered th,
.table-bordered td {
 border-left: 1px solid #dddddd;
}

.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
 border-top: 0;
}

.table-bordered thead:first-child tr:first-child > th:first-child,
.table-bordered tbody:first-child tr:first-child > td:first-child,
.table-bordered tbody:first-child tr:first-child > th:first-child {
 -webkit-border-top-left-radius: 0;
 -moz-border-radius-topleft: 0;
 border-top-left-radius: 0;
}

.table-bordered thead:first-child tr:first-child > th:last-child,
.table-bordered tbody:first-child tr:first-child > td:last-child,
.table-bordered tbody:first-child tr:first-child > th:last-child {
 -webkit-border-top-right-radius: 0;
 -moz-border-radius-topright: 0;
 border-top-right-radius: 0;
}

.table-bordered thead:last-child tr:last-child > th:first-child,
.table-bordered tbody:last-child tr:last-child > td:first-child,
.table-bordered tbody:last-child tr:last-child > th:first-child,
.table-bordered tfoot:last-child tr:last-child > td:first-child,
.table-bordered tfoot:last-child tr:last-child > th:first-child {
 -webkit-border-bottom-left-radius: 0;
 -moz-border-radius-bottomleft: 0;
 border-bottom-left-radius: 0;
}

.table-bordered thead:last-child tr:last-child > th:last-child,
.table-bordered tbody:last-child tr:last-child > td:last-child,
.table-bordered tbody:last-child tr:last-child > th:last-child,
.table-bordered tfoot:last-child tr:last-child > td:last-child,
.table-bordered tfoot:last-child tr:last-child > th:last-child {
 -webkit-border-bottom-right-radius: 0;
 -moz-border-radius-bottomright: 0;
 border-bottom-right-radius: 0;
}

.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
 -webkit-border-bottom-left-radius: 0;
 -moz-border-radius-bottomleft: 0;
 border-bottom-left-radius: 0;
}

.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
 -webkit-border-bottom-right-radius: 0;
 -moz-border-radius-bottomright: 0;
 border-bottom-right-radius: 0;
}

.table-bordered caption + thead tr:first-child th:first-child,
.table-bordered caption + tbody tr:first-child td:first-child,
.table-bordered colgroup + thead tr:first-child th:first-child,
.table-bordered colgroup + tbody tr:first-child td:first-child {
 -webkit-border-top-left-radius: 0;
 -moz-border-radius-topleft: 0;
 border-top-left-radius: 0;
}

.table-bordered caption + thead tr:first-child th:last-child,
.table-bordered caption + tbody tr:first-child td:last-child,
.table-bordered colgroup + thead tr:first-child th:last-child,
.table-bordered colgroup + tbody tr:first-child td:last-child {
 -webkit-border-top-right-radius: 0;
 -moz-border-radius-topright: 0;
 border-top-right-radius: 0;
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
 background-color: #f9f9f9;
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
 background-color: #f5f5f5;
}

.table tbody tr.success > td {
 background-color: #dff0d8;
}

.table tbody tr.error > td {
 background-color: #f2dede;
}

.table tbody tr.warning > td {
 background-color: #fcf8e3;
}

.table tbody tr.info > td {
 background-color: #d9edf7;
}

.table-hover tbody tr.success:hover > td {
 background-color: #d0e9c6;
}

.table-hover tbody tr.error:hover > td {
 background-color: #ebcccc;
}

.table-hover tbody tr.warning:hover > td {
 background-color: #faf2cc;
}

.table-hover tbody tr.info:hover > td {
 background-color: #c4e3f3;
}

.typeahead {
 z-index: 1051;
 margin-top: 2px;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
}

.well {
 min-height: 20px;
 padding: 19px;
 margin-bottom: 20px;
 background-color: #ffffff;
 border: 1px solid #ededed;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.well blockquote {
 border-color: #ddd;
 border-color: rgba(0, 0, 0, 0.15);
}

.well-large {
 padding: 24px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}

.well-small {
 padding: 9px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

.fade {
 opacity: 0;
 -webkit-transition: opacity 0.15s linear;
 -moz-transition: opacity 0.15s linear;
 -o-transition: opacity 0.15s linear;
 transition: opacity 0.15s linear;
}

.fade.in {
 opacity: 1;
}

.collapse {
 position: relative;
 height: 0;
 overflow: hidden;
 -webkit-transition: height 0.35s ease;
 -moz-transition: height 0.35s ease;
 -o-transition: height 0.35s ease;
 transition: height 0.35s ease;
}

.collapse.in {
 height: auto;
}

.close {
 float: right;
 font-size: 20px;
 font-weight: bold;
 line-height: 20px;
 color: #000000;
 text-shadow: 0 1px 0 #ffffff;
 opacity: 0.2;
 filter: alpha(opacity=20);
}

.close:hover,
.close:focus {
 color: #000000;
 text-decoration: none;
 cursor: pointer;
 opacity: 0.4;
 filter: alpha(opacity=40);
}

.label,
.badge {
 display: inline-block;
 padding: 2px 4px;
 font-size: 11.844px;
 font-weight: bold;
 line-height: 14px;
 color: #ffffff;
 vertical-align: baseline;
 white-space: nowrap;
 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 background-color: #999999;
}

.label,
.smf-badge {
 display: inline-block;
 padding: 2px 4px;
 font-size: 8px;
 font-weight: bold;
 line-height: 9px;
 color: #ffffff;
 vertical-align: super;
 white-space: nowrap;
 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 background-color: #999999;
}

.label {
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

.badge,
.smf-badge {
 padding-left: 9px;
 padding-right: 9px;
 -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
 border-radius: 9px;
}

.label:empty,
.badge:empty,
.smf-badge:empty {
 display: none;
}

a.label:hover,
a.label:focus,
a.badge:hover,
a.badge:focus,
a.smf-badge:focus {
 color: #ffffff;
 text-decoration: none;
 cursor: pointer;
}

.label-important,
.badge-important {
 background-color: #d9230f;
}

.label-important[href],
.badge-important[href] {
 background-color: #a91b0c;
}

.label-warning,
.badge-warning {
 background-color: #d9831f;
}

.label-warning[href],
.badge-warning[href] {
 background-color: #ac6819;
}

.label-success,
.badge-success {
 background-color: #3d9400;
}

.label-success[href],
.badge-success[href] {
 background-color: #286100;
}

.label-info,
.badge-info {
 background-color: #029acf;
}

.label-info[href],
.badge-info[href] {
 background-color: #02749c;
}

.label-primary,
.badge-primary {
 background-color: #006dcc
}

.label-primary[href],
.badge-primary[href] {
 background-color: #0044cc;
}

.label-inverse,
.badge-inverse {
 background-color: #333333;
}

.label-inverse[href],
.badge-inverse[href] {
 background-color: #1a1a1a;
}

.btn .label,
.btn .badge,
.btn .smf-badge {
 position: relative;
 top: -1px;
}

.btn-mini .label,
.btn-mini .badge,
.btn-mini .smf-badge {
 top: 0;
}

@-webkit-keyframes progress-bar-stripes {
 from {
   background-position: 40px 0;
 }
 to {
   background-position: 0 0;
 }
}

@-moz-keyframes progress-bar-stripes {
 from {
   background-position: 40px 0;
 }
 to {
   background-position: 0 0;
 }
}

@-ms-keyframes progress-bar-stripes {
 from {
   background-position: 40px 0;
 }
 to {
   background-position: 0 0;
 }
}

@-o-keyframes progress-bar-stripes {
 from {
   background-position: 0 0;
 }
 to {
   background-position: 40px 0;
 }
}

@keyframes progress-bar-stripes {
 from {
   background-position: 40px 0;
 }
 to {
   background-position: 0 0;
 }
}

.pull-right {
 float: right;
}

.pull-left {
 float: left;
}

.hide {
 display: none;
}

.show {
 display: block;
}

.invisible {
 visibility: hidden;
}

.affix {
 position: fixed;
}

.siteservice {
 text-align: center;
 font-size: 1em;
 font-weight: bold;
 color: #000;
 padding: 1em 4.025em 1em 2em;
 margin-bottom: 2.75em;
 text-shadow: 0 0.15em 0 rgba(255, 255, 255, 0.5);
 background-color: #f89406;
 border: 0.15em solid #c09853;
 -webkit-border-radius: 0.5em;
 -moz-border-radius: 0.5em;
 border-radius: 0.5em;
}

Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 28 Juli 2015, 20:18:21
Ne Peter, ist alles richtig. Nur der Verweis auf style/desktop/tablet bzw. style/desktop/mobile auf die Datei layout.css kann nicht stimmen. Kopiere ich die beiden Verzeichnisse in das Desktop Verzeichnis ist die Fehlermeldung wech.

Also irgendwo muß da noch nen falscher Verweis stehen.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 28 Juli 2015, 20:20:17
Die layout.css im Ordner syles muss so aussehen:


/**
* pragmaMx - Web Content Management System.
* Copyright by pragmaMx Developer Team - http://www.pragmamx.org
* $Id: style.css,v 1.12 2012-02-10 09:46:04 tora60 Exp $
*/

@import url(tablet/layout.css);
@import url(mobile/layout.css);

.check {
  padding-left: 2.5em;
  padding-right: 2.5em;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}

.clearfix:after {
  clear: both;
}

h1, h2, h3, h4, h5, h6, .block-title {
  font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */

  width: auto\9;
  /* IE7-8 need help adjusting responsive images */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

.img-rounded {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.img-circle {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
}

.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}

.muted {
  color: #999999;
}

a.muted:hover,
a.muted:focus {
  color: #808080;
}

.text-warning {
  color: #d9831f;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #ac6819;
}

.text-error {
  color: #d9230f;
}

a.text-error:hover,
a.text-error:focus {
  color: #a91b0c;
}

.text-info {
  color: #029acf;
}

a.text-info:hover,
a.text-info:focus {
  color: #02749c;
}

.text-success {
  color: #3d9400;
}

a.text-success:hover,
a.text-success:focus {
  color: #286100;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.dl-horizontal {
  *zoom: 1;
}

.dl-horizontal:before,
.dl-horizontal:after {
  display: table;
  content: "";
  line-height: 0;
}

.dl-horizontal:after {
  clear: both;
}

.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-horizontal dd {
  margin-left: 180px;
}

.table-row {
    display: table-row;
}

#mainbar h2 {
   border-bottom: 0.250em solid #cccccc;
   font-weight: normal;
   color: #000000;
   text-shadow: #bbbbbb 0 0.1em 0.1em;
   text-transform: uppercase;
}

/* Main
----------------------------------------------------------------------------------------*/
#main {
   background-color: #f7f7f7;
   min-height: 54em;
   padding: 0;
   position: relative;
   padding-bottom: 2%;
   box-shadow: 0 -12px 10px -10px rgba(0, 0, 0, 0.1) inset;
}

#mainbar .block,
#mainbar .post {
   border-bottom: 0.1em solid #eeeeee;
   margin-bottom: 0.5em;
   padding: 0 0 1em 0;
}

#mainbar-inside {
   padding: 1em 0;
}

.block-content {
   padding: .75em 0;
}

/* Sidebar & sidebar-right
----------------------------------------------------------------------------------------*/
#sidebar-left .block-title,
#sidebar-right .block-title {
   border-bottom: 0.250em solid #cccccc;
   color: #000000;
   font-size: 1.3em;
   text-shadow: #ffffff 0 0.1em 0.1em;
   text-transform: uppercase;
}

#sidebar-left .block,
#sidebar-right .block {
   padding: 1em;
}

.block-hide-caption > h2,
.block-hide-caption > .block-title {
   display: none;
}

/* News
----------------------------------------------------------------------------------------*/
.post h2 a {
   text-decoration: none;
}

.post-info {
   background: #ededed;
   border-left: 0.1em solid #ffffff;
   border-radius: 0.417em;
   color: inherit;
   display: inline-block;
   margin-bottom: 1em;
}

.post-info span {
   background-color: transparent;
   border-right: 0.1em solid #ffffff;
   color: #000000;
   display: table-cell;
   padding: 0.333em 1em;

   vertical-align: middle;
}

.post-notes {
   background-color: transparent;
   color: #888888;
   font-style: italic;
   padding: 1em;
}

.post-extra {
   font-size: 85%;
   padding-top: .5em;
}

.post a.post-readmore {
   font-weight: bold;
}

.post a.comments {
   background-color: transparent;
   border: 0.1em solid #eeeeee;
   border-radius: 0.333em;
   color: #aaaaaa;
   margin-bottom: 1em;
   padding: .25em .5em;
   text-decoration: none;
}

.post a.comments:hover {
   background-color: #cccccc;
   border-color: #cacaca;
   color: #ffffff;
   text-decoration: none;
}


/* Side menu
----------------------------------------------------------------------------------------*/
#sidebar-left ul.menu,
#sidebar-right ul.menu {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

#sidebar-left ul.menu li,
#sidebar-right ul.menu li {
   border-bottom: 0.1em solid #eaeaea;
   border-top: 0.1em solid #ffffff;
   font-size: 1.000em;
   line-height: 2.000em;
   margin: 0;
   min-height: 2.167em;
   padding: 0;
   text-align: left;
}

#sidebar-left ul.menu li.current,
#sidebar-right ul.menu li.current {
   background-color: #ededed;
   background-image: -moz-linear-gradient(top, #ededed, #ededed);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ededed));
   background-image: -webkit-linear-gradient(top, #ededed, #ededed);
   background-image: -o-linear-gradient(top, #ededed, #ededed);
   background-image: linear-gradient(to bottom, #ededed, #ededed);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ededed', GradientType=0);
   color: #000000;
   font-weight: normal;
}

#sidebar-left ul.menu li.current a,
#sidebar-right ul.menu li.current a {
   background-color: #ededed;
   background-image: -moz-linear-gradient(top, #ededed, #ededed);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ededed));
   background-image: -webkit-linear-gradient(top, #ededed, #ededed);
   background-image: -o-linear-gradient(top, #ededed, #ededed);
   background-image: linear-gradient(to bottom, #ededed, #ededed);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ededed', GradientType=0);
   color: #000000;
   font-weight: normal;
}

#sidebar-left ul.menu a,
#sidebar-left ul.menu a:active,
#sidebar-right ul.menu a,
#sidebar-right ul.menu a:active {
   background: transparent;
   color: #666666;
   display: block;
   height: 2.167em;
   padding: 0 0.500em;
   text-decoration: none;
}

#sidebar-left ul.menu a:hover,
#sidebar-right ul.menu a:hover {
   background-color: #ededed;
   background-image: -moz-linear-gradient(top, #ededed, #ededed);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ededed));
   background-image: -webkit-linear-gradient(top, #ededed, #ededed);
   background-image: -o-linear-gradient(top, #ededed, #ededed);
   background-image: linear-gradient(to bottom, #ededed, #ededed);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ededed', GradientType=0);
   color: #000000;
   text-decoration: none;
}

#sidebar-left ul.menu li:first-child ,
#sidebar-right ul.menu li:first-child {
   border-top: none;
}

#sidebar-left ul.menu li:last-child,
#sidebar-right ul.menu li:last-child {
   border-bottom: none;
}


Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 28 Juli 2015, 20:24:13
Bei mir sieht die layout.css etwas anders aus, aber im Grunde passt auch das.

/**
* pragmaMx - Web Content Management System.
* Copyright by pragmaMx Developer Team - http://www.pragmamx.org
* $Id: style.css,v 1.12 2012-02-10 09:46:04 tora60 Exp $
*/

@import url(tablet/layout.css);
@import url(mobile/layout.css);

body {
  background-color:transparent;
  background: url(../../../../media/images/logo02.jpg);
  color: #333333;
  font-size: 75.0%;
  background-repeat:repeat;
  background-attachment:fixed;
  background-position:center top;
  line-height: 1.5;
  padding-top: 2em;
  padding-bottom: 2em;
  width: auto;
}

.check {
 padding-left: 2.5em;
 padding-right: 2.5em;
}

.clearfix {
 *zoom: 1;
}

.clearfix:before,
.clearfix:after {
 display: table;
 content: "";
 line-height: 0;
}

.clearfix:after {
 clear: both;
}

h1, h2, h3, h4, h5, h6, .block-title {
 font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hide-text {
 font: 0/0 a;
 color: transparent;
 text-shadow: none;
 background-color: transparent;
 border: 0;
}

.input-block-level {
 display: block;
 width: 100%;
 min-height: 30px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}



.img-rounded {
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}

.img-polaroid {
 padding: 4px;
 background-color: #fff;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.img-circle {
 -webkit-border-radius: 500px;
 -moz-border-radius: 500px;
 border-radius: 500px;
}

.lead {
 margin-bottom: 20px;
 font-size: 21px;
 font-weight: 200;
 line-height: 30px;
}

.muted {
 color: #999999;
}

a.muted:hover,
a.muted:focus {
 color: #808080;
}

.text-warning {
 color: #d9831f;
}

a.text-warning:hover,
a.text-warning:focus {
 color: #ac6819;
}

.text-error {
 color: #d9230f;
}

a.text-error:hover,
a.text-error:focus {
 color: #a91b0c;
}

.text-info {
 color: #029acf;
}

a.text-info:hover,
a.text-info:focus {
 color: #02749c;
}

.text-success {
 color: #3d9400;
}

a.text-success:hover,
a.text-success:focus {
 color: #286100;
}

.text-left {
 text-align: left;
}

.text-right {
 text-align: right;
}

.text-center {
 text-align: center;
}

.dl-horizontal {
 *zoom: 1;
}

.dl-horizontal:before,
.dl-horizontal:after {
 display: table;
 content: "";
 line-height: 0;
}

.dl-horizontal:after {
 clear: both;
}

.dl-horizontal dt {
 float: left;
 width: 160px;
 clear: left;
 text-align: right;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.dl-horizontal dd {
 margin-left: 180px;
}

.table-row {
   display: table-row;
}

#mainbar h2 {
border-radius: 14px 14px 14px 14px;
  border-bottom: 0.250em solid #cccccc;
  font-weight: normal;
  font-size: 16px;
  color: #811A17;
  text-shadow: #bbbbbb 0 0.1em 0.1em;
  text-transform: uppercase;
}

/* Main
----------------------------------------------------------------------------------------*/
#main {
  background-color: transparent;
  border-radius: 14px 14px 14px 14px;
  min-height: 0.1px;
  padding: 0;
  position: relative;
  padding-bottom: 2%;
  box-shadow: 0 -12px 10px -10px rgba(0, 0, 0, 0.1) inset;
}

#mainbar .block,
#mainbar .post {
  border-bottom: 0.1em solid transparent;
  margin-bottom: 0.5em;
  padding: 0 0 1em 0;
}

#mainbar-inside {
  padding: 1em 0;
}

.block-content {
  padding: .75em 0;
}

/* Sidebar & sidebar-right
----------------------------------------------------------------------------------------*/
#sidebar-left .block-title,
#sidebar-right .block-title {
background-color: transparent;
border-radius: 14px 14px 14px 14px;
  border-bottom: 0.250em solid #cccccc;
  color: #811A17;
  font-size: 16px;
  text-shadow: #ffffff 0 0.9em 0.9em;
  text-transform: uppercase;
}

#sidebar-left .block,
#sidebar-right .block {
border-radius: 14px 14px 14px 14px;
  padding: 1em;
}

.block-hide-caption > h2,
.block-hide-caption > .block-title {
  display: none;
}

/* News
----------------------------------------------------------------------------------------*/
.post h2 a {
  text-decoration: none;
}

.post-info {
  background: #ededed;
  border-left: 0.1em solid #ffffff;
  border-radius: 0.417em;
  color: inherit;
  display: inline-block;
  margin-bottom: 1em;
}

.post-info span {
  background-color: transparent;
  border-right: 0.1em solid #ffffff;
  color: #000000;
  display: table-cell;
  padding: 0.333em 1em;

  vertical-align: middle;
}

.post-notes {
  background-color: transparent;
  color: #888888;
  font-style: italic;
  padding: 1em;
}

.post-extra {
  font-size: 85%;
  padding-top: .5em;
}

.post a.post-readmore {
  font-weight: bold;
}

.post a.comments {
  background-color: transparent;
  border: 0.1em solid #eeeeee;
  border-radius: 0.333em;
  color: #aaaaaa;
  margin-bottom: 1em;
  padding: .25em .5em;
  text-decoration: none;
}

.post a.comments:hover {
  background-color: #cccccc;
  border-color: #cacaca;
  color: #ffffff;
  text-decoration: none;
}


/* Side menu
----------------------------------------------------------------------------------------*/
#sidebar-left ul.menu,
#sidebar-right ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#sidebar-left ul.menu li,
#sidebar-right ul.menu li {
  border-bottom: 0.1em solid #eaeaea;
  border-top: 0.1em solid #ffffff;
  font-size: 1.000em;
  line-height: 2.000em;
  margin: 0;
  min-height: 2.167em;
  padding: 0;
  text-align: left;
}

#sidebar-left ul.menu li.current,
#sidebar-right ul.menu li.current {
  background-color: #ededed;
  background-image: -moz-linear-gradient(top, #ededed, #ededed);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ededed));
  background-image: -webkit-linear-gradient(top, #ededed, #ededed);
  background-image: -o-linear-gradient(top, #ededed, #ededed);
  background-image: linear-gradient(to bottom, #ededed, #ededed);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ededed', GradientType=0);
  color: #000000;
  font-weight: normal;
}

#sidebar-left ul.menu li.current a,
#sidebar-right ul.menu li.current a {
  background-color: #ededed;
  background-image: -moz-linear-gradient(top, #ededed, #ededed);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ededed));
  background-image: -webkit-linear-gradient(top, #ededed, #ededed);
  background-image: -o-linear-gradient(top, #ededed, #ededed);
  background-image: linear-gradient(to bottom, #ededed, #ededed);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ededed', GradientType=0);
  color: #000000;
  font-weight: normal;
}

#sidebar-left ul.menu a,
#sidebar-left ul.menu a:active,
#sidebar-right ul.menu a,
#sidebar-right ul.menu a:active {
  background: transparent;
  color: #666666;
  display: block;
  height: 2.167em;
  padding: 0 0.500em;
  text-decoration: none;
}

#sidebar-left ul.menu a:hover,
#sidebar-right ul.menu a:hover {
  background-color: #ededed;
  background-image: -moz-linear-gradient(top, #ededed, #ededed);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ededed));
  background-image: -webkit-linear-gradient(top, #ededed, #ededed);
  background-image: -o-linear-gradient(top, #ededed, #ededed);
  background-image: linear-gradient(to bottom, #ededed, #ededed);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ededed', GradientType=0);
  color: #000000;
  text-decoration: none;
}

#sidebar-left ul.menu li:first-child ,
#sidebar-right ul.menu li:first-child {
  border-top: none;
}

#sidebar-left ul.menu li:last-child,
#sidebar-right ul.menu li:last-child {
  border-bottom: none;
}


Und das ist die styles.css:

@charset "iso-8859-1";
/**
* pragmaMx - Web Content Management System.
* Copyright by pragmaMx Developer Team - http://www.pragmamx.org
* $Id: style.css,v 1.12 2012-02-10 09:46:04 tora60 Exp $
*/

@import url(desktop/style.css);
@import url(tablet/style.css);
@import url(mobile/style.css);
@import url(desktop/layout.css);
@import url(header.css);
@import url(nav.css);
@import url(font-awesome.css);
@import url(font-awesome-ie7.css);
@import url(buttons.css);
@import url(alert.css);
@import url(pagination.css);
@import url(tooltip.css);
@import url(datepicker.css);
@import url(switch.css);


Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 28 Juli 2015, 20:38:59
Dann wundert mich das aber, das da falsche Pfade genommen werden
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 28 Juli 2015, 20:40:47
Mich auch. Der Google Bot hat mich drauf gebracht. Ich hab als schnelle Abhilfe die beiden Verzeichnisse in das Desktopverzeichnis kopiert. Aber gefallen tut mir das nicht.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 28 Juli 2015, 20:42:59
Nein, das ist falsch.

Du musst woanders ein Fehler haben.

Denn in der style.css werden hier die Files eingebunden:


@import url(desktop/style.css);
@import url(tablet/style.css);
@import url(mobile/style.css);


und in der layout.css hier:


@import url(tablet/layout.css);
@import url(mobile/layout.css);


Fehler in der style.css:


@import url(desktop/style.css);
@import url(tablet/style.css);
@import url(mobile/style.css);
@import url(desktop/layout.css); <-- der muss da raus


Und im Ordner desktop darf keine layout.css liegen !
Das wird der Fehler sein.

Die layout.css muss im Ordner styles liegen
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 28 Juli 2015, 22:07:25
Ich sag doch - ich bin zu blöd... :mad2:
Hab mir für die Desktop Variante ne eigene Datei angelegt, die aber nicht umbenannt. Zudem die Verweise nicht entfernt. Jetzt ist es so wie ich wollte.
Danke Dir Peter für den Genickschlag!
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 28 Juli 2015, 22:10:49
Dann binde die in der layout.css mit ein und nicht in der styles.css
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 28 Juli 2015, 22:16:02
Jupp, hab ich jetzt gemacht. Die Testdatei ist wech.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 12 Oktober 2015, 13:56:17
Hallo Peter, ich schreibe hier noch einmal, in der Hoffnung das Du ne PM bekommst. Ich habe ne Fehlermeldung in den Logs, die ich nicht weg bekomme:

Zitat
PHP Fatal error:  Call to undefined function themefooter() in ./footer.php on line 60

Das ist der Funktionaufruf dazu:

Code:
/**
* Funktion 'themefooter' aus Theme aufrufen.
* Darin werden auch die rechten Blöcke angezeigt
*/
themefooter();

Als Theme verwende ich "pmx-blank_bootstrap-style".

Das steht in der theme.functions.php:

Code:
/**
* ersetzen von eigenen Theme-Elementen, kann veraendert und ergaenzt werden
* diese Teile werden am Ende des scriptes, in der Funktion themefooter() ersetzt
*/
function theme_replace_end($template)
{
    global $themesetting;

    /* die linken Bloecke bei bestimmten Seiten entfernen */
    if (theme_hideleftblocks()) {
        theme_extract_part($template, 'blocks_left_container');
    }

    return $template;
}

Liegt hier die Lösung, oder was muß ich ändern?
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: AlternativeComputing am 12 Oktober 2015, 17:34:28
Kann dazu jetzt auf die schnelle nichts zu sagen.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: Biker am 04 Januar 2016, 01:57:36
Hallo,
wo kann man denn außer dem Punkt "Startseite" weitere Navigationspunkte einfügen?

Wie kann ich den Login-/Registrieren Button deaktivieren?

Ich nutze das nur für die mobile-Ansicht www.meine-detektei.eu
Ansonsten habe ich das arclite.

Danke vorab!

Gruß
Bernd
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 04 Januar 2016, 07:24:39
Um das Login zu deaktivieren reicht es in der theme.html nach {LOGINFORM}
zu suchen und das zu löschen.

Welches Header-Menü Du verwendest definierst Du in der theme.settings.php unter /**
* das Men¸ im Kopfbereich  (erst ab pragmaMx 1.12!)
* - den Men¸namen aus dem Men¸manager angeben, oder
* - leer lassen (false) um das weiter unten definierte Men¸ zu verwenden
*/
   if ($GLOBALS['currentlang'] == 'german') {
   
           $themesetting['head_css_menu'] = 'header'; // z.B.: {CSS-MENU}


Dann in den Menümanager von Pragmamx gehen und z.B. das Menü header erstellen und erweitern.
Titel: Re:pmx-blank bootstrap-style Responsive Design
Beitrag von: nudels64 am 04 Januar 2016, 20:22:28
Sieht gut aus, nur die bunten Sozial-Media Buttons würde ich noch ändern.