Serendipity Forums

Hallo.
Ich bin ein ziemlicher Neuling was das blog bauen und css etc angeht. Habe vorher nur mit Html gearbeitet.
Ich habe mir jetzt einen Blog fertig eingerichtet und bin dabei mir ein vorhandened Design anzupassen. komme da jetzt aber komplett nicht weiter und würde mich über Hilfe freuen.
Das Design was ich als Vorlage nehme ist das kubrick design.
Jetzt will ich aber den Blognamen und die Beschreibung, welche in der Mitte sitzen, beide nach links und etwas nach unten verschieben. Das bekomme ich leider nicht hin. Ich hab in der style.css schon alle möglichen Einträge, die sich für mich danach anhörten, geändert. Aber leider tut sich entweder gar nichts oder nicht das was ich will *g*
Kann mir jemand sagen was und wo ich da ändern muss? Eventuell auch um die Farbe der Schrift zu ändern?!!!!
Meine style.css sieht z.Zt. so aus:

--------------
/*
Kubrick v1.2.5 for WordPress 1.2
http://binarybonsai.com/kubrick/

This theme was designed and built by Michael Heilemann,
whose blog you will find at http://binarybonsai.com/

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php


*** REGARDING IMAGES ***
All CSS that involves the use of images, can be found in the 'index.php' file.
This is to ease installation inside subdirectories of a server.

Have fun, and don't be afraid to contact me if you have questions.
*/



/* Begin Typography & Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #d5d6d7;
color: #333;
text-align: center;
background: url("{TEMPLATE_PATH}images/back.jpg");
}

#page {
background-color: white;
border: 1px solid #959596;
text-align: left;
background: url("{TEMPLATE_PATH}images/bgwide.jpg") repeat-y top; border: none;
}

#header {
background-color: #73a0c5;
background: url("{TEMPLATE_PATH}images/header.jpg") no-repeat bottom center;
margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px;
}

#content {
font-size: 1.2em
}

img.categoryIcon {
float: right;
border: 0px;
margin: 5px;
}

#serendipityQuickSearchTermField {
width: 90%;
}

.widecolumn .entry div {
font-size: 1.05em;
}

.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}

.widecolumn {
line-height: 1.6em;
}

.graybox {
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

#footer {
background-color: #eee;
background: url("{TEMPLATE_PATH}/images/footer.jpg") no-repeat bottom; border: none;
}

h1, h2, h3 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight: bold;
}

h1 {
font-size: 4em;
text-align: center;
}

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

h2 {
font-size: 1.6em;
}

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

#sidebar h2 {
font-family: 'Lucida Grande', Verdana, Sans-Serif;
font-size: 1.2em;
}

h3 {
font-size: 1.3em;
}

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

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

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 div a:visited {
color: #b85b5a;
}

.commentlist li, .serendipity_commentForm input, .serendipity_commentForm textarea {
font: 0.9em 'Lucida Grande', Verdana, Arial, 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;
}

.serendipity_commentForm {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.commentmetadata {
font-weight: normal;
}

#sidebar {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
vertical-align: top;
}

.small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}

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: #06c;
text-decoration: none;
}

a:hover {
color: #147;
text-decoration: underline;
}

#wp-calendar #prev a {
font-size: 9pt;
}

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

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

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



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

#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 760px;
}

#header {
padding: 0;
margin: 0 auto;
height: 200px;
width: 100%;
background-color: #73a0c5;
}

#headerimg {
margin: 0;
height: 200px;
width: 100%;
}

.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 450px;
}

.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}

.post {
margin: 0 0 40px;
text-align: justify;
}

.widecolumn .post {
margin: 0;
}

.narrowcolumn .postmetadata {
padding-top: 5px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
}

.widecolumn .postmetadata {
margin: 30px 0;
}

#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}

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



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

.description {
text-align: center;
}

h2 {
margin: 30px 0 0;
}

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

#sidebar 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 Images */
div img {
padding: 0;
max-width: 100%;
}

/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
/* End Images */



/* 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: "\00BB \0020";
}

.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;
}

#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 10px;
}

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

ol li, #sidebar ul ol li {
list-style: decimal outside;
}

#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0;
padding: 0;
}
/* End Entry Lists */



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

#sidebar #searchform #s {
width: 130px;
padding: 2px;
}

#sidebar #searchsubmit {
padding: 1px;
}

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

select {
width: 130px;
}

.serendipity_calendarDay {
text-align: center;
}

.serendipity_commentsValue input,
.serendipity_commentsValue select {
width: 100%;
padding: 2px;
}

.serendipity_commentsValue textarea {
width: 100%;
padding: 2px;
}

.serendipity_commentForm submit {
margin: 0;
float: right;
}
/* End Form Elements */



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

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

.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

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

.serendipity_commentForm {
margin: 5px 0;
}

.serendipity_commentsLabel {
vertical-align:top;
}

.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: 545px;
width: 190px;
}

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



/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */



/* 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;
}

.center {
text-align: center;
}

hr {
display: none;
}

a img {
border: none;
}

.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}
/* End Various Tags & Classes*/



/* "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you.
It won't be a stylish marriage, I can't afford a carriage.
But you'll look sweet upon the seat of a bicycle built for two." */

