Contao-Camp 2024
Ergebnis 1 bis 22 von 22

Thema: noobslide -> grafische Anpassung!?

  1. #1
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard noobslide -> grafische Anpassung!?

    Hallo Zusammen,

    kämpfe heute schon den ganzen Tag damit herum, die Vorwärts/Rückwärts Links grafisch anzupassen sowie eine mit quadraten fortlaufende Progressansicht zu erstellen...
    Kein Weiterkommen...

    Gegen abend finde ich eine Seite auf der das wohl zu 100 % so umgesetzt ist.

    http://www.frankdaniels.de

    Hm, hat jemand ne idee wie sich die halbtransparenten (Vorwärts/Rückwärts) Buttons sowie die farbliche aktiven Punkte anstatt der Zahlen generieren lassen???

    Danke Euch

    Grüße
    Messen

  2. #2
    Contao-Nutzer Avatar von philipp.kaiblinger
    Registriert seit
    06.07.2009.
    Beiträge
    160
    Partner-ID
    4877

    Standard

    Das musst du mittels CSS machen...


    Sent from my iPhone using Tapatalk

  3. #3
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    CSS für die Progresspunkte:
    Code:
    .noobButtons span.noobActive {
        background-color: #B80C96;
    }
    .noobButtons {
        margin: 0 auto;
        text-align: center;
        width: 220px;
    }
    .noobButtons span {
        background-color: #414141;
        display: block;
        float: left;
        height: 8px;
        margin: 5px 5px 0 0;
        padding: 0 4px;
        text-indent: -3000px;
        width: 0;
    }
    CSS für die Button rechts und links:
    Code:
    .noobWrapper .image_container img, .noobWrapper .image_container img:hover {
        box-shadow: 0 0 0 0 #FFFFFF;
    }
    .noobWrapper .buttons span.button_prev {
        background: url("../../tl_files/fd/graphix/slider_button_prev.png") no-repeat scroll center center transparent;
        display: none;
        height: 450px;
        left: -5px;
        position: absolute;
        top: 5px;
        width: 30px;
    }
    .noobWrapper .buttons span.button_next {
        background: url("../../tl_files/fd/graphix/slider_button_next.png") no-repeat scroll center center transparent;
        display: none;
        height: 450px;
        position: absolute;
        right: -5px;
        top: 5px;
        width: 30px;
    }
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  4. #4
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    Vielen Dank für den Code Auszug... hab ich soweit eigentlich verstanden...

    Aber wo werden die Punkte definiert bzw. gegen die Ziffern (im Original) ersetzt...?

    Wurden da Eigene Klassen benutzt? da ich diese im Code nicht finden konnte?

    Dankeschön

    Messen

  5. #5
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Die Punkte sind die Rahmen um die "noobButtons span".
    Gibst du ihnen einen border-radius, werden sie rund, ohne sind sie eben eckig.
    Die Zahlen sind immer noch da, werden aber durch "text-indent: -3000px;" aus dem Blickfeld gerückt.
    nummern.png

    Insgesamt wird die Buttons im Script erzeugt, automatisch abhängig von der Anzahl der Slides..
    Geändert von jubel (31.07.2012 um 14:10 Uhr)
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  6. #6
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    An einer neuen Site habe ich es so gelöst (mit der aktuellen Version):
    button.png
    css.png
    Die Wirkung ist die gleiche.
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  7. #7
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    Vielen Dank -

    ist aber ausschließlich CSS, da ist dann kein extra js Teil dabei oder?

    Grüße
    messen

  8. #8
    Contao-Nutzer Avatar von philipp.kaiblinger
    Registriert seit
    06.07.2009.
    Beiträge
    160
    Partner-ID
    4877

    Standard

    JS ist dafür nicht nötig. Mit dem geposteten CSS Code solltest du es umsetzen können.

    lg
    Philipp

  9. #9
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    Hat funktioniert....

    Perfekt - Danke!

    Grüße
    Messen

  10. #10
    Contao-Nutzer
    Registriert seit
    30.12.2010.
    Ort
    Hainfeld
    Beiträge
    46
    Partner-ID
    8829

    Standard

    Hallo,

    ich quäle mich nun auch seit Tagen, mit der Grafischen gestaltung der vor und zurück buttons.

    Wenn ich den Taxt ausblende, egal, ob mit
    text-indent:-99999px oder display:none;
    funktionieren die Links nicht mehr, sprich das Blätter geht dann nicht mehr.

    Ich habe nun die Farbe der Schrift auf transpaentz 0,1 gestellt, ich aber auch nicht die sauberse Art.
    Einen Tipp, wie es anders gehen könnte?

    besten Dank

    Nachtrag:
    wie immer, kaum ist die Frage gepostet, findet man die Antwort!
    => siehe css-ok.png
    Angehängte Grafiken Angehängte Grafiken
    Geändert von arillus.at (02.08.2012 um 16:45 Uhr)

  11. #11
    Contao-Nutzer
    Registriert seit
    20.07.2012.
    Beiträge
    6

    Standard

    Hallo zusammen!
    würde auch gerne den noobslider wie oben angegeben nachbauen - bin aber blutiger Anfänger...

    Hab nun den Code von "jubel" genommen und bei meinem Stylesheet eingefügt/bzw. erstellt.
    Aber bei mir hat sich jetzt gar nichts getan/verändert... hab ich etwas falsch verstanden?!? Dachte im Code bräuchte nichts verändert werden?!?

    Wäre froh, wenn mir jemand einen Tip/eine Hilfe geben könnte.

    Meine Seite:http://www.smp-motorsport.at/index.php/

    lg Stefan

  12. #12
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Schau mal in deine NoobSlider-Einstellungen. Mir scheint, du hast da den Punkt "Navigation aktivieren" nicht angekreuzt.
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  13. #13
    Contao-Nutzer
    Registriert seit
    20.07.2012.
    Beiträge
    6

    Standard

    wow - danke für die rasche Antwort!!

    war wirklich nicht angekreuzt... nach dem aktivieren hat sich aber leider noch immer nichts verändert...

  14. #14
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Doch, da hat sich was geändert: Die Controls sind jetzt da, nur noch nicht an der richtigen Stelle!

    Du musst sie jetzt noch so positionieren wie du sie haben willst, z.B.
    Code:
    .control_buttons {
    position: absolute;
    left: 50%;
    top: 200px;
    }
    Spiel mal mit diesen beiden Werten rum!
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  15. #15
    Contao-Nutzer
    Registriert seit
    20.07.2012.
    Beiträge
    6

    Standard

    also mit .control_buttons spreche ich die nummerierung an... also diese "1 2 3" navigation... (hoffe man versteht was ich meine...)

    aber von den Pfeilen ist nichts zu sehen... (steh' ich grad voll am Schlauch oder wie?!?)

  16. #16
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    also mit .control_buttons spreche ich die nummerierung an... also diese "1 2 3" navigation
    Korrekt!

    Für die Pfeile brauchst du auch zusätzlich noch die Grafiken und musst deinem Slider (wenn du obigen Code 1:1 übernehmen willst) die Klasse "noobWrapper " geben.

    Schau dir am besten mal die Stelle auf der Originalseite (http://www.frankdaniels.de) im Firebug an und vergleiche mit deinem Code.
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  17. #17
    Contao-Nutzer
    Registriert seit
    20.07.2012.
    Beiträge
    6

    Standard

    ahh ... jetzt glaub ich hab ichs - zumindest mit der navigation (1 2 3) klappts schon...

    mit dem pfeil spiel ich mich jetzt noch... als anfänger hats man ganz schön schwer

    aber vielen vielen dank für die tolle hilfe!!

  18. #18
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Das wird schon!
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  19. #19
    Contao-Nutzer
    Registriert seit
    23.11.2009.
    Beiträge
    13

    Standard

    Ich versuche gerade den Text der Navigation Buttons weg zu schieben, was mir aber nicht gelingen will.

    weder

    .ce_noobSlide_button noch
    .ce_noobSlide_button span
    verändern mit text-indent:-9999px

    etwas an der Position der der Bildnummern.

    Über .control_buttons
    bekomme ich zwar den Text verschoben, aber dann ist auch meine Hintergrundgrafik weg.

    Was mach ich denn da falsch?

    Danke für Euere Hilfe.

  20. #20
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Texteinrückung ist für Absätze (paragraphs, Ps) gedacht. Du kannst ein Wort innerhalb eines Absatzes nicht einrücken, das macht keinen Sinn.

    Formatiere die SPANs mit display:inline-block;, oder display:block, oder float:left, dann werden Sie wie ein Absatz behandelt und man kann Text dann auch einrücken.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  21. #21
    Contao-Nutzer
    Registriert seit
    23.11.2009.
    Beiträge
    13

    Standard

    Sehr gut, kaum macht man es richtig, funktioniert es.

    Vielen Dank...

  22. #22
    Contao-Nutzer
    Registriert seit
    25.09.2012.
    Beiträge
    26

    Standard

    Nach etwas "einlesen" konnte ich auch selbst sogar die Kästchen erstellen.

    Mein Problem ist aktuell, dass der sogenannte "Active-Wert" nicht funktioniert. Habe den Code von dieser Seite (oben) reinkopiert. Nur leider funtkioniert die Änderung beim Aktiven Element dann nicht. Was mache ich falsch? wieso funktioniert der "Active-Wert" nicht?

    Hoffe es kann mir jemand von euch helfen.

    Danke schon mal :-)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •