Tutorial Reemplazar prefijos por imágenes

Danivicks dijo:

Me gustaría saber si alguien sabe como reemplazar los prefijos de los temas por imágenes. Sé que esto se puede hacer en xenforo porque en xenforo.com hay una guía para hacer esto mismo:

Replace Prefixes with Images

El problema que tengo es que he seguido la guía al pie de la letra y no me ha funcionado. Solo se ve el texto del prefijo con el fondo blanco ¿Alguien podría probar la guía haber si le funciona?

No entiendo nada de css. Donde pone
(tags/ps3.png)

Yo he puesto (C:\wamp\www\XENFORO\iconos\PSVita.ico)

también he probado con estas formas y con la imagen en formato jpg y png.

Insertar CODE, HTML o PHP:

(wamp\www\XENFORO\iconos\PSVita.ico)
 
(\www\XENFORO\iconos\PSVita.ico)
 
(XENFORO\iconos\PSVita.ico)

Aclaro que he usado el logo de psvita descargado de google imagenes y no las imagenes que vienen en la guía de xenforo.

¿Alguién podría crear su propia guía mejor explicada y en español? eso si es que realmente funciona esa guía en ingles, porque no hay forma...

Saludos

Hacer clic para expandir...

.icon-ps3 { background: transparent url('XENFOROiconos/PSVita.ico') no-repeat top left;text-color: transparent; }

Hacer clic para expandir...

.icon-ps3 { background: transparent url('XENFORO/iconos/PSVita.png') no-repeat top left;text-color: transparent; }

Hacer clic para expandir...

1 dijo:

Ruta a la que he subido la imagen: raíz/styles/
Imagen subida: tutorial.png que está en http://xenfacil.com/styles/tutorial.png y que se ve así:

Código a añadir en la plantilla EXTRA.css de cada estilo:

Insertar CODE, HTML o PHP:

