+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Hilfe ! Mobiles Theme zerstört Listen (/thread-33967.html)
Seiten: Seiten:
1
2
Hilfe ! Mobiles Theme zerstört Listen - falcao1010 - 28.11.2016
Hallo,
ich habe das große Problem, dass ein mobiles Theme (Mybb Go Mobile) für die Navigation CSS-Listen nutzt und dadurch meine diversen UL-Listen auf eigenen Seiten nicht mehr funktionieren (sie erscheinen gar nicht mehr). Was kann ich bloß tun???
Habe momentan folgendes versucht - leider ohne Erfolg. Kann mir bitte jemand helfen ???
A) CSS:
ul.standard-list {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}
ul.standard-list li {
display: list-item;
}
B) HTML der eigenen Seite (im Template)
<ul class="standard-list">
<li>Text </li>
...
Funktioniert wie erwähnt nicht.
PS: In der Diskussion zum Plugin hatte ich dies auch schonmal thematisiert und dachte zunächst, eine Lösung gefunden zu haben. Das hat sich als Fehler erwiesen.
RE: Hilfe ! Mobiles Theme zerstört Listen - MrBrechreiz - 28.11.2016
Ist davor ein td oder ein div mit einer Klasse definiert ? Wenn ja, kannst Du die Klasse davor stellen. Sollte etwa so aussehen.
div.diedivklasse ul.standard-list { ...... }
oder
td.dietdklasse ul.standard-list { ...... }
Gleiche gilt dann für die Listen.
Somit kann man seine ul und li aus den Standard Definitionen abkapseln und seine eigenen Definitionen setzen.
RE: Hilfe ! Mobiles Theme zerstört Listen - falcao1010 - 28.11.2016
Ich dachte, dass ich auf diese Weise Klassen definiert habe. Falsch gedacht :-)
Also muss ich dann wie folgt vorgehen?
A) CSS:
.dieklasse_ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}
ul.standard-list {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}
.dieklasse_li {
display: list-item;
}
ul.standard-list li {
display: list-item;
}
B) HTML
<div dieklasse_ul>
<div dieklasse_li>
<ul class="standard-list">
<li>Text </li>
...
</ul>
</div>
</div>
PS: Sorry für die dummen Fragen ;-)
RE: Hilfe ! Mobiles Theme zerstört Listen - MrBrechreiz - 28.11.2016
Nein nein ^^
Also, ich kenne dein Tpl nicht, daher rate ich.
CSS (nur als Beispiel)
Code:
div.divcontainer { hier alle Definitionen des Container reinpacken }
div.divcontainer ul.standard-list { hier alle Definitionen des ul reinpacken }
div.divcontainer ul.standard-list li { hier alle Definitionen des li reinpacken }HTML
Code:
<div class="divcontainer">
<ul class="standard-list">
<li>blablabla</li>
</ul>
</div>So etwa meinte ich dies.
RE: Hilfe ! Mobiles Theme zerstört Listen - falcao1010 - 28.11.2016
Erste Inhalte werden erkennbar, aber nur auf dem Tablet. Code momentan:
CSS:
div.divcontainer {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}
div.divcontainer ul.standard-list {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}
div.divcontainer ul.standard-list li {
display: list-item;
}
HTML:
<div class="divcontainer">
<ul class="standard-list">
<ul style="list-style-image: url(../images/li-blue.png);">
<li> ...</li>
RE: Hilfe ! Mobiles Theme zerstört Listen - MrBrechreiz - 28.11.2016
Hast eine PN von mir bekommen.
PS: Korrigiere zuerst einmal deine Navigation, dann sehen wir weiter.
RE: Hilfe ! Mobiles Theme zerstört Listen - falcao1010 - 28.11.2016
So, umgesetzt. Jetzt funktioniert die Absicht auf dem Handy mit Chrome ganz gut (Ausnahme: Links*). :-)
auf dem Tablet (auch mit Browser Chrome) sieht es aber weiterhin übel aus, er wirft vieles durcheinander.
*Bei den Links das Problem: Sie sind auch in der Navigations-Theme definiert, so dass er diese CSS ebenfalls auf den eigenen Seiten ansetzt :-(
Auszug CSS aus dem mobilen Theme (global.css):
ul.standard-list {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
ul.standard-list li {
display: list-item;
}
body {
background: none repeat scroll 0 0 #EEE !important;
width: auto;
color: #000;
text-align: center;
margin: 0;
-webkit-text-size-adjust: none;
font-family: "Noto Sans",sans-serif !important;
font-size: 13px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
li {
display: inline-block;
float: left;
margin-right: 0;
}
li a {
display: block;
min-width: 140px;
height: 20px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #fff;
text-decoration: none;
}
li:hover a {
background: silver;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden,.hidden:hover {
display: block;
}
.show-menu {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
color: #fff;
background: #243D54;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu {
display: block;
}
@media screen and (max-width : 760px) {
ul {
position: static;
display: none;
}
li {
margin-bottom: 0;
}
ul li,li a {
width: 100%;
}
ul a {
background: #324454;
}
.show-menu {
display: block;
}
}
RE: Hilfe ! Mobiles Theme zerstört Listen - MrBrechreiz - 29.11.2016
Moin.
Versuch mal folgendes.
Suche in deiner global.css nach
Code:
@media screen and (max-width: 768px) {und mach daraus dies
Code:
@media screen and (min-width: 320px) and (max-width: 1940px) {RE: Hilfe ! Mobiles Theme zerstört Listen - falcao1010 - 29.11.2016
Ok, teste ich später.
Wie bekomme ich denn mein CSS für Links aus meinem Desktop-Theme auch in den Listen der mobilen Theme zum Laufen?
CSS der Desktop-Theme:
a:link, a:visited {
color: #026cb1;
text-decoration: none;
}
a:hover, a:active {
color: #026cb1;
text-decoration: underline;
}
Ich vermute, dass ich im mobilen Theme eine Klasse brauche, damit dies läuft. Also:
.linkmobil.a:link, linkmobil.a:visited {
color: #026cb1;
text-decoration: none;
}
.linkmobil.a:hover, .linkmobil.a:active {
color: #026cb1;
text-decoration: underline;
}
Dann im Link über class=linkmobil" aufrufen. Könnte das klappen?
Oder kann / sollte diese Link-Formatierung mit in den divcontainer bzw. die class standard-list aufgenommen werden?
RE: Hilfe ! Mobiles Theme zerstört Listen - MrBrechreiz - 29.11.2016
Nicht wirklich. Da Du bereits Bootstrap eingebunden hast, steuerst Du dies via @Media Grössen.