H1 und H2 tag tauschen... wie genau?

chris1

Hallo,

ich muss den H1 und den H2 tag tauschen. D.h. H1 soll der Posttitel und H2 soll der Blogtitel sein. Ggf. möchte ich sogar bis zu H6 tauschen.

Kann ich einfach die H1 usw. tags im Code tauschen oder muss ich noch etwas tun?
Ich habe in diesem Zusammenhang irgendwo etwas von single.php und style.css gelesen, wurde daraus aber nicht schlau.

Vielleicht gibt es ja auch ein nettes plugin genau zu diesem Thema?

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

jottlieb

Das kannst du im Theme ändern wie du lustig bist...
Die Frage lautet nur: Wieso?
Wenn's nur um die Größe etc. geht, dann kannst (und solltest) du das in der style.css anpassen.

marX

Zitat von chris1

Kann ich einfach die H1 usw. tags im Code tauschen oder muss ich noch etwas tun?

Ja, kannst du tun. In allen Template-Dateien, wo diese Üebrschriften auftauchen.

Und dann musst du eben in der style.css die jeweiligen Styles noch anpassen. Da steht ja dann sicher auch irgendwo h1 und h2 usw., und da musst du dann eben genauso durchtauschen.

Zitat

Vielleicht gibt es ja auch ein nettes plugin genau zu diesem Thema?

Eher nicht, das ist alles Design- bzw. Theme-Sache. Da wirst du schon selbst Hand anlegen müssen.

jottlieb: ich tipp mal auf SEO... ;-)

chris1

Hallo Jottlieb und Marcus,
vielen Dank für die Hilfe.

1. Wie ist das mit der Reihenfolge in der style.css?

Momentan ist die Reihenfolge der entsprechenden Formatierungsabschnitte: H1, H2, H3
Sollte ich es dabei belassen oder kann ich statt des H1-Abschnittes auch den H3-Abschnitt oben haben?

2. Ich gehe mal davon aus, dass das bei den Tags auf allen anderen Seiten egal ist... richtig?

marX

Zitat von chris1

1. Wie ist das mit der Reihenfolge in der style.css?
Momentan ist die Reihenfolge der entsprechenden Formatierungsabschnitte: H1, H2, H3
Sollte ich es dabei belassen oder kann ich statt des H1-Abschnittes auch den H3-Abschnitt oben haben?

In der style.css musst du die Tags genauso anpassen wie du sie in den Templates änderst. Wenn du bspw. im #header eine <h1>-Überschrift hast, dann hast du in der style.css eine Regel "#header h1". Änderst du im Template dieses <h1> in ein <h2>, dann musst du selbstverständlich die CSS-Regel ebenfalls umbiegen: "#header h2" in diesem Falle. Klar?

Das gilt dann ebenfalls so für die Überschriften der Beiträge, hier findest du z.B. "#content .entry h2", was dann zu "#content .entry h1" wird, wenn du die Artikelüberschriften zu h1 machst.
(Die CSS-regeln sind nur Beispiele, in deiner style.css kann das auch anders aussehen. Geht hier ja nur ums Prinzip.)

Zitat

2. Ich gehe mal davon aus, dass das bei den Tags auf allen anderen Seiten egal ist... richtig?

Mach es einheitlich, sonst gibts Probleme mit dem CSS. Und Tante Google interessiert sich nicht nur für deine Startseite. Unterseiten sind mindestens genauso wichtig. ;-)

chris1

Hallo Marcus,

vielen Dank für die Antwort. Da hab ich mich wohl unklar ausgedrückt, denn das habe ich soweit verstanden.
Was ich meine ist: In der style.css stehen header-Absätze mit all ihren Formatierungen in der folgenden Reihenfolge:
1. H1
2. H2
3. H3
Muss das so bleiben oder kann das in der style.css auch so aussehen:
1. H3
2. H1
3. H2

marX

Wenn du solche Regeln hier hast:

Code

h1, h2, h3 {
/* einige Eigenschaften */
}

dann musst du daran nichts ändern. Das gilt ja dann sowieso für alle Überschriften gleich.

Bei solchen Regeln:

Code

h1 {
/* ... */
}


h2 {
/* ... */
}


h3 {
/* ... */
}

Alles anzeigen

sind evtl. Änderungen nötig, je nachdem wie sich die Regeln unterscheiden und welche Regeln sonst noch greifen. Ausprobieren. ;-) Durchgetauscht ist da ja schnell, und falls es Probleme gibt hat man sich ja vorher ne Sicherungskopie der style.css angelegt. ;-)

