tag:blogger.com,1999:blog-32835211277759648812011-11-28T01:37:14.834+01:00Muestras de bordesEulaliahttp://www.blogger.com/profile/04778983357647094765noreply@blogger.comBlogger21100tag:blogger.com,1999:blog-3283521127775964881.post-20660176261249552342008-05-10T00:46:00.002+02:002008-05-10T01:33:30.820+02:00Los bordes<div align="justify">Aquí podeis ver las distintas zonas a las que se les puede añadir un borde.<br />Habitualmente se pone el mismo color en todas ellas, pero yo he creado variables para independizarlas y que podais apreciarlas mejor.<br /><br />En Tuneando el blog hay varias entradas explicando como crear variables y como añadir la orden del borde a los sitios, pero voy a deciros donde las he añadido aquí, el color de cada una y la variable que he creado en cada caso.<br /><br />No quiero decir con esto que conviertas tu blog en un arco iris, pero si quieres diferenciar alguna zona, así podrás hacerlo.</div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3283521127775964881-2066017626124955234?l=laeulalia-bordes.blogspot.com' alt='' /></div>Eulalianoreply@blogger.com4tag:blogger.com,1999:blog-3283521127775964881.post-42115580397876687712008-05-09T23:28:00.002+02:002008-05-10T13:26:36.960+02:00Donde están los bordes<div align="justify">matarile, rile, rile... ¡Huy no! (Esa cabeza mia...)</div><div align="justify"></div><div align="justify">Partiendo de la base de que esta es una plantilla scribe, y por tanto las definiciones corresponden a su código, estos son los bordes que puedes poner, sus ubicaciones y las variables que puedes crear para diferenciar alguna zona.</div><div align="justify">En otras plantillas las definiciones de los lugares pueden variar ligeramente, por ejemplo en lugar de sidebar puede ser que ponga sidebar-wrapper, pero en esencia es lo mismo.</div><br /><div align="justify">El borde gris, que enmarca todo el blog, está en <strong>#outer-wrapper {</strong> </div><div align="justify"><span style="color:#990000;"><strong>border:9px ridge $borderColor; </strong></span></div><div align="justify">en este caso he usado la variable ya existente:</div><br /><strong><code><Variable name="borderColor" description="Border Color" </strong><br /><strong>type="color" default="#211104" value="#808080"></code></strong><br /><br /><div align="justify">Fíjate en la forma en que se escribe el nombre de la variable, pues una mayúscula o una minúscula en el sitio equivocado y te saldrá eso de error, la definición se usa pero no aquí o algo parecido.</div><br /><div align="justify">El borde marrón/naranja de la cabecera, está en <strong>.Header {</strong></div><div align="justify"><strong><span style="color:#990000;">border: 10px ridge $headerBorderColor;</span></strong></div><div align="justify">He creado la variable copiando la anterior (entera) y cambiando lo que está en rojo</div><div align="justify">name="<span style="color:#990000;"><strong>borderColor</strong></span>" description="<span style="color:#990000;"><strong>Border Color</strong></span>"</div><div align="justify">por lo que está en azul</div><div align="justify">name="<strong><span style="color:#000099;">headerBorderColor</span></strong>" description="<strong><span style="color:#000099;">Header Border Color</span></strong>"</div><div align="justify"></div><div align="justify">El borde verde de la columna lateral izquierda, está en <strong>#sidebar {</strong></div><div align="justify"><strong><span style="color:#990000;">border: 6px ridge $sidebarBorderColor;</span></strong></div><div align="justify">He vuelto a copiar la variable inicial y en este caso la he llamado así:</div><div align="justify">name="<strong><span style="color:#000099;">sidebarBorderColor</span></strong>" description="<strong><span style="color:#000099;">Sidebar Border Color</span></strong>"</div><br /><div align="justify">El borde azul de la columna lateral derecha está en <strong>#newsidebar {</strong></div><div align="justify"><span style="color:#990000;"><strong>border: 6px ridge $newsidebarBorderColor;</strong></span></div><div align="justify">y estos son los datos de su variable</div><div align="justify">name="<strong><span style="color:#000099;">newsidebarBorderColor</span></strong>" description="<strong><span style="color:#000099;">Newsidebar Border Color</span></strong>"</div><br /><div align="justify">El borde rojo del centro está en <strong>#main { </strong></div><div align="justify"><strong><span style="color:#990000;">border: 6px ridge $mainBorderColor;</span></strong></div><div align="justify">variable en este caso:</div><div align="justify">name="<strong><span style="color:#000099;">mainBorderColor</span></strong>" description="<span style="color:#000099;"><strong>Main Border Color</strong></span>"</div><br /><div align="justify">El borde rosa que enmarca las entradas está en <strong>.post {</strong></div><div align="justify"><strong><span style="color:#990000;">border: 4px ridge $postBorderColor;</span></strong></div><div align="justify">su variable</div><div align="justify">name="<strong><span style="color:#000099;">postBorderColor</span></strong>" description="<span style="color:#000099;"><strong>Post Border Color</strong></span>"</div><br /><div align="justify">El borde amarillo que enmarca los elementos de las columnas laterales está en <strong>.sidebar .widget {</strong></div><div align="justify"><strong><span style="color:#990000;">border: 5px ridge $widgetBorderColor;</span></strong></div><div align="justify">variable:</div><div align="justify">name="<strong><span style="color:#000099;">widgetBorderColor</span></strong>" description="<strong><span style="color:#000099;">Widget Border Color</span></strong>"</div><br /><div align="justify">El borde morado que enmarca el pie del blog está en: <span style="color:#000000;"><strong>#footer {</strong></span></div><div align="justify"><span style="color:#993300;"><strong>border: 10px ridge $footerBorderColor;</strong></span></div><div align="justify">con esta variable</div><div align="justify">name="<strong><span style="color:#000099;">footerBorderColor</span></strong>" description="<strong><span style="color:#000099;">Footer Border Color</span></strong>"</div><br /><div align="justify">El borde azul/grisáceo que enmarca el elemento que hay dentro del pie del blog está en este código que he añadido para que se vea el elemento enmarcado dentro del contenedor del footer:</div><br /><span style="color:#cc0000;"><strong>.footer .widget { </strong></span><br /><span style="color:#cc0000;"><strong>background-color: $bgColor; </strong></span><br /><span style="color:#cc0000;"><strong><span style="color:#990000;">border: 5px ridge $footerWidgetBorderColor;</span> </strong></span><br /><span style="color:#cc0000;"><strong>margin: 10px; </strong></span><br /><span style="color:#cc0000;"><strong>padding: 10px;</strong></span><br /><span style="color:#cc0000;"><strong>}</strong></span><br /><div align="justify">con esta variable:</div><div align="justify">name="<strong><span style="color:#000099;">footerWidgetBorderColor</span></strong>" description="<strong><span style="color:#000099;">Footer Widget Border Color</span></strong>"</div><br /><div align="justify">Y por último la menubar (los botones bajo la cabecera). </div><div align="justify">Verás que están enmarcados por un color gris más clarito que el del marco grande.</div><div align="justify">También le he creado una variable llamándola así</div><div align="justify">name="<strong><span style="color:#000099;">menubarBorderColor</span></strong>" description=" <strong><span style="color:#000099;">Menubar Border Color</span></strong>"</div><div align="justify">y a la linea de borde de esta zona de su código <strong>#menubar li { </strong></div><div align="justify">le he cambiado <strong>$borderColor</strong> por <strong><span style="color:#990000;">$menubarBorderColor</span></strong>.</div><br /><div align="justify">Espero que con esto y el <a href="http://laeulalia-muestra.blogspot.com/" target="_blank">Blog de muestras de fondos</a>, tengas un poco más claro qué hay en tu plantilla.</div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3283521127775964881-4211558039787668771?l=laeulalia-bordes.blogspot.com' alt='' /></div>Eulalianoreply@blogger.com5