Probleme mit Custom CSS Wordpress

[Jenny]

Hallo :)

Ich habe ein Problem mit meinem Wordpress Blog und weiß wirklich nicht mehr weiter. Da habe ich gehofft, hier Hilfe zu finden! :)

Das Theme des Blogs findet ihr hier: http://glimmer.softhopper.net/exemple/

Rechts ist die Sidebar mit den einzelnen Blöcken, diese Färbe ich mit Custom CSS folgendermaßen um:

#header-middle {
    background: #000000;
}

Das funktioniert auch problemlos. Allerdings sieht man dann, dass hinter der Überschrift und den Streifen rechts und link wohl noch ein "Farbfeld" liegt:

Den Hintergrund der Streifen kriege ich mit

.widget-title {
    background: #000000;
}

problemlos hin. Aber der Text will so einfach nicht mitspielen :(

Der Original-Code sieht folgendermaßen aus:

<aside id="glimmer_about_me-2" class="widget clearfix widget_glimmer_about_me">
<div class="widget-title-area">
<h5 class="widget-title">
<span>Über mich</span>
</h5></div>

Ich nehme an, ich muss das <span> ansprechen? Nur wie? Am liebsten würde ich die Streifen auch noch einfärben können, hier weiß ich aber auch nicht wie. Aber vorerst würde auch der einheitliche Hintergrund reichen ;)

Hat jemand eine Idee und kann mir helfen? Vielen lieben Dank schonmal!

[oliver.d.]

Hi Jenny,

semantisch gesehen macht das span in der Überschrift mit der Ordnung h5 keinen Sinn sofern nach dieser kein weitere Text folgt.
Lass das span weg und sprich die Überschrift mit der Klasse an.
So würde ich das machen.

<aside id="glimmer_about_me-2" class="widget clearfix widget_glimmer_about_me">
<div class="widget-title-area">
<h5 class="widget-title">
<span>Über mich</span>
</h5></div>

Lg Oliver

[Jenny]

Hi Jenny,

semantisch gesehen macht das span in der Überschrift mit der Ordnung h5 keinen Sinn sofern nach dieser kein weitere Text folgt.
Lass das span weg und sprich die Überschrift mit der Klasse an.
So würde ich das machen.

<aside id="glimmer_about_me-2" class="widget clearfix widget_glimmer_about_me">
<div class="widget-title-area">
<h5 class="widget-title">
<span>Über mich</span>
</h5></div>

Lg Oliver

Hi Oliver, Danke für deine Antwort. Leider kann ich aber im Original Code nichts ändern (bzw will ich das nicht, bevor es mir sonst alles verhaut). Wie geschrieben, handelt es sich um ein WordPress Theme - ich kann also nur per costum css Eingabe die einzelnen Punkte ansprechen und ändern. In den original Code will ich nicht rein, bevor am Ende dann das ganze theme nicht mehr funktioniert - und ich weiß auch gar nicht wo ich diesen Teil in den ganzen Php Seiten und/oder dem Style.css finde.

Gibt es noch eine Idee wie ich das ansprechen kann ohne im Original Code rumzuschreiben?

Danke! :)

[oliver.d.]

Hi Jenny,

ansprechbar wäre das span so:

div.widget-title-area h5.widget-title span{
  ...
}

Frohe Weihnachten

[Der Martin]

Hallo,

ansprechbar wäre das span so:

div.widget-title-area h5.widget-title span{
  ...
}

das stimmt, aber ich vermute, dass die Hintergrundfarbe nicht vom span-Element herrührt, sondern vom h5-Element (wobei mir schleierhaft ist, warum h5 hier nochmal in einen div-Container gepackt wird). Aber die Selektierung wäre entsprechend.

Um genauer zu sagen, welches Element da nun für welchen Farben und Hintergründe verantwortlich ist, müsste man das gezielt untersuchen, z.B. mit Firebug oder sonstigen Developer-Tools des jeweiligen Browsers.

So long,
 Martin

[oliver.d.]

Hallo Martin,

verantwortlich ist im style dieser Teil:

media="all"
.widget .widget-title:before {
    background: #ebf1ef;
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    left: 0;
    top: 50%;
    margin-top: -4px;
}

Vielleicht kann Jenny und sollte Jenny diesen Teil im css suchen und ggfs. anpassen. Das Layout zerstören wird sie damit sicher nicht.

in diesem Sinn, oliver.d.

[Jenny]

Hallo Martin,

verantwortlich ist im style dieser Teil:

