Comunidad de diseño web y desarrollo en internet online

Ayuda con una modificación de gridlock (theme de wordpress)

Citar            
MensajeEscrito el 03 Jul 2007 05:55 pm
Buenas a todos!

Estoy intentando encontrar un theme que me guste para la web que tengo actualmente, así que estoy haciendo pruebas con varios y uno de los que más me ha gustado y tiene más papeletas para ser el bueno es gridlock, sencillo, minimalista y muy personalizable.

El caso es que tengo montada la web en servidor local, por lo que no os puedo dar dirección para que veáis la web "in live", pero intentaré explicarme lo mejor posible para ver si me podéis ayudar.

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

Empezamos, lo primero que quiero es cambiar el color del texto que muestra el título de las sidebars (de los módulos), es decir, dónde pone "categorías, blogroll, meta..."

El código de uno de los módulos es este:

Código :

   <ul> 
        <li><h2>Categorias</h2>
           <ul>
            <?php wp_list_cats('sort_column=name'); ?>
           </ul>
      </li>


Por ejemplo, entonces por lo que puedo observar hace llamamiento a h2, li y ul del CSS.

Me voy al CSS y veo que en sidebar hay una definición para cada uno, h2, li y ul, pero pruebo a cambiar el color por defecto de todos y nada, no hay cambio. Os dejo el código de la parte relacionada a dicha parte:

Código :

   #sidebar ul li h2 {
      font-family: Helvetica, Arial, sans-serif;
      font-weight: normal;
      font-size: 12px;
      color: #333 !important;
      margin: 0 0 10px 0;
      padding: 0 0 5px 0;
      border-bottom: 1px solid #ccc;
      width: auto;
                background: url('images/backside.png') no-repeat left;
   }
   
   #sidebar ul {
      padding: 0;
      margin: 0 0 15px 0;
   }
   
   #sidebar ul li {
      font-family: Helvetica, Arial, sans-serif;
      list-style-type: none;
      font-size: 11px;
      line-height: 15px;
      color: #101010;
   }


Debería ser específicamente el primero, ya que ahí como podeis ver he puesto un background (fondo) y sí, aparece correctamente... así que encaja justo con esa línea, pero lo que me desconcierta es que cambio el parámetro "color: #333 !important;" por un color clarito ya que el fondo es oscuro y la letra actual también y nada... ni caso, parece que no sigue los patrones del CSS...

Luego por otra parte, me gustaría también que en ese trozo del sidebar, haya más espacio inicial (me explico, un margen izquierdo) para poder mover un poco el título de los módulos y que no empiece el texto justo donde empieza la imagen (ver imagen abajo)

Este es el aspecto actual del sidebar:



A ver si podéis ayudarme a encontrar lo que busco, porque he probado de todo pero no hay manera, no me lo explico salvo que el theme sude completamente de las CSS, cosa que tiene poco sentido...

Gracias! :D

Por Ataliano

8 de clabLevel



Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 03 Jul 2007 07:26 pm
Prueba cambiando el color en #sidebar sólo, no al que tiene el ul, ni el li ni el h2.

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

 

firefox
Citar            
MensajeEscrito el 03 Jul 2007 07:47 pm
He mirado y la zona del CSS que tiene el #sidebar no contiene ninguna propiedad de color:

Código :

   #sidebar {
      width: 220px;
      margin: 10px 0px 10px 0px;
      padding: 0 0 10px 0px;
      text-align: left;
      position: absolute;
      left: 550px;
      top: 122px;
      display: block;
                overflow: visible;


O lo creo yo, o ahí no está... (no creo que lo tenga que crear, imagino que estará en algún sitio, escondido, pero estar tiene que estar, no?)

Por Ataliano

8 de clabLevel



Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 03 Jul 2007 08:47 pm
Cuando el color no esta especificado queda por defecto el color negro U_U

Espero no estar diciendo cualquier cosa :lol: tengo el mismo problema pero con el titulo de los post.

Por Gonza.

10 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Jul 2007 10:35 pm
El caso es que negro negro no es, más bien es un azul oscuro, muy oscuro, si fuese negro yo creo que se vería mejor, en cualquier caso voy a probar a ver si puedo añadirle el color a #sidebar y ver que pasa...

PD: Sobre lo del margen izquierdo sabéis algo? me imagino que tendré que crear algo nuevo que defina el margen izquierdo, pero no se donde ni como... he probado a cambiar todos los valores de las cuatro cifras de margin y no hacen ningún efecto sobre el texto...

*EDITO*

He probado a insertar:

color: #FFFFFF;

Pero nada, no hay efecto, luego he probado también a insertarlo en la zona del h2 bajo el color ya asignado y tampoco...

Me estoy volviendo loco... será que realmente no se halla en el CSS? es posible?

Por Ataliano

8 de clabLevel



Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 03 Jul 2007 11:49 pm
Definitivamente el color está en el CSS, tal vez lo esté tomando de una clase superior y ahí si es complicado el asunto ya que cada theme es diferente el uno del otro. Mi sugerencia en éste caso es que (así a veces hago yo XD) hagas un print-screen para que tomes el color verdadero de la fuente y luego con un editor de imagenes mires cuál color es y lo busques dentro del css.

En cuanto a la márgen, si está definida y en todos es 0, mira los paddings: el último valor siempre es 0, por lo tanto ese es el que debes cambiar. El orden de los cuatro valores es: top, right, bottom, left

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

 

firefox
Citar            
MensajeEscrito el 04 Jul 2007 03:22 am
Intenta buscar estilos duplicados o esa propiedad de color en algun otro estilo mas abajo de donde se encuentra ese "#sidebar" el CSS carga como cualquier otro archivo de "arriba" a "abajo" por ende si tienes la misma clase con distintos colores la que se vera sera la que este mas abajo en el archivo (espero haberme explicado bien :S )


El orden de los cuatro valores es: top, right, bottom, left


Miralo como una vuelta en el sentido de las agujas del reloj asi yo siempre me acuerdo

Saludos

Por Prozac

SWAT Team

1546 de clabLevel

1 tutorial

Genero:Masculino   SWAT

donde se regresa el viento

firefox
Citar            
MensajeEscrito el 04 Jul 2007 03:33 am
Mira, lo que yo hago a veces para no partirme el coco y acabarme la vista es lo siguiente:

Usándo el colorzilla (extension o plugin de Firefox) selecciono el color en el navegador, ya que obtuve el código hexadecimal, abro el css en DreamWeaver, le doy Ctrl+F (buscar) pego el código del color y le doy buscar, a veces incluso, le pongo el codigo del color que quiero y lo sustituyo de un sólo golpe. U_U

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

clabbrowser
Citar            
MensajeEscrito el 04 Jul 2007 01:59 pm
WOW! gracias por todos los consejos, me voy a instalar el colorzilla y probaré así, porque uso el PS para los diseños, y ya probé suerte, pero claro, al hacer zoom me daba que tenía la tira de colores integrados... es decir, que al ser pixelada la fuente, según la posición del píxel era un color diferente, a ver si con el plugin no es tan meticuloso y me lo saca.

También probaré lo del padding. imagino que simplemente tendré que poner 5px por ejemplo, o el número que quiera... así tal y como está puesto en el bottom.

Gracias por la sugerencia de mirarlo como las agujas de un reloj, ya se me queda para siempre ^^

*EDITO*

He aquí lo que ocultaba esa zona! gracias al colorzilla lo he encontrado... que si no de que...

Código :

/* sIFR */

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
   visibility: visible !important;
   margin: 0;
}

.sIFR-replaced {
   visibility: visible !important;
}

span.sIFR-alternate {
   position: absolute;
   left: 0;
   top: 0;
   width: 0;
   height: 0;
   display: block;
   overflow: hidden;
}


/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter 
spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR 
text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run 
into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash #headline {
   font-size: 30px;
   text-align: left;
}

.sIFR-hasFlash .nav {
   text-indent: 2px;
}

.sIFR-hasFlash h3.substory_head {
   font-size: 18px;
}

.sIFR-hasFlash #sidebar ul li h2 {
      font-family: Helvetica, Arial, sans-serif;
      font-weight: normal;
      font-size: 12px;
      color: #186FD0;
      margin: 0 0 10px 0;
      padding: 0 0 5px 5px;
}

.sIFR-hasFlash h3.subhead {
      font-family: Helvetica, Arial, sans-serif;
      font-weight: normal;
      font-size: 12px;
      color: #186FD0;
      margin: 0 0 10px 0;
      padding: 0 0 5px 0;
      border-bottom: 1px solid #ccc;
      width: auto;
}

.sIFR-hasFlash #linkblog h3.substory_subhead {
               font-size: 12px;
}


En concreto, es esto:

Código :

.sIFR-hasFlash #sidebar ul li h2 {
      font-family: Helvetica, Arial, sans-serif;
      font-weight: normal;
      font-size: 12px;
      color: #186FD0;
      margin: 0 0 10px 0;
      padding: 0 0 5px 5px;
}


Digo yo, porque he cambiado el padding left a 5px como podéis ver y si, el texto se ha desplazado a la derecha, como yo quería... pero ¿a que no adivinais?

El color por mucho que lo toque nada de nada... ahora sí que ya no se que hacer, por otra parte, cuando activo el selector de color del colorzilla y me pongo encima del texto, me cambia a la herramienta de selección de texto y no se cual es el color real del texto ya que me muestra el de la imagen de fondo, no del texto...

En fin, sigo en busca del color maldito...

Por Ataliano

8 de clabLevel



Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 04 Jul 2007 04:10 pm
Una cosa si estas de verdad haciendo un tema de wordpress, crea una copia del estilo original y borra todo lo que creas innecesario o no entiendas del CSS despues iras viendo si borraste algo importante y puedes volver a colocarlo.

