Você não está conectado. Conecte-se ou registre-se

Change the legend

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Change the legend em Sab Jan 17, 2015 10:05 am

Mihai.

avatar
Membro ativo

[quadrado=Minha questão]
I want to do exactly as picture shown legend.


My Legend:





Endereço do meu fórum:
http://lanenicu.forum.st

Versão:
PunBB[/quadrado]

Ver perfil do usuário

2 Re: Change the legend em Sab Jan 17, 2015 3:55 pm

deaneo8

avatar
Membro ativo

i was looking for this too bro

Ver perfil do usuário

3 Re: Change the legend em Sab Jan 17, 2015 4:25 pm

Mihai.

avatar
Membro ativo

He went something but do not know how to do exactly as shown, and icons..

Ver perfil do usuário

4 Re: Change the legend em Dom Jan 18, 2015 7:48 am

waghcwb

avatar
Membro elite

Install this
http://fortawesome.github.io/Font-Awesome

And use this CSS
Código:
div.legenda a:not(.legenda) {
        background: #eee;
        margin: .5em;
        display: inline-block;
        padding: 1.3em;
        border-radius: 3px;
        border: none;
        color: #fff!important;
}

div.legenda a:not(.legenda)::before {
  content: "\f0ac";
  font-family: 'FontAwesome';
  font-weight: normal;
  margin-right: .7em;
}

div.legenda a[style="color: #B84116"]:not(.legenda) {
        background: #B84116;
}

Look this part
Código:
div.legenda a[style="color: #B84116"]:not(.legenda) {
        background: #B84116;
}

You need to repeat it to add more group colors. Check the color of the group, and change this 2 values

div.legenda a[color=#ffff00]#B84116"]:not(.legenda) {
       background: #B84116;
}

study



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

5 Re: Change the legend em Dom Jan 18, 2015 9:08 am

Mihai.

avatar
Membro ativo

Unfortunately, it does not work...

Ver perfil do usuário

6 Re: Change the legend em Ter Jan 20, 2015 10:06 am

waghcwb

avatar
Membro elite

@Mihai.

You did something wrong...

Look


Just need to add the other colors...



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

7 Re: Change the legend em Ter Jan 20, 2015 11:56 am

deaneo8

avatar
Membro ativo

dose this code go to css 
[list=linenums]
[*]div . caption : not (. caption ) {

[*]        background : #eee;

[*]        margin : . 5em ;

[*]        display : inline - block ;

[*]        padding : 1.3em ;

[*]        border - radius : 3px ;

[*]        border : none ;

[*]        color : #fff! important;

[*]}


[*]div . caption : not (. Legend ) :: before {

[*]  content : "\ f0ac" ;

[*]  font - family : 'FontAwesome' ;

[*]  font - weight : Normal ;

[*]  margin - right : . 7In ;

[*]}


[*]div . caption [ style = "color: # B84116" ]: not (. caption ) {

[*]        background : # B84116;

[*]}

[/list]

Ver perfil do usuário

8 Re: Change the legend em Ter Jan 20, 2015 12:00 pm

deaneo8

avatar
Membro ativo

could step by guild how to install

Ver perfil do usuário

9 Re: Change the legend em Ter Jan 20, 2015 12:01 pm

Mihai.

avatar
Membro ativo

@waghcwb escreveu:@Mihai.

You did something wrong...

Look


Just need to add the other colors...


I did exactly as you said ... does not work.

I deleted the old codes and added this:
Código:
div.legenda a:not(.legenda) {
        background: #eee;
        margin: .5em;
        display: inline-block;
        padding: 1.3em;
        border-radius: 3px;
        border: none;
        color: #fff!important;
}

div.legenda a:not(.legenda)::before {
  content: "\f0ac";
  font-family: 'FontAwesome';
  font-weight: normal;
  margin-right: .7em;
}

div.legenda a[style="color: #B84116"]:not(.legenda) {
        background: #B84116;
}
      div.legenda a[style="color: #B84116"]:not(.legenda) {
        background: #B84116;
}

The Result:



Última edição por Mihai. em Ter Jan 20, 2015 12:08 pm, editado 2 vez(es)

Ver perfil do usuário

10 Re: Change the legend em Ter Jan 20, 2015 12:03 pm

waghcwb

