Ergebnis 1 bis 1 von 1

Thema: Overlay Farbe in Wordpress Custom CSS ändern

  1. #1
    HTML Newbie
    Registriert seit
    16.02.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Overlay Farbe in Wordpress Custom CSS ändern

    Liebe Comunity,
    Ich bin, wie manche hier, ein Anfänger. Ich habe zwar ein wenig Vorkenntnisse in HTML und CSS, doch beim aktuellen Problem stoße ich an meine Grenzen.
    Ich bin grade dabei eine Seite mit einem Portfolio auszubauen. Dafür benutzte ich Media Grid Portfolio Plugin. Dazu noch ein Media Grid Overlay Manager Add-on.
    Das Problem ist, dass Overlay Manager Add-on nur ein Overlay-Design pro Grid erlaubt. Ich hätte doch gerne, dass die einzelnen Items die Overlays in unterschiedlichen Farben (on hover) haben – sprich, Overlays sollten sich nur in der Farbe unterscheiden.
    Ich habe mir jede Menge Videos und Forumbeiträge zu dem Thema angesehen. Doch alle meine Versuche es über Custom CSS Funktion im Plugin zu machen, haben nichts gebracht.
    Hier ist die Testseite, wo ich die Einstellungen teste: http://testseite24-7.de/
    „Elements Legend“ des Plugins kopiere ich am Ende des Nachrit rein.

    Ich habe bis lang ID der Items (Galerien) als Selector genommen. Wenn ich es richtig verstehe, muss ich eigentlich nur die Farbe für das jeweilige Item ändern. Ob ich da richtig liege… Ich habe bis lang geschafft, über Custom CSS Option die Farben aller Items zu verändern (was man in den Einstellungen ohnehin machen kann), in dem ich Zeilen 1023 bis 1027 (rot markiert unten) rüberkopiert und die Farbe geändert haben. Ich Benutze Overlay Class .mgom_18_0 /* full_img_layer */ (ab Zeilen 986). Den Codeabschnitt füge ich hinzu.

    Code:
    /* ***** 18 - test OVERLAY ***** */ 
      
            .mgom_18_0 { /* full_img_layer */
                    top: 0px; left: 0px;
                        background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                    
                        transition: all 400ms ease 0s;
                        -webkit-transition: all 400ms ease 0s; /* older webkit */
                        -ms-transition: all 400ms ease 0s;                    
                z-index: 890; 
            }
            .mg_box:hover .mgom_18_0 {
                    top: 0px; left: 0px;
                        background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                    
            }
            
            .mgom_18_1 { /* descr */
                    text-align: left;
                        font-size: 14px;                    
                        color: #222222;line-height: 19px;                    
            }
    
    
            .mg_box:hover .mgom_18_1 {                
                        color: #383838;
            }
            
    .mgom_18_2 { /* txt_block */                top: 0px; left: 0px;
                        background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                    
                        transition: all 0ms ease 0s;
                        -webkit-transition: all 0ms ease 0s; /* older webkit */
                        -ms-transition: all 0ms ease 0s;                    
            }
    
    
            .mg_box:hover .mgom_18_2 {
                    top: 0px; left: 0px;
                        background-color: #7af08c;opacity: 0.7; filter: alpha(opacity=70);                    
            }
            
        .mgom_18_3.mgom_txt_wrap {
            top: 0px; left: 0px;            
                        transition: all 0ms ease 0s;
                        -webkit-transition: all 0ms ease 0s; /* older webkit */
                        -ms-transition: all 0ms ease 0s;        
            
        }
        
        .mg_box:hover .mgom_18_3.mgom_txt_wrap {
            top: 0px; left: 0px;    
        }

    Ich wäre Euch für jede Hilfe, jeden Ratschlag sehr dankbar!!!!!
    Gruß!

    Element Legend
    mg_filter Grid filter container (each filter is a <a> element, each separator is a <span> element)
    .mg_grid_wrap Grid container
    .mg_box Single item box
    .mg_overlay_tit Main overlay title
    .mg_title_under Title under item
    #mg_full_overlay_wrap Lightbox - Full page overlay
    .mg_item_load Lightbox - Item loader during the opening
    #mg_overlay_content Lightbox - Item body
    #mg_close Lightbox - Close item command
    #mg_nav Lightbox - Item navigator container
    .mg_item_title Lightbox - Item title
    .mg_item_text Lightbox - Item text
    .mg_cust_options Lightbox - Item options container (each option is a <li> element)
    .mg_socials Lightbox - Item socials container (each social is a <li> element)
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von NewHere (16.02.2016 um 23:16 Uhr)

Ähnliche Themen

  1. Homepageränder Farbe ändern wie?
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 01.06.2013, 13:29
  2. Farbe ändern?
    Von Anonym im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 13.04.2008, 20:07
  3. Firefox Farbe ändern
    Von Minksi im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 10.07.2007, 23:05
  4. titel farbe ändern
    Von gast im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 21.04.2005, 19:53
  5. Farbe ändern
    Von Starter im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 24.01.2005, 16:12

Stichworte

Berechtigungen

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