Übrigens: mit Firebug kannst du dir anzeigen lassen, welche CSS-Regeln auf welche Überschriften Anwendung finden.

chris1

Hallo Marcus,

vielen Dank für die Details. Ich trau mich jetzt mal ;-)

chris1

Hallo Marcus,

irgendwie klappt das nicht.
Die Syntax sieht aus wie bei Deinem zweiten Beispiel.

Schau mal auf meine Seite.
1. Die Header-Veränderungen sind natürlich angenommen
2. Die Formatierungen nicht

Mein Plan ist die Formatierungen nun im nachhinein zu verändern. Wie kann ich das in der style.css machen? Meine ersten Veränderungen über die Style.css hatten keine Reaktion. Wo soll ich dann was ändern?

maxe

Du hast z.B. in der style.css das Kommentar vor h3 nicht geschlossen:

/*C-Salsa - Alle anderen Überschriften - jetzt Blogtitel[COLOR=Red]*/[/COLOR]

marX

Zitat von chris1

Meine ersten Veränderungen über die Style.css hatten keine Reaktion. Wo soll ich dann was ändern?

Konkreter bitte. ich ken ndeine Seite nicht so gut wie du. ;-)

Du hast in deiner style.css auch noch solche Konstrukte:

Code

h1 a, h1 a:visited {
color:#AADD99;
text-decoration:none;
}

Die müssen natürlich auch angepasst werden. Sowas siehst du mit Firebug (s.o.) sehr schön. (Rechte Maustaste, "Inspect Element")

chris1

Hallo Maxe,
vielen Dank!
Jetzt hab ich nur noch das Problem mit den Sidebarüberschriften... die waren vorher schwarz und kleiner.

Siehst Du da auch etwas?

marX

Zitat von chris1

Hallo Maxe,
vielen Dank!
Jetzt hab ich nur noch das Problem mit den Sidebarüberschriften... die waren vorher schwarz und kleiner.
Siehst Du da auch etwas?

Da wird dieser Style hier verwendet:

Code

/* style.css (line 366) */
h2 {
-x-system-font:none;
color:#AADD99;
font-family:"Lucida Grande",Arial,sans-serif;
font-size:110%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:110%;
margin:5px 0;
}

Alles anzeigen

Ich würde ne neue CSS-Regel anlegen für h2 in dbx-box:

Code

.dbx-box h2 {
color:
font-size:
}

chris1

Hallo Marcus,

ich glaube der Teil ist schon ok... weiß nicht recht... hier ist der Code der style.css abzüglich des einleitenden Kommentars und des Codes, der nach den Header-Formatierungen kommt:

Code

/*Farbe unterer Hintergrund*/
body {
	background: #212121 url(images/html-bg.gif) repeat-x;
	font: 75%/170% Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
/*Schriftfarbe im Post*/
	color: #c0c0c0;
}
a {
/*Schriftfarbe der Links im Post*/
	color: #99aadd;
	text-decoration: none;
}
a:visited {
	color: #99aadd;
}
a:hover {
	text-decoration: underline;
}
p {
	margin: 0px 0px 15px;
}
img {
	border: none;
}
ul {
	margin: 5px 0px 15px;
	padding-left: 10px;
}
ul li {
	margin: 0px;
	list-style: none;
	background: url(images/bullet-orange.gif) no-repeat;
	padding-left: 20px;
}
ol {
	margin: 5px 0px 15px;
	padding-left: 20px;
}
ol li {
	margin: 0px;
}
form {
	margin: 0px;
	padding: 0px;
}
small {
	font-size: 90%;
}
blockquote{
	background: url(images/blockquote.gif) no-repeat left top;
	color: #777;
	font-style: italic;
	padding: 10px 5px 5px 36px;
}
#page {
/*Hintergrund für C-SALSA.COM-Schriftzug mit Subline*/
	background: url(images/main-bg.jpg) no-repeat center top;
}
#wrapper {
	width: 985px;
	margin: 0px auto;
	position: relative;
}


/* ------------------------------------- header area  */
#header {
	height: 120px;
}
/*C-Salsa - Alle anderen Überschriften - jetzt Blogtitel*/
h3 {
	position: absolute;
	top: 40px;
	left: 25px;
/*Schriftfarbe Seitentitel*/
	color: #c0c0c0;
	margin: 0px;
	padding: 0px;
	font: normal 30px/100% "Trebuchet MS", Arial, sans-serif;
}
h3 a, h3 a:visited {
	color: #c0c0c0;
	text-decoration: none;
}
h3 a:hover {
	color: #ff8080;
	text-decoration: none;
}
/*2.Zeile unter C-SALSA.COM - Blogtitelunterschrift*/
.description {
	position: absolute;
	top: 77px;
	left: 25px;
	color: #c0c0c0;
	font: 12px Arial, Helvetica, sans-serif;
}


