CSS, hoja de estilo con notas y 3 consultas 3.

Inicio Foros WordPress Themes y Diseño CSS, hoja de estilo con notas y 3 consultas 3.

Este debate contiene 12 respuestas, tiene 4 mensajes y lo actualizó  fum hace 9 años, 2 meses.

  • Autor
    Publicaciones
  • #12729

    fum
    Participante

    <p>Hola,gentes, buen día.<br />
    Estuve investigando la hoja de estilos y logré algunos cambios que me interesaban en el Tema Andreas09 CiberPrensa. El sistema de investigación fue el del mono curioso: prueba y error en un blog de pruebas,ahí identifiqué sobre qué elementos actúa cada línea en la hoja de estilos y lo agregué al lado como anotación. Obvio que esto responde a mi necesidad de principiante, es la primera vez que abro una hoja CSS.<br />
    Abajo la reproduzco para referencia sobre las consultas que hago y porque quizás le pueda servir a otro novato como yo.<br />
    Aquí las consultas, espero no abusar:</p>
    <p>1)No pude nada con el color del encabezado. Llegúe a identificar la imagen jpg de donde toma el color. La bajé del servidor pensando que sería algo así como un banner horizontal, que lo tocaba a mi gusto en Photoshop y subía la variante con otro nombre. Gran sorpresa al abrir la imagen y encontrarme con que tenía una medida de 5x800px en sentido vertical, con un pequeño sector con color, y luego un degrade hasta llegar a blanco. Igual la pinté y la subí a ver qué pasaba. Cambió el color del encabezado pero me quedó una franja superior horizontal con el color antiguo. Volví al original y bué, llegó el momento de preguntar: se puede cambiar el color del encabezado, más allá de las opciones predefinidas de Andeas09? Cómo?</p>
    <p>2)Conseguí cambiar el aspecto de las categorías en la barra lateral, pero no puedo darles la separación vertical que me gustaría, quedaron algo apretadas y demasiado separadas del título &quot;categorías&quot; aclararo que eliminé las cajas que contienen estos ítems en el tema original, esto lo hice en la hoja &quot;barra lateral.php&quot; cambiando la línea:<br />

    Quote:
    Code:
    &lt;ul class=&quot;box&quot;&gt;

    por

    Code:
    &lt;ul class=&quot;panel&quot;&gt;

    </p>
    <p>3)No pude cambiar el color de las barras laterales. Lo conseguí en la parte inferior de las barras desde la hoja Black2.css en la línea:<br />

    Quote:
    Code:
    #container {<br />
    background:#f0f0f0 url(images/bodybg-black2.jpg) repeat-x;/*laterales verticales inferiores y piso*/<br />
    }

    <br />
    pero la parte superior quedaba con el color original y esa parte no encontré desde donde cambiarla, será posible guiarme?</p>
    <p>Agradezco la paciencia y mil gracias a quien pueda aportar ayuda.<br />
    Los cambios ya están aplicados al blog </p>
    <p>reproduzco las hojas de estilo con las notas de referencia &quot;de qué cosa es cual&quot;:<br />
    Style.css

    Quote:
    <br />

    Code:
    <br />
    /*<br />
    Theme Name: Andreas09 CiberPrensa<br />
    Theme URI: http://andreasviklund.com<br />
    Description: Esta plantilla de tres columnas es una modificacion de la original Andreas09 de <a href="//www.andreasviklund.com/&quot;">Andreas Viklund</a>. Se ha habilitado la capacidad de integrar widgets personalizados y adaptado al castellano. Puedes encontrar mas temas traducidos por Fernando en <a href="//ayudawordpress.com/&quot;">este enlace.<br />
    Version: 1.6 (es)<br />
    Author: Andreas Viklund<br />
    Author URI: http://andreasviklund.com</p&gt;
    <p>andreas09 v1.0 (Dec 10th 2005) – An open source template by Andreas Viklund – http://andreasviklund.com. Free to use for any purpose as long as the proper credits are given to the original author.</p>
    <p>Ported to WordPress by Ainslie Johnson – Last updated 04/04/06<br />
    */</p>
    <p>/* General Element Styling */</p>
    <p>body {<br />
    background:#8b8b8b;/*franja inferior de pantalla en páginas estáticas*/<br />
    color:#303030;/*no identificado*/<br />
    font:80% Verdana,Tahoma,Arial,sans-serif;/*afecta tamaño de imagen de todo el blog*/<br />
    margin:0;<br />
    padding:0;<br />
    text-align:center;/*no identificado*/<br />
    }</p>
    <p>a {<br />
    font-weight:bold;/*cuerpo de letra del nombre del blog, pestañas y categorías*/<br />
    text-decoration:none;<br />
    }</p>
    <p>a:hover {<br />
    color:#e41b4a;/*color del hipertexto al hacer roll over*/<br />
    text-decoration:none;<br />
    }</p>
    <p>p {<br />
    line-height:1.5em;/*espaciado vertical entre renglones de las entradas*/<br />
    margin:0 0 15px;<br />
    padding: 0px;<br />
    }</p>
    <p>/*** Main container ***/</p>
    <p>#container {<br />
    color:#003399;/*color de textos -categorías, admin, otros*/<br />
    margin:0;<br />
    min-width:770px;<br />
    padding:0;<br />
    text-align:left;/*alineación categorías, admin, otros*/<br />
    width:100%;<br />
    }</p>
    <p>/*** Header section ***/</p>
    <p>#sitename {<br />
    color:#ffffff;/*color de tipografía debajo del nombre del blog*/<br />
    height:90px;/*altura del encabezado*/<br />
    margin:0 20px 10px;<br />
    text-align:center;/*alineación del nombre del blog y descripción*/<br />
    }</p>
    <p>#sitename h1,#sitename h2 {<br />
    font-weight:500;/*afecta tamaño tipografía nombre del blog y descripción debajo*/<br />
    margin:0;<br />
    padding:0;<br />
    }</p>
    <p>#sitename h1 {<br />
    font-size:1.6em;/*tamaño tipografía nombre blog*/<br />
    padding-top:20px;/*separación entre el tope del encabezado y la tipografía del nombre*/<br />
    }</p>
    <p>#sitename h1 a {<br />
    color: #dbe0e5;/*color de la tipografía del nombre del blog*/<br />
    text-decoration: none;<br />
    letter-spacing: 5px;<br />
    }</p>
    <p>#sitename h2 {<br />
    font-size:1em;/*tamaño de tipografía del texto de descripción del blog*/<br />
    }</p>
    <p>/*** Content wrap ***/</p>
    <p>#wrap {<br />
    clear:both;<br />
    font-size:0.9em;/*tamaño tipografía de título de categoría en las entradas y textos de barras laterales*/<br />
    padding:0;<br />
    margin-top: 5px;<br />
    }</p>
    <p>/* Horizontal menu barras de pestañas de páginas*/</p>
    <p>#mainmenu {<br />
    clear: both;<br />
    width: 100% /*no identificado*/<br />
    margin: 0px;<br />
    padding: 0px;<br />
    }</p>
    <p>#mainmenu ul.level1 {<br />
    border-top: 0px solid #fff;/*separación en px entre el encabezado y la barra de páginas*/<br />
    border-bottom: 0px solid #fff;/*separación en px entre el la barra de páginas y la sección iferior*/<br />
    }</p>
    <p>#mainmenu ul {<br />
    background: #b0b0b0 url(images/menubg.jpg) center left repeat-x;/*no identificado*/<br />
    padding: 0 0 0 5px;<br />
    margin: 0px;<br />
    border-bottom: 1px solid #fff;/*separación en px entre el la 2da barra de páginas y la sección inferior*/<br />
    }</p>
    <p>#mainmenu li {<br />
    display: inline;/*inline: se muestran las pestañas- none: no se muestran*/<br />
    line-height: 25px;/*alto de la barra de pestañas*/<br />
    margin-left: -4px;<br />
    padding: 0px;<br />
    font-size: 0.88em;/*tamaño tipografía pestañas*/<br />
    list-style: none;/*no identificado*/<br />
    text-transform: lowercase;/*tipografía de las pestañas de páginas: minúsculas/mayúsculas*/<br />
    }</p>
    <p>#mainmenu a {<br />
    padding: 6px 9px 6px 9px;<br />
    text-decoration: none;<br />
    border-right: 1px solid #B0B0B0;/*color de línea vertical de separación entre pestañas*/<br />
    }</p>
    <p>#mainmenu li.current a {<br />
    color: #000;/*color de la tipografía en pestañas*/<br />
    }</p>
    <p>/*** Sidebars ***/</p>
    <p>#leftside,#rightside {<br />
    margin:0;<br />
    padding:0 10px 10px;<br />
    width:165px;/*margen del texto de las entradas en la caja contenedora desde el extremo izq*/<br />
    }</p>
    <p>#leftside {<br />
    float:left;<br />
    margin-right:10px;/*margen del texto de las entradas en la caja contenedora desde el borde izquierdo de la caja*/<br />
    }</p>
    <p>#rightside {<br />
    float:right;<br />
    margin-left:10px;/*argen del texto de las entradas en la caja contenedora desde el borde derecho de la caja*/<br />
    }</p>
    <p>#rightside img {<br />
    border: 0px;/*no identificado*/<br />
    }</p>
    <p>/*** Sidebar menu ***/</p>
    <p>#leftside h2, #rightside h2 {<br />
    font-size: 1.4em;/*tamaño de tipografía nombres de categoría, admin,etc*/<br />
    text-transform: lowercase;/*texto &quot;categorías, enlaces, admin&quot;*/<br />
    margin-top: 8px;/*10px separación en altura desde la barra de pestañas al título &quot;categorías&quot;*/<br />
    padding: 5px;/*separación en altura desde la barra de pestañas al título categorías&quot;centrandolo */<br />
    border-bottom: 0px solid #BEBFC3;/*líneas de division entre secciones ej admin/enlaces*/<br />
    }</p>
    <p>#leftside ul {<br />
    padding-left: 0px;/*0px*/<br />
    margin: 0px;/*0px*/<br />
    }</p>
    <p>#leftside li {<br />
    list-style: none;/*disc,circle,square,none*/<br />
    }</p>
    <p>#leftside ul.box li a {<br />
    background:#dcdcdc;/*color de fondo cajas de categorías*/<br />
    border:0px solid #f0f0f0;/*color de líneas de borde de cajas de categorías*/<br />
    display: inline;/*block – cajas y categorías*/<br />
    margin-top:8px;/*no identificado*/<br />
    padding:5px 4px 4px 10px;/*5px 4px 4px 10px*/<br />
    position:absolute;/*relative*/<br />
    text-transform: lowercase;/*opciones:capitalize – uppercase- lowercase*/<br />
    width:140px;<br />
    }</p>
    <p>#leftside ul.box li a:hover {<br />
    background:#f0f0f0;/*no identificado*/<br />
    border:0px solid #909090;/*1px*/<br />
    color:#f0f0f0;/*color al hacer roll over sobre nombres de categoría*/<br />
    text-decoration:none;/*estilo al hacer roll over sobre nombres de categoría*/*/<br />
    }</p>
    <p>#leftside ul.children li a {<br />
    font-size:0.8em;<br />
    letter-spacing:1px;<br />
    margin:8px 0 2px 2px;/*3px 0 2px 10px*/<br />
    padding:4px 2px 2px 8px;/*4px 2px 2px 8px*/<br />
    width:125px;/*125px ancho de la caja de subcategorías*/<br />
    }</p>
    <p>#rightside ul {<br />
    padding-left: 0px;<br />
    margin: 0px;<br />
    }</p>
    <p>#rightside li {<br />
    list-style: none;<br />
    }</p>
    <p>#rightside ul.box li a {<br />
    background:#e8e9ea;<br />
    border:1px solid #b0b0b0;<br />
    color:#606060;<br />
    display:block;<br />
    margin-top:8px;<br />
    padding:5px 4px 4px 10px;<br />
    position:relative;<br />
    text-transform: lowercase;<br />
    width:140px;<br />
    }</p>
    <p>#rightside ul.box li a:hover {<br />
    background:#f8f9fa;<br />
    border:1px solid #909090;<br />
    color:#303030;<br />
    text-decoration:none;<br />
    }</p>
    <p>#rightside ul.children li a {<br />
    font-size:0.8em;<br />
    letter-spacing:1px;<br />
    margin:3px 0 2px 10px;<br />
    padding:4px 2px 2px 8px;<br />
    width:125px;<br />
    }</p>
    <p>li.feed {<br />
    background: url(images/rss.gif) no-repeat left top;<br />
    padding: 2px 0 8px 20px;<br />
    }</p>
    <p>/*** Content ***/</p>
    <p>#content,#contentalt {<br />
    background-color:#fafcff;/*color de fondo de la caja de textos de entradas/paginas estáticas*/<br />
    border:0px solid #909090;/*1px color del borde de la caja de texto de entradas/páginas*/<br />
    color:#2a2a2a;/*color del texto de las entradas y páginas*/<br />
    padding:15px 20px 5px;<br />
    }</p>
    <p>#content {<br />
    margin:0 200px;/*tamaño de las áreas laterales, determina tamaño caja texto*/<br />
    }</p>
    <p>#contentalt {<br />
    margin:0 200px 0 20px;/*no identificado*/<br />
    }</p>
    <p>#content h1,#contentalt h1,#contentalt h2 {<br />
    background-color:inherit;/*no identificado*/<br />
    color:#606060;/*color del texto de los títulos de &quot;entrada de categoría: ..&quot; y páginas*/<br />
    font-size:1.6em;/*tamaño tipografía de los títulos de &quot;entrada de categoría: ..&quot; y páginas*/<br />
    font-weight:italic;/*no actúa sobre la misma línea que los ítems anteriores,?*/<br />
    letter-spacing:-1px;<br />
    margin:0 0 15px;<br />
    padding:0;<br />
    }</p>
    <p>#content h1,#contentalt h1 {<br />
    border-bottom: 1px solid #b0b0b0;/*color línea debajo títulos de &quot;entrada de categoría: .&quot; y páginas*/<br />
    }</p>
    <p>#content h2 {<br />
    font-size:1.6;/*no identificado*/<br />
    color:#606060;/*no identificado*/<br />
    }</p>
    <p>/* Archives/Links Page List styles */</p>
    <p>.archives li, .linkspage li {<br />
    list-style: none;<br />
    }</p>
    <p>.archives ul.children {<br />
    padding-left: 10px;<br />
    margin-left: 10px;<br />
    }</p>
    <p>/*** Footer ***/</p>
    <p>#footer {<br />
    background:#8b8b8b url(images/footerbg.jpg) top left repeat-x;/*color línea final inferior de pantalla*/<br />
    clear:both;<br />
    color:#000;/*color &quot;Powered by&quot; y &quot;by&quot; línea inferior*/<br />
    font-size:0.9;/*tamaño tipog Powered by y by línea inferior*/<br />
    font-weight:roman;/*bold*/<br />
    margin:0;<br />
    padding:20px 0;<br />
    text-align:center;<br />
    width:100%;<br />
    }</p>
    <p>#footer a {<br />
    color: #d0d0d0;/*relleno dato ej&quot;towebs&quot;*/<br />
    font-weight:bold;/*bold*/<br />
    }</p>
    <p>/*** comments Form ***/</p>
    <p>#comment {<br />
    width: 100%;<br />
    border:1px solid #b0b0b0;<br />
    }</p>
    <p>#commentform {<br />
    width: 97%;<br />
    }</p>
    <p>#author {<br />
    border:1px solid #b0b0b0;<br />
    }</p>
    <p>#email {<br />
    border:1px solid #b0b0b0;<br />
    }</p>
    <p>#url {<br />
    border:1px solid #b0b0b0;<br />
    }</p>
    <p>#submit {<br />
    background:#f0f0f0;<br />
    border:1px solid #b0b0b0;<br />
    }</p>
    <p>#submit:hover {<br />
    background: #e8e9ea;<br />
    border: 1px solid #848484;<br />
    cursor: pointer;<br />
    }</p>
    <p>/* Image Display */</p>
    <p>.entry img, .entrytext img {<br />
    border: 1px solid #b0b0b0;/*borde alrededor de imagen insertada en entrada*/<br />
    margin: 5px;<br />
    padding: 5px;<br />
    }</p>
    <p>.entry a:hover img, .entrytext a:hover img {<br />
    border: 1px solid #505050;/*borde de imágenes de galería al hacer roll over*/<br />
    padding: 5px;<br />
    }</p>
    <p>img.wp-smiley {<br />
    border: 0px;<br />
    margin: 0px;<br />
    padding: 0px;<br />
    }</p>
    <p>.thumbnail {<br />
    background:#fafbfc;/*no identificado*/<br />
    border:1px solid #b0b0b0;/*borde mientras se hace click en un botón del ratón*/<br />
    margin:0 0 10px 10px;<br />
    padding:5px;<br />
    }</p>
    <p>.left {<br />
    background:#fafbfc;/*no identificado*/<br />
    border:1px solid #b0b0b0;/*no identificado*/<br />
    float:left;<br />
    margin: 5px 15px 6px 0px;<br />
    padding:5px;<br />
    }</p>
    <p>.right {<br />
    background:#fafbfc;<br />
    border:1px solid #b0b0b0;<br />
    float:right;<br />
    margin: 5px 0px 6px 15px;<br />
    padding:5px;<br />
    }</p>
    <p>.noalign {<br />
    background:#fafbfc;<br />
    border:1px solid #b0b0b0;<br />
    margin: 5px 5px 5px 5px;<br />
    padding:5px;<br />
    }</p>
    <p>/* Search Form */</p>
    <p>.searchform {<br />
    margin: 0;<br />
    }</p>
    <p>#searchbox {<br />
    background:#f0f0f0;<br />
    border:1px solid #b0b0b0;<br />
    margin:0 4px 0 0;<br />
    width:160px;<br />
    }</p>
    <p>#searchbutton {<br />
    background:#f0f0f0;<br />
    border:1px solid #b0b0b0;<br />
    }</p>
    <p>#searchbutton:hover {<br />
    background: #e8e9ea;<br />
    border: 1px solid #848484;<br />
    cursor: pointer;<br />
    }</p>
    <p>/*** Comments Display ***/</p>
    <p>.postmetadata {<br />
    background:#e8e9ea;<br />
    font-size: 0.9em;<br />
    border: 1px solid #b0b0b0;<br />
    padding: 10px;<br />
    margin: 0px;<br />
    }</p>
    <p>ol.commentlist li {<br />
    border: 1px solid #b0b0b0;<br />
    padding: 10px;<br />
    margin-bottom: 10px;<br />
    }</p>
    <p>ol.commentlist li cite {<br />
    text-transform: capitalize;<br />
    }</p>
    <p>ol.commentlist li p {<br />
    padding-top: 10px;<br />
    }</p>
    <p>.alt {<br />
    background:#e8e9ea;<br />
    }</p>
    <p>/*** Text format ***/</p>
    <p>.intro {<br />
    font-size:1.1em;<br />
    font-weight:bold;<br />
    letter-spacing:-1px;<br />
    }</p>
    <p>blockquote {<br />
    border: 1px dashed #b0b0b0;/*no identificado*/<br />
    padding: 10px;<br />
    margin: 30px;<br />
    }</p>
    <p>blockquote p {<br />
    padding: 0px;<br />
    margin: 0px;<br />
    }</p>
    <p>.small {<br />
    font-size:0.8em;<br />
    }</p>
    <p>.large {<br />
    font-size:1.4em;<br />
    }</p>
    <p>.center {<br />
    text-align:center;<br />
    }</p>
    <p>.category {<br />
    border-bottom: 1px solid #b0b0b0;<br />
    }</p>
    <p>.date {<br />
    margin-top: -10px;<br />
    padding-top: 0px;<br />
    border-bottom: 1px solid #b0b0b0;<br />
    }</p>
    <p>#page {<br />
    border-bottom: 1px solid #b0b0b0;<br />
    padding-bottom: 10px;<br />
    margin-bottom: 10px;<br />
    }</p>
    <p>/* Previous/Next Page Navigation */</p>
    <p>.navigation {<br />
    margin: 0 0 20px 0;<br />
    padding: 0 0 20px 0;<br />
    border-bottom: 1px dashed #b0b0b0;<br />
    }</p>
    <p>.bottomnavigation {<br />
    margin: 30px 0 0 0;<br />
    padding: 5px 0 30px 0;<br />
    border-top: 1px dashed #b0b0b0;<br />
    }</p>
    <p>.alignleft {<br />
    float: left;<br />
    text-align: left;<br />
    }</p>
    <p>.alignright {<br />
    float: right;<br />
    text-align: right;<br />
    }</p>
    <p>.post {<br />
    padding-top: 0px;<br />
    padding-bottom: 10px;<br />
    margin: 0px;<br />
    }</p>
    <p>/* Fix by Andy Skelton */</p>
    <p>.entry, .entrytext {<br />
    overflow: hidden;<br />
    }</p>
    <p>* html .entry, * html .entrytext {<br />
    overflow: visible;<br />
    height: 1px;<br />
    }</p>
    <p>* html .entry p, * html .entrytext p {<br />
    width: 99%;<br />
    overflow: hidden;<br />
    }</p>
    <p>.entrytext {<br />
    padding-top: 0px;<br />
    }</p>
    <p>/*** Various classes ***/</p>
    <p>.clearingdiv {<br />
    clear:both;<br />
    height:30px;<br />
    width:1px;<br />
    }</p>
    <p>.hide {<br />
    display:none;<br />
    }</p>
    <p>/*** End of file ***/<br />

    </p>
    <p>


    <br />
    black2.css<br />

    Quote:
    Code:
    <br />
    #container {<br />
    background:#f0f0f0 url(images/bodybg-black2.jpg) repeat-x;/*laterales verticales inferiores y piso*/<br />
    }</p>
    <p>a {<br />
    color:#4E4E4E;/*color tipografía títulos de entradas y enlaces, RSS, Admin*/<br />
    }</p>
    <p>#leftside ul.box li a {<br />
    color:#4E4E4E;/*color tipografía nombres de categoría, meses entradas*/<br />
    }</p>
    <p>#mainmenu a {<br />
    color: #4E4E4E;/*color tipografía pestañas*/<br />
    }</p>
    <p>#mainmenu a:hover {<br />
    background: url(images/menuhover-black.jpg) center left repeat-x;<br />
    }/*color de fondo pestañas al hacer roll over*/</p>
    <p>#mainmenu li.current a {<br />
    background:url(images/menuhover-black.jpg) center left repeat-x;/*color de fondo pestaña pag &quot;principal&quot;*/<br />
    }</p>
    <p>#mainmenu li.currentparent a {<br />
    background: url(images/menuhover-black.jpg) center left repeat-x;<br />
    }

    </a>
    </p>

  • #27688

    Jose Moreno
    Participante

    hola fum, te respondo la primera, con Photoshop tienes la opción de reemplazar color en lugar de pintar la imagen, que es mejor ya que te cambia en color de toda la imagen, seguramente la línea blanca que te queda es porque te quedó algún sitio sin pintar o porque arriba de esta imagen hay otra o un espacio "pintado" del color antiguo en la CSS

    Luego veo las otras preguntas

    Te recomiendo que no hagas temas tan largos ya que no creo que alguien tenga tanto tiempo para leerlos y responderte, puedes ir preguntando de a uno, que es mas facil y claro.

    PD El único que tiene tiempo de responder estas preguntas tan largas es Fernando, que con todo el dinero que gana con este blog, ya no trabaja 😉

  • #27698

    imported_Fernando
    Participante

    Jose Moreno dijo:

    PD El único que tiene tiempo de responder estas preguntas tan largas es Fernando, que con todo el dinero que gana con este blog, ya no trabaja 😉

    Te voy dar a ti 😀

    El blog este friki no da ni un euro, solo sirve para cubrir gastos ¡ójala! 😛

  • #27699

    carlosrm
    Participante

    La verdad es que es de agradecer todo el tiempo que le dedicas a este foro, ya que entre las entradas que haces, tus otros blogs y tus cosas personales, tiene mucho mérito que siempre estés ayudando a todos ^^

    Mi humilde forma de agradecerlo es dándo las gracias y accediendo a la publicidad, así por lo menos podrás costear los gastos

  • #27701

    fum
    Participante

    Gracias José, mañana que tengo tiempo voy a intentarlo nuevamente con el encabezado.
    Acepto la recomendación, me fuí de largo con esta consulta, más el agregado de la hoja del css. Uy … causé lío, disculpen.
    En cuanto a Fernando, gracias nuevamente, y ojalá lleguen esos millones …

  • #27703

    Jose Moreno
    Participante

    @Fernando

    carlosrm dijo:
    La verdad es que es de agradecer todo el tiempo que le dedicas a este foro, ya que entre las entradas que haces, tus otros blogs y tus cosas personales, tiene mucho mérito que siempre estés ayudando a todos ^^

    Mi humilde forma de agradecerlo es dándo las gracias y accediendo a la publicidad, así por lo menos podrás costear los gastos

    Hago mías cada una de las palabras de Carlos

    @fum

    Quizás quieras colocar una imagen entera en la cabecera.
    Aquí

    #container {
    background:#f0f0f0 url(‘http://la-url-de-tu-imagen’) repeat-x;
    }

    El tamaño de la imagen debe ser de 1000px x 100px

  • #27726

    fum
    Participante

    Hola, lo del encabezado ya está… por ahora puse una imagen de un degradado de color después veo queda o cambia, tante grazie!

    Si se pudiera avanzar con la consulta 2 …? 🙂
    2)Conseguí cambiar el aspecto de las categorías en la barra lateral, pero no puedo darles la separación vertical que me gustaría, quedaron algo apretadas y demasiado separadas del título "categorías" aclararo que eliminé las cajas que contienen estos ítems en el tema original, esto lo hice en la hoja "barra lateral.php" cambiando la línea:

    <ul class="box"> por <ul class="panel">

  • #27738

    Jose Moreno
    Participante

    hola fum, tienes que buscar en el archivo style.css este trozo de código

    /*** Sidebar menu ***/

    #leftside h2,
    #rightside h2

    El h2 es el formato del título y para que no te quede tan separado de los links cambiarías esto

    #leftside h2,
    #rightside h2 {
    font-size: 1.4em;
    padding: 5px 5px [b]5px[/b] 0;
    }

    por esto

    #leftside h2,
    #rightside h2 {
    font-size: 1.4em;
    padding: 5px 5px [b]0[/b] 0;
    }

    y para aumentar la separación vertical de los links cambias esto

    #leftside li,
    #rightside li {
    list-style: none;
    }

    por esto

    #leftside li,
    #rightside li {
    list-style: none;
    padding:0px 0px [b]6px[/b] 0px
    }

    (le puse 6 px como ejemplo, puedes ir probando con más o menos hasta que se vea como quieres)

  • #27753

    fum
    Participante

    Hola José, buen día. Muchas gracias, me resulta muy valiosa tu ayuda. Pude mejorar el aspecto que tenía, creo que ya puede quedar así..!
    Por si aun te quedan pilas para la tercera consulta la pego aquí abajo, pero si se complica la verdad es que no es prioridad:

    3)No pude cambiar el color de las barras laterales. Lo conseguí en la parte inferior de las barras desde la hoja Black2.css en la línea:

    #container {
    background:#f0f0f0 url(images/bodybg-black2.jpg) repeat-x;/*laterales verticales inferiores y piso*/
    }
    pero la parte superior quedaba con el color original y esa parte no encontré desde donde cambiarla,

  • #27757

    Jose Moreno
    Participante

    hola fum como estás,

    bueno, por lo que ví el color de las barras laterales en la parte superior se lo da la "famosa" imagen bodybg-black2.jpg, la misma del encabezado, por lo que para cambiarlo deberías editar nuevamente esta imagen. Si te fijas en la imagen vas a ver la parte de arriba oscura que es el encabezado y la parte de abajo con una especie de degradado con un gris más claro, que es el color que aparece como fondo en la parte superior de las barras laterales. Este color se va difuminando hasta terminar en el mismo color que tienen las barras laterales, el que cambiaste en el css.

    Saludos

  • #27763

    fum
    Participante

    Hola José, eso no iba a descubrirlo nunca! Por ahora voy a dejar la estética del blog como está, eventualmente toco el color de la caja contenedora del texto en vez de las barras laterales. Pero me resulta muy interesante para aprender, y quizás más adelante experimente a ver qué consigo.
    Vuelvo a agradecerte tanta ayuda, ahora voy a concentrarme unos días en producir contenido, y luego sí avanzar con otras funcionalidades que tengo previstas,

    Un saludo desde Buenos Aires,
    fum.

  • #27773

    Jose Moreno
    Participante

    Me alegro que esté quedando, Fum, una última cosa antes que empieces a agregarle contenido te recomiendo que cambies la estructura de los enlaces ya que de la forma en que están no son muy amigables tanto para usuarios como para buscadores

    ej.

    http://taller.carlosfumagalli.com.ar/?cat=6

    cambiarlo por

    http://taller.carlosfumagalli.com.ar/flash-portatil
    o
    http://taller.carlosfumagalli.com.ar/categorias/flash-portatil

    así es mucho más claro de que se trata.

    Aquí Fernando explica como hacerlo, es muy fácil

    ¡La Estructura de los Enlaces!

    Saludos y suerte!

  • #27793

    fum
    Participante

    Hola José,aquí nuevamente. Sí, por lo que veo es importante hacer esto ahora. Pero no lo logro tan fácil. Inicio un hilo nuevo que este ya es demasiado largo y paso la consulta allí, pues hay un par de dudas que necesito consultar …
    Gracias como siempre,
    Fum

    https://ayudawp.com/foro/topic/sobre-enlaces-amigables?replies=1#post-5316

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest