Súper Tema con códigos en Stilysh y archivos editables PSD



Más vale tarde, que nunca. En esta ocasión le traigo un tema que hice hace mucho tiempo, tiene simples efectos hover, aunque es de Halloween. Espero les guste.

Sin más preámbulos les dejo el video del tema:


{"bg_full":"http://i.imgur.com/UOjgAb3.png",
"room_bg":"http://i.imgur.com/FsV85Mi.png",
"lobby_bg":"http://i58.tinypic.com/2elrurl.png",
"room_stuff":"http://i.imgur.com/3CoXQiW.png",
"shop_bg":"http://i.imgur.com/3Xo2Bqb.png",
"lobby_stuff":"http://i.imgur.com/acYICpG.png",
"shop_stuff":"http://i.imgur.com/WqhFigd.png",
"scores_stuff":"http://i.imgur.com/yZQ9uyD.png",
"ranks":"http://i.imgur.com/acYICpG.png",
"game_stuff":"http://i.imgur.com/hgf2Saf.png"}

¿Cómo colocarlo en el Dragonbound?

Archivos editables en formato .PSD (Photoshop) del tema:


¿Qué es Stylish y para qué sirve?

Bueno esos efectos y los que uds quieran colocar a cualquier web es gracias a la extensión Stylish.

Por ejemplo pueden configurar su Facebook, Twiter, Youtube, etc… para dejarlo asi:




Página Web de temas para tu Facebook, Twiter, Youtube, etc…



¿Cómo Instalarlo?

Dependiendo del navegador que uses, hay para Firefox y Chrome, yo uso el Chrome:

Extensión para Google Chrome:



Extensión para Mozilla Firefox:



Nos dirigimos al botón Gratis:

Después le hacemos click en añadir:


Finalmente despues de que acabe de comprobar saldrá esta añadido a Chrome:

Ahora nos dirigimos al icono en la parte superior de la ventana, le hacemos clic en el icono "S" y seguidamente clic en Gestionar estilos instalados:


Escribimos un nuevo estilo:

Le damos un nombre a nuestro estilo, por ejemplo DBmosJugar:

Copiamos el siguiente código (Códigos CSS):



 @namespace url(http://www.w3.org/1999/xhtml);
#BrokerWindow {
border: rgb(40, 32, 61) solid 2px;
border-radius: 5px;
background: rgba(91, 74, 106, 0.35);
    overflow: hidden;
    border-radius: 5px;
    transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
}     
#BrokerWindow:hover
{
    box-shadow: 0px 0px 20px 5px #FFFFFF;
}      
.opacity_button:hover {
      opacity: 1;}
#buttonCreateRoom:hover, #buttonJoin:hover, #buttonMyInfo:hover, #buttonShop:hover, #buttonCharge2:hover, #facebook_post:hover, #event_button:hover, #buttonOptions:hover, #buttonChannels:hover, #buttonQuickJoin:hover, #buttonChargeShop:hover, #buttonChargeShop1:hover { 
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
   -webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
-ms-transform: scale(1.05);
}
.ui-widget-content:hover, .ui-draggable:hover, #dialogCreateRoom:hover, #dialog_room_options:hover, #playerInfoDialog:hover, .AlertBox:hover, #shop_my_items_container:hover{
      -webkit-box-shadow: 0px 0px 15px 6px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 6px rgba(255, 255, 255, .75);
.shop_my_item:hover{
-webkit-box-shadow: 0px 0px 15px 6px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 6px rgba(255, 255, 255, .75);
        border-radius: 5px;
      }
.shop_item:hover {
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
-ms-transform: scale(1.05);
}
#buttonShopHead:hover, #buttonShopBody:hover, #buttonShopEyes:hover, #buttonShopFlag:hover, #buttonShopBackground:hover, #buttonShopForeground:hover, #buttonShopExItem:hover, #buttonShopBuy:hover {
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-transform: scale(1.2);
}
 .room:hover {
opacity: 1;
  -webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
-ms-transform: scale(1.05);
}
      
      #roomButtonInvite {
background: rgba(51, 0, 255, 0);
}
      
      #roomButtonInvite:hover{
         -webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-ms-transform: scale(1.1);
      }
      
      #roomButtonVideoChat {
background-color: rgba(153, 0, 255, 0);
box-shadow: 0 0 3px 3px #FFF;
}
      
      #VideoChannelInput {
background: rgba(0, 0, 153, 0);
color: #FFF;
}
      #videoChannelDiv, #DrgaonVideoBeta {
color: #FAFAFA;
}
 
      
      #roomChat{
left: 6px;
}
      #roomChat:hover {
left: 6px;
width: 553px;
-webkit-box-shadow: 0px 0px 15px 6px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 6px rgba(255, 255, 255, .75);
}
      
      #buttonShopFromRoom {
box-shadow: 0 0 4px 4px white;
}
      
      
      #roomButtonStart {
background: url(http://i.imgur.com/K9OP6yN.gif) no-repeat;
}
      
      #room_options_button:hover {
box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 10%;
}
      
      
#filter_normal, #filter_boss, #filter_same, #filter_score{
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#filter_normal:hover, #filter_boss:hover, #filter_same:hover, #filter_score:hover, #filter_guild:hover, #filter_friends:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

          
          #buttonRoomsListUp, #buttonRoomsListDown{
            height: 39px;
            background-position: -223px -359px;
          }
          
          
          #buttonRoomsListUp:hover, #buttonRoomsListDown:hover{
            box-shadow: inset 0 7px 7px rgba(0,0,0,0.3);
          }
           
          #lobby_channel {
background: rgba(52, 40, 57, 0.71);
color: #fff;}
          
          #lobby_channel:hover {
-webkit-box-shadow: 0px 0px 15px 1px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 1px rgba(255, 255, 255, .75);
          }
          
          
         .scrollbar:hover {
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
 
       .dnd_btn {
background: rgba(107, 78, 120, 1);
color: #FFF;

}

        #friendsList:hover {
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
          
           #channel {
left: 20px;
width: 534px;
}
          #channel:hover {
left: 20px;
width: 534px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
          
            
            #dialogCreateMessage {
color: #fff;
}
            
            .roomPlayerInfo:hover {
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
                  
                
                  #BrokerChannel0:hover, #BrokerChannel1:hover, #BrokerChannel2:hover {
top: 37px;
                      -webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
         
 #BrokerChannel3:hover, #BrokerChannel4:hover, #BrokerChannel5:hover {
top: 124px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
                
#BrokerChannel6:hover, #BrokerChannel7:hover, #BrokerChannel8:hover {

top: 211px;
                      -webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
                    
                    
                    #BrokerChannel9:hover, #BrokerChannel10:hover, #BrokerChannel11:hover {
top: 298px;
                      -webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
                                          
                                    
#BrokerChannel12:hover,  #BrokerChannel13:hover, #BrokerChannel14:hover {
top: 385px;
                      -webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}      
                    #BrokerLogout{ 
       
    overflow: hidden;
    border-radius: 5px;
    transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
}
        
#BrokerLogout:hover
{
    box-shadow: 0px 0px 20px 5px #FFFFFF;
}      
      #filter_all:hover, #filter_waiting:hover {
top: 16px;
}
                      
                      
                      .ranking_btn.selected {
background-color: #473B6F;
                            -webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
}
                      #chargeWindow {
background: rgba(43, 38, 71, 0.88);
border: 4px solid rgb(39, 32, 61);
}
                                    element.style {
background-image: url(http://i.imgur.com/UOjgAb3.png);
}
            
            
            
            #channelInput:hover {
background: rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255, 255, 255, .75);
/* box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75); */
}
            
            
            
            #friendsListExtra, #guildRoomTabExtra  {
background-color: #3A1541;
}

Especificamos para que pagina web se aplicaran los estilos:


Ahora pones la URL del Dragonbound, para evitar errores futuros errores y tal vez no entiendas, copia estas dos URL’s:

