Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Chalo Lun Oct 15, 2018 8:24 am

[Revisado] Errores Yoshi Fans club
por YoshiGM Sáb Oct 13, 2018 12:36 pm

[CSS] Dar estilo a los rangos
por Eslam Love Miér Oct 03, 2018 11:15 pm

Página 1 de 2. 1, 2  Siguiente

[CSS] Modifica la Toolbar: Selectores
Tema iniciado por y Añadir a favoritos

[CSS] Modifica la Toolbar: Selectores  
el Dom Dic 14, 2014 1:45 pm
staff


Última edición por Chalo el Miér Ene 27, 2016 12:46 pm, editado 7 veces
[codebox]Modifica la toolbar.[/codebox]

[hidecode]
#fa_toolbarToda la toolbar
#fa_search / #fa_textarea
#fa_magnifier
#fa_share
#fa_share_text
#fa_fb
#fa_twitter
#fa_gp
#fa_mail
#fa_rss
#fa_right
#fa_welcome
#fa_notifications
#notif_unread
#fa_hide
#fa_show
#fa_menulist
#fa_usermenu
#fa_ranktitle
#notif_list
Enlarge this image
li.see_all
li.unread
#notif_list li .contentText
#notif_list li a.delete
div.fa_notification
div.fa_notification .content
 Trucos:

Remover el search bar :
  

Código:
#fa_search { display:none !important }




Remover los botones the "share" :

Código:
#fa_share { display:none !important }


Remover el link "Welcome Ch@lo Valdez" :

Código:
#fa_welcome { display:none !important }


Remover el  boton "Hide toolbar" :

Código:
#fa_hide { display:none !important }




Modificaciones



#1




Código:
div#fa_toolbar {
  background-color: #24384c;  /* Background color */
  border-radius: 0 0 50px 50px;  /* Rounds borders of the toolbar */
  box-shadow: 0 0 5px #000000;  /* Displays a shadow */
  margin: auto;  /* Center the toolbar */
  width: 98%;  /* Width of the toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
  margin: 0 15px;  /* Reposition the toolbar contents */
}


#2




Código:
div#fa_toolbar {
    background-color: #657488;  /* Background color */
    border: 2px solid white;  /* Add a white border */
    border-radius: 50px;  /* Rounds borders of the toolbar */
    margin: auto;  /* Center the toolbar */
    top: 10px;  /* Space above the toolbar */
    width: 98%;  /* Width of the toolbar */
}
 
a#fa_hide {
    display: none!important;  /* Remove the hide button */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Reposition the toolbar contents */
}


#3



Código:
#fa_toolbar {
    background-color: transparent !important;  /* Make the main toolbar bg transparent */
}
#fa_right {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 40px 40px;  /* Border roundness */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
    right: 20px;  /* Décale la toolbar de la droite */
}
 
#fa_left {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 0 40px;  /* Border roundness */
    position: relative;  /* Position of the toolbar */
    left: 20px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_search {
    background-color: #000000;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_share {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 40px;  /* Border roundness */
    position: relative;  /* Position of the toolbar */
    left: -20px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /*Left padding */
    padding-right: 10px;  /* Right padding */
}


#4




Código:
#fa_toolbar {
    background-color: transparent !important;  /* Make the main toolbar bg transparent */
}
 
#fa_right {
    background-color: #b3b3b3;  /* Background color */
    border-radius: 0 0 0 40px;  /* Border roundness */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_left {
    background-color: #b3b3b3;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_search {
    background-color: #b3b3b3;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
    left: -20px;  /* Spacing to the left of the toolbar */
}
 
#fa_share {
    background-color: #b3b3b3;  /* Background color */
    border-radius: 0 0 40px;  /* Border roundness */
    left: -40px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
}



#5





[code]    #fa_share:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px!important;
    }
    #fa_share:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-29px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px !important;
    }
    #fa_share{
      margin-left:450px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
      border-radius: 0px 0px 2px 2px!important;
    }

    #fa_search:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_left:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_search{
      margin-left:151px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
    }
    #fa_left{
      margin-left:40px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute !important;
    }
    #fa_toolbar{
      background-color:transparent!important;
    }
    #fa_right:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_right:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_right{
      margin-left:780px!important;
      background-color: rgba(0,0,0, 0.5) !important;
      position:absolute !important;
      border-radius: 0px 0px 2px 2px!important;
    }
