Anfänger will Menuspalte verkleinern

Lockenheld

Hallo, ich habe heute ein neues Themes installiert. Es gefällt mir ganz gut, nur jetzt würde ich gerne die rechte Menüleiste etwas schmäler machen. Welche Werte muss ich dazu in der style.css (?) ändern?

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

Kirchenschnack

Welches Theme

Hallo,
welches Theme nutze Du denn?
In den meisten Fällen müsste in der CSS Widget stehen und eine width="xxxpx" oder so in der Art.

Stefan

Lockenheld

Ich benutze dieses Theme http://konstruktors.com/WordPressTheme/SansserifRacer

Kirchenschnack

Entschuldige

da reichen meine Kenntnisse leider nicht für aus. Da steige ich auch noch nicht durch sehe nur das es mit content-sub und nav-sub zu tun haben muss aber wie man das jetzt ändert muss ich leider passen.

Lockenheld

Kann mir vielleicht noch jemand anderes weiterhelfen? Das wäre wirklich spitze :-)

gericoach

die Sidebar ist garantiert von der Größe, respektive Breite definiert. Du musst im Prinzip folgendes machen: Sidebar schmaler/ linke Sidebar anpassen/ rechte Sidebar anpassen. Oder halt nur linke und rechte Sidebar in den Größen verschieben. Wichtig ist, dass Du die Anpassungen links/rechts prozentual machst, links +20 px/ rechts -20px z.B.

Lockenheld

Auch wenn ich den Zusammenhang zwischen rechter und linker Siedebar jetzt nicht ganz verstanden habe ... Ich will einfach nur, dass die rechte Sidebar schmäler wird. Wenn es geht, dann kann die Hauptspalte, also die, in die ich poste auch ein wenig breiter werden. Nur das Problem ist, dass ich nicht weiß, wo und wie ich das ändern kann.

gericoach

Deine Sidebar hat doch oben Posts/ Widgets über die komplette Seite und darunter eine linke und eine rechte Sidebar, richtig? Um die rechte schmaler zu machen, muss die linke breiter werden, da das Layout definiert ist. Poste doch einfach mal die style.css

Lockenheld

Also ich habe folgende Sidebars zur Auswahl, um Widgets anzuordnen.
sidebar-page, sidebar-default, sidebar-posstnav, sidebar-postrelated, sidebar-links, sidebar-bottom, sidebar-ads.

Jedoch "funktioniert" von denen lediglich die sidebar-default. Also wenn ich ein Widget in die zum Bsp. sidebar-page ziehe, dann kann ich das Widget nachher auf meiner Seite nirgends entdecken.

Wenn ich mehrer Widgets nebeneinander schachteln könnte, wie in dem Beispiel auf der "Downloadseite", dann würde das das Problem auch lösen.

Lockenheld

Code

/*  
Theme Name: Sans-serif Racer
Theme URI: http://konstruktors.com/WordPressTheme/SansserifRacer
Description: Sans-serif Type Love
Version: 0.4
Author: Kaspars Dambis
Author URI: http://konstruktors.com/blog
*/


#header .logo a, #header #nav-main a, .more-link, #nav-sub ul li.current_page_item, .comments li.authorcomment cite,
.comments li.authorcomment cite a, #nav-sub li.current_page_item a, .comments li .commentcontent, .nav-v.nav-etries li span, 
.widget li.current-cat a, .widget li.current-cat, .pagetitle em, #header .logo, #content-sub h4 { 
/* Theme color */
    color: #f03; }


#footer .footer-info, .comments li .credits {
/* Theme color for border elements */
    border-color: #f03; }


#header #nav-main a, .nav-entry-pages a:hover, #header .slogan em, .nav-entry-pages a { 
/* Theme color for background */ 
    background: #f03; }


#content-sub h4, .postinfo { background: #eee; }




/* The rest of CSS */


body { font: 81.5%/140% sans-serif; color:#333; margin:0; color:#333; background: #fff; border-top:1.2em solid #eee; }
a { color:#104E8B; text-decoration:underline; }
a:hover { background:#eee; color:#000; text-decoration:none; }
h1, h2, h3, h4, h5, h6 { color:#000; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#000; text-decoration:none; border-bottom:1px dotted #ddd; }
h5 { font-style:normal; }
hr { display:none; }
blockquote { margin:1em 0; padding-left:2.5em; background: url('images/quotes.png') no-repeat 0 0.5em; clear:both; }


#soul { width:86%; max-width:78.2em; margin:0 auto; position:relative; left:-3%; }
#soul-content { float:left; width:96%; clear:both; padding: 0 2.5em; background:#fff; }


#header { padding:0; margin:0 0 0.5em 0; }
#header .logo { font-size:2.2em; line-height:1.1em; margin:0.7em 0 0 0; float:left; clear:both; width:100%; }
#header .logo a { text-decoration:none; }
#header .logo a:hover { color:#000; }
#header .slogan { color:#fff; font-size:0.88em; line-height:1.5em; clear:both; float:left; width:100%; margin:0.5em 0 0 0; }
#header .slogan em { padding:0.35em 0.8em; font-style:normal; }
#header #nav-main { width:38.8%; }
#header #nav-main ul { margin:2em 0 0 0;  }
#header #nav-main li { font-size:1em; line-height:2em; margin-right:0; }
#header #nav-main a { padding:0.25em 0.8em 0.3em; color:#fff; text-decoration:none; }
#header #nav-main a:hover { background:#000; }
#header #nav-main li.current_page_item a { color:#fff; background:#333; text-decoration:none; font-weight:bold; }


#content-sub { margin:0.5em 0 3em 0; font-size:0.88em; line-height:1.5em; }
#content-sub h2, h3, h4 { font-size:1.16em; }
#content-sub img.klogo { margin: 0.4em 1em 1em -0.6em; }
#content-sub .feedlink img { float:none; margin:0; vertical-align:middle; text-decoration:none; }
#content-sub h4 { padding:0; margin-bottom:1.1em; font-size: 1.24em; }
#content-sub h4 span { background:#fff; padding:0.4em 0.7em 0.4em 0; }


#nav-sub { margin:0 0 2em; line-height:1.4em; font-size:1.06em; }
#nav-sub ul { color:#666; line-height:1.4em; margin:0 -1.2em 0 1.2em; position:relative; left:-1.2em; }
#nav-sub ul ul { font-size:0.88em; color:#666; padding-left:1.5em; margin:0.7em 0 1em 1em; }
#nav-sub li { margin:0.5em 0; }
#nav-sub a { padding:0.2em 0;}
#nav-sub li.current_page_item a { font-weight:bold; text-decoration:none; }
#nav-sub li.current_page_item a:hover { }
#nav-sub li.current_page_item li a { font-weight:normal; text-decoration:underline; color:#236B8E; }
#nav-sub li.current_page_item li a:hover { color:#000; }


#footer { font-size:0.88em; line-height:1.4em; margin-top:6em; padding:0 0 3em; }
#footer a { color:#333; }
#footer input { font-size:1em; }
#footer #searchform { margin:0; padding: 2.5em 0 0 0;  }
#footer #searchform fieldset { border:none; padding:0; margin:0; }
#footer .credits { padding:0 0 4em 0; }
#footer .footer-links { padding-top:1em; }
#footer .footer-info { padding-top:1em; border-top:1.3em solid #eee; position:relative; top:-1.3em; }
#searchform fieldset { border:none; margin:1em 0; padding:0; }


.post { clear:both; float:right; width:100%; }
.post h2 a, .post h1 a { border:none; display:block; padding-right:1em; }
.post h2 a:hover, .post h1 a:hover { background:transparent; text-decoration:underline; }
.post h2 { font-size:1.7em; line-height:1.2em; margin-bottom: 0.2em; }
h1, .post h1 { font-size:1.8em; line-height:1.2em; margin:2em 0.5em 0.3em 0; }
.post img.img-def { padding:1px; border: 1px solid #ccc; }
.post p, .post ul, .post ol, .post dl { line-height:1.6em; }
.post .pages { border-top:1px solid #eee; border-bottom:1em solid #eee; padding:0.5em 0; margin-top:2em; }
.post .pages strong { margin-right:0.5em; }
.post .pages a { padding:0.1em 0.2em; }
.page h1 { margin-bottom:1em; }


div.image { margin:0.5em 0 1em 0; }
div.image p { width:90%; clear:both; margin:1em auto; font-size:0.88em; margin:0; }
div.image img { margin:1em 0; }
div.img-c { float:right; margin-left:1em; }
div.img-c p { text-align:right; float:right; }
div.img-c img { float:right; }
div.img-a { float:left; margin-right:1em; }
div.img-a p { text-align:left; float:left; }
div.img-a img { float:none; }
div.wide { margin:1em auto 1.5em; clear:both; width:100%; text-align:center; overflow:hidden; }
div.wide p { width:70%; margin-left:auto; margin-right:auto; }
div.wide img { float:none; padding:0; }
div.wide a:hover img { border-color:#ddd; background:#fff; }
div.withframe img { border:0.7em solid #eee; }
div.type1 img { padding:0.5em; border:1px solid #ccc; }
div.type2 img { padding:0.5em; border:3px double #ccc; }

Alles anzeigen

Lockenheld

Code

.postinfo, .postmetadata { color:#666; font-size:0.88em;  line-height:1.4em; }
.postinfo { margin:0 0 1.5em 0; padding:0; }
.postinfo span { padding:0.3em 1em 0.3em 0; background:#fff; }
.postinfo a, .postmetadata a { color:#666; }
.postinfo a:hover, .postmetadata a:hover { color:#000;  background:transparent; }
.single .postinfo { margin:0.5em 0 2em; }
.postinfo .date { color:#333; }
.postmetadata { color:#333; margin:2em 0; text-align:right; }
.postmetadata a { color:#333; }


.nav-v.nav-etries { font-size:1.1em; float:left; clear:both; width:100%;  padding:0 0 1em 0; margin:0; }
.nav-v.nav-etries li { float:left; margin:0.1em 0; width:100%;  clear:both; }
.nav-v.nav-etries li span { display:block; float:left; width:1.3em;  position:relative; left:-1.3em; margin-right:-1.3em; }
.nav-v.nav-etries li a { padding:0.1em 0; float:left; }
.nav-entry-pages { margin:3em 0 0 0; float:right; clear:both;  width:99.9%; }
.nav-entry-pages .next { text-align:right; }
.nav-entry-pages a { text-decoration:none; line-height:2em;  padding:0.3em 0.6em; color:#fff; }
.nav-entry-pages a:hover { background:#333; color:#fff; }
.search .post h4 { float:left; clear:both; width:100%; margin:1em 0  0.25em 0; }
.pagetitle em { font-style:normal; font-weight:bold; }
.pagetitle { margin:2em 0 0 0; font-size:1.8em; }
.sidebar-default { margin-top:2em; padding-bottom:1em; }
.bbin-c3 { margin-right:2em; }
ul.flat, ol.flat { margin-right: -2em; margin-bottom:1em;  margin-top:1em; padding-left:2em; float:left; width:100%; clear:both;  position:relative; left:-2em; }
ul.flat li, ol.flat li { margin-bottom:1em; }
.flat ul, .flat ol { padding: 0.5em 0 0 0; margin-left:1em; }
.flat ol { margin-left: 1.5em; }
.flat li li { margin-bottom:0.5em; }
ol.flat { list-style-type:decimal; }
.more-link { white-space:nowrap; }
.expandedlist { margin:1em 0; }
.expandedlist li { margin-bottom:0.5em; }
#wpstats { display:none; }
.wp-smiley { float:none; margin:auto; }


.ga-clear { float:left; clear:both; width:100%; }
.ga-mart1 { margin-top:1em; }
.ga-mart2 { margin-top:3em; }
.ga-mart3 { margin-top:5em; }
.ga-mart4 { margin-top:7em; }
.ga-marb1 { margin-bottom:1em; }
.ga-marb2 { margin-bottom:3em; }
.ga-marb3 { margin-bottom:5em; }
.ga-marb4 { margin-bottom:7em; }
.ga iframe { padding:1em 0; }
.ga-in-wide { width:468px; margin:2em auto; }
.ga-bt1 { border-top:1px solid #333; }
.ga-bt2 { border-top:1px dotted #666; }
.ga-bb1 { border-bottom:1px solid #333; }
.ga-bb2 { border-bottom:1px dotted #666; }
.ga-bt1l iframe { border-top:1px solid #333; }
.ga-bt2l iframe { border-top:1px dotted #666; } 
.ga-bb1l iframe { border-bottom:1px dotted #666; }
.ga-bb2l iframe { border-bottom:1px solid #333; }
.ga-rel { position:relative; left:-3em; margin-right:-3em; }


h2#comments, h2#addcomment { float:left; clear:both; width:100%; }
.comments { margin:1.5em 0 0; padding:0; }
.comments li { display:block; list-style-type:none; margin:0;  padding:1em 0 2em 0; float:left; width:100%; border-top:0.5em solid  #eee; }
.comments li.alt { background:#f9f9f9; }
.comments li .commentcontent { margin-top:-0.8em; }
.comments li .commentcontent span { color:#333; }
.comments li .credits { position:relative; top:-1.5em;  border-top-width:0.5em; border-top-style:solid; }
.comments li cite { color:#333; line-height:1.3em; margin:0 0 0.5em 0;  padding-top:1.2em; display:block; font-style:normal; font-weight:bold; }
.comments li .credits a { color:#333; }
.comments li .date { font-size:0.88em; line-height:1.3em;  font-style:normal; display:block; }
.comments li .date a { text-decoration:none; color:#666; }
#trackbacks { clear:both; float:left; width:100%; }
.trackbacks { margin-top:0; }
.trackbacks li { border:none; margin:1em 0 0.5em; padding:0; }
.trackbacks li .date { display:inline; font-size: 1em; }


#commentform label { display:block; width:100%; font-size:0.88em;  line-height:1em; margin:0 0 0.5em 0; }
#commentform textarea { width:95%; }
#commentform .credits input { width:95%; }
#commentform .note { font-size:0.88em; line-height:1.4em; color:#666; }
#commentform .note code { font-size:1em; }




.widget { float:left; clear:both; width:100%; margin-bottom:1em; }
.widget ul { padding:0; margin:1em -1.2em 0 1.2em; position:relative;  left:-1.2em; }
.widget li { padding-left:0; margin:0.3em 0;  }
.widget ul ul { padding-left:1.2em; margin:0 0 1em 1.1em; }
.widget li.current-cat a { text-decoration:none; } 
.widget li.current-cat { font-weight:bold; }
.widget li.current-cat li { font-weight:normal; } 
.widget li.current-cat li a { color:#236B8E; text-decoration:underline; }
.widget li a { padding:0.1em 0; }


.widget_observer li { list-style-type:none; margin-bottom:1em; } 
.widget_observer ul { margin-bottom:1.5em; }




@media print {
body { border:none; }
a { color:#000; }
#header #nav-main, #searchform { display:none; }
#soul { width:100%; margin:0; left:0; padding:0; }
#soul-content { padding:0; width:100%; }
}

Alles anzeigen

Lockenheld

Hab das Problem selber gelöst. Vielen Dank für die Hilfe!

Lockenheld

Bild zentrieren?

Hallo, kann mir vielleicht noch jemand helfen, wie ich in einem Post ein Bild zentrieren kann. Mit diesen HTML Schnipseln auf der Herstellerseite weiß ich nichts anzufangen :-(

mfitzen

Bilder per CSS zentrieren: http://www.wssexpert.de/Style/Examples/007/center.html#block

Du musst also rausfinden, ob dem Bild eine Klasse zugewiesen wird (siehe Quelltext) und diese dann wie im verlinkten Beispiel in der CSS Datei bearbeiten. Ansonsten einfach dem Bild eine neue Klasse zuweisen und die entsprechenden Eigenschaften der style.css hinzufügen.

Lockenheld

Also wenn ich ein Bild einfüge, erstellt er diesen HTML Code. Wenn ich das Bild zentrieren will muss ich doch laut der folgenden Seite class="img-b" einfügen, nur wo?
http://konstruktors.com/WordPressTheme/SansserifRacer

mfitzen

Zitat von Lockenheld

Wenn ich das Bild zentrieren will muss ich doch laut der folgenden Seite class="img-b" einfügen, nur wo?

Na die class, die WP generiert (alignnone) ersetzen durch img-b.

Aber: <img class="alignnone... wird durch den WordPress Editor generiert. In der Mediathek kannst Du beim Einfügen eines Bildes die Ausrichtung verändern (keine, links, zentriert, rechts). Wählst Du dort zentriert dann erscheint sowas wie <img class="aligncenter... im Quelltext. Sollte das Bild dann trotzdem noch nicht zentriert dargestellt werden, musst Du die Klasse .aligncenter der style.css hinzufügen und wie im Link oben beschrieben anpassen.

Lockenheld

Ja, ich kann im Wordpress Editor zentriert einstellen, aber das Bild wird trotzdem nicht zentriert dargestellt. Wo füge ich den entsprechenden Text in der Style.css ein? Ich kenn mich in der nicht aus.

mfitzen

Ganz unten oder dort wo eventuell vorhandene Definitionen für images bereits eingetragen wurden. Wenn die Ausrichtung "zentriert" innerhalb der Mediathek nicht klappt, dann liegt das daran, dass die Definitionen für .aligncenter in der style.css fehlen oder aber durch bereits vorhandene wieder überschrieben werden.

Wenn Du mal einen Link zu solch einem Post mit zentriertem Bild bereitstellst, kann man Dir u.U. genauer sagen was zu tun ist.

Lockenheld

Das Bild habe ich eingefügt und per Wordpress Formular zentriert.

mfitzen

Füge der style.css mal folgendes hinzu:

Code

.aligncenter{float: none; margin: 0 auto;}

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Anfänger will Menuspalte verkleinern

Jetzt mitmachen!