Überschrifen Problem !

cologneking71

Hallo !

In meinem Stylesheet steht die h2 Angabe, womit ja die Überschriften formatiert werden.

Bei meinem Theme ist es leider so, daß mit dieser h2 Angabe einmal unter meinem Beitragstitel, die Infos wie z.B. Kategorie (verlinkt) formatiert werden, aber leider auch in der Sidebar die Links zu den Kategorien, letzte Beiträge formatiert werden.

Ich würde aber gerne unterschiedliche Farben hierfür verwenden, aber das geht leider nicht. Man sieht es auf meiner Seite, da beides in orange dargestellt wird.

Könnte mir jemand sagen, wie ich mein Stylesheet ändern muss, damit ich diese Angaben getrennt voneinander formatieren kann ?

Habe schon versucht einfach eine h2a Angabe einzufügen, aber irgendwie funktioniert das nicht und ich komm einfach nicht weiter.

Hier noch mein Stylesheet (hab unwichtige Dinge rausgenommen):

Code

h1, h2, h3 {
    font-family: Arial, Verdana, Sans-Serif;
    font-weight: bold;
    }


h1 {
    font-size: 3.0em;
    display: none;
        text-align: center;
    text-transform: uppercase;
    letter-spacing: normal;
    }


.description {
    font-size: 1.2em;
    text-align: center;
    letter-spacing: normal;
    }


h2 {
    font-size: 1.2em;
        border-bottom: 1px solid #000000;
    }


h2.pagetitle {
    font-size: 1.6em;
    }


#sidebar {
    border-top: 0px solid grey;
    border-bottom: 0px solid grey;
    }


#sidebar h2 {
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 1.2em;
        color: #000000;
        border-bottom: 0px solid #000000;
    }


#sidebar2 {
    border-top: 0px solid grey;
    border-bottom: 0px solid grey;
    }


#sidebar2 h2 {
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 1.2em;
        color: #000000;
    }


h3 {
    font-size: 1.2em;
    }


h1, h1 a, h1 a:hover, h1 a:visited, .description {
    text-decoration: none;
    color: #000000;
    }


h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    color: #000000;
    }


h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
    text-decoration: none;
    }


.entry p a:visited {
    color: #FD5A1E;
    }


.commentlist li, #commentform input, #commentform textarea {
    font: 1.0em Arial, Verdana, Sans-Serif;
    }
    
.commentlist li {
    font-weight: bold;
    }


.commentlist cite, .commentlist cite a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
    }


.commentlist p {
    font-weight: normal;
    line-height: 1.5em;
    text-transform: none;
    }


#commentform p {
    font-family: Arial, Verdana, Sans-Serif;
    }


.commentmetadata {
    font-weight: normal;
    }


#sidebar {
    font: 1.1em Arial, Verdana, Sans-Serif;
    }
#sidebar2 {
    font: 1.1em Arial, Verdana, Sans-Serif;
    }


small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    color: #666666;
    }
    
code {
    font: 1.1em 'Courier New', Courier, Fixed;
    }


acronym, abbr, span.caps
{
    font-size: 0.9em;
    letter-spacing: .07em;
    }


a, h2 a:hover, h3 a:hover {
        color: #cd7c03;
    text-decoration: none;
    }


a:hover {
    color: #333333;
    text-decoration: none;
    }
    
#wp-calendar #prev a {
    font-size: 9pt;
    }


#wp-calendar a {
    text-decoration: none;
    }


#wp-calendar caption {
    font: bold 1.3em Arial, Verdana, Sans-Serif;
    text-align: center;
    }


#wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }
/* End Typography & Colors */


/* Begin Structure */
body {
    margin: 0;
    padding: 0;
    }


/* Alle 3 Spalten */
#page {
        background-image: url(images/bgimg.jpg);
    margin: 0px auto;
    padding: 0px;
    width: 900px;
    border: 0px solid #999999;
    }
    
#header {
        background-image: url(images/header.jpg);
    padding: 0;
    margin: 0 auto;
    height: 200px;
    background-color: #333333;
    }


/* Mittlere Spalte */
.narrowcolumn {
    float: left;
        border-left: 0px solid #999999;
        border-right: 0px solid #999999;
    padding: 0px 25px 20px 25px;
    margin: 0px 0 0;
    width: 460px;
    }


.widecolumn {
    background-color: #ffffff;
        padding: 10px 0 20px 0;
    margin: 5px 0 0 100px;
    width: 550px;
    }


.pagepost {
    margin: 0 0 40px;
    border-top: 0px solid grey;
    }
    
.post {
    margin: 0 0 15px;
    text-align: justify;
    border-bottom: 0px solid grey;
    }


.widecolumn .post {
    margin: 0;
    }


.narrowcolumn .postmetadata {
    padding-top: 5px;
    }


.widecolumn .postmetadata {
    margin: 30px 0;
    }
    
#footer {
        background-image: url(images/footer.jpg);
    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 899px;
        height: 63px;
    clear: both;
    }


#footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
/* End Structure */


/*    Begin Headers */
h1 {
    padding-top: 40px;
    margin: 0;
    }


.description {
    text-align: center;
    }


h2 {
    margin: 20px 0 0;
    }


h2.pagetitle {
    margin-top: 20px;
    text-align: center;
}


#sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }
#sidebar2 h2 {
    margin: 5px 0 0;
    padding: 0;
    }




h3 {
    padding: 0;
    margin: 30px 0 0;
    }


h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
/* End Headers */


/* Begin Lists
Special stylized non-IE bullets
    Do not work in Internet Explorer, which merely default to normal bullets. */


html>body .entry ul {
    margin-left: 0px;
    padding: 0 0 0 30px;
    list-style: none;
    padding-left: 10px;
    text-indent: -10px;
    } 


