¿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