Últimos temas
élite + brothersites
vududoll ➹ reviews

Comparte
Ver el tema anteriorIr abajoVer el tema siguiente
avatar
Coder ⋆ Writer
el Dom Abr 22, 2018 8:29 pm
Mensajes :
112


Blood :
47635


Frase :
Dont miss me, my dear



Hola de nuevo, aquí The Witch (por fin aprendiendo a usar la zona de ayuda en vez de el discord(???)   ) y bueno, la verdad es que me propuse hace poco hacer mi propio skin y comenzar a meterme en esto de los codes ya que tengo un proyecto que va tomando forma, sin embargo, al intentar hacer el tutorial de personalización de header (Este de aquí) peero, cuando intenté por primera vez todo quedó bien y bonito, pero no quería que estuviera igual que el tuto, así que me puse a editar los links y las transiciones y fue ahí cuando la barra me salía como en una lista seguida en vertical y no en horizontal como la vista tradicional   . Justo... así:

[spoiler=imagen]https://i.imgur.com/pgc8ChF.png[/img]

Ya probé a intentar hacerlo desde cero, achicar dimensiones, pero nada, ¿podrían darme una ayudadita con esto por favor?
Aquí dejo los codes que estoy utilizando uwu  


//El HTML
Código:
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li><a class="mainmenu link" href="/">Índice</a>
<a class="mainmenu link" href="/">Buscados</a>
<a class="mainmenu link" href="/">Perfil</a>
<a class="mainmenu link" href="/">Mensajes</a>
<a class="mainmenu link" href="/">Conectarse</a>
<a class="mainmenu link" href="/">Desconectarse</a></li>
</ul>


// El Css
Código:
ul.navlinks {
    background-color: #b30000;
    border-bottom: 2px solid #000000;
    font-weight: 100px;
    position: fixed;
    left: 0;
    top: 0;
    padding: 5px 0;
    text-align: center;
    width: 100%;
    z-index: 9999!important;
}



a.mainmenu {
  color: #000000;
  font-family: 'Cute Font', sans-serif;
  text-decoration: none;
  font-size: 9px;
  line-height: 1.8;
  display:block!important;
  margin: 5px auto;
  width: 100px;
  position: relative;
  overflow: hidden;
  padding: 2px;
  text-transform: uppercase;
  transition: color .3s cubic-bezier(0.11, 0.7, 0, 1);
  
}

a.mainmenu:hover {  
     color:#CF2034; transition: 0.2s
}
  

.link {
  position: relative;
  z-index: 1;
  padding:1px 3px;
}

.link:after {
  position: absolute;
  top:0; bottom: 0;
  right: 0; left: 0;
  display: block;
  background-color: #9b5c5c;
  content: "";
  transform: translate3d(100%,0,0);
  z-index:-1;
}

.link:hover:after {
  transform: translate3d(-98%,0,0);
  transition: transform 1.1s cubic-bezier(0.41, 0.9, 0, 1);
}

.link:hover{
  color: #fff!important;
}

Espero no sea algo muy complicado, y de antemano, muchísimas gracias por pasar por este tema de dudas que suenan tontas (?)
Ver perfil de usuario
Mensajes :
112


Blood :
47635


Frase :
Dont miss me, my dear



avatar
webmaster
el Dom Abr 22, 2018 10:54 pm
Mensajes :
1966


Blood :
184351


Frase :
ᴠɪʟʟᴀɴ ᴅᴇᴋᴜ

— sur · rep · ti · tious —
punch f u c k him



Hola Witch, bueno primero que nada necesito saber si el código del navbar tu lo editaste directo en el template, osea tu añadiste lo de class="mainmenu link"?

El template de cabecera del foro tiene la barra de navegación de esta forma por default:
Código:
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>

Lo que significa que el {GENERATED_NAV_BAR} son los links por default, y si tu los pones de la forma en que lo hiciste en el template, te los iba a arrojar como una lista, porque cada link seria leído como bloque, te recomiendo que dejes el código como estaba y edites los links solo usando CSS de esta forma:



No es necesario que agregues un link extra para que funcione el efecto que deseas meterle Espero que te sirva!










Ver perfil de usuario
Mensajes :
1966


Blood :
184351


Frase :
ᴠɪʟʟᴀɴ ᴅᴇᴋᴜ

— sur · rep · ti · tious —
punch f u c k him



avatar
Coder ⋆ Writer
el Dom Abr 22, 2018 11:50 pm
Mensajes :
112


Blood :
47635


Frase :
Dont miss me, my dear



Hola Ros! gracias por responderme!

Aun no entiendo del todo como modificarlo, es que no quiero que aparezca lo de búsqueda y calendario, por eso traté de modificarlo en el template, pero para que no aparezca eso como puedo modificarlo si no es quitandolo directamente? Además hay algo que me da un poco de duda también, cuando edité lo de los vínculos en la barra hay una parte de href="/" --> ahí exactamente que links debería poner? tengo la sensación de que se crea uno nuevo desde las opciones del foro y se ajusta la pagina con css pero solo es una hipotesis D:
Ver perfil de usuario
Mensajes :
112


Blood :
47635


Frase :
Dont miss me, my dear



avatar
webmaster
el Mar Abr 24, 2018 9:39 am
Mensajes :
1966


Blood :
184351


Frase :
ᴠɪʟʟᴀɴ ᴅᴇᴋᴜ

— sur · rep · ti · tious —
punch f u c k him



Para ocultar algunos links solo necesitas poner esto en tu CSS, segun el link que quieras ocultar

Código:
a.mainmenu[href="/gallery/index.htm"]{display:none;}
a.mainmenu[href="/calendar"]{display:none;}
a.mainmenu[href="/faq"]{display:none;}










Ver perfil de usuario
Mensajes :
1966


Blood :
184351


Frase :
ᴠɪʟʟᴀɴ ᴅᴇᴋᴜ

— sur · rep · ti · tious —
punch f u c k him



avatar
Coder ⋆ Writer
el Mar Abr 24, 2018 10:39 am
Mensajes :
112


Blood :
47635


Frase :
Dont miss me, my dear



¡¡Muchísimas gracias Ross!!!!!!
Ver perfil de usuario
Mensajes :
112


Blood :
47635


Frase :
Dont miss me, my dear



Contenido patrocinado
Ver el tema anteriorVolver arribaVer el tema siguiente
Permisos de este foro:
No puedes responder a temas en este foro.