html>body .entry li {
    margin: 7px 0 8px 10px;
    }


.entry ul li:before, #sidebar ul ul li:before {
    content: "";
    }


.entry ol {
    padding: 0 0 0 35px;
    margin: 0;
    }


.entry ol li {
    margin: 0;
    padding: 0;
    }


.postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
    }
    
#sidebar ul, #sidebar ul ol {
    margin: 0;
    padding: 0 0 20px 0;
        border-bottom: 0px solid grey;
    }


#sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    }


#sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px;
    }


#sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 0px;
    }


#sidebar ul ul ul, #sidebar ul ol {
    margin: 0 0 0 10px;
    }


ol li, #sidebar ul ol li {
    list-style-type: none;
    }


#sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
    }


#sidebar2 ul{
        padding-left: 0;
        list-style-type: none;
        }
/* End Entry Lists */






/* Begin Form Elements */
#searchform {
    margin: 10px auto;
    padding: 5px 3px; 
    text-align: left;
        }


#sidebar #searchform #s {
    width: 130px;
    padding: 2px;
        margin-bottom: 5px;
        background-color: #ffffff;
        border: 1px solid #333333;
        }


#sidebar #searchsubmit {
    padding: 1px;
    background-color: #999999;
    }


.entry form { /* This is mainly for password protected posts, makes them look better. */
    text-align:center;
    }


select {
    width: 130px;
    }


#commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
        background-color: #DDDDDD;
        border: 1px;
        border-style: solid;
        border-color: #999999;
    }


#commentform textarea {
    width: 100%;
    padding: 2px;
        background-color: #DDDDDD;
        border: 1px;
        border-style: solid;
        border-color: #999999;
    }


#commentform #submit {
    margin-right: -6px;
    float: right;
    }
/* End Form Elements */






/* Begin Comments*/
.alt {
    margin: 0;
    padding: 10px;
    }


.commentlist {
    padding: 0;
    text-align: justify;
    }


.commentlist li {
    margin: 15px 0 3px;
    padding: 5px 10px 3px;
    list-style: none;
        border: 1px solid #ddd;
    }


.commentlist p {
    margin: 10px 5px 10px 0;
    }


#commentform p {
    margin: 5px 0;
    }


.nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
    }


.commentmetadata {
    margin: 0;
    display: block;
    }
/* End Comments */






/* Begin Sidebar */
#sidebar         {
    padding: 20px 0 10px 0;
    margin-left: 710px;
    width: 170px;
        background-color: #ffffff;
    }


#sidebar form {
    margin: 0;
    }
/* End Sidebar */


/* Begin Sidebar2 */
#sidebar2
{
        background-color: #ffffff;
    padding: 20px 0 10px 0;
    margin-left: 20px;
    width: 160px;
        float: left;


    }


#sidebar2 form {
    margin: 0;
    }
/* End Sidebar2 */


/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
    cursor: help;
    }


acronym, abbr {
    border-bottom: 1px dashed #999;
    }


blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }


blockquote cite {
    margin: 5px 0 0;
    display: block;
    }
hr {
 display: none;
 }
 
.center {
    text-align: center;
    }


a img {
    border: none;
    }


.navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    }


.entry img, .entrytext img {
    margin: 7px;
    }


.theme {
    font: 80% Arial, Verdana, Sans-Serif;
    text-align: left;    
       }


/* End Various Tags & Classes*/

Alles anzeigen

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

marX

Code

h2 {
color: // Farbe für Beitragstitel
}


#sidebar h2 {
color: // Farbe für Sidebar
}


#sidebar2 h2 {
color: // Farbe für Sidebar2
}

Alles anzeigen

cologneking71

Danke für den Tipp, aber leider bringt es nicht den erwünschten Erfolg.

Ich glaube mein Problem liegt an diesem Codeschnipsel:

a, h2 a:hover, h3 a:hover {
color: #cd7c03;
text-decoration: none;
}

a:hover {
color: #333333;
text-decoration: none;
}

Und zwar sind es die hover-Farben. Die würde ich gerne getrennt voneinander formatieren, nur wie ???

Danke schonmal im voraus.

Olafb

Das ist man einfach ;)

PHP

#sidebar h2 a:hover{
color: // Farbe für Sidebar
}


#sidebar2 h2 a:hover{
color: // Farbe für Sidebar2
}

EDIT Quatsch, die H2 haben doch gar keine Links. Was willst du denn nun? Wenn die Links in der Sidebar gemeint sind denn entferne da oben jeweils die h2

cologneking71

Sorry für das durcheinander :-)

Unter meinem Beitragstitel stehen ja die Infos welcher Kategorie der Beitrag zugeordnet ist und ob Kommentare geschrieben wurden. Diese beiden Links erscheinen in orange und mit einem Hoover in schwarz/grau.
In meiner Sidebar erscheinen die Links unter Kategorien, letzte Beiträge ebenfalls in orange und mit einem Hoover in schwarz/grau.

Das liegt wohl an diesem Codeschnipsel, der immer beides gleichzeitig ändert.

Und das würde ich aber gerne getrennt voneinander formatieren.

marX

Achso, du bist bei den Links selbst, nicht bei den Überschriften. Sags doch. :-D

a {
// Farbe normal
}

a:hover {
// Farbe normal hover
}

#sidebar a {
// Farbe Sidebar normal
}

#sidebar a:hover {
// Farbe Sidebar hover
}
#sidebar2 a {
// Farbe Sidebar2 normal
}

Jetzt klarer? Die Stichworte sind "Kaskade" und "Spezifität".

cologneking71

Super, vielen Dank.

Genau das war es :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Überschrifen Problem !

Jetzt mitmachen!