Slider abgerundete Ecken verpassen

  • Hallo,

    ich würde gern dem Image Slider auf meiner Startseite abgerundete Ecken verpassen. Ich weiß auch dass ich dies mit "border-radius: 5px;" machen muss. Allerdings finde ich einfach nicht die richtige Stelle wo ich es einfügen muss. <X Vielleicht kann mir von euch jemand weiterhelfen.


    Vielen Dank

  • Hallo Rene,


    grundsätzlich wäre ich bei abgerundeten Ecken vorsichtig. Sollte Hintergrundfarbe auch passen, sonst schaut es komisch aus. Ah ja: Willkommen hier - warum sind eigentlich Ecken rund? :)


    Probier folgendes - camera.css > das "Aber" kommt nachher.

    Code
    .camera_wrap {
    border:5px solid #ccc;
    border-radius:5px;    
    }

    entweder reicht es, in die template.css zu geben, oder ein override vom Modul:


    folgendes Verzeichnis kopieren

    modules/mod_slideshowck/themes/default


    und umbenennen in

    modules/mod_slideshowck/themes/neuername


    Danach folgende Einstellungen des Moduls ändern:


    Reiter "Styles options" > "Theme" > "neuername"


    Änderungen bzw. Apassungen direkt in den CSS-Dateien, die sich im Verzeichnis modules/mod_slideshowck/themes/neuername befinden, machen, ohne dass diese beim nächsten Update überschrieben werden.


    Liebe Grüße

    Christine

  • Hallo Christine,

    ja normal sind Ecken ja eckig :) Ne aber weil mein menü abgerundet ist, wollte ich es auch mit einem abgerundeten Slider probieren. Deine erste Möglichkeit funktioniert soweit, aber es ist ehr ein Rahmen um dem Slider der nun abgerundet ist. Ich möchte aber den Slider selbst abgerundet haben. Bringe ich den Rahmen in die Hintergrundfarbe ändert sich quasi nichts. Ich hatte damals einen anderen Slider, dort funktionierte es, aber beim alten konnte ich keine Schriften einfügen. Außer ich hätte sie in jedes Bild eingefügt.


    LG

  • Hallo Rene,


    ach, ach - frag nicht, welche (un)möglichen Varianten ich ausprobiert hatte :) Probiers damit:


    Code
    .camera_wrap div {
    border-bottom-left-radius:10px 20px;
    border-bottom-right-radius:10px 20px;
    border-top-left-radius:10px 20px;
    border-top-right-radius: 10px 20px;    
    }

    mit den Pixeln musste selber spielen.


    geht wohl auch in Kurzform:


    Code
    .camera_wrap div {
    border-radius:5px; 
    }

    Liebe Grüße

    Christine

  • Hallo Christine,

    ich habe es gestern nimmer geschafft. Hatte den Beitrag zwar noch gesehen, aber da war ich gerade an anderer Stelle beschäftigt und dann hatte ich es nimmer aufm Schirm.

    Aber jetzt hab ich es eingefügt und es funktioniert genauso, wie ich es mir vorgestellt habe. Abgerundet passt nen bissel besser ins Bild.


    Wieder vielen Dank ;)

  • Hallo Rene,


    achso, weil System immer zeigte, dass Du Online bist, deswegen meine Nachfrage :)
    Danke für Deine Rückmeldung.


    Dachte, Dich störten eventuell (auch) die darunter liegenden Punkte. Wenn dem so sei, diese sind hier:

    Code
    #slsh {
        border-bottom: 1px dotted #99a;
    }

    wo diese #slsh noch wo anders sein sollen, weiß ich nicht. Falls sie stören, gibst ein: none; rein.

    (Zeile 7386 der template ...... css)


    Liebe Grüße

    Christine

  • Ja ich glaub solange der Rechner an ist, bin ich immer eingeloggt und da der immer an ist, bin ich wahrscheinlich immer grün.

    Ja den Border hatte ich schon gesucht und mit */ ausgestellt, aber das none; ist wohl eleganter :D Das werde ich gleich mal noch richtig machen. Wollte es nicht löschen, da ich auch nicht weiß wo der noch so erscheint. Und ja er störte mich wirklich:)


    Grüße und danke für deine Hilfe.

  • Jo, der border ist nun weg, aber nur wegen dem Syntaxfehler: autsch - reine Kosmetik: :) es steht nun:

    #slsh {

    border-bottom: 1px dotted #99a none;
    }

    entweder so:

    #slsh {

    border-bottom: none;
    }

    oder so:

    #slsh {

    /*border-bottom: 1px dotted #99a;*/
    }

    Liebe Grüße

    Christine