Eigene Seiten Items erstellen

  • Hallo Zusammen,

    wenn ich an meienr Seite herumbastle, kann ich mit Wordpress (bzw. BeTheme) Items als Elemente meiner Seite hinzufügen.

    Bei mir hab ich z.B. bei der Icon Box eingestellt , dass dieser Strich, der das Item von dem Text trennt, blau ist. Dies bräuchte ich nun aber nochmal in Rot und Grün, müsste also zwei neue "Item Boxes" erstellen, wo ich an dem Code rumspielen kann. Ich komm im moment nicht an den Code von der Icon Box heran und selbst wenn, diese Änderung sich ja auf alle Icon Boxes auswirken würde, daher würde ich gerne eigene Items erstellen

    Geht das Erstellen eigener Eitems indem man besthende kopiert und leicht verändert? Falls ja, wie?

    Vielen Dank und freundliche Grüße!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hallo Bapo, danke für deine Antwort, aber das trifft es leider nicht ganz. Was ich meine ist folgendes.

    Die Drei Bereiche in http://www.quality-lifestyle.de/#Angebot wurden mit Wordpress / BeTheme erstellt und zwar indem ich auf der Seite "Start" drei nebeneinanderliegende "Icon Boxes" eingefügt habe, bei welchen ich jeweils das Bild wählen konnte und den Text dazu schreiben konnte.

    Dieser blaue Strich, der bei einem Mouseover über das Bild zwischen Bild und Text angezeigt wird, ist automatisch da drin und scheint von der Icon Box selbst generiert zu werden. Bei den Farbeinstellungen habe ich scheinbar global alles auf meinen Blauton gesetzt.

    Was ich nun aber brauche ist, dass genau dieser Strich im Bereich Food & Fitness grün ist und im Bereich Attraction rot. DAher habe ich gedacht, muss man evtl. eigene Icon Boxen definieren mit diesen eigenschafte.

    ODer wie manipuliere ich nur die Farbe dieser besonderen Icon Boxes?

  • Hallo Freunde,

    nachdem mir dieses Forum dabei geholfen hat alle meine Design Probleme zu lösen (Nochmals vielen Dank dafür an jeden einzelnen, hab dabei viel gelernt!), ist das das letzte Thema, was noch offen geblieben ist.

    Für Hinweise zur Problemlösung bin ich sehr dankbar!

  • gib mal einen Link, eventuell gibts eine CSS Lösung dafür, dann musst nicht an Funktionen rumwerken..

  • DAnke schon mal für den Hinweis, mein Problem ist nur dass ich ja drei verschiedene Icon Boxen brauche oder jeder Icon Box individuell sagen muss auf welchen style sie zugreifen muss. Wenn ich das so ändern ändere ich das ja für alle aber ich brauch ja drei verschiedene Icon Box Designs

  • DAnke schon mal für den Hinweis, mein Problem ist nur dass ich ja drei verschiedene Icon Boxen brauche oder jeder Icon Box individuell sagen muss auf welchen style sie zugreifen muss. Wenn ich das so ändern ändere ich das ja für alle aber ich brauch ja drei verschiedene Icon Box Designs 

    ja CSS kann zählen mit nth-child-of oder nth-type-of

    https://css-tricks.com/the-difference…nd-nth-of-type/

    https://css-tricks.com/almanac/selectors/n/nth-of-type/

    http://www.w3schools.com/cssref/sel_nth-of-type.asp

  • Monika Lösung ist die Einfachste. Alternativ kannst du jeder einzelnen Box im Page-Builder auch eine individuelle Klassen zuordnen. Über diese lassen sich dann die Boxen einzeln via CSS ansprechen.

  • Nochmals Hallo,

    ich hab mitlerweise verstanden, dass man mit css auch Elemente einer classe auch einzeld anwählen kann durch die Nummer, aber wie ich das in meinem Fall anwende versteh ich einfach nicht.

    Nehme ich Presscodes code, so werden alle drei sStricke grün, was schon mal ein Fortschritt ist, d.h. das ist der richtige Befehl zum anwählen. WIll ich jetzt aber nur das Zweite, geht nichts mehr

    CSS
    .icon_box .desc_wrapper h4::before:nth-of-type(2) {
        background-color: #476702 !important;
    }

    Hab das ":nth-of-type(2)" an jeder erdeklichen Position versucht (.icon_box:nth-of-type(2).desc_wrapper h4::before { .... .icon_box.desc_wrapper:nth-of-type(2) h4::before {....) und es auch mit nth-child(2) ausprobiert, aber verstehe leider immer noch nicht wie ich die Icon Boxes anwählen kann :-(

  • Leider noch nicht Monika. Mir geht es um den Strich bei dem Mouseover, der ist bei allen dreien Grün im Moment, dafür brauch ich die individuelle Anwahl mit den nth-child etc, dass klappt aber nicht, wie meinem vorherigen Post zu entnehmen ist :-(

  • heidenei

    auf den ersten Blick find ich nicht wo das definiert ist, das tät dauern bei den zig CSS Dateien, die da im Einsatz sind...

    ich würde vermutlich auch nicht Stunden danach suchen, wenn es mir gehören tät :-)

  • Hmm ich schon bin detailverliebt :D

    Außerdem hab ich das Gefühl bin ich bereits kurz vor der Lösung, ich muss nur noch verstehen wie ich die Icon Boxes dazu bekomme, dass nur die zweite den folgenden Befehl annimmt, und nur die Dritte das Selbein rot:

    CSS
    .icon_box .desc_wrapper h4::before:nth-of-type(2) {
        background-color: #476702 !important;
    }

    Nach wie vor bin ich über Hilfe sehr dankbar, aufgeben möchte ich nicht, für den Leien ist das wirklich schwer das nth-of-type(2) zum Laufen zu bekommen, da sich das hier komplexer gestaltet als in den Beispielen die ich gelesen habe...

  • Ich peil es immer noch nicht: Irgendiw denke ich, brauche ich ein übergeordnetes Element, wo alle drei Icon Boxes als Kinder enthalten sind, um dann in diesem übergeordneten Element zu sagen, ich brauche die zweite Icon Box dieser Art...mit dem Befehl darüber agiert der nur innerhalb der Elemente in der Icon Box, aber dafür leider für alle Icon Boxes gleichzeitig, sprich wenn ich so wie oben im Code sage "[COLOR=#333333]:nth-of-type(2)", färbt er in jeder Icon Box das Zweite Element, was ich aber will ist eine Färbung nur inder zweiten Icon Box!

    Kann mir bitte jemand helfen der sich damit auskennt?[/COLOR]

  • ja weil du das anschaffst :-)
    du sagst ja dem zweiten h Element färbe dich um und nicht, also du läßt innerhalb einer Box die h Tags zählen und nicht die Box...

    der zweiten ICONs box....

  • Code
    .column_icon_box:nth-of-type(2) .icon_box .desc_wrapper h4::before {

    n-th child geht auch, ohne das jetzt zu vertiefen..

    Jetzt solltest du alle Waffen haben die Du brauchst!

  • Sauber Presskopp!!! Mega Dank :-*

    Der Code ist der Gewinner:

    CSS
    .column_icon_box:nth-of-type(2) .icon_box .desc_wrapper h4::before {
        background-color: #476702 !important;
    }

    Die Transferleistung auf die Article Boxes ist mir aber leider noch nicht komplett gelungen, ich hab es geschafft schon mal den Balken von blau in grün zu Färben, jedoch für alle drei Article Boxen unten auf der Seite

    CSS
    .article_box .desc_wrapper p::after{
        background-color: #476702 !important;
    }

    Möchte ich nun analog zu den Icon Boxe auch nur die zweite Grün haben, greift der folgende Code leider nicht, obwohl das doch eigentlich nach der selben Logik gehen müsste, oder?

    CSS
    [COLOR=#333333].column_article_box:nth-of-type(2) [/COLOR].article_box .desc_wrapper p::after{
        background-color: #476702 !important;
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!