#fa_toolbar_hidden:after{
  border-radius: 0px 0px 5px 5px!important;
  content:""!important;
  position:absolute!important;
  border-top: 35px solid  rgba(0,0,0, 0.5)!important;
  border-right: 30px solid transparent!important;
  display:inline-block!important;
  margin-top:-5px!important;
}
    #fa_toolbar_hidden:before{
      border-radius: 0px 0px 5px 5px!important;
      content:"";left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_toolbar_hidden{
      margin-right:30px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      border-radius: 0px 0px 2px 2px!important;
    }

    #fa_menulist{
      float:right!important;
      margin-left: -210px !important;
      background-color: rgba(0,0,0, 0.5)!important;
      position: absolute !important;
      border-radius: 0px 0px 2px 2px!important;
      border:none;
    }
    #fa_toolbar #fa_right #notif_list li.see_all {
      color:white !important;
      background-color: rgba(0,0,0, 0.5)!important;
    }
    #fa_menulist:after{
      content:""!important;
      position:absolute!important;
      top:-2px!important;
      border-bottom: 270px solid  rgba(0,0,0, 0.5) !important;
      right:-20px!important;
      border-right: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:-0px!important;
    }
    #fa_menulist:before{
      content:""!important;
      left:-20px !important;
      position:absolute!important;
      border-top: 270px solid  rgba(0,0,0, 0.5)!important;
      border-left: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:6!important!;
    }
    #fa_welcome,#fa_toolbar #fa_right #notif_list,#fa_notifications,
#fa_toolbar #fa_menulist li a,#fa_menulist #fa_ranktitle,#fa_menulist td{
  background-color:transparent !important;
  color:white !important;
}
#notif_list li { background:#CCC !important }[/hidecode]
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Dom Dic 14, 2014 1:56 pm
staff
Esto esta bastante bueno...

Pero siempre me e preguntado si los iconos de redes sociales uno los puedo mover a cualquier parte de la toolbar o es imposible...
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1577


Puntos :

2320


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Dom Dic 14, 2014 2:41 pm
staff
@Dosh escribió:[quotelink="/t143-notacss#425"]Esto esta bastante bueno...

Pero siempre me e preguntado si los iconos de redes sociales uno los puedo mover a cualquier parte de la toolbar o es imposible...

claro que se pueden mover a donde los quieres poner?
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Dom Dic 14, 2014 8:59 pm
staff
No a ningún lado yo los quite de mi foro era una duda que siempre tuve...
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1577


Puntos :

2320


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Dom Dic 14, 2014 9:11 pm
staff
@Dosh escribió:[quotelink="/t143-notacss-modifica-la-toolbar-selectores#430"]No a ningún lado yo los quite de mi foro era una duda que siempre tuve...

hipoteticamente?? para dejar el code por aqui
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Dom Dic 14, 2014 9:22 pm
staff
A pues al lado de bienvenido...
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1577


Puntos :

2320


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Lun Dic 15, 2014 11:30 pm
staff
@Dosh escribió:[quotelink="/t143-notacss-modifica-la-toolbar-selectores#434"]A pues al lado de bienvenido...

algo asi?

[tag]Dosh[/tag]

Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Mar Dic 16, 2014 1:42 pm
staff
sip asi mismo y otra pregunta esas redes se pueden modificar...
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1577


Puntos :

2320


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Mar Dic 16, 2014 1:50 pm
staff
@Dosh escribió:[quotelink="/t143-nota-css-modifica-la-toolbar-selectores#447"]sip asi mismo y otra pregunta esas redes se pueden modificar...

mmm no, estan predefinidas, iconos y demás si, quiza agregando un js podriamos hacerlo
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [CSS] Modifica la Toolbar: Selectores  
el Mar Dic 16, 2014 2:13 pm
staff
creo que seria bueno quitar la del @ y tal ves colocar un icono como por ejemplo el que te muestra todas las redes sociales...
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1577


Puntos :

2320


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.