/* site title C-SALSA.COM - jetzt Post Title*/
h1 {
	/*Schriftfarbe Post Title*/
	color: #aadd99;
	margin: 3px 0 2px;
	padding-bottom: 4px;
	font: normal 150%/100% "Lucida Grande", Arial, sans-serif;
	border-bottom: dotted 1px #CCCCCC;
}
h1 a, h1 a:visited {
	color: #aadd99;
	text-decoration: none;
}
h1 a:hover {
	color: #ff8080;
	text-decoration: none;
}
/* search form */
#searchform {
	position: absolute;
	top: 0px;
	right: 0px;
	background: url(images/searchform-bg.png) no-repeat right bottom;
	height: 37px;
	width: 210px;
}
#searchform #s{
	background: #c0c0c0 url(images/form-field-bg.gif) no-repeat ;
	height: 17px;
	width: 148px;
	margin: 6px 5px 0px 10px;
	padding: 3px 7px 2px 5px;
/*Schriftfarbe im Suchfeld*/
	color: #999999;
	border: none;
}
#searchform #searchsubmit { 
	background: url(images/search-btn.png) no-repeat left top;
	height: 24px;
	width: 24px;
	border: none;
	text-indent: -999%;
	line-height: 1px;
	margin-top: 6px;
}


/* ------------------------------------- main content area  */
#left-col {
	width: 545px;
	float: left;
	margin-top: 11px;
}
/* main menu */
#nav {
	background: url(images/content-top-bg.png) no-repeat left top;
	height: 26px;
}
#nav ul{
	list-style: none;
	margin: 0px 0px 0px 25px;
	padding: 0px;
	font: bold 12px/100% Arial, Helvetica, sans-serif;
}
#nav ul li{
	margin: 0px 1px 0px 0px;
	padding: 0px;
	float: left;
/*###################################*/
	background: none;
}
/*Schriftfarbe - HauptSpaltenNavi - Oben - Schmale Leiste (Home/About)*/
#nav ul li a{
	padding: 5px 7px 6px 7px;
	text-decoration: none;
	color: #222222;
	display: block;
}
#nav li a:visited{
	text-decoration: none;
	color: #222222;
}
#nav li a:hover, #nav .current_page_item a, #nav .current_page_item a:visited{
	text-decoration: none;
	background: #437088 url(images/nav-item-hover.gif) repeat-x;
/*Schriftfarbe schmale Leiste oben*/
	color: #000000;
}
/* sub menu */
#subnav {
	background: #40ff40; /*#ecebeb;*/
}
#subnav ul {
	margin: 0px;
	padding: 3px 5px 5px 5px;
	list-style: none;
	font: 11px/100% Arial, Helvetica, sans-serif;
}
#subnav li {
/*######################################*/
	border-right: 1px solid #40ff40; /*#d8d8d8*/
	padding: 0px 7px;
	margin: 0 0 5px;
	display:inline;
	line-height: 18px;
	background: none;
}
#subnav li a, #subnav li a:visited, #subnav .page_item {
	text-decoration: none;
	color: #99aadd;
}
#subnav .current_page_item a, #subnav .current_page_item a:visited {
	color: #99aadd;
}
#subnav li a:hover {
	text-decoration: none;
/*Schriftfarbe der Links in der Navi ganz unten Previous*/
	color: #ff8080;
}


/* content */
#content {
	padding: 25px 25px 15px 25px;
	width: 495px;
