Per *.css Datei Worpress Titel verstecken?

Lieber Besucher, herzlich willkommen bei: Aqua Computer Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Jogibär

God

Beiträge: 8 190

Per *.css Datei Worpress Titel verstecken?

Sonntag, 27. Februar 2011, 23:53

Hi,
ich habe schon so viel rumgesucht, auch was gefunden aber ich weiß nicht wo ich das reinschreiben soll. Hier die Stylesheet Datei und den Code der angeblich irgendwo rein soll. Wie geschrieben, ich möchte den Titel einer Worpress Seite im Header verstecken, ohne dass aber die Suchmaschine darunter "leidet".

	Quellcode
1 2	#header h1 { display: none; } #header .description { display: none; }

Quellcode

/* standard elements */
html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {color: #963;}
a:hover {color: #C60;}

body {
	background: #c6a168;
	color: #444;
	font: normal 62.5% Tahoma, sans-serif
}

p,code,ul {padding-bottom: 10px;}

li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
}
h2 {font: normal 1.6em sans-serif;}
h3 {font: bold 1.1em sans-serif;}

code {
	background: #FFF;
	border: 1px solid #EEE;
	border-left: 6px solid #C1CAD3;
	color: #666;
	display: block;
	font: normal 1em Tahoma,sans-serif;
	line-height: 1.6em;
	margin: 4px 0 12px;
	padding: 8px 10px;
	white-space: pre;
}

blockquote {
	background: url('img/quote.gif') no-repeat;
	display: block;
	font: bold 0.9em Verdana,sans-serif;
	padding-left: 26px
}

big {font-size: 1.1em;}

h1, h2, h3 {padding-top: 6px;}

label {
	display: block;
	font-size: 0.9em;
}

/* misc */
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}

/* structure */
.container {
	background: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 10px 10px;
	width: 780px;
}

/* header */
.top {
	background: url('img/clouds.gif') repeat-x;
	padding-left:10px; padding-right:10px; padding-top:50px; padding-bottom:0
}