Saludos

Por Prozac

SWAT Team

1546 de clabLevel

1 tutorial

Genero:Masculino   SWAT

donde se regresa el viento

firefox
Citar            
MensajeEscrito el 04 Jul 2007 06:57 pm
sIFR lo que hace es sustituir tus textos con un flash (swf), normalmente deberá venir el .fla original en el cual modificas animación, tipo de letra, color, etc.

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

clabbrowser
Citar            
MensajeEscrito el 04 Jul 2007 07:39 pm
*EDITO*

He desactivado el sIFR en opciones del theme (mira que era fácil... ¬¬) y ahora ya me responde a los parámetros normales de h2, he conseguido hacer lo que quería en 2 minutos después de desactivar el sIFR maldito... xD

Total, que todo solucionado, de momento :D

Gracias por todo igualmente

Por Ataliano

8 de clabLevel



Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 04 Jul 2007 09:10 pm
Que bien ;)

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

clabbrowser
Citar            
MensajeEscrito el 07 Jul 2007 09:28 am
Hola de nuevo! vuelvo a daros el coñazo un rato jejeje

El caso es que ahora quiero crear un footer para la página y milagrosamente, he conseguido hacer el CSS del footer y funciona! (sí, es una tontería, pero para alguien que nunca ha sabido programar ni tocar nada de CSS). Entonces, el footer lo he definido bien, porque aparece tal y como yo quiero.

El problema es la posición... me sale bajo la barra de selección del header o_O, es decir que no sale abajo como debería, tal y como su nombre indica, si no bajo el header... cosa que no entiendo. Imagino que debe ser algún parámetro de localización.

De momento, esto es lo que he definido del footer, cuando consiga arreglar su posición empezaré con definir el texto, los links, etc...

Código :

#footer {
        width: 771px;
        height: 100px;
        clear: booth;
        background: url('images/footer.png') no-repeat;
        border-top: 1px solid #86b228;
   color: #fff;
        }


Y este es el código del footer de la página:

Código :

<?php wp_footer(); ?>


</body>
</html>

<?php /* Hey, here I am, and here we go, life's waiting to begin. */ ?>


¿Que debo hacer para que el footer aparezca en su lugar?, abajo de todo y siempre fijo, vamos, que no se vea a no ser que alguien baje abajo de todo de la web...

Gracias de antemano de nuevo :)

Por Ataliano

8 de clabLevel



Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 07 Jul 2007 02:03 pm
Intenta a poner ésto en footer.php:

Código :

<div id="footer">
      <?php wp_footer(); ?>
   <p>
      <?php bloginfo('name'); ?> est&aacute; gestionado con 
      <a href="http://wordpress.org/">WordPress</a>
      <br /><a href="feed:<?php bloginfo('rss2_url'); ?>">Entradas (RSS)</a>
      y <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comentarios (RSS)</a>.
   </p>
</div>
</div>
</body>
</html>


y en page.php, single.php y en cualquier página que lo quieras mostrar agregas hasta el final ésto:

Código :

<?php get_footer(); ?>


y nos cuentas como te fué :wink:

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

clabbrowser
Citar            
MensajeEscrito el 07 Jul 2007 05:09 pm
Pues pasa lo mismo, ahora aparece el fondo, pero el texto y los enlaces que me has puesto en el código.

El <?php get_footer( ); ?> ya está puesto en todas las páginas, abajo de todo, donde debe ir... pero no se porqué no lo sitúa donde debería... sigue apareciendo bajo el header.

Si una imagen os aclara más, decídmelo y os cuelgo una screenshot de como está la cosa actualmente.

Por Ataliano

8 de clabLevel



Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 08 Jul 2007 05:18 am
si tienes los elementos(divs) previos al footer flotados(float) intenta agregarle al estilo del footer un "clear:both;"

Saludos

Por Prozac

SWAT Team

1546 de clabLevel

1 tutorial

Genero:Masculino   SWAT

donde se regresa el viento

firefox
Citar            
MensajeEscrito el 09 Jul 2007 09:39 am
Ya he solucionado el problema del footer, la cosa es que estaba diseñado todo el theme con position: absolute; en vez de con floats, por lo que tenía una posición definida y el main content no estaba definido, de ahí que se viese arriba.

Ahora tengo otro problema con otra cosa xD, quiero añadir un fondo al sidebar, es una imágen pequeña con bordes redondeados al final, lo que quiero es que me lo extienda en vertial hasta donde llegue el sidebar. Pero lo único que consigo, es que la imágen se vaya repitiendo varias veces, quedando fatal entonces...

Cómo puedo hacer que el fondo que he creado se alargue hasta lo necesário automáticamente? he probado con repeat-y; pero no funciona...

Por Ataliano

8 de clabLevel



Genero:Masculino  

Barcelona

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.