media="all"
.widget .widget-title:before {
    background: #ebf1ef;
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    left: 0;
    top: 50%;
    margin-top: -4px;
}

Vielleicht kann Jenny und sollte Jenny diesen Teil im css suchen und ggfs. anpassen. Das Layout zerstören wird sie damit sicher nicht.

in diesem Sinn, oliver.d.

Vielen lieben Dank!

Ich hätte noch eine weitere Frage, vll. könnt ihr mir da weiterhelfen, der Entwickler des Themes hat mir bisher nicht weiterhelfen können bzw. antwortet nicht... :(

Bei diesem Theme gibt es ein Hintergrund-Bild, das sich dem Browser Fenster anpasst. Das funktioniert am Desktop PC auch problemlos. Nur in der Ansicht mit Smartphone und Tablet wird das Bild total vergößert und dadurch auch nur ein kleiner Bildauschnitt gezeigt. Hier ->

In der style.css finde ich bei den Befehlen für Responsive nichts über das Hintegrundbild, wenn ich dort was einfüge passiert nichts. Und ansprechen über Custom CSS geht auch nicht (ich weiß auch nicht genau wie ich style=background anspreche).

Das hier ist der Code der Seite:

<div id="featured" class="feature-area" style="background:url(http://glimmer.softhopper.net/exemple/wp-content/uploads/2015/11/featured1.jpg)">

Und das steht allgemein im style.css:

#featured {
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-attachment: fixed !important;
  padding: 75px 0 115px;
  position: relative;
  overflow: hidden;
  height: 100%;
}

Habt ihr eine Idee?

Und wenn ich schon dabei bin: Eigentlich würde ich die Hintergrund Bilder gerne zufällig wechseln lassen. Kann ich das nur über CSS lösen oder dann doch mit Javascript? Ich hab schon viele Codes dafür gefunden, hab aber keine Ahnung was bei mir bei dem Theme überhaupt funktionieren würde und wo ich was einfügen muss.. -_-

LG Jenny

[oliver.d.]

Hallo Jenny,

... der Entwickler des Themes hat mir bisher nicht weiterhelfen können bzw. antwortet nicht... :(

Schlechter Support.

Bei diesem Theme gibt es ein Hintergrund-Bild, das sich dem Browser Fenster anpasst. Das funktioniert am Desktop PC auch problemlos.

Scheint kein responsives Design zu sein.

Eines der Zauberwörter heißt Image Crop in Verbindung mit jQuery oder du erstellst für die unterschiedlichen Auflösungen angepasste Bilder und das angepasste css (Media Queries).

Und wenn ich schon dabei bin: Eigentlich würde ich die Hintergrund Bilder gerne zufällig wechseln lassen. Kann ich das nur über CSS lösen oder dann doch mit Javascript? Ich hab schon viele Codes dafür gefunden, hab aber keine Ahnung was bei mir bei dem Theme überhaupt funktionieren würde und wo ich was einfügen muss.. -_-

Da du mit wordpress arbeitest solltest du dir die functions.php mal genauer anschauen, in Kombination mit wp_enqueue_style und wp_enqueue_script. NivoSlider ist nur ein netter Slider von vielen.

Etwas als Anmerkung noch: Wordpress, bzw. die vielen Themes sind leider nicht nur Text anpassen und Bilder austauschen. Die Themeanpassung ist wie in jedem anderen CMS auch zum Teil mit der ein oder anderen Hürde verbunden. Die Grundlagen von css, php und des genutzten CMS sollten da also sitzen. Sonst sieht es mau aus mit dem angepassten Theme.

LG oliver.d.

[Jenny]

Hi Jenny,

ansprechbar wäre das span so:

div.widget-title-area h5.widget-title span{
  ...
}

Frohe Weihnachten

#Perfekt! Vielen vielen Dank!

Hättest du vll. auch noch eine Idee für diese Striche, wie ich die einfärben könnte? ;)

Dir auch frohe Weihnachten! :)

[oliver.d.]

Jenny,

Hättest du vll. auch noch eine Idee für diese Striche, wie ich die einfärben könnte? ;)

Hier wirst du fündig.

LG

[Jenny]

Jenny,

Hättest du vll. auch noch eine Idee für diese Striche, wie ich die einfärben könnte? ;)

Hier wirst du fündig.

LG

Danke, hatte das übersehen. Hintergrund und Striche habe ich übrigens jetzt so angesprochen (das eine wurde mir nach langem hin und her vom Entwickler geschickt):

#secondary .widget .widget-title > span
{
    background: #f6faf5 !important;
}

.widget .widget-title:before {
    background: #dbedda;
}