Theme breite ändern

kensmith

Hi,

ich habe am Wochenende Wordpress 2.06 installiert und meine Seite mit einem Theme von der Stange erstellt.
Das hat alles wunderbar geklappt. Auch das einbinden meines eigenen Headerbildes.

Das verwendete Theme gefällt mir sehr gut und ich will es eigentlich weiter verwenden.
Das einzige, was mit nicht gefällt, ist die Breite.
In einem Bildschirm mit großer Auflösung (1280 x 1024) wirkt das Theme etwas zu schmal. Daher möchte ich es ein wenig modifizieren. Also im Klartext verbreitern.

Kann mir jemand sagen, in welcher Datei ich das einstellen muß?

Wäre echt super.

Danke und Gruß
Ken

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

SuMu

klar, in der css-datei :mrgreen:

kensmith

Ich habe es versucht.
Habe auch in der Suche nach Kubrick breiter gesucht und bin fündig geworden.

Aber auch wenn ich den Header um die gewünschten 200px verbreiter, ist der Header total verschoben und der auf der Seite enthaltene Test nach links verschoben.

Kann mir jemand helfen?

Gruß
Ken

Monika

imOrdner /default/images/ sind die ganzen Bilder drin, die genau auf die Breite angepasst sind, die musst Du auch alle ändern,

nachher vermutlich noch feintuning Sachen,

doch irgendwie glaube ich war das hier schon Mal Thema

Kubrick breiter oder so

lg

kensmith

Hi,

ich habe nach "Kubrick breiter" gesucht und, glaube ich, alles soweit angepaßt. Auch den Header um die 20px verbreitert.
Wenn ich die Änderungen aber hochlade,ist der Header und Contenttext nach links verschoben.

Gruß
Ken

Monika

Zitat von kensmith

Hi,

ich habe nach "Kubrick breiter" gesucht und, glaube ich, alles soweit angepaßt. Auch den Header um die 20px verbreitert.
Wenn ich die Änderungen aber hochlade,ist der Header und Contenttext nach links verschoben.

Gruß
Ken

Alles anzeigen

meine Glaskugel ist auf Urlaub ;)

lg

SuMu

Zitat von Monika

meine Glaskugel ist auf Urlaub ;)

lg

hoffentlich versteht er das jetzt :-)

kensmith

meine Glaskugel ist auf Urlaub :wink: = Keine Ahnung.....schon o.k.ich glaube ich habe das Problemgefunden.

Habe die Margins nicht angepaßt.

Muß ich heute Abend nochmal testen.

Trotzdem Danke

Morris

Zitat von kensmith

meine Glaskugel ist auf Urlaub :wink: = Keine Ahnung

Falsch. Das bedeutet, dass deine Informationen unzureichend sind um dir weiter zu helfen.

Grüße
Mo

Monika

Zitat von kensmith

meine Glaskugel ist auf Urlaub :wink: = Keine Ahnung.....schon o.k.ich glaube ich habe das Problemgefunden.

Habe die Margins nicht angepaßt.

Muß ich heute Abend nochmal testen.

Trotzdem Danke

Alles anzeigen

niente falsch verstanden

ohen URL helfe ich einfach kaum mehr,
ich stochere nicht gern im Nebel

lg

kensmith

sorry,

hier die url:
http://www.kensmith.de

Gruß
Ken

Largo

Hallo

Ich möchte den Kontent auf meinem Blog ein wenig verbreitern,
sowie die Distanz von der Sidebar ein wenig nach rechts erhöhen.
Mein Blog ist sehr zentriert, das wollte ich eigentlich beibehalten und dennoch jegliche versuche es selbst über die style.css Datei zu verändern sind bis jetzt nicht so erfolgreich gewesen - eher im Gegenteil.

Kann jemand helfen, ohne, dass das Theme zerschossen wird?
Vielleicht mich darauf hinweisen, worauf ich achten muss?

Hier ist der entsprechende CODE, da ich nicht weiß, ob andere Dinge relevant sind, poste ich vorsichtshalber mal den ganzen CODE:

PHP

/*  
Theme Name: Drunkey Love
Theme URI: http://www.el73.be/drunkey-love/themes/
Description: Drunkey Love theme for Wordpress
Version: 1.6
Author: Kevin Wetzels
Author URI: http://www.el73.be/


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


/**-----------------------------------------------------------------------------
** HTML ELEMENTS
**/ 
html, body {
    padding: 0;
    margin: 0;
    font: 100%/150% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    font-size: 0.9em;
    background: #fff;
    color: #333;        
}


a {
    color: #069;    
}


a:visited {
    color: #666;
}


a:hover {
    color: #036;
}


html * {
    margin: 0;
}


p, ul {
    margin-top: 15px;
}


ul, ol {
    padding-left: 0;
    margin-left: 30px;
}


h1, h2 {
    margin-top: 15px;
}


h1, h2 {
    font: 1.7em "Apple Garamond", "Times New Roman", "Garamond", serif;
    line-height: 1.7em;
    margin-bottom: 0;
}


h2 a, h1 a {
    text-decoration: none;
    color: #333;
}


h1 a:hover, h2 a:hover {
    color: #036;
}


h1 {
    font-size: 1.9em;
}


h3 {
    margin-top: 1em;
}


h6 {
    font-size: 0.8em;
    font-weight: normal;
    margin: 0;
    color: #666;    
}


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


hr {
    display: none;
}


blockquote {
       padding: 3px 0 0 25px;
       margin: 3px 3px 3px 15px;
    background:#fff


}


code {
    font: 110% "Lucida Console", "Courier New", "Courier", monospace;
}


pre {
    overflow: auto;
}


/**-----------------------------------------------------------------------------
** HEADER
**/ 
#header {
    height: 200px;
    background: #333;
    color: #fff;    
}


#header a {
    color: #fff;
}


#header a:hover, #header .current_page_item {
    background: #069;
    color: #fff;
}


#blog-title {
    vertical-align: text-bottom;
    float: left;
    width: 270px;
    height: 200px;
    text-transform: lowercase;
    font: 1.7em "Apple Garamond", "Garamond", serif;
    text-align: right;
    background: #333 url(images/bg-title.jpg) repeat-x;
    color: #fff;    
}


#blog-title a {
    display: block;
    width: 250px;
    height: 50px;
    line-height: 50px;
    padding: 150px 20px 0 0;
}


#pages {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    text-transform: lowercase;
}


#pages li {
    float: left;
    width: 8em;    
}


#pages a {
    display: block;
    height: 50px;
    width: 8em;    
    line-height: 50px;
    padding: 150px 0 0 0;
    text-align: center;
}


#header a {
    text-decoration: none;
}


#header a:hover {
    text-decoration: none;
}


/**-----------------------------------------------------------------------------
** FOOTER
**/ 
#footer {
    clear: both;
    font-size: 0.8em;
    padding: 50px 0;
    text-align: center;
}


#footer .main {
    border-top: 1px solid #ccc;
    color: #666;
}


/**-----------------------------------------------------------------------------
** CONTENT
**/ 
.main, #content {
    width: 740px;
    margin: 0 auto;
}


/**-----------------------------------------------------------------------------
** PRIMARY CONTENT (ENTRIES, COMMENTS, ...)
**/ 
#primary {
    width: 450px;
    padding-right: 20px;
    float: left;
    background: #fff url(images/bar-vertical.jpg) no-repeat right top;    
}


.entry {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}


#primary ul.archive-nav {
    list-style-image: none;
}


.meta {
    font-size: 0.85em;
    clear: both;
    color: #666;
}


.meta a {
    text-decoration: none;
    color: #666;
}


.meta a:hover {
    color: #036;
}


.meta span {
    padding-left: 14px;
    background: #fff url(images/doc.png) no-repeat left center;
}


.meta span.tags {
    background-image: url(images/folder.png);
}


.meta span.comments {
    background-image: url(images/comment.png);
}


.meta span.author {
    background-image: url(images/author.png);
}


.meta span.trackback {
    background-image: url(images/trackback.png);
}


.meta span.delicious {
    background-image: url(images/delicious.png);
}


#primary .totop img {
    width: 11px;
    height: 11px;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
}


#primary .totop {
    margin-left: 439px;
    clear: both;
}


.gravatar {
    float: right;
    margin: 30px 0 15px 10px;
}


#comments h2 {
    margin-top: 30px;
}


#comments ol {
    padding: 0;
    margin: 0;
    list-style-type: none;
    list-style-image: none;
    font-size: 0.9em;
}


#comments li {
    clear: both;
}


#comments ol div.poster {
    clear: both;
    padding: 0 20px;
    font-size: 0.95em;
    color: #666;
}


#comments .poster a {
    color: #666;
}


#comments .poster a:hover {
    color: #036;
}


#comments ol.no-gravatars div.poster {
    padding: 0 20px 0 40px;
}




#comments ol div.body {
    margin: 0 0 0 0;    
    width: 340px;    
    padding: 20px;
    background: #fff url(images/comment-field.png) no-repeat left top;
}


#comments ol.no-gravatars div.body {
    width: 340px;    
    padding: 20px;
    margin-left: 20px;
}


#comments fieldset {
    margin: 5px 0 0 0;
    padding: 0 80px 0 20px;
    width: 330px;
    border: 1px solid #fff;
}


#comments legend {
    display: none;
}


#comments form ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}


#comments form li {
    margin: 5px 0;
}


#comments .textfield {
    width: 50%;
}


#comments textarea {
    width: 98%;
}


#comments .number {
    font: 1.5em "Apple Garamond", "Times New Roman", "Garamond", serif;
    font-style: italic;
    color: #ccc;
    text-align: right;
    padding: 0;
    margin: 0;
    width: 3em;
    float: right;
}


#comments .number a {
    color: #ccc;
    text-decoration: none;
}


#comments .number a:hover {
    color: #036;
}


.archive-nav {
    font-size: 0.9em;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0 0 5px 0;
    list-style-type: none;
    list-style-image: none;
}


.archive-nav li {
    width: 180px;
}


.archive-nav li a {
    display: block;
    width: 164px;
}


.back {
    float: left;
}


.back a {
    padding-left: 16px;    
    background: #fff url(images/back.png) no-repeat left center;
}


.next {
    float: right;
    text-align: right;
}


.next a {
    padding-right: 16px;
    background: #fff url(images/next.png) no-repeat right center;    
}


#primary h1 img, #primary h2 img, #primary h3 img {
padding: 0;
border: none;
}


/**-----------------------------------------------------------------------------
** SECONDARY CONTENT (SIDEBAR STUFF)
**/ 
#secondary {
    padding-left: 15px;
    width: 250px;
    float: right;
    font-size: 0.9em;
}


#secondary h2 {
    margin-bottom: 10px;
}


#searchform fieldset {
    padding: 0;
    margin: 0;
    border: 0px solid #fff;
}


#searchform legend, #searchform label {
    display: none;
}


#blog-description {
    font: 1.6em "Apple Garamond", "Garamond", serif;
    padding: 15px;
    background: #fff url(images/bg-description.jpg) no-repeat;
}


.fold {
    display: none;
}


.foldButton, .unfoldButton {
    display: block;
    position: relative;
    left: 220px;
    margin-top: -1.3em;
    height: 25px;
    width: 25px;
    cursor: pointer;
    background: #fff url(images/fold.png) no-repeat;
}


.unfoldButton {
    background: #fff url(images/unfold.png) no-repeat;    
}


ul.linklist, ul.linklist ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    border-top: 1px solid #ccc;
}


ul.linklist ul {
    border: none;
}


ul.linklist a, ul.linklist ul a {
    padding: 0.2em 0;
    width: 100%;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    color: #333;
}


ul.linklist ul a {
    width: 95%;
    padding-left: 5%;
}


ul.linklist a:hover {
    background: #069;
    color: #fff;
}


ul.descriptionlist  {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}


ul.descriptionlist  li {
    margin-bottom: 0.5em;
}


#sidenotes h3 {
    font-size: 1em;
}


#sidenotes p {
    margin-top: 0;
}


ul.cloud {
    padding: 0;
    margin: 0;
    list-style-type: none;
    list-style-image: none;
}


.cloud li {
    display: inline;
    margin-right: 5px;
}


/**-----------------------------------------------------------------------------
** UTILITIES
**/ 
.clear {
    clear: both;
    margin: 0;
    padding: 0;
}


.hide {
    display: none;
}


.center {
    text-align: center;
}


.alignright, .lzimg-right {
    float: right;
}
    
.alignleft, .lzimg-left {
    float: left
}


#primary img, #photos img {
    padding: 4px;
    border: 1px solid #ccc;
}


#primary .totop img {
    border: 0;
}


img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
img.alignright, img.lzimg-right {
    padding: 4px;
    margin: 15px 0 15px 15px;
    display: inline;
}


