Theme Origami Evergreen Header/Textfeld/Footer transparent machen

(@towolf)

Hallo, arbeite mit dem Origami Evergreen Theme und möchte die Menüleiste sowie das Textfeld und den Footer transparent bzw. transparenter machen.Vielleicht kann mir jemand sagen, wo ich was im css ändern muss. Meine Seite läuft momentan nur im localhost, daher hier mal die original Origami Evergreen style.css:

/*
Theme Name: Origami Evergreen
Theme URI: http://siteorigin.com/theme/origami/
Description: Origami Evergreen is an Origami child theme that gives Origami a unique, earthy feel. It'd work great for green and organic brands. Just like Origami it's responsive and because of its Page Builder integration - you can use it for anything from a simple photo blog to a full business website.
Author: SiteOrigin
Author URI: http://siteorigin.com
Template: origami
Version: 1.0
Tags: brown, light, yellow, one-column, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, post-formats, theme-options, threaded-comments, translation-ready, photoblogging
*/
#page-container {
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  border: none;
  margin-bottom: 0;
  padding: 30px 3.5%;
  background: #fbf9f5;
}
#main-menu-wrapper > div > ul {
  margin-bottom: -30px;
  margin-top: 30px;
  background: #8ca354;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #6e8739), color-stop(1, #8ca354));
  background: -ms-linear-gradient(bottom, #6e8739, #8ca354);
  background: -moz-linear-gradient(center bottom, #6e8739 0%, #8ca354 100%);
  background: -o-linear-gradient(#8ca354, #6e8739);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ca354', endColorstr='#6e8739', GradientType=0);
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-topleft: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 6px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.1);
  border-top: 1px solid #758c3e;
  border-left: 1px solid #688234;
  border-right: 1px solid #688234;
  zoom: 1;
}
#main-menu-wrapper > div > ul:before {
  content: '';
  display: block;
}
#main-menu-wrapper > div > ul:after {
  content: '';
  display: table;
  clear: both;
}
#main-menu-wrapper > div > ul > li {
  display: block;
  float: left;
  position: relative;
}
#main-menu-wrapper > div > ul > li .dropdown-icon {
  display: inline-block;
  width: 11px;
  height: 7px;
  background: none;
  float: right;
  margin: 3px 0 0 12px;
}
#main-menu-wrapper > div > ul > li a {
  display: inline-block;
  padding: 18px 25px;
  color: rgba(42, 54, 59, 0.72);
  font-weight: bold;
  text-decoration: none;
  position: relative;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.375);
  -webkit-transition: color 0.35s ease;
  -moz-transition: color 0.35s ease;
  -o-transition: color 0.35s ease;
  transition: color 0.35s ease;
}
#main-menu-wrapper > div > ul > li > a:before {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  height: 100%;
  width: 2px;
  background: url(images/menu-sep.png) repeat;
}
#main-menu-wrapper > div > ul > li ul {
  display: none;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 50%;
  margin-left: -100px;
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
#main-menu-wrapper > div > ul > li ul ul {
  top: 0;
  left: 100%;
  margin-left: 0px;
}
#main-menu-wrapper > div > ul > li:hover > a {
  color: #1f3700;
}
#main-menu-wrapper > div > ul > li:hover > ul {
  display: block;
}
#main-menu-wrapper > div > ul > li li {
  float: none;
  position: relative;
  background: rgba(42, 54, 59, 0.72);
  -webkit-box-shadow: inset 0 1px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: inset 0 1px 0px rgba(0,0,0,0.15);
  box-shadow: inset 0 1px 0px rgba(0,0,0,0.15);
  font-size: 12px;
  font-weight: 500;

#main-menu-wrapper > div > ul > li li a {
  color: #e0d9ce;
  padding: 18px 15px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
