pmx-blank bootstrap-style Responsive Design

Begonnen von AlternativeComputing, 15 Januar 2014, 14:52:52

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 1 Gast betrachten dieses Thema.

AlternativeComputing

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

Peter

Kuddel

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:
Mein Hoster: Serverprofis - deutscher Serverstandort, kompetente Betreuung, moderate Preise, SSL-Zertifikat inklusive, http2-Ready!
Music for everyone: 0815-Musik

AlternativeComputing

#2
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.
MfG

Peter

Kuddel

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:
Mein Hoster: Serverprofis - deutscher Serverstandort, kompetente Betreuung, moderate Preise, SSL-Zertifikat inklusive, http2-Ready!
Music for everyone: 0815-Musik

AlternativeComputing

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

// Edit ende
MfG

Peter

AlternativeComputing

@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);
}

MfG

Peter

AlternativeComputing

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

Peter

ScottyOSX

Hallo, wo kann ich denn die Hintergrundfarbe ändern?

AlternativeComputing

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%;
}



MfG

Peter

ScottyOSX


Fokuna2

@ 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.
Mit freundlichen Grüßen
Thomas
Neue Daten:
Mysql: 8.0.28-19
PHP-Version: 7.4 ->8.0.x

icebreaker

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

doggie

wo finde ich dieses Theme oder ne Demo   :gruebel:
dogz4ever

Fokuna2

@dogie
momentan ist
das Thema für mich gelöst.
Mit freundlichen Grüßen
Thomas
Neue Daten:
Mysql: 8.0.28-19
PHP-Version: 7.4 ->8.0.x

Kuddel

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

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!!!
Mein Hoster: Serverprofis - deutscher Serverstandort, kompetente Betreuung, moderate Preise, SSL-Zertifikat inklusive, http2-Ready!
Music for everyone: 0815-Musik

AlternativeComputing

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

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


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/ am besten erklärt.


Demo: http://demo.bdmdesign.org
Download: http://www.pragmamx.org/Downloads-pmx-blank-bootstrap-style-Responsive-Design-view-863.html
MfG

Peter

nudels64

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!
Lieben Gruß
Andreas
#################################
CMS-Version:
pragmaMx 2.1.2.94 (2014-10-22)
PHP-Version:
5.6.24-he.0
MySQL-Version:
5.6.31-77.0-log
Server-Version:
Apache

AlternativeComputing

Nudel Du brauchst das nicht.

Das mit dem Viewport wird hier gut erklärt:

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

MfG

Peter

nudels64

 :quest Ich hab auch Dein Theme im Einsatz Peter.
Lieben Gruß
Andreas
#################################
CMS-Version:
pragmaMx 2.1.2.94 (2014-10-22)
PHP-Version:
5.6.24-he.0
MySQL-Version:
5.6.31-77.0-log
Server-Version:
Apache

AlternativeComputing

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

Peter