Botões em .CSS

Detalhes da questão

Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Olá!

Eu tentei colocar os botões em .CSS de (Novo Tópico, Responder, Bloqueado) no fórum que tinha antes em PunBB resultava e tinha estes códigos:

.CSS

Código:

.botãoresponder:hover, .botãonovotopico:hover, .botãobloqueado:hover {
box-shadow: 0px 4px 1px rgba(0, 0, 0, 0.19), 0px -3px 0px rgba(0, 0, 0, 0.19) inset;
text-decoration: none;
}
.botãoresponder, .botãonovotopico {
border: medium none;
margin: 10px;
color: #FFF;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
padding: 0px 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
white-space: nowrap;
border-radius: 5px;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.19), 0px -1px 0px rgba(0, 0, 0, 0.19) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.19) inset;
background-color: #267CC2;
background-image: linear-gradient(#42A5E1, #267CC2);
transition: all 0.5s ease 0s;
}
.botãobloqueado {
border: medium none;
margin: 10px;
color: #FFF;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
padding: 0px 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
white-space: nowrap;
border-radius: 5px;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.19), 0px -1px 0px rgba(0, 0, 0, 0.19) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.19) inset;
background-color: #C22626;
background-image: linear-gradient(#E14242, #C22626);
transition: all 0.5s ease 0s;
}
.botãoresponder:hover, .botãonovotopico:hover, .botãobloqueado:hover {
box-shadow: 0 4px 1px rgba(0,0,0,.19),inset 0 -3px 0 rgba(0,0,0,.19);
text-decoration: none;
}
.botãoresponder:active, .botãonovotopico:active, .botãobloqueado:active, .botãoresponder:focus, .botãonovotopico:focus, .botãobloqueado:focus {
box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19),inset 0 12px 24px 6px rgba(0,0,0,.19),inset 0 0 2px 2px rgba(0,0,0,.19); }
.module .main-content table[style="table-layout:fixed"] {
-moz-animation: progress_bar 2s linear infinite;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-animation: progress_bar 2s linear infinite;
-webkit-user-select: none;
animation: progress_bar 2s linear infinite;
background: #fafafa;
background-image: linear-gradient(45deg,rgba(255,255,255,.1)25%,transparent 25%,transparent 50%,rgba(255,255,255,.1)50%,rgba(255,255,255,.1)75%,transparent 75%,transparent);
background-size: 10px 10px;
border: #e1e1e1 1px solid;
border-radius: 3px;
cursor: default;
font-size: 10px;
font-weight: 700;
overflow: hidden;
text-shadow: rgba(0,0,0,.3) 1px 1px 1px;
user-select: none;
}

.jS

Código:

$(document).ready(function(){$('img[src="http://2img.net/i/fa/punbb/post.png"]').replaceWith('<span class="botãonovotopico">Novo Tópico</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/punbb/reply.png"]').replaceWith('<span class="botãoresponder">Responder</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/button_topic_locked_en.png"]').replaceWith('<span class="botãobloqueado">Bloqueado</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/post_en.gif"]').replaceWith('<span class="botãonovamensagemprivada">Novo Tópico</span>')});

Ao ativar o .jS os botões não aparece nem as imagens, caso saibam o problema agradecia!

Olá!

Troque o JS por este e deixe ativo em seu fórum:

Código:

$(document).ready(function() {
    $('img[src="http://2img.net/i/fa/punbb/post.png"]').replaceWith('<div class="botãonovotopico">Novo Tópico</div>')
});
$(document).ready(function() {
    $('img[src="http://2img.net/i/fa/punbb/reply.png"]').replaceWith('<div class="botãoresponder">Responder</div>')
});
$(document).ready(function() {
    $('img[src="http://2img.net/i/fa/prosilver/button_topic_locked_en.png"]').replaceWith('<div class="botãobloqueado">Bloqueado</div>')
});
$(document).ready(function() {
    $('img[src="http://2img.net/i/fa/subsilver/post_en.gif"]').replaceWith('<div class="botãonovamensagemprivada">Novo Tópico</div>')
});

Até mais.
Fraise

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

Boa tarde!

@Fraise coloquei amigo mas sem efeito.

Certo. Coloque o mesmo código que tinha inicialmente pórem com o investimento marcado "Nos sub-fóruns" e veja se resulta.

Código:

$(document).ready(function(){$('img[src="http://2img.net/i/fa/punbb/post.png"]').replaceWith('<span class="botãonovotopico">Novo Tópico</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/punbb/reply.png"]').replaceWith('<span class="botãoresponder">Responder</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/prosilver/button_topic_locked_en.png"]').replaceWith('<span class="botãobloqueado">Bloqueado</span>')});
$(document).ready(function(){$('img[src="http://2img.net/i/fa/subsilver/post_en.gif"]').replaceWith('<span class="botãonovamensagemprivada">Novo Tópico</span>')});

Até mais.
Fraise

@Fraise quero pedir desculpa pois o código que tinha passado resultou só tinha esquecido de colocar ativo :/ Mas só uma dúvida é possível colocar um ícone ao lado do botão, estes ícones:
- http://astronautweb.co/snippet/font-awesome/

Sim, é possível. Adicione à sua folha de estilos:

Código:

.botãonovotopico:before {
    content: '\f085 \00A0';
}

.botãobloqueado:before {
    content: '\f085 \00A0';
}

.botãoresponder:before {
    content: '\f085 \00A0';
}

Até mais.
Fraise

@Fraise aparece só que não está a reconhecer ou seja aparece ao lado " [] "

Ops.. esqueci de um pequeno pormenor. Troque por este:

Código:

.botãonovotopico:before {
    content: '\f085 \00A0';
    font-family: 'fontawesome';
}

.botãobloqueado:before {
    content: '\f085 \00A0';
    font-family: 'fontawesome';
}

.botãoresponder:before {
    content: '\f085 \00A0';
    font-family: 'fontawesome';
}

Até mais.
Fraise

@Fraise perfeito amigo obrigado e desculpe por aquele erro meu.

Sem problema.