1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Design breiter machen

Dieses Thema im Forum "Design" wurde erstellt von mrockoff, 11. Juli 2005.

  1. mrockoff

    mrockoff Member

    Registriert seit:
    11. Juli 2005
    Beiträge:
    13
    Zustimmungen:
    0
    Ich würde gern das Design Blix 0.9.1 und/oder Almost Spring 1.1 gern eine wenig breiter machen, sodass auch Fotos mit einer breite von 640 vlt. auch 700 px hineinpassen...

    in welche Datei muss ich hierfür gehen und was genau soll ich da ändern.

    mfg

    mrockoff
     
  2. Christof

    Christof Well-Known Member

    Registriert seit:
    14. März 2005
    Beiträge:
    122
    Zustimmungen:
    0
    Das sollte sich in deiner style.css finden lassen.

    Dort suchst du nach den Breitenangaben und passt diese deinen Wünschen an.
     
  3. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    1
    ich kenne beide themes nicht, doch wie Du dies herausfinden kannst, habe ich beschrieben,

    folge einfach dem link in meiner Signatur,

    es stimmt prinzipiell was Christof sagt,
    aber nicht jeder der Breitenangabeb macht den Bereich breiter, den Du suchst.

    lG
    Monika
     
  4. mrockoff

    mrockoff Member

    Registriert seit:
    11. Juli 2005
    Beiträge:
    13
    Zustimmungen:
    0
    mhh .. naja in der style.css wurde ich erstmal in die Layout.css umgeleitet, aber hier find ich mich wenig zurecht...

    wie wird denn der Bereich genannt, der umgestellt werden sollte?

    Habe hier mal den Inhalt der Datei hineingestellt: überall, wo 650 px bei width steht, habe ich schon dranrumgedreht, hat aber nicht den Eroflg gebracht.


    /* reset
    --------------------------------------------------*/
    body,h1,h2,h3,h4,h5,h6,p,form,fieldset {margin:0;padding:0;}
    .low {display:none;}


    /* body
    --------------------------------------------------*/
    body {
    margin:0;
    padding:15px 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:75%;
    line-height:1.6em;
    text-align:center;
    }

    body#commentspopup {padding:0;}


    /* headings
    --------------------------------------------------*/
    h1 {font-size:30px;}

    #content h2 {
    margin:0 0 18px 0;
    font-family:Georgia, serif;
    font-size:1.6em;
    font-weight:normal;
    }

    #content h3 {
    margin:0 0 18px 0;
    font-size:1em;
    }

    #content h4 {
    margin:0;
    font-size:1em;
    }

    #content.archive h2 {margin:0 0 26px 0;}

    #content.archive h3 {
    margin:0 0 10px 0;
    font-family:Georgia, serif;
    font-size:1.3em;
    font-weight:normal;
    }

    #content.archive h4 {
    margin:0 0 18px 0;
    font-size:1em;
    }

    #content.archive h5 {
    margin:0;
    font-size:1em;
    }


    /* links
    --------------------------------------------------*/
    a {text-decoration:none;}

    a img {border:none;}


    /* paragraphs, lists, etc
    --------------------------------------------------*/
    p {
    margin:0;
    padding:0 0 18px 0;
    }

    ul {
    margin:0 0 0 1.4em;
    padding:0 0 18px 0;
    }

    ul ul {padding:0;}

    blockquote {
    margin:0;
    padding:0 18px;
    font-style:italic;
    }

    pre {
    overflow:auto;
    margin:0 0 18px 0;
    padding:4px;
    }

    pre, code, kbr {font-family:Courier, Monaco, monospace;}

    code, kbr {padding:0 2px;}

    abbr, acronym {
    font-size:0.9em;
    letter-spacing:1px;
    }


    /* images
    --------------------------------------------------*/
    img.left {
    float:left;
    margin:0 12px 0 0;
    }

    img.right {
    float:right;
    margin:0 0 0 12px;
    }

    img.center {
    display: block;
    margin:0 auto;
    }


    /* container
    --------------------------------------------------*/
    #container {
    width:690px;
    margin:0 auto;
    padding:30px 30px 0 30px;
    text-align:left;
    }

    #commentspopup #container {
    width:455px;
    padding:0 15px;
    }


    /* header
    --------------------------------------------------*/
    #header {
    height:115px;
    padding:0 0 0 18px;
    }

    #header h1 {
    /*display:none; This will hide the text in your header */
    padding-top:50px;
    }



    /* navigation
    --------------------------------------------------*/
    #navigation {
    height:2.7em;
    line-height:2.7em;
    }

    #navigation ul {
    margin:0;
    padding:0;
    }

    #navigation li {
    float:left;
    margin:0;
    padding:0;
    list-style-type:none;
    border-right:1px solid;
    white-space:nowrap;
    }

    #navigation li a {
    display:block;
    padding:0 18px;
    font-size:0.8em;
    text-transform:uppercase;
    letter-spacing:1px;
    }

    * html #navigation a {width:1%;} /* see http://www.positioniseverything.net/explorer/escape-floats.html */

    #navigation form {
    float:right;
    height:100%;
    width:189px;
    padding:0 15px;
    border-left:1px solid;
    line-height:0;
    }

    #navigation form fieldset {
    /* centering the search form could've
    been done way more elegant but IEWin
    and Opera refused to follow the rules */
    margin-top:7px;
    border:0 solid; /* Opera */
    }

    * html #navigation form fieldset {margin-top:7px;}

    #navigation #s {
    height:1.5em;
    width:140px;
    margin:0 5px 0 0;
    padding:0;
    border:1px solid;
    font-size:0.8em;
    vertical-align:middle;
    }

    #navigation #searchbutton {
    height:2em;
    width:auto;
    padding:0 1px;
    border:1px solid;
    font-size:9px;
    letter-spacing:1px;
    text-align:center;
    vertical-align:middle;
    }


    /* content
    --------------------------------------------------*/
    #content {
    float:left;

    width:650px;
    padding-top:32px;
    }

    .singlecol #content {
    float:none;
    width:650px;
    margin:0 70px;
    }

    #commentspopup #content {
    float:none;
    padding-top:0;
    }


    /* entry
    --------------------------------------------------*/
    .entry {margin:0 0 40px 0;}

    .entry .info {
    position:relative;
    margin-top:-3px;
    padding:3px;
    border-top:1px solid;
    border-bottom:1px solid;
    font-size:0.9em;
    }

    .entry.single {clear:both;}

    .entry.single .info {margin:0 0 22px 0;}

    .entry .info a {
    margin-right:6px;
    padding-right:9px;
    border-right:1px solid;
    }

    .entry .info em {
    padding-right:6px;
    font-style:normal;
    }

    .entry .author,
    .entry .editlink a {
    margin:0;
    padding:0 0 0 10px;
    border-left:1px solid;
    border-right:none
    }

    .entry #filedunder {
    clear:both;
    padding:3px 0 0 0;
    font-size:0.9em;
    border-top:1px solid;
    }


    /* mini-entry
    --------------------------------------------------*/
    .minientry {
    position:relative;
    margin:0px 0 35px 0;
    padding:10px 0;
    border-top:1px dotted;
    border-bottom:1px dotted;
    }

    .minientry p {padding:0;}

    .minientry .commentlink {
    margin-left:3px;
    padding-right:7px;
    border-right:1px solid;
    font-size:0.9em;
    }

    .minientry .permalink {
    margin-left:3px;
    font-size:0.9em;
    font-style:normal;
    }

    .minientry .author,
    .minientry .editlink a {
    margin-left:6px;
    padding:0 8px 0 10px;
    border-left:1px solid;
    font-size:0.9em;
    font-style:normal;
    }

    .minientry .editlink a {margin:0;}


    /* comments
    --------------------------------------------------*/
    #comments h2 {margin-bottom:24px;}

    #comments h2 a {
    margin-left:2px;
    padding-left:6px;
    border-left:1px solid;
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.55em;
    }

    #comments ul {margin:0 0 0 20px;}

    #comments li {
    position:relative;
    margin-bottom:18px;
    }


    #comments li p {padding:0 0 10px 0;}

    #comments .header {
    position:relative;
    min-height:19px; /* 19 + 3 +3 = 25px = height of gravatar */
    margin:0 0 10px 0;
    padding:3px 6px;
    }

    * html #comments .header {height:19px;} /* IEWin */

    #comments .header strong {font-family:Georgia,sans-serif;}

    #comments .header .gravatar {
    position:absolute;
    top:1px;
    right:1px;
    }


    /* form
    --------------------------------------------------*/
    form {padding:6px 0;}

    #commentform, #contactform {margin-bottom:18px;}

    form fieldset {border:0 solid;} /* Opera */

    form p {
    padding:6px 0;
    border-bottom:1px solid;
    }

    form label {
    display:block;
    float:left;
    width:60px;
    }

    #commentform label {margin:0 15px 0 15px;}
    #contactform label {margin:0 15px 0 0;}

    form em {
    margin-left:5px;
    font-size:0.9em;
    font-style:normal;
    }

    form input, form textarea {
    padding:3px;
    width:200px;
    border:1px solid;
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.9em;
    }

    form textarea {overflow:auto;}

    #commentform input {width:200px;}
    #commentform textarea {width:325px;}
    #contactform textarea, #contactform #bx_subject {width:465px;}

    * html #commentform textarea {width:320px;} /* IE WIN; but why? */
    * html #contactform textarea,
    * html #contactform #bx_subject {width:445px;} /* IE WIN; but why? */

    form .button {
    width:90px !important;
    border-bottom:1px solid;
    font-weight:bold;
    }

    #commentform .button {margin-left:90px;}
    #contactform .button {margin-left:75px;}

    form .hiddenfield {display:none;}

    form .info {padding-left:90px;}


    /* archives
    --------------------------------------------------*/
    .archive .postspermonth {
    margin:0;
    list-style:none;
    }


    /* content misc
    --------------------------------------------------*/
    .next a {float:right;}
    .previous a {float:left;}


    #entrynavigation {
    overflow: auto;
    height:1%;
    margin-bottom:13px;
    padding-bottom:13px;
    border-bottom:1px solid;
    font-size:0.9em;
    }


    /* subcontent
    --------------------------------------------------*/
    #subcontent {
    float:right;
    width:205px;
    padding:15px 0 0 15px;
    font-size:0.9em;
    line-height:1.5em;
    }

    * html #subcontent {padding-top:32px;} /* dirty fix for IEWIN; temporary! */

    #subcontent ul, #subcontent p {margin:0 10px;}


    /* subcontent headings
    --------------------------------------------------*/
    #subcontent h2 {
    margin:18px 0 10px 0;
    font-family:Georgia,serif;
    font-size:1em;
    line-height:1em;
    }

    #subcontent h2 em {
    display:block;
    padding:5px 10px;
    font-style:normal;
    }


    /* subcontent list
    --------------------------------------------------*/
    #subcontent ul li {
    margin:2px 0 2px 18px;
    padding-bottom:2px;
    border-bottom:1px solid;
    }

    #subcontent li a {
    display:block;
    padding:1px 0;
    height:1%; /* IE WIN */
    }

    #subcontent ul.categories li ul {margin:0;}

    #subcontent ul.categories li li {
    margin:0;
    padding:0 0 3px 0;
    border-bottom:none;
    }

    #subcontent ul.categories li ul ul {margin:0 0 0 16px;}


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

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

    #subcontent table thead tr {border-bottom:1px solid;}

    #subcontent table th {border-bottom:1px solid;}

    #subcontent table td {

    width:200px; /* maximaize width; honestly, I don't know much about tables... */
    padding:1px;
    font-size:0.9em;
    }

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

    #subcontent table td a {
    display:block;

    border-bottom:1px solid;
    font-weight:bold;
    font-size:1.15em;
    }

    #subcontent table tfoot {border-top:1px solid;}

    #subcontent table tfoot a {
    border:none;
    font-weight:bold;
    }

    #subcontent table tfoot #prev a {text-align:left;}
    #subcontent table tfoot #next a {text-align:right;}


    /* footer
    --------------------------------------------------*/
    #footer {
    clear:both;
    padding:40px 0 15px 0;
    font-size:0.9em;
    }

    .singlecol #footer {
    padding:25px 0 15px 0;
    }

    #footer p {
    padding:12px 0 18px 0;
    border-top:1px solid;
    }

    #footer strong {font-weight:normal;}

    .singlecol #footer p {
    padding:12px 70px 18px 70px;
    }

    Wäre für Hilfe echt dankbar.

    mfg

    mrockoff
     
  5. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    1
    mrockoff

    gib jeder Angabe, wo Du glaubst sie könnt helfen einen bunten *border*, dann siehste was Du brauchst,

    bevor Du mühseligst, planlos verteilst--
    dies hilft für den Überblick sehr.
    ´
    es kann nämlich auch sein, dass solche Angaben direkt in den php Dateien des themes stehen,...
    hab ich auch schon erlebt [:(]

    lg
    Monika
     
  6. mrockoff

    mrockoff Member

    Registriert seit:
    11. Juli 2005
    Beiträge:
    13
    Zustimmungen:
    0
    mhhh .. irgendwie ist php/css schwer..

    hab jetzt an verschiedenen Stellen gesucht und gedrückt, aber nix iss bei rausgekommen.

    mhh doppel mhh.

    Was sollte denn verändert werden ..

    .box
    #box
    #content
    .body
    ?

    bin leicht verwirrt, da es in der Datei container heißt.. ist dies dasselbe? Auch bei dem Tipp alles einem Rahmen zu geben... passiert nix... was ist hier los?

    grüße

    mrockoff
     
  7. Bionic

    Bionic Well-Known Member

    Registriert seit:
    24. April 2005
    Beiträge:
    197
    Zustimmungen:
    0
    Im Almost Spring Theme musst du in der style.css Datei nach folgendem Codesegment schauen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Da änderst du einfach die Werte bei width, aber frag mich nicht wieso hier zweimal width auftaucht, ich kanns mir nämlich nicht erklären *g*

    Auch musst du dann diesen Bereich anpassen
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Der Wrapper stellt die Gesamtbreite des Blogs dar, der content hingegen nur den Bereich, in dem deine Beiträge erscheinen. Der Wrapper wird aus dem Header, dem Footer, dem Content und der Sidebar zusammengesetzt. Sprich die Breite des Wrappers ist die Breite des Contents + die Breite der Sidebar ;)

    Bei Blix ist es ähnlich, hier sind nur die Bezeichnungen der Elemente anders. In diesem Theme sind alle Elemente des Blogs in dem Container. Um hier die Breite anzupassen, musst du die Breite des Containers ändern und die Breite des Contents.
    Sprich das hier:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und das hier:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Gegenfalls musst du auch noch die Hintergrundgrafiken, falls vorhanden, noch an die gewünschte Breite anpassen, aber das sollte dann wirklich kein Hexenwerk sein ;)

    Schönen Gruß Bionic
     
  8. mrockoff

    mrockoff Member

    Registriert seit:
    11. Juli 2005
    Beiträge:
    13
    Zustimmungen:
    0
    Erstmal vielen Dank für die Hilfe... jetzt kommen wir der Sache schon näher ...

    Habe im Almost Spring jetzt wrapper und content geändert.. passt ...

    Jedoch ist es immer so, dass, wenn ich ein Bild habe (im Querformat mit mehr als 600 px), dass es immer noch in die Sidebar hineinreicht, weil die Sidebar oder Naviliste nicht rüber gewandert ist.

    Siehe hier:
    http://www.tageausglas.s-y-k.org

    Könntest bitte mal nachsehen und beschreiben, was ich machen kann, damit das passt, besser gesagt auch querformatige Bilder ordentlich angezeigt werden.

    Vielen Dank.

    mfg

    mrockoff
     
  9. Bionic

    Bionic Well-Known Member

    Registriert seit:
    24. April 2005
    Beiträge:
    197
    Zustimmungen:
    0
    Du hast in deiner CSS Datei nochmal eine Angabe für den Contentbereich, das sieht so aus:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ändere hier die 480px auf 690px, wie du es vorhin bei der Content Klasse auch gemacht hast.

    Gruß Bionic
     
  10. mrockoff

    mrockoff Member

    Registriert seit:
    11. Juli 2005
    Beiträge:
    13
    Zustimmungen:
    0
    Danke, werde es heute abend mal probieren... noch eine Frage und dann ist auch gut .. (vielleicht :) )

    Wie kann ich Werbung mit diesem Code
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    richtig in den Footer einbauen, sodass die Werbung ganz untensteht ...

    Nochmals vielen vielen Dank

    mfg

    mrockoff
     
  11. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    1
    dies
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    ist ein hack für den Internet Explorer

    hier einfach Werte zu ändern kann Dir das gesamte layout in jedem Internet Explorer oder aber in den sogenannten Gecko browser wie firefox etc komplett schmeißen....

    bevor Du Dich freust sieh Dir Dein blog lieber in unterschiedlichen browsern an

    lG
    Monika
     
  12. mrockoff

    mrockoff Member

    Registriert seit:
    11. Juli 2005
    Beiträge:
    13
    Zustimmungen:
    0
    Hallo Monika.

    hab ich nun auch bereits gemerkt, dass das Blog mit verschiedenen Browsern unterschiedlich dargestellt wird.


    Mhh. im IE ist die Navileiste nach unten links gerutscht; im Firefox ist sie zwar noch rechts oben, überlappt aber die Fotos, die quer sind.
    mhh. was kann man denn da machen?

    Zu Bionic:

    den Eintrag
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    gibt es leider nicht, nur:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    bei Content.

    Was kann man noch machen ... gibt es vielleicht irgendwelche Designs, die für wordpress-Photoblogs besser geeignet sind und auch Bilder mit mer als 650px Breite gut darstellen können? Das Standard Classic kann es ja, sieht halt nur ein bissel lahm aus (vorallem der Kommmentsbereich ist unübersichtlicht).

    Auf Hilfe hoffend und den kopf nicht senkend.

    liebe grüße

    mrockoff
     
  13. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    1
    ich kenne derzeit kein style, dass so breite Bilder verträgt,
    1. kann ich mir dies nicht ansehen, weil dann die breiten Bilder mich zum horizontal scrollen zwingen und bei sowas klick ich einfach weg.

    2. es ist einfacher einen style anzupassen, der vom Grundgerüst passt und man Feinheiten ändern muss,

    als eine style.css, die browser hacks drin hat, wie dieses style.

    suchen......guggen ..ausprobieren...

    lG
    Monika
     
  14. mrockoff

    mrockoff Member

    Registriert seit:
    11. Juli 2005
    Beiträge:
    13
    Zustimmungen:
    0
    dann sollte vielleicht mal eins gebaut werden... traurigguck*

    liebe grüße

    mrockoff
     
  15. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    1
    mrockoff

    wie wärs:
    das was Du jetzt rechts stehen hast...oben als Menü ..mit ganz wenigen Punkten,
    also zB.: blogroll wär dann ein link werden zu einer andren Seite wo Deine links gezeigt werden,

    usw...

    dann könntest Du Fotos bis zu 750px (ist realistisch)-weil ganz am Rand kleben sollen sie ja auch nicht- zeigen?

    und ich empfehle Dir nie mehr als maximalst vier so große Bilder auf einer Seite sonst ist die Ladezeit mehr als bescheiden...

    Bilder in einem dezentem Rand?
    welche Farbe hast den gern?

    (heute die Spendierhosen anhat)

    dann mach ich Dir sowas, aber ich bin ehrlich ein link auf meine Seite wäre dann sehr, sehr nett von Dir...

    lG
    Monika
     
  16. mrockoff

    mrockoff Member

    Registriert seit:
    11. Juli 2005
    Beiträge:
    13
    Zustimmungen:
    0
    Hallo Monika,

    vielen Dank... für deine Hilfe. Ich wäre natürlich sehr interessiert und das mit dem Link auf deine Seite würde auch klargehen, nur ist das Blog nicht mein eigener und somit kann, ich nicht dafür garantieren, dass das Theme benutzt wird, da die endgültige Entscheidung beim Besitzer liegt, sie war aber sehr angetan von dem Vorschlag :D

    Also Rahmen find ich prinzipell super, vielleicht auch einer, der sich mit ein wenig Schatten vom Rest abhebt? Wegen Farben: auf jeden Fall hell ... blau oder grün, vielleicht auch ein schickes rot mit Farbverlauf ... unbedingt eine frisches, freundliches Layout?

    Hoffe dich nicht zu sehr zu beanspruchen ...

    mit vielen lieben grüßen

    mrockoff
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden