Seite 1 von 3
[DEV] tabslideout
Verfasst: 11.08.2015 14:48
von Lehrling
Diese kleine Spielerei fügt deinem Board einen Tab links an der Seite hinzu, der beim Darüberfahren nach rechts ausfährt und sich dann automatisch wieder schließt, wenn die Maus nicht mehr darüber ist. Der Tab wird nur auf der Indexseite angezeigt.
Demo, Infos und Downloads:
http://forumstyling.bplaced.net/viewtop ... 6f392fe19a
Zur
Besichtigung bitte die Forenübersicht aufrufen, da der Tab, wie oben erwännt, nur auf der Startseite sichtbar ist.
Re: [DEV] tabslideout
Verfasst: 12.08.2015 09:08
von König Vettel
Hey, super Extension!
Kannst du mir verraten wie ich mehrere Buttons anzeigen und ausfahren lassen kann?
Re: [DEV] tabslideout
Verfasst: 12.08.2015 20:38
von waldkatze
@König Vettel
Meinst du z.B. so ?:
http://www.polarbiker-oberlausitz.de/mod_demo/
Könnte man noch beliebig erweitern
Re: [DEV] tabslideout
Verfasst: 12.08.2015 21:37
von König Vettel
Genau!
Re: [DEV] tabslideout
Verfasst: 13.08.2015 06:24
von waldkatze
index_body_markforums_before.html füge am Ende ein:
Code: Alles auswählen
<div id="slideout_2">
<div id="slideout_inner_2">
<p><u>Demo Tabslideout</u></p>
hier könnte noch ein Text mit Info stehen....
</div>
</div>
füge am Ende ein:
Code: Alles auswählen
/* 2. Anzeige */
#slideout_2 {
background-image: url("./images/tabslideout/contact.png"); /* Grafik 2. Anzeige */
position: fixed;
background-color: red;
color: white;
border-top: 5px solid white;
border-right: 5px solid white;
border-bottom: 5px solid white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 100px;
width: 30px;
padding: 0px;
top: 400px; /* Höhe 2.Anzeige */
left: 0;
z-index: 100;
margin-left: 0px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
box-shadow: 0 4px 2px -2px gray;
-webkit-box-shadow: 0 4px 2px -2px gray;
}
#slideout_inner_2 {
position: fixed;
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
background-image: linear-gradient(top, #ffffff, #eeeeee);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: black;
border-top: 5px solid white;
border-left: 5px solid white;
border-bottom: 5px solid white;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 80px;
width: 142px;
padding: 10px;
top: 400px;
left: -166px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
box-shadow: 0 4px 2px -2px gray;
-webkit-box-shadow: 0 4px 2px -2px gray;
}
#slideout_2:hover {
left: 166px;
}
#slideout_2:hover #slideout_inner_2 {
left: 0;
}
@media only screen and (max-width: 720px), only screen and (max-device-width: 720px)
{
#wrap {
min-width: 250px;
padding: 25px;
}
}
Die Höhe musst du ggf. an deine Wünsche anpassen.
Das zum Schluss nicht vergessen:
https://www.phpbb.de/kb/tippstyles
Re: [DEV] tabslideout
Verfasst: 13.08.2015 08:53
von König Vettel
Bei mir werden die Buttons nicht angezeigt, nur der 1.
Der Text steht dort aber...
Re: [DEV] tabslideout
Verfasst: 13.08.2015 09:14
von waldkatze
Hast du den Template- und den Theme-Cache geleert ???
Re: [DEV] tabslideout
Verfasst: 13.08.2015 09:28
von König Vettel
Wenn du mir verrätst wo ich das bei phpbb3.1 mache?
Ich finde die Grafiksammlung nicht mehr
Re: [DEV] tabslideout
Verfasst: 13.08.2015 10:05
von Lehrling
einfach nur den Cache leeren.
Re: [DEV] tabslideout
Verfasst: 13.08.2015 10:07
von König Vettel
Bringt leider keine Änderung