http://dragonbound.net
https://dragonbound.net


Final mente le damos clic en Guardar:


Para activar y desactivarlo simplemente damos clic en habilitar o deshabilitar, para editarlo en Editar o simplemente eliminarlo:





Comentarios

Publicar un comentario

Entradas populares de este blog

Tutorial: Guía de tiros perfectos con wind y sin wind

Imagen
Primeramente debemos aprender a jugar con wind 0, (Nivel Facil) Pueden guiarse por medio de estas dos imagenes y practicar sus tiros (Bunge y Adukas): Click en la imagen para agrandarla Click en la imagen para agrandarla O si no ver este video para usar una herramienta util para tiros pefectos: Click para ver el video Video que comprar y como disparar tiros perfectos con angulos altos   Una vez ya haber aprendido con wind 0, aprenderemos a disparar con Wind: De ejemplo pondremos el movil ARMOR y usaremos la  "Fixed power formula"  del GunBound adaptado al DragonBound: Lo básico es: 1. La fuerza siempre debe ser 4.5 barras.  Click en la imagen para agrandarla 2. El ángulo 60 llega hasta 1 pantalla completa.  3. El ángulo 75 llega hasta media pantalla.  Deben tener mentalmente una regla asi solo angulo 60 hasta un maximo de 5 barras, uds hagan el que mas les convengan el angulo que mas usen (practiquen con un solo angulo): Click en la imagen para agrandarla...
Leer más

Móviles de DragonBound: Características y ventajas

Imagen
Es importante que los jugadores de  DragonBound   cuenten con un  móvil  decente, que tenga buenas características y ofrezca mejores ventajas que el móvil del oponente. Actualmente existen ocho móviles (Armor, Big Foot, Lighting, DJ, A.Sate, Ice, Aduca y Knight), cada uno posee sus propias atributos. La elección de uno de ellos dependerá de la capacidad que uno quiera resaltar. Las particularidades que diferencian a los ocho  móviles , además del modelo, son los niveles de ataque, defensa, energía, movilidad y retraso que cada uno ofrece. Si aún no sabes cuáles son las ventajas que tiene tu móvil, puedes revisar la siguiente lista. 1. Armor Mobile:  Este móvil es una remodelación del tanque usado por muchos reclutas durante la Guerra. Tiene alto poder explosivo y dos tipos de bomba acopladas dentro de su protección. 2. Big Foot:  Este modelo cuenta con una armadura de metal muy utilizado en las guerras. Su táctica es disparar bombas repentinamente...
Leer más

Gráficos para el chat de Dragonbound y Facebook

Imagen
E n esta ocasión les traigo códigos ACSII para el chat de Dragonbound y Facebook, espero les guste y les sirva. A continuación daré las mejores paginas y los mejores gráficos ACSII: En primer lugar para mi la mejor pagina, la cual cuenta con una extensión para Google Chrome que facilita su uso: DESCARGAR Pueden usarlo en donde sea si necesidad de salir de la ventana donde se encuentren: ¿No sabes como instalarlo? Visita el siguiente post: CLICK AQUÍ Tambien cuenta con una pagina web la cual puedes escribir lo que sea (OJO: Que las palabras sean cortas) y luego simplemente consta en copiar y pegar: CLICK AQUÍ Esta es otra web que me fascina, porque puedes dibujar lo que desees y se generara automaticamente el código ASCII para copiar y pegar: CLICK AQUÍ Estas son webs generadoras de texto, solo escribe lo que desees, recuerda palabras cortas: CLICK AQUÍ CLICK AQUÍ Ejemplos de algunos ASCII, Copia y pega el código: ╔╦╦╦╦╦╦╦╦╦╦╦╦╗ ╠╬╬╬╬╬╬╬╬╬╬╬╬╣ ╠╬╬╬╬╬╬╬╬╬╬╬╬╣ ╠╬╬█╬╬╬╬╬╬█╬╬╣ ╠╬╬╬╬╬...
Leer más