Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Botões em .CSS
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
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!
Re: Botões em .CSS
Olá!
Troque o JS por este e deixe ativo em seu fórum:
Até mais.
Fraise
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
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'
Re: Botões em .CSS
Certo. Coloque o mesmo código que tinha inicialmente pórem com o investimento marcado "Nos sub-fóruns" e veja se resulta.
Até mais.
Fraise
- 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
Re: Botões em .CSS
@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/
- http://astronautweb.co/snippet/font-awesome/
Re: Botões em .CSS
Sim, é possível. Adicione à sua folha de estilos:
Até mais.
Fraise
- Código:
.botãonovotopico:before {
content: '\f085 \00A0';
}
.botãobloqueado:before {
content: '\f085 \00A0';
}
.botãoresponder:before {
content: '\f085 \00A0';
}
Até mais.
Fraise
Re: Botões em .CSS
Ops.. esqueci de um pequeno pormenor. Troque por este:
Até mais.
Fraise
- 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
Re: Botões em .CSS
Sem problema.
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos