Theme Aqua Blue Breite anpassen - bitte, wer kann helfen?

elimes

hi,
ich nutze das theme "aqua blue" und scheitere an der css-datei. kann mir bitte jemand sagen, wie ich das theme anpassen muss, damit der content breiter wird? also der bereich der postings soll etwas breiter werden. es geht grade mal um 80 pixel:

gekürzt:

Code

/* Theme Information
    
    Theme Name: Aqua Blue
    Theme URI: http://www.themespanel.com/aqua-blue-theme/
    Description: A theme with 2 columns and right sidebar. Theme options  include Twitter and feed integration, advanced automatic thumbnails,  custom style and more. Custom menu and Ad-sense ready. Tested on WP 3.0  using Firefox, IE7, IE8, Google Chrome, Safari and Opera.    
    Version: 2.02
    Author: ThemesPanel.com
    Author URI: http://www.ThemesPanel.com/
    Tags: two-columns, blue, fixed-width, right-sidebar, theme-options, threaded-comments, sticky-post
    Theme Support: Please leave your theme related issues in the comment  section found at http://www.themespanel.com/aqua-blue-theme/
*/


@import url("includes/css/css_reset.css");


/*    [ Basic HTML ]                                                  */<!-- -->
body {
    font-size: 12px;
    font-family: Arial, Helvetica, Sans-Serif;
    color:#17586D;
    background:#175E92 url('images/bg_repeat.jpg') repeat-y center top;
}


a { color:#17586D; text-decoration:none;}
a:hover { color:#EE5003; text-decoration:underline;}


h1 {font-size:30px;}
h2 {font-size:26px;}
h3 {font-size:21px;}
h4 {font-size:17px;}
h5 {font-size:14px;}
h6 {font-size:12px;}


hr { height:1px; border:none; border-top:1px dashed #17586D; width:95%; }
del { color:red; }
ins { color:green; }
code { font:1.1em 'Courier New', Courier, Fixed; }


blockquote {
    clear:left;
    text-align:justify;
    padding:0px 0px 0px 22px;
    margin:10px 10px 10px 10px;
    border-left:2px solid #17586D;
}
input,select,textarea {
    font-size:12px;
    font-family:Arial, Helvetica, Sans-Serif;
}


ol { list-style:decimal; }
ul { list-style:disc; }
li { margin-left:20px; }


p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset {
    margin-bottom:20px;
}


/*    [ Predefined Class ]                                            */<!-- -->
.alignleft { float:left; }
.alignright { float:right; }
.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
img.alignleft {
    margin:0 8px 8px 0;
    display:inline;
}


img.alignright {
    margin:0 0 8px 8px;
    display:inline;
}


img.centered {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.clear { clear:both; }
.spacer { height:30px; }
.hide-div { display:none; }
/* .indent{ display:block; font-size:1%; line-height:0; text-align:left; text-indent:-10000px; } */


/*    [ Layout ]                                                      */<!-- -->
#bg_top{
    background:url('images/bg_top.jpg') no-repeat center top;
}
#bg_btm{
    background:url('images/bg_bottom.jpg') no-repeat center bottom;
}
#base {
    position:relative;
    margin:0px auto;
    width:980px;
    background:url('images/bg_center_repeat.jpg') repeat-y center top;
}
#header {
    position:relative;
    height:280px;
    background:url('images/bg_header.jpg') no-repeat center top;
}
#container {
    overflow:hidden;
    width:980px;
    background:url(images/bg_container_top.jpg) no-repeat top center;
}
#menubar {
    position:absolute;
    bottom:0px;
    left:-2px;
    width:800px;
    height:36px;
}
#content {
    float:left;
    display:inline;
    overflow:hidden;
    width:655px;
    margin:4px 0 0 23px;
    padding:13px 0px 0 0px;
}


#featured {
    padding:30px 0px 0px 0px;
    margin:0;
}


#sidebar {
    float:right;
    overflow:hidden;
    display:inline;
    width:280px;
    padding:0;
    margin:0 10px 0 0px;
}


#footer {
    overflow:hidden;
    color:#FFF;
    font-size:12px;
    line-height:1.1em;
    height:42px;
    padding:390px 365px 0 35px;
    background:url('images/bg_footer.jpg') no-repeat center bottom;
}
#footer a {
    color:#FFF;
}


/*    [ Header ] Blog Title, Description                              */<!-- -->
#blog_name {
    position:relative;
    width:700px;
    font-family:Arial, Helvetica, Sans-Serif;
    font-size:40px;
    font-weight:bold;
    padding:85px 0 10px 210px;
    margin:0;
    text-shadow: #523013 0px 0px 2px;
}
#blog_name a, #blog_name a:hover {
    font-family:Arial, Helvetica, Sans-Serif;
    color:#004B7C; 
    text-decoration:none;
}
#blog_desc {
    position:relative;
    width:650px;
    font-family:Arial, Helvetica, Sans-Serif;
    font-size:14px; 
    color:#3B7B8C;
    font-weight:normal;
    padding:0px 0 5px 220px;
    margin:0;
    text-shadow: #523013 0px 0px 2px;
}
#header .indent {
    display:block; font-size:1%; line-height:0; text-align:left; text-indent:-10000px;
}
#header .home {
    position:absolute;
    margin:0px;
    padding:0px;
    left:0px;
    top:0px;
    width:800px;
    height:240px;
}


/*        [ Container ] Search Box                                        */<!-- -->


.mainsearch {
    overflow:hidden;
    width:256px;
    height:74px;
    margin:10px 0 10px 10px;
    background:url('images/bg_search.png') no-repeat 0px 0;
}
.mainsearch .keyword {
    width:162px;
    height:20px;
    margin:26px 0 0 66px;
    font-size:14px;
    line-height:20px; /* fix ie8 */
    font-family:Arial, Helvetica, Sans-Serif;
    font-weight:bold;
    text-transform:uppercase;
    color:#293A28; 
    border:none;
    background:transparent;
}
.mainsearch .submit {
    position:absolute;
    cursor:pointer;
    border:none;
    top:20px;
    left:20px;
    height:40px;
    width:40px;
    background:transparent;
}
/*    [ RSS ]                                              */<!-- -->
.rss {
    position:absolute;
    overflow:hidden;
    display:block;
    top:207px;
    left:805px;
    width:67px;
    height:67px;
    background:url('images/bg_rss.png') no-repeat 0 0;
}
.rss:hover {
    background:url('images/bg_rss.png') no-repeat 0 -67px;
}
/*    [ Twitter ]                                          */<!-- -->
.twitter {
    position:absolute;
    top:194px;
    left:880px;
    display:block;
    width:59px;
    height:78px;
    background:url('images/bg_twitter.png') no-repeat 0 0;
    overflow:hidden;
}


.twitter:hover {
    background:url('images/bg_twitter.png') no-repeat 0 1px;
}


/*    [ Menu ]  Level 1                                               */<!-- -->
#access {
    position:absolute;
    list-style:none;
    width:800px;
    height:36px;
    margin:0;
    padding:0;
}


#access a {
    height:36px;
    display:block;
    text-decoration:none;
    color:#000000;
    padding:0 10px;
    line-height:30px;
    text-transform:uppercase;
    text-decoration:none;
    background:url(images/bg_menu_item.png) no-repeat 0 0;
}


#access .menu-header,
div.menu {
    font-size:13px;
    margin-left:12px;
}


#access .menu-header ul,
div.menu ul {
    list-style:none;
    margin:0;
}


#access .menu-header li,
div.menu li {    
    float:left;
    position:relative;
    font-size:11px;
    font-family:Verdana, Arial, Helvetica, Sans-Serif;
    font-weight:bold;
}


#access li {
    margin-left:0;
}


#access li:hover > a {
    color:#AC5C6F;
}


#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
    color:#000;
}


* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
    color:#000;
}


/*        [ Menu ]  Level 2                                        */<!-- -->
#access ul ul {
    visibility:hidden; 
    position:absolute;
    top:95%;
    left:0%; /* fix ie7 */
    border-top:1px solid #828C90;
    border-left:1px solid #828C90;
    border-right:1px solid #828C90;
    z-index:9999;
}


#access ul ul a {
    background:#E3F5F7;
    height:auto;
    line-height:1em;
    padding:10px;
    width:180px;
    border-bottom:1px solid #828C90;
}


#access ul li:hover > ul {
    display:block;
    visibility:visible;
}


#access ul ul :hover > a {
    color:#AC5C6F;
}


#access ul ul li {
}


/* level 3*/
#access ul ul ul {
    left:100%;
    top:-1px;
}


/*    [ Content ] Post                                                */<!-- -->
.post, #content .page {
    overflow:hidden;
    width:655px;
    margin:0 0 20px 0px;
    background:url('images/bg_post_title.jpg') no-repeat;

Alles anzeigen

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

Marcus[IS]

Mojn,

ich habe das Theme zwar jetzt nicht geladen, aber probiere mal den Wert in diesem Eintrag zu ändern;

Code

#content {
    float:left;
    display:inline;
    overflow:hidden;
    [COLOR=Red]width:655px;[/COLOR] <-- Diesen Wert mal versuchen zu erhöhen.
    margin:4px 0 0 23px;
    padding:13px 0px 0 0px;
}

Ob das jetzt ausreicht nur diesen einen Wert zu erhöhen, oder ob es jetzt auch wirklich die gesuchte Stelle ist, weiß ich nicht.
Es könnte sein, dass durch den breiteren Content sich das Layout verschiebt und andere Werte in der CSS dann noch angepasst werden müssten.
Für den Fall wäre ein Link zum Blog dann recht hilfreich. ;)

koslowski

Moin,

ohne Link zur Problemsite kann man nur rumraten. ;-)

Mal so nebenbei:

Zitat von 'Marcus[IS

;403799'],

Code

#content {
    float:left;
    display:inline;
    overflow:hidden;
}

Was ist das denn für eine unsinnige Kombination? :shock:

elimes

ihr habt recht

hi, mein fehler !!! ich habe den link zu seite vergessen. es geht um die website http://www.gif-animationen.de
vielen dank für eure hilfe, ich bin ganz baff wie schnell sich jemand bemüht :-P
cu
elimes

Marcus[IS]

koslowski

Zitat

Was ist das denn für eine unsinnige Kombination? :shock:

Diese Kombination stammt nicht von mir, sondern war im Codebereich des Eröffnungsbeitrag so enthalten.
Soll ich dann jetzt also Fehler von Dritten aufspüren und beseitigen?
Dann werde ich es in Zukunft halt so halten, dass wenn es Probleme mit Themes gibt, sich die User an die Themeautoren wenden sollen und mich dann nicht mehr äußern.

koslowski

du solltest validieren, weil dein Theme eine Reihe von teilweise groben technischen Fehlern enthält, die Einfluß auf die Darstellung haben könnten.

Die Formatierung ist teilweise absolut abenteuerlich z.B.:
overflow:hidden für #container, #content, #sidebar, #footer ?? :shock:

Wenn du den Textbereich vergrößern willst mußt du entweder die Breite der #sidebar entsprechend verringern, oder das/die umgebende(n) Element(e) verbreitern.

Boxmodell beachten!

elimes

ich versuchs mal

hallo marcus, hallo koslowski,
danke für eure bisherige hilfe. natürlich ist klar, dass der code nicht von dir, markus, sondern vom ersteller des themes ist. und merci auch an koslowski für deinen hinweis. auch der link auf das box-model ist hilfreich.
ich probiers mal, hoffe aber doch, evtl. nochmal auf euch zurück kommen zu dürfen :-)
cu
elimes

koslowski

Zitat von 'Marcus[IS

;403831'] koslowski
Diese Kombination stammt nicht von mir, sondern war im Codebereich des Eröffnungsbeitrag so enthalten.

Das der Code von dir kam habe ich auch nicht angenommen.
Das hast du vielleicht mißverstanden oder ich nicht deutlich genug kommuniziert. :)

elimes

hm

hi,
ich habe den bereich
" [COLOR=red]width:655px;[/COLOR] <-- Diesen Wert mal versuchen zu erhöhen"
mal erhöht. leider wird die seite nicht breiter, lediglich das menü (rechts) innerhalb der sidebar rutscht ganz nach unten.

dann habe ich mal den werte der "#sidebar" verkleinert, keine veränderung der breite. lediglich der text in der sidebar wurde rechts abgeschnitten.

wie kann ich denn "das/die umgebende(n) Element(e) verbreitern" verbreitern, welche einstellung ist das?

die geschichte mit den themes, css findet ich ja gar nicht mal so einfach ... ?

lg
elimes

koslowski

Zitat von elimes

die geschichte mit den themes, css findet ich ja gar nicht mal so einfach ... ?

ist es auch nicht! :wink:
CSS muss man lernen. Einen Link zum Boxmodell hab ich dir schon gegeben, das mußt du verstehen sonst kannst du die Breiten nicht anpassen.
Also nicht vergessen:
padding, margin, border gehören zur Breite mit dazu. width ist nur der innere Bereich einer Box!
CSS von Grund auf

Marcus[IS]

koslowski

Zitat

Das der Code von dir kam habe ich auch nicht angenommen.
Das hast du vielleicht mißverstanden oder ich nicht deutlich genug kommuniziert. :smile:

Oki, dann hab ich das missverstanden, sorry. Kam echt im ersten Moment so rüber.;)

elimes
Da hast du dir natürlich ein nicht gerade einfaches Theme gewählt.

Das Theme kam mir bekannt vor und ich kann mich ganz dunkel erinnern, dass wir vor gut einem Jahr mal einem anderem User hier versucht hatten bezüglich einer Änderung in der Sidebar zu helfen und wir damals schon bald an der css von diesem Theme verzweifelten.

Das Problem bei diesem Theme ist auch, dass wenn du die Breite angepasst bekommst, die Hintergrundgrafiken auch alle anpassen musst und das dürfte auch nicht so einfach werden, weil die Schattierungen und Farbverläufe alle in der Hintergrundgrafik eingearbeitet sind.:roll:

elimes

danke

viele dank, ihr gebt euch wirklich alle mühe, aber ich versteh das system leider immer noch nicht. ok, das mit den rahmen, polstern usw. leuchtet mir schon ein. aber ich kapiere nicht, WO ich z.b. die breite der gesamten seite, bzw. der einzelnen bereiche definiere. wäre es denn nicht möglich, den bereich der postings um 50 pixel zu vergrössern und gleichzeitig den bereich vom menü einfach um 50 pixel zu verkleinern?
oder die gesamte seite auf einen schlag etwas breiter zu machen?
mir gefällt das theme so gut, ich würde sogar alle bilder nachbearbeiten :D
aber WO muss ich die anpassungen vornehmen? an einer stelle, an zwei oder an mehreren?
danke nochmals für eure mühen, ich bin lästig, ich weiss ...
elimes

koslowski

Zitat von elimes

viele dank, ihr gebt euch wirklich alle mühe, aber ich versteh das system leider immer noch nicht.

das ist wie gesagt auch nicht einfach und erfordert Zeit.
Bis man mal versteht wo in welchen Templates was steht und wo welche Änderungen was für Auswirkungen haben.....umpf :?

Ganz wichtig ist es imho XHTML/CSS einigermaßen drauf zu haben (PHP reichen normal Grundkenntnisse), sonst ist immer ganz schnell Ende Gelände.
Wenn du motiviert bist und entsprechende Zeit investieren willst schaffst du das auch. :-)

elimes

wysisyg

hi,
sowas wie einen wysisyg-editor für css gibt es wohl nicht? ;-) ich finde es ärgerlich, für nur ein paar pixel mehr theme-breite mich tagelang einlesen zu müssen. ich habe ja nicht vor, das ganze theme neu zu erfinden.
aber so kleine änderungen (die grafiken mal aussen vor gelassen) sollten sich doch einfacher bewerkstelligen lassen.
eine frage noch, ihr als profis, wielange würdet ihr dafür brauchen, nur die breite, ohne grafiken, anzupassen?
cu
elimes

koslowski

Zitat von elimes

eine frage noch, ihr als profis, wielange würdet ihr dafür brauchen, nur die breite, ohne grafiken, anzupassen?

beim eigenen Theme - wenige Minuten
beim fremden Theme - nehme ich nicht da die Codierung oft sehr ....äh....eigenwillig ist.

Solche wysisyg-editoren sind nur Krücken, die immer suboptimalen Code erzeugen.
Profis arbeiten deshalb normal eh nur auf der HTML-Seite und nie auf der Ansichtsseite (visuell). Aber dazu braucht es halt solide XHTML/CSS-Kenntnisse. ;)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme Aqua Blue Breite anpassen - bitte, wer kann helfen?

Jetzt mitmachen!