Personalizando widgets

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Personalizando widgets

Mensagem por iHeloaD 22.04.13 21:49

Qual é minha questão:
Olá como faço os Widgets assim?


Fórum onde visualizei o mesmo:
http://spublicidade.forumeiros.com/forum

Endereço do meu fórum:
http://swdesign.ativoforum.com

Versão do fórum:
PHPBB3


Última edição por iStriker em 28.04.13 1:12, editado 3 vez(es)
iHeloaD

iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizando widgets

Mensagem por seender 23.04.13 1:29

Olá!

Deverá entender de HTML, adicionar classes nos elementos que quer editar, fiz um código para você agora é só editar por meio de códigos CSS, aqui está:
Código:
        <div class="login"><form action="/login" method="post" name="form_login">

                <div id="label_userandpass"><label for="username">Nome da conta:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" class="inputbox autowidth" /></dd></dl><dl><dt><label for="password">Senha:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" class="inputbox autowidth" /></div>

                <span class="esqueci"><br></br><a href="/profile.forum?mode=sendpassword"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Esqueceu a senha?</a></br><br></br></span>

                <dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Entrar" class="button1" /></dd>
        </form> </div>
#username.inputbox.autowidth -> Classe que se refere a caixa aonde se digita o nome do usuário.
#password.inputbox.autowidth -> Classe que se refere a caixa aonde se digita a senha para login.
#label_userandpass -> Engloba toda a área de login e senha.
.login -> Engloba todo o formulário de login.
input[value="Entrar"] -> Se refere ao botão de enviar dados, ou seja o botão de login.

Melhores cumprimentos,
seender
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizando widgets

Mensagem por iHeloaD 23.04.13 1:33

Ops, desculpe não ter explicado, eu quero o efeito que tem nos widgets do http://spublicidade.forumeiros.com/forum tipo essa imagem no fundo do titulo do widget etc
iHeloaD

iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizando widgets

Mensagem por seender 23.04.13 1:40

Olá!

Utilize estes códigos:
Código:
.module .main-content {
    background: url("http://i43.servimg.com/u/f43/17/53/16/77/sem_ta12.png") repeat-x scroll center bottom transparent;
    border-radius: 0px 0px 7px 7px;
}
.module .main-head, #main #main-content .portal .module .main-head, #main #main-content #profile-advanced-right .module .main-head {
    background: url("http://hitskin.com/themes/16/11/22/i_list_bg.png") repeat scroll -1px 0px transparent !important;
    padding: 0.6em 1.3em !important;
}
Adicione em:
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS

Melhores cumprimentos,
seender
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizando widgets

Mensagem por iHeloaD 23.04.13 15:36

Nenhum resultado.
iHeloaD

iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizando widgets

Mensagem por seender 23.04.13 19:22

Olá!

Troque por este:
Código:
        .module{
            border-radius: 0px 0px 7px 7px;
        }
        .module{
            background: url("http://hitskin.com/themes/16/11/22/i_list_bg.png") repeat scroll -1px 0px transparent !important;
            padding: 0.6em 1.3em !important;
        }
Até mais!
seender

seender
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizando widgets

Mensagem por iHeloaD 23.04.13 21:34

Quase, olhe lá como está. Não esqueça que tem um degradê meio azul claro e branco de fundo no widget.
iHeloaD

iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizando widgets

Mensagem por Convidado 23.04.13 21:50

Saudações!

Troque o código por este.
Código:
Código:
.module{
    border-radius: 0px 0px 7px 7px;
}
.module{
    background: url("http://hitskin.com/themes/16/11/22/i_list_bg.png") repeat scroll -1px 0px transparent  !important;
background-repeat: repeat-x !important;
    padding: 0.6em 1.3em !important;
}

Até Piscada
Anonymous

Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizando widgets

Mensagem por Gabyte 26.04.13 12:20

Também estou com a mesma dúvida, só que eu quero mudar a cor do Fundo dos Títulos dos Widgets Esquerdo do Fórum(Não é do Portal)
Gabyte

Gabyte
**

Membro desde : 04/01/2012
Mensagens : 57
Pontos : 111

http://slyce-design.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Personalizando widgets

Mensagem por BrunoH. 26.04.13 22:29

Olá,
Aceda a Folha de Estilo CSS:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS
Código:
Código:
.module {
background: url(http://i43.servimg.com/u/f43/17/53/16/77/sem_ta12.png) repeat-x center bottom;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
border: 1px solid #ddd;
}
.module .h3 {
background: url(http://hitskin.com/themes/16/11/22/i_list_bg.png) -1px 0px !important;
padding: 0.6em 1.3em !important;
margin-left: -10px;
margin-top: -6px;
width: 172px;
}
e Valide!

Até mais.
BrunoH.

BrunoH.
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10385

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizando widgets

Mensagem por iHeloaD 26.04.13 23:33

Resultou, pode fechar. Positivo
iHeloaD

iHeloaD
Super Membro

Membro desde : 11/10/2012
Mensagens : 1700
Pontos : 2816

http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos