Design breiter machen

mrockoff

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

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

Christof

Das sollte sich in deiner style.css finden lassen.

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

Monika

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

mrockoff

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

Monika

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

mrockoff

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

Bionic

Im Almost Spring Theme musst du in der style.css Datei nach folgendem Codesegment schauen:

Code

#content {
	float: left;
	padding: 0 20px;
	width: 520px;
	voice-family: "\"}\""; 
	voice-family: inherit;
	width: 480px;
}

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

#wrapper {
	margin: 0 auto;
	width: 750px;
	background-color: #FFF;
	text-align: left;
}

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

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

und das hier:

Code

/* content
--------------------------------------------------*/
#content {
  float:left;
  width:455px;
  padding-top:32px;
}


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

Alles anzeigen

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

mrockoff

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

Bionic

Du hast in deiner CSS Datei nochmal eine Angabe für den Contentbereich, das sieht so aus:

Code

html>body #content {
	width: 480px;

Ändere hier die 480px auf 690px, wie du es vorhin bei der Content Klasse auch gemacht hast.

Gruß Bionic

mrockoff

Danke, werde es heute abend mal probieren... noch eine Frage und dann ist auch gut .. (vielleicht :) )

Wie kann ich Werbung mit diesem Code

Code

<script type="text/javascript"><!--
google_ad_client = "pub-3688286501115566";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_url = "008000";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Alles anzeigen

richtig in den Footer einbauen, sodass die Werbung ganz untensteht ...

Nochmals vielen vielen Dank

mfg

mrockoff

Monika

dies

Code

#content {
	float: left;
	padding: 0 20px;
	width: 520px;
	voice-family: "\"}\""; 
	voice-family: inherit;
	width: 480px;
}

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

mrockoff

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

html>body #content {
   width: 480px;

gibt es leider nicht, nur:

Code

/* content
--------------------------------------------------*/
#content {
  float:left;
  width:690px;
  padding-top:32px;
}


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


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




/* entry
--------------------------------------------------*/

Alles anzeigen

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

Monika

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

mrockoff

dann sollte vielleicht mal eins gebaut werden... traurigguck*

liebe grüße

mrockoff

Monika

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

mrockoff

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

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Design breiter machen

Jetzt mitmachen!