JF Side Buttons nur Icons sichtbar machen

    Hallo zusammen.


    Ich möchte gerne auf meiner Seite die Side Buttons so anzeigen lassen, dass lediglich die Icons sichtbar sind bevor ich mit dem Mauszeiger drüberfahre.


    So ist es auch in der Demo auf der Entwickler-Seite zu sehen, ganz links: https://demo.joomforest.com/?product=jf_side_buttons


    Meine Seite, ganz links: http://www.neu.tennisfreunde-kollow.de/


    Anbei die Moduleinstellungsmöglichkeiten


    Kann jemand helfen?


    Vielen Dank.


    Gruß

    Dennis

    Hallo, danke für deine Antwort.


    Damit habe ich es leider nicht hinbekommen.


    Ich habe jetzt in der jf_sb.min.css direkt den Eintrag "margin-right: -37 px auf 0 px geändert. Jetzt sieht es ganz gut aus.


    Allerdings stört diese dünne Linie zwischen den Buttons noch

    Das mit dem important habe ich schon gelesen. Wie gesagt, das habe ich nicht hinbekommen. Ich habe in dem Verzeichnis 2 css-Dateien.


    jf_sb.css


    und


    jf_sb.min.css


    Code
    /**
 * @package     JF Side Buttons
 * @author        JoomForest.com
 * @email        support@joomforest.com
 * @website        http://www.joomforest.com
 * @copyright    Copyright (C) 2011-2016 JoomForest.com, All rights reserved.
 * @license        JoomForest.com Proprietary Use License - http://www.joomforest.com/licenses
**/
.jf_sidebuttons li a,.jf_sidebuttons li a i{font-size:16px;text-align:center;display:block}.jf_sidebuttons{position:fixed;top:50%;left:0;z-index:888;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);list-style:none;margin:0;padding:0}.jf_sidebuttons li{margin:2px 0}.jf_sidebuttons li a{position:relative;border:none solid #DDD;background-color:#FFF;min-width:86px;padding:10px 37px 10px 10px;color:#222;left:-100%;margin-right:-37px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;letter-spacing:1px;text-transform:uppercase}.jf_sidebuttons li a img{float:right;margin:0 -27px}.jf_sidebuttons li a:hover{left:0;text-decoration:none}.jf_sidebuttons li a i{position:absolute;top:0;right:0;height:40px;line-height:40px;width:36px}.jf_sidebuttons.right{left:auto;right:0}.jf_sidebuttons.right li a{left:auto;margin-right:-1px;right:-100%;margin-left:-37px;padding:10px 10px 10px 37px}.jf_sidebuttons.right li a:hover{left:auto;right:0}.jf_sidebuttons.right li a i{left:0;right:0}.jf_sidebuttons.right li a img{float:left}


    Das ist der Original-Code der beiden CSS-Dateien von vor meinen Änderungen.


    Ich habe keine Ahnung wo der Unterschied der beiden CSS-Dateien ist.


    Wenn du mir helfen kannst wo was einzufügen ist, wäre das klasse.


    Was mich wundert ist, dass dein "padding: 10px 37px 10px 10px !important;" in der jf_sb.min.css bereits drin ist.


    Danke.


    Gruß

    Dennis

    Normalerweise verwendet man eine user.css oder auch custom.css, damit die eigenen Änderungen nicht bei jedem Update wieder verschwinden.


    Leider weiß ich aus dem Stegreif nicht, welche das bei dir ist. Vielleicht auch ganz anders. Du verwendest wohl ein SP-Pagebuilder-Template.


    Ich glaube, da legt man im css/-Ordner des Templates eine Datei custom.css für eigenes CSS an.


    Und allgemein: Normalerweise werden in Joomla die .min.css-Dateien geladen. Wenn man den Dabug-Modus in der Joomla-Konfiguration aktiviert, dann die normalen .css.

    Zitat von DennisMenger

    Was mich wundert ist, dass dein "padding: 10px 37px 10px 10px !important;" in der jf_sb.min.css bereits drin ist.

    Das Template-CSS überschreibt das mit eigenen CSS-Regeln. Zwar nicht direkt bezogen auf das

    Code
    .jf_sidebuttons

    aber in einer sehr "heftigen" Regel, die eben auch die Sidebuttons anspricht.


    Deshalb mein "Trick" die Regel noch mal mit dem "!important" nachzureichen, was aber nicht immer ausreichend ist. Dann muss man den obigen Selektor "noch weiter verschärfen", bis er dann halt die Template-Regel übertrumpft.