Header Box Hemingway Theme modifizieren

top_griz@rock.com

Hi, wollte die schwarze Header Box der WP Hemingway Theme modifizieren. Momentan wird es bei downscrolling durchsichtig,-das ist gut.
Wollte aber die Farbe der Box ändern und auch die Box schon in der Grundposition durchsichtig gestalten.

Wahrscheinlich liegt der Ansatz im Header CCS code der Seite:

Code

/* -------------------------------------------------------------------------------- */
/*    3. Header
/* -------------------------------------------------------------------------------- */




.header-cover { overflow-y: hidden; }


.header {
    padding: 100px 0;
    background: no-repeat center;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}


.header-inner { position: relative; z-index: 2; text-align: center; }


.blog-logo { display: inline-block; }


.blog-logo a,
.blog-logo img { display: block; }


.blog-logo img {
    max-height: 250px;
    width: auto;
    max-width: 100%;
    height: auto;
}


.blog-info {
    display: inline-block;
    padding: 30px;
    background: #1d1d1d;
}


.blog-title { 
    width: 100%; 
    text-align: center; 
    font-family: 'Raleway', sans-serif;
}


.blog-title a {
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    font-size: 1.75em;
}


.blog-description:before {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin: 20px auto;
}


.blog-description {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-weight: 300;
}


/* Nav-toggle --------------------------------------- */

Alles anzeigen

Für Infos zur zu ändernden Codestellen würde ich mich freuen.

PS: Im WP Editor zeigt sich nur dieser CSS code-damit ist es wohl nicht der ganze code der Seite?

Werbepost

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

SEpp55

Bei der blog-info die Hintergrundfarbe als rgba - Wert einstellen - letzter Wert ist die Opacity (Tranaparenz).
.blog-info {
background: rgba(76, 175, 129, 0.7;
}

Die Änderung (wie fast immer) unter Design - Customizer - Zusätzliche CSS vornehmen!!

danielgoehr

Zitat von SEpp55

Bei der blog-info die Hintergrundfarbe als rgba - Wert einstellen - letzter Wert ist die Opacity (Tranaparenz).
.blog-info {
background: rgba(76, 175, 129, 0.7;
}
Die Änderung (wie fast immer) unter Design - Customizer - Zusätzliche CSS vornehmen!!

Hier fehlt eine geschlossene Klammer.

Code

.blog-info {
    background: rgba(76, 175, 129, 0.7[b])[/b];
}

SEpp55

Danke!

Hatte zuerst ..., 0.8 mit Klammer - da kam dann ein Smilye. Nach der Änderung auf 0.7 achtete ich nicht auf die Klammer. ;-)

top_griz@rock.com

Hi, danke. Habe den Traparenzwert geändert, hat aber das Transparenzverhalten nicht geändert. Die schwarze header-box im Bild wirh beim downscroll der ersten Seite der Webseite graduell transparent. Ich wollte es so einrichten dass die zuerste solid schwarze Box auch in der Grundposition (ohne downscroll) schon etwas Transparent angezeigt wird. Ich habe im NAVIGATION Teil des Stylesteehts weitere Transparence-Werte gefunden die einstellbar sind, - welchen Bezug haben diese Werte zur Box:

Code

/* -------------------------------------------------------------------------------- */
/*    4. Navigation
/* -------------------------------------------------------------------------------- */




.mobile-menu { display: none; }


.blog-menu li { position: relative; }
.blog-menu > li { float: left; }


.blog-menu > li:before {
    content: "/";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px;
    margin-left: -3px;
    font-size: 16px;
    color: #444;
    font-weight: 300;
    z-index: 1000;
}


.blog-menu > li:first-child:before { content: none; }


.blog-menu a {
    display: block;
    padding: 27px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}


.blog-menu a:hover,
.blog-menu .current-menu-item a { color: #FFF; }


.blog-menu > .has-children a,
.blog-menu > .page_item_has_children a { padding-right: 35px; }


.blog-menu > .has-children::after,
.blog-menu > .page_item_has_children::after {
    content: "";
    display: block;
    border: 5px solid transparent;
    border-top-color: rgba(255,255,255,0.4);
    position: absolute;
    z-index: 1001;
    right: 17px;
    top: 50%;
    margin-top: -2px;
}


.blog-menu > .has-children:hover::after,
.blog-menu > .page_item_has_children:hover::after { border-top-color: #FFF; }


.blog-menu li:hover a {
    background-color: #1D1D1D;
    cursor: pointer;
}


.blog-menu li:hover > a { color: #FFF; }




/* Sub menus --------------------------------------- */




.blog-menu ul {
    position: absolute;
    left: -9999px;
    display: none;
    z-index: 999;
}


.blog-menu ul li {
    float: none;
    display: block;
}


.blog-menu ul > .has-children::after,
.blog-menu ul > .page_item_has_children::after {
    content: "";
    display: block;
    border: 6px solid transparent;
    border-left-color: rgba(255,255,255,0.1);
    position: absolute;
    z-index: 1001;
    right: 10px;
    top: 50%;
    margin-top: -5px;
}


.blog-menu ul > .has-children:hover::after,
.blog-menu ul > .page_item_has_children:hover::after { border-left-color: #FFF; }


.blog-menu ul li {     
    width: 240px; 
    background: #1d1d1d;
}


.blog-menu ul a {
    padding: 20px 0px;
    margin: 0 20px;
    line-height: 130%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}


.blog-menu ul > li:last-child a { border-bottom-width: 0; }


.blog-menu li:hover > ul {
    opacity: 1;
    left: 0;
    display: block;
}




/* Deep down --------------------------------------- */




.blog-menu ul li:hover > ul {
    top: 0;
    left: 240px;
    margin-left: 0;
}




/* -------------------------------------------------------------------------------- */

Alles anzeigen

SEpp55

Jetzt wäre ein Link zu deiner Seite hilfreich, um zu sehen warum das so nicht geht!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header Box Hemingway Theme modifizieren

Jetzt mitmachen!