avatar
Membro elite

Yes, you need to add to your CSS. But not with those "[*]" symbols...



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

11 Re: Change the legend em Ter Jan 20, 2015 12:06 pm

deaneo8

avatar
Membro ativo

how would add the legend to my website 

here my website name http://gamingnews.forumotion.co.uk/

Ver perfil do usuário

12 Re: Change the legend em Ter Jan 20, 2015 12:13 pm

Mihai.

avatar
Membro ativo

This code does not work:
Código:
div . caption : not (. caption ) {
background: #eee;
margin: . 5em ;
display: inline - block ;
padding: 1.3em ;
border: radius : 3px ;
border: none ;
color: #fff! important;
}
div . caption : not (. Legend ) :: before {
content: "\ f0ac" ;
font: family : 'FontAwesome' ;
font: weight : Normal ;
margin: right : . 7In ;
}
div . caption [ style = "color: # B84116" ]: not (. caption ) {
background: # B84116;
}

Ver perfil do usuário

13 Re: Change the legend em Qua Jan 21, 2015 2:44 pm

waghcwb

avatar
Membro elite

Let's try again. The code you're sending it's not the same i sent to you

First, you need to install this
http://fortawesome.github.io/Font-Awesome/get-started

There's a tutorial on that site!

You just need to put this inside the "head" tag
Código:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Then you will be able to use those icons
http://fortawesome.github.io/Font-Awesome/icons

Now use this code: http://pastebin.com/Lg5QPBj0

Result:


If this doesn't work you're doing something wrong (look on the image, it's working!!)

Look this too


You're using the same class to style different elements with different styles...



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

14 Re: Change the legend em Qua Jan 21, 2015 6:40 pm

Mihai.

avatar
Membro ativo

I solved but I have little problems.

First, the icons are black see the other groups. Only the Administrator can see white.
Secondly, how do slightly larger space between them?

Result:

Ver perfil do usuário

15 Re: Change the legend em Qui Jan 22, 2015 7:54 am

waghcwb

avatar
Membro elite

You don't need to add this a lot of time on the page



You're loading the same script more than one time. This may can downgrade your forum speed...

Just open your overall_header template, and put it there one time...


And for the margin and the color, use this
Código:
.rank i {
        color: #fff;
        margin-right: .7em;
}



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

16 Re: Change the legend em Qui Jan 22, 2015 8:52 am

Mihai.

avatar
Membro ativo

If you do not add the code for each group icon does not appear ..

We solved and white icons.

I tried to add icons and ranks but the title is too long and not let me give registration.


EDIT!!

Resolved!

Thanks all!  cheers



Última edição por Mihai. em Qui Jan 22, 2015 9:24 am, editado 1 vez(es)

Ver perfil do usuário

17 Re: Change the legend em Qui Jan 22, 2015 8:53 am

deaneo8

avatar
Membro ativo

Mihai  could tell me how to add done but my legend havt change

Ver perfil do usuário

18 Re: Change the legend em Dom Mar 29, 2015 10:41 am

Alexandre51

avatar
Membro elite

Teria como alguem explicar como colocar este efeito mas em portugues?

Ver perfil do usuário http://www.notag.forumais.com

19 Re: Change the legend em Sab Abr 04, 2015 4:21 pm

waghcwb

avatar
Membro elite

@Alexandre51,

Adicione isso no seu
overall_header
(logo antes do fechamento da tag
</head>
)

Código:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

E então poderá usar a font-awesome onde quiser. Inclusive nos tópicos



Depende de onde quer usar...



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

20 Re: Change the legend em Sex Abr 10, 2015 6:16 pm

Alexandre51

avatar
Membro elite

nao funcionou para mim,, será que fiz algo de errado?

Ver perfil do usuário http://www.notag.forumais.com

21 Re: Change the legend em Dom Abr 19, 2015 9:36 am

waghcwb

avatar
Membro elite

Não, está funcionando perfeitamente.

Veja aqui os ícones que você pode usar
http://fortawesome.github.io/Font-Awesome/icons

Escolhe um, clica nele e pega o HTML para mostrar o ícone (lembrando que para aparecer nas mensagens de usuários precisa do HTML habilitado, ou um BBCODE para isso...

Ex:
Código:
<i class="fa fa-cloud-download"></i>



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum