Cómo cambiar el ancho del post en una plantilla de WordPress

manuelanorga · 27 Ene 2011

Hola amigos, estoy probando el theme hacker wp en mi blog ( Cultura Pop Amplificada ) y me gusta. He logrado customizar los colores, encabezados, etc pero no encuentro la forma de cambiar el ancho del post y reducir las etiquetas que estan hacia el lado derecho.

Por ejemplo: Si ven este articulo (Video: Vanessa Hudgens posa muy linda para Candie) podrán darse cuenta que el video de youtube ( 640 de ancho) sale muy bien, pero el texto del articulo como que se ve muy delgado. QUisiera que el articulo sea tan ancho como el video...

Quisiera su ayuda para poder arreglar bien el css.

Aqui le dejo el codigo, espero me den una mano:

De ante mano, muchas gracias!

HTML:

/*
Theme Name:   HackerWP
Theme URI:    http://ericulous.com/2010/08/24/wp-theme-hackerwp/
Description:  Gawker Lifehacker Clone
Version:      1.0
Author:       Genkisan
Author URI:   http://www.ericulous.com
Tags: white, fixed width, three columns, widgets
*/

* { 
margin: 0; 
padding: 0;
}

body {
background: #fdfdfd;
color: black;
text-align: center;
font-size: 0.8em;
line-height: 18px;
font-family: Arial, "Times New Roman", serif;
}

a { color:#666666; text-decoration: none; }
a:hover { text-decoration: underline; }

p { 
margin-bottom: 18px; 
}

blockquote { 
margin: 0 18px 18px 18px;
color:#333;
}

ul {
list-style-type: square;
margin-left: 2em;
}

ol {
margin-left: 2em;
}

h1 { 
font-size: 1.6em; 
line-height: 36px;
margin-bottom: 18px; 
}

h2 { 
font-size: 1.4em; 
line-height: 36px;
margin-bottom: 18px;
}

h3 { 
font-size: 1.3em; 
line-height: 18px;
margin-bottom: 20px;
}

h4 { 
font-size: 1.2em; 
line-height: 18px;
margin-bottom: 20px;
}

.container {
margin: 0 auto;
padding: 0;
width: 980px;
}


/* HEADER */
.header {
background: #fdfdfd url(images/headerbar.gif) left top no-repeat;
height: 60px;
text-align:left;
margin: 15px 0 10px 0;
}

.logo { width:155px; padding: 3px 0 0 15px; float: left; }
.logo img { border: none; }
.logo a:hover { color: #333; text-decoration: none; }

.search {
background: transparent url('images/search.gif') left top no-repeat;
height: 20px; 
width: 154px;
margin: 18px 10px 0 35px !important;
margin: 18px 5px 0 20px;
float:left;
}

.search input {
background: none;
padding: 3px 0 0 10px;
border: none;
width: 120px;
}

.searchbottom {
background: transparent url('images/searchbottom.gif') left top no-repeat;
height: 20px;
width: 154px;
margin: 0 5px 0 0 !important;
float:right;
}

.searchbottom input {
background: none;
padding: 3px 0 0 10px;
border: none;
width: 120px;
}

#nav{
float:left;
width:475px;
padding: 15px 0 0 10px;
}

#nav, #nav ul {
list-style: none;
}

#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}

#nav li {
float: left;
list-style:none;
}

#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #fff;
margin-left:3px;
padding:6px 12px;
}

#nav a:hover, #nav a:active, #nav .current_page_item a, #home .on {
background:#222222;
text-decoration:none;
}

#nav a:hover, #nav a:active, #nav .current-menu-item a, #home .on {
background:#222222;
text-decoration:none;
}

a.main:hover {
background:none;
}

.header_rss {
float:left;
display:block;
margin-top:15px;
width:30px;
}

.header_rss img{
border:none;
}

.headergallery {
padding-top: 10px;
text-align: left;
overflow: hidden;
}

.headergalleryimage {
float: left;
width: 206px;
height: 250px;
margin-right: 19px;
position: relative;
border: 0;
border-right: 1px solid #ddd;
}

.headergalleryimage img {
border: 1px solid #ddd;
width:185px;
height:185px;
}

.headergalleryimage a {
color: #000;
font-size: 1.1em;
font-weight: bold;
}

.headergallery .cats a {
color: #aaa;
font-size: 0.9em;
font-weight: normal;
text-transform: lowercase;
}

.headergallery .cats a:hover {
text-decoration: underline;
}


/* POSTS */
.postwrapper {
background: #fdfdfd url(images/contentbg.gif) left top repeat-y;
float:left;
margin: 0;
padding: 0;
}

.post {
text-align:left;
width: 780px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #ddd;
float:right;
}

.post h1 {
font-size: 1.5em;
line-height: 18px;
margin-bottom: 10px;
}

.post h1 a {
color: #333333;
}

.post h1.homepageh1 {
font-size:1.1em;
line-height: 1.1em;
margin-top:5px;
float:left;;
}

.post .homepageexcerpt {
float:left;
width:270px;
margin-top:-8px;
}

.postimage {
float:left;
margin: 6px 10px 0 0;
}

.postimage img {
border: 1px solid #0066CC
padding: 7px;
width:160px;
height:120px;
}

.postnoline {
text-align:left;
width: 780px;
padding: 22px 0 22px 0;
float:right;
}