.icon {
    display: block;
    text-indent: -3000px;
    width: 60px;
    height: 15px;
}
.icon-tutorial {
    background: transparent url('./styles/tutorial.png') no-repeat top left;
    text-color:...

Hacer clic para expandir...

.icon {
    display: block;
    text-indent: -3000px;
    width: 60px;
    height: 15px;
}
.icon-tutorial {
    background: transparent url(XENFORO\styles\default\xenforo\icons\tutorial.png) no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-tutorial {
    color: transparent;
}

C:\wamp\www\XENFORO\styles\default\xenforo\icons\tutorial.png
wamp\www\XENFORO\styles\default\xenforo\icons\tutorial.png
www\XENFORO\styles\default\xenforo\icons\tutorial.png
XENFORO\styles\default\xenforo\icons\tutorial.png

• Other, using custom CSS class name: icon-tutorial

Danivicks dijo:

He seguido tu guía, pero esta vez usando la imagen tutorial.png para ser lo más fiel posible a la guía.

El código que he usado es este

Insertar CODE, HTML o PHP:

.icon {
    display: block;
    text-indent: -3000px;
    width: 60px;
    height: 15px;
}
.icon-tutorial {
    background: transparent url(XENFORO\styles\default\xenforo\icons\tutorial.png) no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-tutorial {
    color: transparent;
}

Hacer clic para expandir...

Danivicks dijo:

Las cambios que hice en el code para ver si el error que yo tenía era que puse mal la dirección (raiz/syle...) son estas:

Insertar CODE, HTML o PHP:

C:\wamp\www\XENFORO\styles\default\xenforo\icons\tutorial.png
wamp\www\XENFORO\styles\default\xenforo\icons\tutorial.png
www\XENFORO\styles\default\xenforo\icons\tutorial.png
XENFORO\styles\default\xenforo\icons\tutorial.png

Hacer clic para expandir...

Danivicks dijo:

También probé a meter el archivo tutorial.png en la raiz XENFORO\styles/tutorial.png (como en la imagen que subiste en la guía) y use esa nueva dirección, pero el resultado fue el mismo.

Hacer clic para expandir...

Danivicks dijo:

Lo estoy haciendo todo en wampserver y el titulo del foro es XENFORO. La raiz en la que está instalo el foro es C:\wamp\www\XENFORO.

Hacer clic para expandir...

Danivicks dijo:

El resultado que obtuve siguiendo la guía es que me aparece el prefijo Tutorial con el fondo y las letras en blanco, y no se ve la imagen tutorial.png. No adecué el tamaño de la imagen al texto porque no se exactamente como hacerlo, pero creo que el code que use esta vez ya esta adecuado a la imagen tutorial.png.

Por cierto, las imagenes que pusiste en la guía no las puedo ver, me sale un error.

Gracias por la ayuda y el nuevo recurso que has publicado.

Edito: el titulo del prefijo cuando lo cree es Tutorial y el nombre del css es icon-tutorial y se ve así:

• Other, using custom CSS class name: icon-tutorial

Hacer clic para expandir...

Luis dijo:

Y así no se muestra???

Insertar CODE, HTML o PHP:

styles/default/xenforo/icons/tutorial.png

Hacer clic para expandir...

.icon {
    display: block;
    text-indent: -3000px;
    width: 60px;
    height: 15px;
}
.icon-tutorial {
    background: transparent url(styles\default\xenforo\icons\tutorial.png) no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-tutorial {
    color: transparent;
}

lms dijo:

Mal. Mal vamos,

De mal en peor (o de Málaga a Malagón).

Es que no hay manera. Se nos mete una cosa en la cabeza y ¡a piñón fijo!

A ver. WAMPP server es uns sitema LINUX. en un sistema linux en el que corre apache como servidor y MySQL como servidor de bases de datos. Ambos tres corriendo en un sistema WINDOWS. El resultado es que no se pueden usar en los sistemas web las convenciones windows. Debes poner SIEMPRE como enlace web o URL de este modo: C:/wamp/www/XENFORO/ y NO C:\wamp\www\XENFORO

Por mucho que sigas el tutorial, si no te fijas que toda URL lleva / y no \ (propias de windows) no lograrás que se reproduzca la imagen.
Si tienes la raín en el directorio XENFORO, para que se vean las imágenes debes de construir tus URLs con / quedando como styles/default/xenforo/icons/tutorial.png en vez de styles\default\xenforo\icons\tutorial.png. Fíjate además, que comienzo la dirección web de la URL con un './' que en LINUX significa directorio superior al que se ejecuta el script actual.

Usa debidamente la construcción de URLs aunque estés en windows ya que no son directorios de windows sino rutas URL que se interpretan por Apache en Linux.

Me cuentas.

Salud2

Hacer clic para expandir...

Luis dijo:

Utilizo WampServer 32 y 64 bits desde hace muchísimo tiempo y no tengo ningún tipo de problemas con las rutas, sean absolutas o relativas. Si te fijas tu código de la ruta a la imagen no es el que yo te he pasado, las barras estan cambiadas.

Tu has colocado:

Insertar CODE, HTML o PHP:

styles\default\xenforo\icons\tutorial.png

Y yo te he facilitado:

Insertar CODE, HTML o PHP:

styles/default/xenforo/icons/tutorial.png

En resumidas cuentas es lo mismo que te indica @lms antes de publicar tu última respuesta.

Lo anterior facilitado son rutas relativas, entonces que sucede si utilizamos las rutas absolutas??

Insertar CODE, HTML o PHP:

background: transparent url ('http://127.0.0.1/xenforo/styles/default/xenforo/icons/tutorial.png') no-repeat top left;

O lo que es lo mismo:

Insertar CODE, HTML o PHP:

background: transparent url ('http://localhost/xenforo/styles/default/xenforo/icons/tutorial.png') no-repeat top left;

Hacer clic para expandir...

Danivicks dijo:

Ha funcionado lo que dijiste de cambiar \ por / , ...

Podemos dar el tema por solucionado. Muchas gracias por la ayuda. Un detalle tan pequeño escapa completamente al ojo del que no es profesional.

...

Hacer clic para expandir...