[DEV] tabslideout

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

[König Vettel]

Hey, super Extension!
Kannst du mir verraten wie ich mehrere Buttons anzeigen und ausfahren lassen kann?

[waldkatze]

@König Vettel

Meinst du z.B. so ?: http://www.polarbiker-oberlausitz.de/mod_demo/

Könnte man noch beliebig erweitern

[König Vettel]

Genau!

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

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

[König Vettel]

Bei mir werden die Buttons nicht angezeigt, nur der 1.
Der Text steht dort aber...

[waldkatze]

Hast du den Template- und den Theme-Cache geleert ???

[König Vettel]

Wenn du mir verrätst wo ich das bei phpbb3.1 mache?
Ich finde die Grafiksammlung nicht mehr

[Lehrling]

einfach nur den Cache leeren.

[König Vettel]

Bringt leider keine Änderung