Personalizando widgets

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

Resolvido Personalizando widgets

Mensagem por iHeloaD em 22/04/13, 05:49 pm

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 27/04/13, 09:12 pm, editado 3 vez(es)
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizando widgets

Mensagem por seender em 22/04/13, 09:29 pm

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://illiweb.com/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
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Personalizando widgets

Mensagem por iHeloaD em 22/04/13, 09:33 pm

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
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizando widgets

Mensagem por seender em 22/04/13, 09:40 pm

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
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Personalizando widgets

Mensagem por iHeloaD em 23/04/13, 11:36 am

Nenhum resultado.
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizando widgets

Mensagem por seender em 23/04/13, 03:22 pm

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!
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Personalizando widgets

Mensagem por iHeloaD em 23/04/13, 05:34 pm

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

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Resolvido Re: Personalizando widgets

Mensagem por Convidado em 23/04/13, 05:50 pm

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

Convidado
Convidado


Resolvido Re: Personalizando widgets

Mensagem por Gabyte em 26/04/13, 08:20 am

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)
avatar

Gabyte
Nível 5

Masculino
Inscrito dia : 04/01/2012
Mensagens : 57
Pontos Ativos : 111

Ver perfil do usuário http://slyce-design.forumeiros.com

Resolvido Re: Personalizando widgets

Mensagem por BrunoH. em 26/04/13, 06:29 pm

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.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Personalizando widgets

Mensagem por iHeloaD em 26/04/13, 07:33 pm

Resultou, pode fechar. Positivo
avatar

iHeloaD
Membro do Fórum

Masculino
Inscrito dia : 11/10/2012
Mensagens : 1700
Pontos Ativos : 2816

Ver perfil do usuário http://www.cidadesocial.com https://www.facebook.com/gustavofaq

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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