img.alignleft, img.lzimg-left {
    padding: 4px;
    margin: 15px 15px 15px 0;
    display: inline;
}
    
img.noborder {
    border: none;
}


img.simple, #primary img.wp-smiley {
    padding: 0;
    margin: 0;
    border: 0;
}


.flickr {
    color: #06c;
}


.flickr span {
    color: #c00;
}


#primary a.extlink {
    padding-right: 12px;
    background: #fff url(images/external-link.png) no-repeat right center;
}

Alles anzeigen

Monika

.primary umgibt den Inhalt
mehr als das hast du nicht an Breite

Code

.main, #content {
    width: 740px;

.secondary umgibt die sidebar

dot sind die prinziellen breiten angegeben

[COLOR=#000000][COLOR=#FF9900]#primary .totop da ist ein negatives margin, das wirst du auch ändern

müssen, wenn du was breiter machst

[/COLOR][/COLOR]
[COLOR=#000000][COLOR=#006600].[/COLOR][COLOR=#0000CC]foldButton[/COLOR][COLOR=#006600], .[/COLOR][COLOR=#0000CC]unfoldButton [/COLOR][COLOR=#006600]

auch da sind breiten und margins die verändert werden müssen nachher

kann sein auch alles das

blog-title heißt

fange an primary breiter zu machen und dann gleich secondary um genau dies pixel schmaler,

dann musst du dich *durchhanteln*

das ist der Nachteil bei so absolut fix breiten Designs

lg

[/COLOR][/COLOR]

Largo

Merci. Es funktioniert.

digicool

ich werde mal das Thema wieder hoch bringen :mrgreen:

mein erster beitrag im Forum und gleich blöde frage

es ist so das ich seit kurzem ein Foto Blog betreibe http://www.digicool.de/blog
in mittelpunkt stehen die Fotos, momentan mache ich es zwar mit solch einen kommischen plug in, das funktioniert auch ganz gut, aber auf den "kleinen" Bildschirmen (17,19zoll) ist es schon Problematisch, da ich auch die fotos entsprechend auf meinem 24 iMac bearbeite und reinstelle, und dazu sehen die Thumbnails auch sche.. aus, unscharf und iregentwie scaliert :(
habe die WP Theme von Tout est dans le titre und jetzt muß ich es so anpassen das die Bilder in voller auflösung also Breite so um 850 bis 900px angezeigt werden.
Ich habe zwar paar werte für breite gefunden und geändert aber scheinbar auch nicht alles richtig gemacht.
daher die Frage ob ein WP Freak bir dabei helfen kann, ich glaube für jemanden der das öffters macht ist es eine sache von 3 minuten, oder unterschätze ich da etwas?
ansonsten natürlich suche ich paar gute Tipps damit ich es selber auf die reihe kriege

gruß
vitali

digicool

weißt das wohl keiner :-D

illuminu

Mahlzeit.

Ich hätt gern das Design (im Anhang als .txt!) an die Seitenbreite (edit: browserbreite) angepasst.

Aber wie mach ich das? hab versucht das oben nach der anleitung zu finden aber die meisten klassen und ids sind nich vorhanden.

Sry, dass ich so nen uralt-thread wieder ausgrabe ;)

kaiser

( illuminu) Bitte kein Thread-Hijacking betreiben, sondern eigene Threads aufmachen. Danke!

Weiters bitte die Forenregeln lesen und den Code-Button verwenden. Auch hierfür: Danke!

illuminu

sry kaiser. ich dachte nur es wäre vielleicht schlauer das in einen thread zu packen als x-tausende aufzumachen. desweiteren passen 21tsd Zeichen nicht in den Beitrag.

Bin doch kein noob! :D
ich könnts ja selbst umschreiben aber... ich weiss nich was ich umschreiben soll. da "width: 90%" reinzusetzen kann jeder laie :D aber die richtigen stellen finden is was anderes.

David Lorenz

Guten Morgen,

ich habe folgendes Problem (Word Pres 2.7.1, Kubrick Theme). Ich würde meinen kompletten Blog im Browser gerne linksbündig (bisher zentriert) ausrichten, habe aber keine Ahnung wo ich das anpassen kann. Wäre super, falls mir jemand helfen könnte.

Vielen dank im voraus!

(passt nicht ganz zum Thema hier, wollte aber keinen neuen Thread aufmachen)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme breite ändern

Jetzt mitmachen!