ShopPilot > SSP - Shop Server Pages
Responsive Webdesign - Tipps
dobra:
Hallo,
für dieses relativ neue Thema gibts noch kein eigenes Board ;)
Ich schreibs mal hier und der Admin kanns ja event. mal in ein "Bootstrap" Board verschieben ...
DIVs je nach Displayauflösung ein/ausblenden:
* hidden-sm hidden-md = visible-lg
* hidden-sm hidden-lg = visible-md
* hidden-md hidden-lg = visible-sm
* hidden-md hidden-lg hidden-sm = visible-xs
Beispiel:
--- Code: --- <footer id="footer" class="hidden-xs col-sm-12">
...
</footer>
oder kann auch so geschrieben werden
<div class="footer_mobile hidden-md hidden-lg hidden-sm = visible-xs">
...
</div>
--- End code ---
Bei kleinen Displays wird nur "footer_mobile" angezeigt, bie großen "footer"
--- Zitat ---.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden
--- End quote ---
Das kleinste Teil - xs - ist kleiner 768px
Braucht man kleinere Einheiten z.B. um Smartphon Hochformat (320x480) <> Querformat (480x320) zu unterscheiden, kann man das so machen:
--- Code: ---@media screen and (max-width: 480px) {
.hiddentest {display:none;}
}
--- End code ---
Linkback: https://www.shoppilot.net/pf/index.php?topic=1717.0
dobra:
noch ein Tipp ;)
zum testen der unterschiedlichen Displays stellt Firefox ein nützliches Add-on zur Verfügung -> Web Developer
Falls noch nicht installiert - gibts hier
(das Tool kann aber noch viiiiiiiel mehr als nur das !!!)
mit "Größe ändern" -> "angepasste Layouts anzeigen" werden die gängigsten mobile-Formate angezeigt - keine Screenshots sondern voll funktionsfähige Browserfenster.
Mobiles Hochformat (320x480), Mobiles Querformat (480x320), Hochformat für kleine Tablets (600x800), Querformat für kleine Tablets (800x600), Tablethochformat (768x1024) und Tabletquerformat (1024x768)
Beispiel:
dobra:
Tipp 3
Formulare - Darstellung der Inputfelder
Sobald <label> und <input> umbrochen wird, soll nur noch das Inputfeld mit placeholder dargestellt werden.
Lösung:
HTML:
--- Code: --- <label for="vname" class="col-sm-2">Vorname: </label>
<div class="col-sm-10">
<input name="vname" class="form-control" ... required="required">
</div>
--- End code ---
css:
--- Code: ---@media screen and (max-width: 799px) {
form.<formularname> label {display:none;}
}
@media screen and (min-width: 800px) {
.form-control::-webkit-input-placeholder { color: white; }
.form-control:-moz-placeholder { color: white; }
.form-control::-moz-placeholder { color: white; }
.form-control:-ms-input-placeholder { color: white; }
}
--- End code ---
dobra:
--- Zitat von: dobra am April 09, 2015, 10:39:45 ---Tipp 3
Formulare - Darstellung der Inputfelder
Sobald <label> und <input> umbrochen wird, soll nur noch das Inputfeld mit placeholder dargestellt werden.
Lösung:
HTML:
--- Code: ---<form class="test"...>
<label for="vname" class="col-sm-2">Vorname: </label>
<div class="col-sm-10">
<input name="vname" class="form-control" ... required="required">
</div>
--- End code ---
css:
--- Code: ---@media screen and (max-width: 799px) {
form.test label {display:none;}
}
@media screen and (min-width: 800px) {
form.test .form-control::-webkit-input-placeholder { color: white; }
form.test .form-control:-moz-placeholder { color: white; }
form.test .form-control::-moz-placeholder { color: white; }
form.test .form-control:-ms-input-placeholder { color: white; }
}
--- End code ---
--- End quote ---
dobra:
Die on board "Standardmeldungen" (alert) mit Texten aus der Sprachdatei werden ja in jsfunct.js definiert.
Hier kann man zwar Änderungen vornehmen, aber beim nächsten Shop veröffentlichen (egal ob lokal oder online) werden die sofort wieder überschrieben.
Lösung:
Man kopiert die Datei und speichert sie unter z.B. myjsfunct.js
Diese Datei muss dann manuell eingebunden und bei "Dateien hinzufügen" eingetragen werden.
Jetzt kann man beliebige Änderungen machen nachdem diese neue js-Datei ja NACH dem automatisch eingebundenen
<script type="text/javascript" src="../jsfunct.js"></script>
aufgerufen wird und somit relevant ist.
Beispiel:
Alert Meldung bei inwk bei nicht ausgewählter Listbox (hier im FF - jeder Browser stell die alert-Boxen ja anders dar)
Änderung:
in myjsfunct,js
--- Code: --- if (li1) {
li1i = eval('document.A' + xarticle + '1.liste1.selectedIndex');
if (!li1i && 1) {alert (lang124); return;}
if (0) {--li1i;}
}
li2 = eval('document.A' + xarticle + '2');
if (li2) {
li2i = eval('document.A' + xarticle + '2.liste2.selectedIndex');
if (!li2i && 1) {alert (lang124); return;}
if (0) {--li2i;}
}
--- End code ---
mit
--- Code: --- if (li1) {
li1i = eval('document.A' + xarticle + '1.liste1.selectedIndex');
if (!li1i && 1) {bootbox.alert ({title: "Meldung", message: "Wählen Sie bitte eine Farbe aus"}).find("div.modal-dialog").addClass("bootbox-width"); return;}
if (0) {--li1i;}
}
li2 = eval('document.A' + xarticle + '2');
if (li2) {
li2i = eval('document.A' + xarticle + '2.liste2.selectedIndex');
if (!li2i && 1) {bootbox.alert ({title: "Meldung", message: "Wählen Sie bitte eine Größe aus"}).find("div.modal-dialog").addClass("bootbox-width"); return;}
if (0) {--li2i;}
}
--- End code ---
ersetzen.
css:
--- Code: ---.bootbox-width {
margin: 0 auto;
max-width: 300px !important;
margin-top: 10% !important;
}
.modal-header {
height: 50px;
}
.modal-body {
padding: 15px 0 10px 65px;
background-image: url("../images/other/achtung.jpg");
background-repeat: no-repeat;
background-position:15px 10px;
}
.modal-footer {
padding: 0 20px 10px 20px;
background: #F2F2F2;
border-top: 1px solid #BDBDBD;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.modal-footer .btn{
margin-top: 10px;
padding: 2px 25px;
}
--- End code ---
Ergebnis: (wird in allen Browsern gleich dargestellt)
Das sind nur Beispiele - Texte und css-Formatierung kann natürlich beliebig angepasst werden !
Navigation
[0] Themen-Index
[#] Nächste Seite
Go to full version