#main-menu-wrapper > div > ul > li li:hover {
  background: #625e53;
}
#main-menu-wrapper > div > ul > li li:hover a {
  display: block;
}
#main-menu-wrapper > div > ul > li li:hover > ul {
  display: block;
}
#main-menu-wrapper > div > ul > li:first-child a {
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-topleft: 6px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 6px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#origami-evergreen-wrapper {
  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 5px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#logo {
  margin: 30px 0;
}
#logo h1 {
  font-family: "Roboto Slab", sans-serif;
  font-weight: 400;
  font-size: 38px;
  color: #403b32;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
#logo h3 {
  color: #635d55;
}
.post .post-info {
  color: #a49e94;
}
.post .post-info a {
  color: #5d5953;
}
.post .below-content {
  background: url(./images/menu-bg.png);
  border-color: #d5c9bf;
}
.post .featured-image {
  margin-bottom: 25px;
  line-height: 0;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.post .content p {
  color: #635d55;
}
.post .content a {
  color: #87a55a;
}
#comments h3.comments-title {
  color: #575249;
}
#comments .comment-container .info .author {
  color: #575249;
}
#comments .comment-container .info .date {
  color: #a49e94;
}
#comments .comment-content {
  color: #635d55;
}
#respond #reply-title {
  color: #575249;
}
#respond .form-allowed-tags,
#respond .logged-in-as,
#respond .comment-notes {
  color: #a49e94;
  font-size: 11px;
}
h1.entry-title,
h1.archive-title,
#footer-widgets h2.widgettitle {
  font-family: "Helvetica Neue";
  font-weight: 200;
}
h1.entry-title,
h1.archive-title {
  color: #575249;
  font-size: 28px;
  margin-top: 0;
  text-shadow: 0 1px 0 #FFFFFF;
}
h1.entry-title a,
h1.archive-title a {
  color: inherit;
}
#footer-widgets {
  margin-top: 0;
  margin-bottom: 30px;
  background: #544f45 url(./images/footer-bg.png);
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 12px;
  font-weight: 500;
}
#footer-widgets #footer-widgets-wrapper {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 3.5%;
  padding-right: 3.5%;
}
#footer-widgets #footer-widgets-wrapper .widget {
  color: #a19d93;
}
#footer-widgets #footer-widgets-wrapper .widget a {
  color: #bab6ab;
  -webkit-transition: color 0.35s ease;
  -moz-transition: color 0.35s ease;
  -o-transition: color 0.35s ease;
  transition: color 0.35s ease;
}
#footer-widgets #footer-widgets-wrapper .widget a:hover {
  color: #87a55a;
}
#footer-widgets h2.widgettitle {
  font-size: 17px;
  color: #d3d0c5;
}
#footer .copyright {
  color: #544f45;
}

Moderationshinweis: Code bitte auch immer als Code auszeichnen. Danke!

Ansicht von 11 Antworten – 1 bis 11 (von insgesamt 11)

Moderator Angelika Reisiger
(@la-geek)

vor 8 Jahren, 6 Monaten

Seite läuft localhost. Das ist schade. So ist schwer irgendetwas zu analysieren. Eine CSS-Datei hilft da wenig. Man kann höchstens sagen, welche Veränderungen auf der Website des Themes durchzuführen wären. Würde das weiterhelfen?

Thread-Starter towolf
(@towolf)

vor 8 Jahren, 6 Monaten

Ich glaube schon, ein Versuch wäre es wert.

Flower33
(@flower33)

vor 8 Jahren, 6 Monaten

Hallo towolf,