Hi!

Vorab zwei Tipps:

1. Wähle aussagekräftige Themenbeschreibungen für deine Postings. Die meisten der hier aktiven User werden eventuell so einen Eintrag wie Deinen überspringen, weil er null beschreibung enthält wo dein problem liegt. Die vielen Anführungszeichen deuten auch auf Newbie-Alarm hin, sowas ignoriert man erst recht.

2. Poste nicht den gesamten CSS Code hier, sondern gib stattdessen die URL deines Blogs bekannt.

Jetzt aber zur Lösung:

Füg im CSS am Ende mal sowas ein:
Die jeweiligen Werte kannst Du zum spielen natürlich auch anpassen, erhöhen/erniedirgen.

Grüße,
Garvin

Danke für die rasche Antwort!
So funktioniert´s wunderbar. Also war die formatierung vorher gar nicht drin und es sass automatisch mittig? OK, dann kann ich ja lange an den Werten rumprobieren *lol*

2 Fragen noch:
Kann ich den Blognamen und die Beschreibung auch einzeln in der Höhe verschieben? Wenn ich padding top: xx hier ändere rutschen ja beide runter. Ich hätte es bei mir gern dass der Blogname in etwa an der Stelle wie jetzt steht, die Beschreibung aber weiter runter kommt und im weissen Bereich, über dem ersten Eintrag "Test" steht. mein Blog: http://www.ayasuki.com/

Wie und wo kann ich denn bei den beiden Texten die Farbe ändern?

Hi!

So funktioniert´s wunderbar. Also war die formatierung vorher gar nicht drin und es sass automatisch mittig? OK, dann kann ich ja lange an den Werten rumprobieren *lol*

Doch, doch. Die Formatierung war schon vorher drin. In irgendeinem der Werte stand bereits ein text-align: center, das sich auf die elemente vererbt hat.

Kann ich den Blognamen und die Beschreibung auch einzeln in der Höhe verschieben?

Klaro. Anstelle die Selektoren im CSS zu verbinden, kannst du sie einzeln trennen und die paddings verteilen.

Wie und wo kann ich denn bei den beiden Texten die Farbe ändern?

Das geht mit demselben CSS-Selektor, halt dort einfach color:-Attribut setzen.

Ansonsten: http://de.selfhtml.org/css/

Viele Grüße,
Garvin

sorry, hab da immer noch ein paar Probleme. Kenn mich mit css leider noch so gut wie null us
Ich hab es jetzt geschafft dass die Texte links sitzen und auch dass die verschiedene Farben haben. Allerdings bekomm ich die descriptions leider nicht einzeln runtergeschoben.
So sieht die Seite aus http://www.ayasuki.com/
und so das was ich unten ans css angebaut hab:

#headerimg h1, #headerimg .blogtitle {
text-align: left;
margin-left: 30px;
color: red;
}

#headerimg h1 {
padding-top: 115px;
}

#headerimg h2, #headerimg .description {
text-align: left;
margin-left: 30px;
color: black;
}

#headerimg h2 {
padding-top: 150px;
}

kann es eventuell sein dass ich den Text nicht weiter runter bekomme weil der Teil nicht mehr zum "Kopf" oben gehört und so die Befehle nicht ziehen? Wenn ich die Werte ändere rutscht teilweise der ganze Kopf nach unten. die Texte bleiben aber aneinander...
Da soll der description Text in etwa hin:

Hi!

In der HTML-Struktur ist die Beschreibung innerhalb des blauen Banners. Da kriegst Du die description also nciht raus!

Da müsstest du die index.tpl deines themes bearbeiten und die description dort hinausschieben.

Grüße,
Garvin

Verstehe. Bin mir jetzt nur etwas unsicher was ich in der index.tpl ändern muss damit ich den da rausbekommen kann.
Soll ich den Inhalt meiner index.tpl mal posten?
Und wenn das darin dann geändert ist muss in der style.css trotzdem noch was rein um den Text zu verschieben?
Sorry wegen den vielen Fragen aber ich kenn mich mit css etc leider gar net aus
Wenn ich das Problem gelöst hab war´s das wohl hoffentlich auch. Dann muss ich nur noch das banner ändern und bin fertig

Hi!

Du kannst in dem template HTML Code ändern, also den div class='description>... teil verschieben. Schau mal bei SelFHTML vorbei, um eine Einführung in HTML und CSS zu erhalten, es scheint mir als würden Dir die Grundlagen fehlen. Die kannst Du Dir dort aneignen.

Viele Grüße,
Garvin

garvinhicking wrote: Die jeweiligen Werte kannst Du zum spielen natürlich auch anpassen, erhöhen/erniedirgen.

[Off-Topic]
hehe, man kann die Werte auch erniedrigen? Das wäre dann das Spezial Feature für den SadoMasoBlog oder?

hehe, man kann die Werte auch erniedrigen? Das wäre dann das Spezial Feature für den SadoMasoBlog oder?

Genau: "Sie werden nun zum SadoMasBlog weitergelitten".

freefall wrote:Hallo.
Ich habe mir jetzt einen Blog fertig eingerichtet

bitte auch noch hier lesen,danke, sorry:
http://board.s9y.org/viewtopic.php?p=51277#51277