.posttopline {
border-top: 1px solid #ccc;
text-align:left;
width: 780px;
padding: 22px 0 22px 0;
float:right;
}

.content {
float:left;
width: 460px;
text-align:left;
line-height: 22px;
min-height:60px;
height:auto !important;
height: 60px;
}

.content_full {
width: 780px;
}

.content a { font-weight:bold }

.content .tags {
background-color: #333333;
padding: 0 2px;
text-transform: uppercase;
}

.content .tags a {
color: #3E3E3E;
font-size: 0.9em;
font-weight: normal;
}

.alignleft { padding: 0 10px 0 0; float: left; }
    
.alignright { float: right; }

span.edit a { 
font-weight:normal; 
font-size:0.9em; 
color:#666; 
border:1px solid #ccc; 
padding:0 4px; 
}

.metainfo {
background-color: #fafafa;
border:1px solid #efefef;
border-bottom: none;
border-top: none;
color: #333;
float:right;
font-size: 0.8em;
padding: 0 0 0 8px;
width: 292px;
text-align: left;
}

.metainfo a { font-weight:bold }


.metabar {
float: right;
}

.postmeta {
font-size: 0.9em;
padding-bottom:20px;
margin-top: -10px;
}

.postmeta a {
color: #555;
font-weight: normal;
text-decoration: underline;
}

.postmeta a:hover {
color: #900;
}

.text_area { width: 480px !important; }

.postform { width:150px; margin: 0;}


/* COMMENTS */
#comments {
margin: 15px 0 -1px 0;
}

.commentcontent{
float:left;
width: 460px;
text-align:left;
line-height: 22px;
min-height:50px;
height:auto !important;
height: 50px;
}

.commentlist {
margin: 0;
padding: 0;
width: 780px;
float:right;
}

.commentlist li {
padding: 20px 0 20px 0;
list-style-type: none;
border-bottom: 1px solid #ddd;
}

.commentlist ul.children li {
border: none;
padding: 20px 0 5px 0;
}

.commentlist ul.children li {
border-top: 1px solid #efefef;
}

.commentlist ul.children li .commentcontent {
width: 50%;
}

.commentsnavigation {
padding: 20px 0px 30px 0px;
text-align:left;
width: 780px;
float:right;
}

#respond {
text-align: left;
}

.replycomment {
top: -20px;
position:relative;
}

/* SIDEBAR */
.sidebar {
padding: 0;
width: 180px;
color: #0066CC;
float:left;
text-align:left;
}

.sidebar a { }

.sidebar_inner {
padding: 0 10px 25px 10px;
}

.sidebar_inner h3 {
margin: 0 0 5px 0;
color: #0066CC;
font-size: 1.2em;
}

.sidebar_inner ul {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style-type: none;
}

.sidebar_inner ul li {
margin: 0;
padding: 0;
}

.sidebar_inner ul li a {
margin: 0;
padding: 0;
}

.sidebar_inner_bottom {
border-bottom: none;
font-size: 0.9em;
}

.sidebar_inner_bottom img {
border: none;
}

.sidebar_inner_bottom input {
border: 1px solid #ccc;
margin-top:2px;
}

.sidebar_spacer {
background-color: #fdfdfd; 
border:1px solid #fff;
width: 180px; 
height: 8px;
margin: 0;
padding: 0;
}


/* FOOTER */
.footer {
border-top: 1px solid #ccc;
background-color: #FDFDFD;
text-align:left;
width: 970px;
padding: 10px 5px;
float:left;
}

.footer h4 {
color: #fff;
margin-left:20px;
font-size: 1.5em;
}

ul#footernav { color: #666; margin: 0 0 0 5px; padding: 0;}
#footernav li { background: none; display: inline; padding: 0 10px 0 0; font-size: 0.9em; }


/* IMAGES */
p img {
float: none;
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
/* End Images */


/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 0.9em;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

a.rsswidget img {
display: none;
}

dmelgarejo · 27 Ene 2011

Yo veo bien el ancho....

crystaldream · 27 Ene 2011

El texto es mas que obvio que es por la publicidad, como esta flotado a la izquierda el texto ocupa el espacio restante menos algunos pixeles de padding, osease:

Ancho del espacio dado para contenido en un div - (espacio ocupado por cuadro publicitario + paddings izquierdo y derecho)

manuelanorga · 28 Ene 2011

Si, estuve casi 4 horas tratando de arreglarlo.... utilice el firebug de mozilla, me ayudo mucho...

saludos!

dmelgarejo dijo:
Yo veo bien el ancho....

Compadre, no te entendi....

crystaldream dijo:
El texto es mas que obvio que es por la publicidad, como esta flotado a la izquierda el texto ocupa el espacio restante menos algunos pixeles de padding, osease:

Ancho del espacio dado para contenido en un div - (espacio ocupado por cuadro publicitario + paddings izquierdo y derecho)

crystaldream · 28 Ene 2011

Ah esque me fije en el post ese que trae un video y el texto se ve recorrido y angosto por el espacio que ocupa ese bloque de adsense, lo demas quiza no lo interprete correctamente, si, el firebug y sobre todo una exension llamada Web Developer Toolbar y luego cuando la tengas presionar CTRL+SHIFT+F para ver las medidas de cada elemento y todo.

Un saludo.

Cómo cambiar el ancho del post en una plantilla de WordPress

manuelanorga

dmelgarejo

crystaldream

manuelanorga

crystaldream

Temas similares