Problemas con el tamaño de imágenes al cambiar plantilla blogger

robgordon · 28 Dic 2013

Hola!

Agradecería que me pudieseis ayudar con este problema que ha surgido con el cambio de mi plantilla de blogger y que me trae loco en los últimos días.

Con el cambio de template se desajustaron varias órdenes de todos los posts que tenía creados, como por ejemplo todas aquellas imágenes que estaban centradas dejaron de estarlo, todas las negritas también o los tamaños asignados a las imágenes para las nuevas entradas realizadas.

Gracias al foro he podido resolver el tema de las negritas, quitando del CSS de la plantilla la b del b, u, i, center, también he logrado, modificando el .post img, el problema del centrado pero sin embargo no se cómo resolver lo del tamaño de las imágenes, puesto que no me reconoce las ordenes de grande, extra grande, etc. cuando hago una entrada nueva y tengo que modificarlo por html.

Alguna solución? Muchas gracias de antemano.

Mi blog es éste:

EL SÉPTIMO CIELO

rh0b3rt0 · 28 Dic 2013

Hola, amigo bueno lo que vas hacer aquí es editar las CSS de la plantilla... para eso te vas a dirigir a .boxed-layout

Esta es la configuración actual de tu boxed-layout

Insertar CODE, HTML o PHP:

.boxed-layout {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
-moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}

Aquí vamos a modificar el max-width, tu como lo notaras está a 1040px y lo pondrás a 1180px.

Así quedaría:

Insertar CODE, HTML o PHP:

.boxed-layout {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
-moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}

Ahora buscaremos el container < este aparecerá así .container{

Bueno esta es la configuración actual del container

Insertar CODE, HTML o PHP:

.container {
 position: relative; 
 width: 940px; 
 margin: 0 auto; 
 padding: 0; }
 .container .column,.container .columns { 
 float: left; 
 display: inline;
 margin-left: 20px; 
 margin-bottom: 10px;}.row {}

Aquí le modificaras de 940px a 1040px

Insertar CODE, HTML o PHP:

.container {
 position: relative; 
 width: 1040px; 
 margin: 0 auto; 
 padding: 0; }
 .container .column,.container .columns { 
 float: left; 
 display: inline;
 margin-left: 20px; 
 margin-bottom: 10px;}.row {}

------------------------------------------------------------

Hola hermano también si lo quieres hacer de fácil solo cambia esto con los viejos y listo...

Insertar CODE, HTML o PHP:

#primary-left {
position: relative;
width: 760px;
float: left;
display: inline;
margin-right: 20px;
margin-bottom: 30px;
}

#primary-right {
position: relative;
width: 720px;
float: right;display: inline;margin-left: 20px;margin-bottom: 30px;
}

#primary-fullwidth {
position: relative;width: 1080px;margin-bottom: 30px;
}

#sidebar {
float: left;
width: 320px;display: inline;
}

Espero que te haya funcionado

robgordon · 28 Dic 2013

No soluciona el problema. Las imágenes continúan sin obedecer las órdenes de tamaño y únicamente lo que consigue es desplazar la sidebar.

Souhiro · 28 Dic 2013

post yo veo todo bien tendrias que ser mas especifico en que entrada pasa eso y te ayudo

---------- Post agregado el 28-dic-2013 hora: 15:14 ----------

Creo entenderte un poco este es el codigo para tus imagenes

HTML:

.post img {
    display: block;
    margin: auto;
    text-align: center;
}
a > img {
    vertical-align: bottom;
}
a img {
    border: medium none;
}
img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    width: auto;
}
img, object, video {
    display: block;
    height: auto;
}

nos centraremos en el problema, esta en este codigo

HTML:

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    width: auto;
}

Lo que haremos es quitar estas lineas width: auto; y height: auto; y me avisas si se solucionó. Agradecer no cuesta nada, bueno casi nada solo un clic xD

robgordon · 28 Dic 2013

Ohhh, solucionado con esto último! Que crack! Mil gracias :encouragement:

---------- Post agregado el 28-dic-2013 hora: 18:49 ----------

Ahora que me doy cuenta...solo un problema...:ambivalence: al hacer esta modificación me han desaparecido las presentación de 6 entradas por página tal y como lo tenía configurado...solo me aparece la última...

Souhiro · 28 Dic 2013

explicate un poco mejor amigo

robgordon · 29 Dic 2013

El problema está en que la página principal hace lo que le da la gana con los post que deben aparecer en ella.

Lo tengo definido para que aparezcan 6 entradas por página, sin embargo cuando subo una nueva entrada me desaparecen las demás de la página principal y solo si cambio la fecha de las entradas anteriores a una fecha posterior a la última entrada me aparecen en la página principal del blog.
De esta manera, mi última entrada nunca aparecerá como la más reciente.

No se si he conseguido explicar bien el problema :sorrow: Esta plantilla me está dando muchos quebraderos de cabeza...

Souhiro · 29 Dic 2013

lo que me tratas de decir es que en blogger pones para que aparesca 6 entradas y te aparecen 5, si es asi esta es la solucion:

que lo pasa es que tu tienes un script para paginacion de blogger, este es el script:

HTML:

<!--Page Navigation Starts-->
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script type='text/javascript'>
	//<![CDATA[
	function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
	//]]>
</script>
<!--Page Navigation Ends -->

nos centramos en este codigo

HTML:

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>

lo unico que tenemos que hacer es cambiar

var pageCount=5;
var displayPageNum=5;

por

var pageCount=6;
var displayPageNum=6;

cambiamos el 5 por 6, o por el numero de entradas que quieras mostrar

robgordon · 30 Dic 2013

Solucionado!!! Muchísimas gracias!