/* title */
.header {
	background: #FFF;
	font-size: 3.2em;
	height: 150px;
	margin: 0 auto;
	padding: 10px 10px 5px;
	width: 780px;
}
.header .left, .header .right {
	background: url('img/header_right.jpg');
	color: #FFF;
	height: 150px;	
}
.header .left {
	background: #FFF url('img/header.jpg') no-repeat;
	text-align: center;	
	width: 564px;
	font: normal 2.8em "@font-face", @font-face;
	line-height: 150px;
}
.header .right {
	overflow: auto;
	width: 212px;
}
.header .right p, .header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* navigation */
.navigation {	
	border: 1px solid #54332a;
	border-color: #54332a #54332a;
	background:#D9E1E5 url('img/nav.gif');
	height: 41px
}
.navigation a {
	background: #D9E1E5 url('img/nav.gif');
	border-right: 1px solid #54332a;
	color: #54332a;
	display: block;
	float: left;
	text-decoration: none;
	font: bold 1em sans-serif;
	line-height: 41px;

	padding: 0 20px;
}
.navigation a:hover {background-position: left bottom; color: #dfb47f;}
.navigation ul {display: inline;}
.navigation li {float: left;}

/* main */
.main {
	border-top: 4px solid #FFF;
	background: url('img/bgmain.gif') repeat-y;
}

/* sub navigation */
.sidenav {
	float: right;
	width: 210px;
}
.sidenav h2 {
	color: #54332a;
	font: bold 1em Tahoma,sans-serif;
	line-height: 30px;
	margin: 0;
	padding-left: 12px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid #54332a;
}
.sidenav li {border-bottom: 1px solid #54332a;}
.sidenav li a {
	font-size: 1.1em;
	color: #54332a;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {
	background: #FFF;
	color: #dfb47f;	
}

/* content */
.content {
	float: left;
	margin: 10px 0;
	padding: 0 16px;
	width: 531px;
}
.content .descr {
	color: #664;
	font-size: 0.9em;
	margin-bottom: 6px;
}

.content ul {margin-left: 18px;}
.content ul li {list-style: url('img/li.gif');}
.content ol li {list-style: decimal;}

.content p {font-family: "Lucida Sans Unicode",sans-serif;}

/* footer */
.footer {
	background: url('img/bgfooter.gif') repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	padding: 0 16px;
	line-height: 39px;
	height: 39px;
}
.footer .right {color: #DEF;}
.footer .right a {color: #DEF; text-decoration: none;}
.footer a, .footer a:hover,.footer .right a:hover {color: #FFF;}

/* posts */
.post h1 a {text-decoration:none;}
.post h1 a:hover {text-decoration:underline;}

.post {margin: 6px 0 2px;}
.post .info{
	padding: 5px 10px;
	border: 1px solid #E3E4E4;
	background:#F5F5F5;
	color: #555;
	margin: 2px 0 4px;
}
.post img {border: 4px solid #DDD; margin: 4px 0;}
.post a img {border: 4px solid #DDD;}
.post a:hover img {border-color: #CCC;}

.info a {text-decoration: none;}
.info a:hover {text-decoration: underline;}

/* comments */
.content ol li {list-style: none; background: none;}

#commentlist li {
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 1px solid #700000;
	list-style: none;
}
#commentform {
	margin: 1em 0;
	background: #FAFAFA;
	width: 280px;
}
.commentmetadata {padding: 2px 0 4px;}
.commentmetadata a {color: #664;}

textarea.styled {width: 280px;}

.styled {
	font-size: 1.1em;
	background: #F8F7F6;
	border: 1px solid #D6D3D3;
}
.styled:hover {
	background: #FFF;
	border: 1px solid #D6D3D3;
}
.styled:focus {
	background: #FFF;
	border: 1px solid #939793;
}
#commentform input {margin-bottom: 3px;}

a img {border:none;}

/* calendar */
#wp-calendar {color:#A0A0A0;}

.sidenav table caption {border-bottom-color:#000;}

.sidenav table thead tr {
  border-bottom-color:#000;
  color:#f9f9f9;
}

.sidenav table th {border-bottom-color:#000;}

.sidenav table td#today {
  border-color:#000;
  color:#f5f5f5;
}

.sidenav table td a {
  border-bottom-color:#000;
  background-color:#fafafa;
}

.sidenav table tfoot {border-top-color:#000;}

.sidenav table tfoot a {background:none;}

/* calendar
--------------------------------------------------*/
#wp-calendar {
  display:inline-table;
  border-collapse:collapse;
  width:185px;
  margin:0px 10px 0 10px;
  text-align:center;
}

.sidenav table caption {
  margin: -5px 10px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid;
  letter-spacing: 0.1em;
}

.sidenav table thead tr {border-bottom:1px solid;}

.sidenav table th {border-bottom:1px solid;}

.sidenav table td {
  width: 225px; 
  padding: 1px;
  font-size: 0.9em;
}

.sidenav table td#today {
  padding: 0;
  border: 1px solid;
  font-size: 1em;
  font-weight: bold;
}

.sidenav table td a {
  display: block;
  border-bottom: 1px solid;
  font-weight: bold;
  font-size: 1.15em;
}

.sidenav table tfoot {border-top:1px solid;}
.sidenav table tfoot a {
  border: none;
  font-weight: bold;
}
.sidenav table tfoot #prev a {text-align:left;}
.sidenav table tfoot #next a {text-align:center;}

#searchform {padding:10px;}


/* 
   Wordpress 
------------------------------------------------------------------- */

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}


/* Images */
img.alignleft,img.alignright,img.aligncenter {
	background-color: #FFF;
	border: 1px solid #DDD;
	padding: 3px;
}

img.alignleft {margin: 0 15px 12px 0;}
img.alignright {margin: 0 0 15px 12px;}


/* Floats */
.alignleft {float: left;}
.alignright {float: right;}
.aligncenter {margin: 0 auto;}

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Jogibär« (27. Februar 2011, 23:55)

TrOuble

God

Beiträge: 9 461

Montag, 28. Februar 2011, 13:39

Hast mal nen Link zu deinem Blog da?

Ins blaue geraten:
Laut deinem Sylesheet vewendet dein Template/Theme Klassen und keine IDs für den Header. Dementsprechend müsste deine CSS-Änderungen zum Ausblenden so heißen:

	PHP-Quelltext
1 2	.header h1 { display: none; } .header .description { display: none; }

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »TrOuble« (28. Februar 2011, 13:40)

Jogibär

God

Beiträge: 8 190

Montag, 28. Februar 2011, 15:45

Ja das habe ich mir auch schon gedacht, aber wie gesagt, ich weiß nicht wohin damit. Wenn ich das an den Anfang einfüge passiert nichts, und auch nicht wenn ich das im Bereich "Title" der header Klasse einfüge bewirke ich damit auch nichts. Das Einfügen in die header Klasse in der auch die Formatierung des Titels enthalten ist, bewirkt ebenfalls nichts.

Das ist übrigens die Hochzeitsseite meiner Schwester und ihres Verlobten.

http://www.jannikaundaliheiraten.de/

TrOuble

God

Beiträge: 9 461

Montag, 28. Februar 2011, 15:58

Füg mal das hier ein:

	PHP-Quelltext
1 2 3	.header .left { text-indent:-999em; }

Jogibär

God

Beiträge: 8 190

Montag, 28. Februar 2011, 16:54

Ahaha nice, danke!

Habe ich das richtig verstanden, ich rücke damit den Text um 999 pixel nach links?

palme|kex`

God

Beiträge: 5 684

Montag, 28. Februar 2011, 17:08

Wenn es pixel währen, würde da px stehen. du verrückst um 999em

Zitat

em: Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Schriftgröße des Elternelements.

http://de.selfhtml.org/css/formate/wertzuweisung.htm

Y0Gi

God

Beiträge: 12 708

Dienstag, 1. März 2011, 17:38

Hintergrund ist u.a. der, dass `display: none;` Text auch für Screenreader ausblendet - Blinden wird so der (body-)Seitentitel vorenthalten.

Im Markup bietet es sich an, Überschriften z. B. als `<h1><span>Überschrift!</span></h1>` auszuzeichnen. Man kann dann im Stylesheet auf das span Bezug nehmen und es ausblenden. Das h1 lässt sich dann z. B. mit einem Hintergrundbild versehen, das den Seitentitel in grafischer Form darstellt.

Evtl. kann ich noch mehr/konkreteres sagen, wenn ich wieder vor einem grafischen Browser sitze

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Jogibär

God

Beiträge: 8 190

Mittwoch, 2. März 2011, 16:24

Zitat von »Y0Gi«

Evtl. kann ich noch mehr/konkreteres sagen, wenn ich wieder vor einem grafischen Browser sitze

Wozu brauchst du denn einen grafischen Browser, dir reicht doch der Quellcode, gibs zu.

Neue Herausforderung:
Ich möchte gerne die Sidebar, in welcher nicht nur die letzten Kommentare aufgelistet werden, sondern auch ein Audio Player vorhanden ist, von der Seite quasi entkoppeln. Ich weiß selber nicht wie genau ich das ausdrücken soll.
Praktisch gesehen soll, wenn man auf Play gedrückt hat und zwischen den Seiten der Page rumsurft, die Sidebar nicht mit den Seiten neu geladen werden, sondern völlig unabhängig davon sein sodass die Musik kontinuierlich weiterläuft und man nicht immer von vorne anfangen muss.
Ist das möglich? Würde mich freuen wenn ihr mir bei der Umsetzung helfen könntet.
Als Grundgerüst habe ich übrigens das Theme hier benutzt: http://themes.wordpress-deutschland.org/beautiful-day/

Y0Gi

God

Beiträge: 12 708

Mittwoch, 2. März 2011, 20:23

Das geht mit Frames (was man heutzutage praktisch nicht mehr macht, wenn man nicht 'ne Werbeagentur ist, die seit 15 Jahren nichts dazu gelernt hat) oder mit eingebetteten Frames. So richtig cool ist das nicht - aber das ist Hintergrundmusik auf Websites (im Gegensatz zu in einer Website eingebettete, fast-Fullscreen Flash-Multimedia-Machwerke) ebenso wenig.

Was den Überschriftenkram (zumindest in meinem Beispiel) angeht, fällt das übrigens in die Kategorie "image replacement". Da gibt's IIRC "Fa(h)rner Image Replacement", "sIFR" usw. Das umfasst neben Grafiken auch Ersetzung von textuellen Überschriften durch Flash-Komponenten mit eingebetteten Schriftarten. Mittlerweile braucht man das aber weniger, da Browser bereits mit in Websites eingebetteten Schriften umgehen können oder diese sich alternativ von externen Anbietern live holen lassen können (Typekit, Monotype, cufon, vgl. auch "font stacks").

In jedem Fall lesenswert (und u.a. auch ein Beispiel für eingebettete Fonts) ist http://diveintohtml5.org/ (Kurzübersicht).

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Y0Gi

God

Beiträge: 12 708