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

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

    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.