Die Social Buttons links am Rand ----->

[bettenlager]

Hallo!

Wenn man hier nach rechts schaut sind doch diese Social Buttons am Browser-Rand angepinnt. Oder so wie hier: http://www.mindfactory.de/

1. Wie genau nennt man das?

2. Gibt es dafür empfehlenswertes Script für modified?

Gruss
Lager

Linkback: https://www.modified-shop.org/forum/index.php?topic=25364.0

[adiebler]

Hallo,

ein Blick in den Seitenquellcode verrät, die Links sind einfach als fixe Elemente an die Seite gepackt.

Code: Text  [Auswählen]

<a id="sys_contact" target="_self" href="/kontakt" title="Contact" style="position:fixed; right:2px; top:200px;">   </a>
<a id="sys_twitter" target="_blank" href="http://twitter.com/modified_shop" title="Twitter" style="position:fixed; right:2px; top:250px;">   </a>
<a id="sys_facebook" target="_blank" href="http://www.facebook.com/modified.shop" title="Facebook" style="position:fixed; right:2px; top:300px;">   </a>
<a id="sys_linkedin" target="_blank" href="http://www.linkedin.com/profile?viewProfile=&key=51748274" title="LinkedIn" style="position:fixed; right:2px; top:350px;">   </a>
<a id="sys_xing" target="_blank" href="https://www.xing.com/profile/Torsten_Krueger8" title="Xing" style="position:fixed; right:2px; top:400px;">   </a>
<a id="sys_googleplus" target="_blank" href="https://plus.google.com/105222208238275655052" title="Google+" style="position:fixed; right:2px; top:450px;">   </a>
<a id="sys_rss" target="_blank" href="http://www.modified-shop.org/forum/index.php?action=.xml;type=rss" title="RSS" style="position:fixed; right:2px; top:500px;">   </a>
 

Dazu folgende CSS-Angaben:

Code: CSS  [Auswählen]

#sys_contact {
    background-image: url("../images/sys/contact.png");
    background-position: 0 0;
    height: 40px;
    text-decoration: none;
    width: 40px;
}
#sys_twitter {
    background-image: url("../images/sys/twitter.png");
    background-position: 0 0;
    height: 40px;
    text-decoration: none;
    width: 40px;
}
#sys_facebook {
    background-image: url("../images/sys/facebook.png");
    background-position: 0 0;
    height: 40px;
    text-decoration: none;
    width: 40px;
}
#sys_linkedin {
    background-image: url("../images/sys/linkedin.png");
    background-position: 0 0;
    height: 40px;
    text-decoration: none;
    width: 40px;
}
#sys_xing {
    background-image: url("../images/sys/xing.png");
    background-position: 0 0;
    height: 40px;
    text-decoration: none;
    width: 40px;
}
#sys_googleplus {
    background-image: url("../images/sys/googleplus.png");
    background-position: 0 0;
    height: 40px;
    text-decoration: none;
    width: 40px;
}
#sys_youtube {
    background-image: url("../images/sys/youtube.png");
    background-position: 0 0;
    height: 40px;
    text-decoration: none;
    width: 40px;
}
#sys_rss {
    background-image: url("../images/sys/rss.png");
    background-position: 0 0;
    height: 40px;
    text-decoration: none;
    width: 40px;
}
#sys_contact:hover, #sys_twitter:hover, #sys_facebook:hover, #sys_linkedin:hover, #sys_xing:hover, #sys_googleplus:hover, #sys_youtube:hover, #sys_rss:hover {
    background-position: 0 39px;
}

Die Links einfach am Anfang von /templates/xtc5/index.html einfügen und das CSS in /templates/xtc5/stylesheet.css anfügen. Natürlich auch die Bilder für die Hintergründe an die entsprechende Stelle.

[jannemann]

Hier geht es direkt zur Anleitung: ANLEITUNG: Bookmarks am rechten Bildschirmrand

Schöne Grüße,
Jan