du gehst mit deinem Entwicklerwerkzeug im Browser deiner Wahl auf den betreffenden Bereich (rechts anklicken, dann: Element untersuchen) und schaust, was da für eine Hintergrundfarbe vorgegeben ist. Sagen wir mal, es ist #f9f9f9 (für den Bereich #footer-widgets).
Dann gehst du z.B. zu diesem Online-Tool für die Umrechnung von Hexadezimalangaben in rgba-Angaben < http://hex2rgba.devoth.com/ >, gibst dort #f9f9f9 ein und lässt, unter Vorgabe der gewünschten Transparenz (sagen wir mal: 30%), in rgba umrechnen. Als Ergebnis erhältst du „rgba(249, 249, 249, 0.3)“ und gibst dann den Wert zwischen den Hochkommata als neuen Background-Wert für #footer-widgets ein.
Soweit mal mein Tipp für ein mögliches Vorgehen, falls ich dein Anliegen richtig verstanden habe.

Moderator Angelika Reisiger
(@la-geek)

vor 8 Jahren, 6 Monaten

Entwicklerwerkzeuge -> Shortcuts dort -> https://de.forums.wordpress.org/topic/warum-ein-link-zu-deiner-website-wichtig-ist?replies=1

Da wird es nur ein Problem geben: Nach dem theme-header kommt ein margin. Das den Background von body = fastweiß (und macht man den transparent) von html = weiß zeigt. Also zwischen Theme-header und Content ist nichts, da schimmert body durch. Hier müsste man das margin mit padding austauschen. Außerdem liegen die Content-Container auch über einem (fast)weißen body und html. Es bringt also nichts die weißen Flächen der Container transparent(er) zu gestalten, wenn darunter wieder weiß ist. Eventuell ein Hintergrundbild für Body einfügen.

Flower33
(@flower33)

vor 8 Jahren, 6 Monaten

Ich bin mal davon ausgegangen, dass da jeweils etwas (uns wegen der Lokal-Installation visuell nicht Zugängliches) durchscheinen soll 😉

Thread-Starter towolf
(@towolf)

vor 8 Jahren, 6 Monaten

Ja, genau, ich habe ein Hintergrundbild, das durscheinen soll und möchte mit verschiedenen Transparentzen experiementieren. Den Footer hab ich schon hingekriegt, jetzt fehlen noch Textfeld und Menüleiste. Vielen Dank für die Hilfe!!!

Flower33
(@flower33)

vor 8 Jahren, 6 Monaten

Wenn das Ganze auch für spätere Leser dieses Threads auch nur irgendeinen Nutzen haben sollte, dann wäre es meiner Meinung nach angebracht, dass du wenigstens in ein paar Sätzen preisgibst, _wie_ genau du den Footer denn nun hingekriegt hast (du hast die Frage ja nicht nur in diesem Forum gestellt).

Außerdem ist durch deine knappe Rückmeldung nicht klar, ob das Problem nun „resolved“ ist, oder ob du auch für die anderen Elemente jeden Schritt gerne vorgekaut haben möchtest.

Sorry, klingt vielleicht etwas schärfer als gemeint, aber so superknappe, infoarme Rückmeldungen nach Hilfestellung durch mehrere andere Forenmitglieder ärgen mich immer ein bisschen.

Hier noch zwei Linktipps, weil es hier rein um CSS geht:
https://www.google.de/search?q=css+transparenz
https://www.google.de/search?q=css+transparenz+tutorial

Thread-Starter towolf
(@towolf)

vor 8 Jahren, 6 Monaten

Kein Problem, hätte mich schon noch gemeldet, ich sitze nicht die ganze Zeit vorm Laptop ;-), und bin noch voll im Prozess der Angleichung. Den Footer hab ich dank Deiner Hilfe gestern Nacht noch transparent bekommen, in dem ich erstmal mit meine Seite im localhost aufgerufen habe, dann mit dem Cursor auf die betreffende Stelle/Bereich, also den Footer gegangen, rechtsklick Maus, Element untersuchen auswählen und dann zeigt mir der Inspektor im Feld ganz rechts den betreffenden Befehl mit Zeilenangabe in der (Style) css.- Datei an. Dann die CSS Datei im WordPress Ordner unter wp-content/Themes (bei mir die CSS-Dateien von Origami (Elterntheme) und Origami Evergreeen) gesucht und mit Notepad++ geöffnet. Hier habe ich dann den Background auf none; gestellt:

#footer-widgets {
margin-top: 0;
margin-bottom: 30px;
background: none;
padding-top: 30px;
padding-bottom: 30px;
font-size: 12px;
font-weight: 500;
}

Dann ist der ganze Footer-Bereich transparent, wenn man es nur etwas transparent haben möchte, dann muss man statt none eingeben:

rgba(255,255,255,.10);

und dann mit dem Gradienten spielen von 0,00 bis 0,99, (also wie in o.g. Beispiel dann z.B. 0.10)

Ich denke, durch Deine Anleitung kann ich das jetzt auch auf die anderen css.-Befehle anwenden, also sollten Menü und Textfeld kein Problem darstellen, bin nur noch nicht dazu gekommen und melde mich gerne wieder, sollte ich doch Probleme bekommen.

Ganz, ganz vielen Dank nochmal!!!

Flower33
(@flower33)

vor 8 Jahren, 6 Monaten

Schön, dass es geklappt hat und danke schön für die Rückmeldung. 😉
Mir ist nicht ganz klar, wie das beim Origami-Theme geregelt ist und in welchem Verhältnis dazu das genannte Evergreen steht. Falls du die Änderungen in die CSS-Datei des Parent-Themes eingetragen hats, ist das keine gute Idee, weil sie dann beim nächsten Update weg sind.

CSS-Änderungen entweder in die CSS-Datei des Child-Themes (falls damit gearbeitet wird) oder in den Custom-CSS-Bereich deines Themes (falls es dort so etwas gibt), oder aber mit dem folgenden Plugin realisieren:
https://wordpress.org/plugins/simple-custom-css/
Dann sind sie auch noch nach dem nächsten Update da.;-)

Bezüglich CSS und Transparenz schau dir mal auch noch einige der o.g. verlinkten Artikel zu CSS und Transparenz an, falls du deine Seite auch noch für einige ältere Browser ansehnlich gestalten willst.

P.S. Bin heute zeitlich etwas unter Druck und daher für heute raus. 😉
P.P.S. Doch noch eins: Und denk dran, die verschiedenen Hintergründe auch abzusichern, falls die Hintergrundbilder, aus welchen Gründen auch immer, nicht geladen werden, sonst hast du u.U. weiße Schrift auf weißem Hintergrund… 😉

Thread-Starter towolf
(@towolf)

vor 8 Jahren, 6 Monaten

Ja, nochmal Danke für die Hinweise. Ich habe tatsächlich sozusagen 2 style.css Dateien, je vom Eltern und vom Kind Theme, in Beiden musste ich Änderungen vornehmen. Schau mir das mal an was Du geschickt hast mit dem Custom CSS Bereich, das wäre sicher gut.

Flower33
(@flower33)

vor 8 Jahren, 6 Monaten

Ich habe tatsächlich sozusagen 2 style.css Dateien, je vom Eltern und vom Kind Theme, in Beiden musste ich Änderungen vornehmen. Schau mir das mal an was Du geschickt hast mit dem Custom CSS Bereich, das wäre sicher gut.

Ja, beachte diese Tipps auf jeden Fall, sonst ist hinterher der Ärger groß. 😉 Außerdem brauchst du die Änderungen nicht in _zwei_ Dateien vorzunehmen, das ist nicht der richtige Weg.

Ansicht von 11 Antworten – 1 bis 11 (von insgesamt 11)

Das Thema „Theme Origami Evergreen Header/Textfeld/Footer transparent machen“ ist für neue Antworten geschlossen.

Theme Origami Evergreen Header/Textfeld/Footer transparent machen

Schlagwörter

Themen

Beliebteste Themen

Themen ohne Antworten

Nicht-Support-Themen

Gelöste Themen

Ungelöste Themen

Alle Themen