Suche

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

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

Beste Grüße aus HH

Kuddel™

[AlternativeComputing]

Moin Kuddel,

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

Code Auswählen Erweitern



                     <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

Code Auswählen Erweitern



.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

Code Auswählen Erweitern




#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

Code Auswählen Erweitern



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

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




in

Code Auswählen Erweitern



define('_THISTHEME_', __DIR__);

/* Sprachdatei auswaehlen */
mxGetLangfile(__DIR__);



Sonst werden die Sprachdateien nicht gefunden.

[Kuddel]

alter Verwalter!
ich hatte, statt des Logos, an ein Banner (468x60, gif) gedacht...
und das Ganze auch noch "center" statt am Rand!
Naja, probieren wir es mal  

[AlternativeComputing]

Banner geht auch, findest Du in den selben Dateien.

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

Code Auswählen Erweitern



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

Code Auswählen Erweitern



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

Code Auswählen Erweitern



.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

Code Auswählen Erweitern



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

Code Auswählen Erweitern



#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

[AlternativeComputing]

@Kuddel:

Wie schaut diese Anweisung bei Dir aus?

Code Auswählen Erweitern




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

Code Auswählen Erweitern




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



[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 

[ScottyOSX]

Hallo, wo kann ich denn die Hintergrundfarbe ändern?

[AlternativeComputing]

pmx-blank_bootstrap-style/style/layout.css:

Code Auswählen Erweitern



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

Code Auswählen Erweitern



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:

Code Auswählen Erweitern



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



[ScottyOSX]

Super ... Vielen Dank.

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

[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   

[Fokuna2]

@dogie
momentan ist
das Thema für mich gelöst.

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

[AlternativeComputing]

Danke für die Blumen Kuddel  
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

Code Auswählen Erweitern



<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

Code Auswählen Erweitern



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



folgende Zeile ein:

Code Auswählen Erweitern



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



Nun sollte es so aussehen:

Code Auswählen Erweitern



<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

Code Auswählen Erweitern



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

Code Auswählen Erweitern


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

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

[AlternativeComputing]

Nudel Du brauchst das nicht.

Das mit dem Viewport wird hier gut erklärt:

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

[nudels64]

  Ich hab auch Dein Theme im Einsatz Peter.

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

Code Auswählen Erweitern


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