/*Hintergrundfarbe große Boxen der Hauptspalte*/
	background: #000000;
	clear: both;
	overflow: hidden;
}
.post {
	padding: 0px;
	clear: both;
	overflow: hidden;
}
.post .date {
	height: 50px;
	width: 45px;
	background: url(images/calendar.gif) no-repeat;
	font: normal 22px Arial, Helvetica, sans-serif;
/*Schriftfarbe Kalender Tag*/
	color: #666666;
	text-align: center;
	padding: 0px 2px 0 0;
	line-height: 100%;
	float: left;
}
.post .date span {
	height: 16px;
	display: block;
	font: normal 11px Arial, Helvetica, sans-serif;
/*Schriftfarbe Kalender Monat*/
	color: #ffffff;
	text-align: center;
	padding-top: 5px;
}
.post .title {
	float: left;
	margin-left: 10px;
	width: 438px;
}
.postdata {
	font-size: 90%;
/*Schriftfarbe Kategorieanzeige Hauptfenster*/ 
	color: #99aadd;
}
.postdata a, .postdata a:visited {
	color: #99aadd;
	text-decoration: none;
}
.postdata a:hover {
	color: #ff8080;
	text-decoration: none;
}
.postdata .category{
	background: url(images/mini-category.gif) no-repeat;
	padding-left: 18px;
	float: left;
}
.postdata .comments{
	background: url(images/mini-comment.gif) no-repeat;
	padding-left: 18px;
	float: right;
}
.mini-add-comment {
	background: url(images/mini-down-arrow.gif) no-repeat left center;
	padding-left: 12px;
	float: right;
}
.entry {
	padding: 10px 0px 5px;
	clear: both;
}
.entry p.submeta{
	font-size: 11px;
}


/* c-salsa- post title - jetzt alle weiteren Sachen, was vorher h3 war */
h2 {
	color: #aadd99;
	margin: 5px 0px 5px;
	font: bold 110%/110% "Lucida Grande", Arial, sans-serif;
}
/* next & previous page navigation - Navigation schmale Leiste unten */
.page-nav {
	clear: both;
	background: url(images/navigation-bg.gif) no-repeat left center;
	height: 21px;
}
.page-nav a, .page-nav a:visited {
/*Schriftfarbe previous page navigation*/
	color: #212121;
	text-decoration: none;
}
.page-nav a:hover {
	color: #ff4040;
	text-decoration: none;
}
.previous-entries a {
	float: left;
	padding-left: 10px;
	margin-left: 10px;
	background: url(images/navigation-left.gif) no-repeat left center;
}
.next-entries a {
	float: right;
	padding-right: 10px;
	margin-right: 10px;
	background: url(images/navigation-right.gif) no-repeat right center;
}


/* next & previous post navigation */
.post-nav {
	clear: both;
	padding-bottom: 35px;
	margin-top: -15px;
	font-size: 95%;
}

Alles anzeigen

maxe

marX hat dir doch ein schönes Tool zum überprüfen der CSS genannt (Firebug). Versuch's demnächst mal selber damit.

Code

/* c-salsa- post title - jetzt alle weiteren Sachen, was vorher h3 war */
h2 {
color: [COLOR=Red]#000000[/COLOR];
margin: 5px 0px 5px;
font: bold 12px/110% "Lucida Grande", Arial, sans-serif;
}

chris1

Hallo Marcus,
vielen Dank.
Du hast noch den alten Code. Den neuen hab ich grad gepostet.

Wenn das mit der dbx box dann immer noch gilt... was ist die dbx.css
(da steht was wie: "Besser nicht ändern oder überschreiben" dran)

maxe

Du könntest auch, wie marX es schreibt, in der /wp-content/themes/i3theme-1-6-classic-right/dbx.css folgendes ergänzen:

Code

.dbx-box h2 {
color:#000000;
font-size:12px;
}

marX

Zitat von chris1

Wenn das mit der dbx box dann immer noch gilt... was ist die dbx.css
(da steht was wie: "Besser nicht ändern oder überschreiben" dran)

Die Überschriften da sind ja jetzt wieder schwarz. Aber wenn nicht: du kannst prinzipiell alles ind er style.css überschreiben (notfalls mit !important, auch wenn das eher unsauber ist):

CSS

color:#AABBCC !important;

chris1

Hallo Marcus und Maxe,

vielen vielen Dank für die schnelle Hilfe... habe hier echt geschwitzt, weil alles permanent online war.

Jetzt stimmt erstmal alles wieder. Habe allerdings die dbx-box nicht genutzt sondern direkt in die style.css geschrieben.
Hat es Nachteile, wenn ich die Option mit der dbx-box nicht nutze?

marX

Nö. Ist nur eine Möglichkeit von vielen. Die DBX-Boxen sind ja deine dynamischen Sidebar-Boxen, aber was du im CSS damit machst ist ziemlich egal, solange du zum Ziel kommst.

Übrigens, und nur am Rande: ich würde mal die Markup-Fehler korrigieren.
[Invalid] Markup Validation of http://www.c-salsa.com/ - W3C Markup Validator
Nicht nur Suchmaschinen freuen sich über sauberen HTML-Code. ;-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

H1 und H2 tag tauschen... wie genau?

Jetzt mitmachen!