Organizar itens dentro do painel
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 • Compartilhe
Organizar itens dentro do painel
Detalhes da questão
Endereço do fórum: http://teste1432.forumeiros.com
Versão do fórum: ModernBB
Descrição
Olá pessoal, queria uma ajuda pra ajustar uma "aba" de informações, ela tem 3 partes
Destaques, quartos e Eventos. Mas eu tô com problemas pra ajeitar a parte Destaques, como podem ver: https://imgur.com/4XFbkfI
Queria tudo dentro da caixa, tentei mas n consegui, rs
- index_body:
- Código:
{JAVASCRIPT}
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_header -->
<!-- BEGIN message_admin_index -->
<div class="panel introduction">
<!-- BEGIN message_admin_titre -->
<div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
<!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN disable_viewonline -->
<div class="block">
<section id="content3">
<p>
<div class="legend">
[
<b>
<a style="color: rgb(255, 255, 255);
background-image: linear-gradient(124deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);
background-size: 1800% 1800%;
animation: rainbow 5s linear infinite;"
class="gensmall tooltipstered" href="/g1-supremacia"><i class="fas fa-crown" style="margin-right: 5px;"></i>Supremacia</a></b>
]
[ <b><a style="color: rgb(255, 255, 255);
background-color: rgb(51, 50, 50);"
class="gensmall tooltipstered" href="/g2-corregedoria">Corregedoria</a></b>
]
[ <b><a style="color: rgb(255, 255, 255);
background-color: #000;"
class="gensmall tooltipstered" href="/g7-gate">GATE</a></b> ]
[ <b><a style="color: rgb(255, 255, 255);
background-color: rgb(37, 153, 134);"
class="gensmall tooltipstered" href="/g8-centro-de-recursos-humanos">Centro de R. Humanos</a></b> ]
[ <b><a style="color: rgb(255, 255, 255);
background-color: rgb(128, 27, 148);"
class="gensmall tooltipstered" href="/g3-corpo-executivo">Corpo Executivo</a></b> ]
[ <b><a style="color: rgb(255, 255, 255);
background-color: rgb(15, 56, 92);"
class="gensmall tooltipstered" href="/g4-instrutores">Instrutores</a></b> ]
[ <b><a style="color: rgb(255, 255, 255);
background-color: rgb(219, 20, 46);"
class="gensmall tooltipstered" href="/g9-treinadores">Treinadores</a></b> ]
[ <b><a style="color: rgb(255, 255, 255);
background-color: rgb(21, 97, 23);"
class="gensmall tooltipstered" href="/g6-supervisores">Supervisores</a></b> ]
[ <b><a style="color: rgb(255, 255, 255);
background-color: rgb(19, 26, 64);"
class="gensmall tooltipstered" href="g5-professores">Professores</a></b> ]
</div>
</p>
</section>
</div>
</div>
<div class="statistics">
<div class="wrap">
<div class="stat-card">
{TOTAL_POSTS}
</div>
<div class="stat-card">
{TOTAL_USERS}
</div>
<div class="statistics-item">
{NEWEST_USER}
</div>
</div>
</div>
<div class="conteudo-info-1" style="position: relative;">
<div class="conteudo">
<div class="coluna-3">
<div class="box-coluna-3 section" id="Destaque" name="Destaque"><div class="widget HTML" data-version="1" id="HTML10">
<h2 class="title">Destaques</h2>
<div class="widget-content">
<div class="destaque">
<div class="circulo">
<div class="user" style="background-image: url(https://www.habbo.com.br/habbo-imaging/avatarimage?user=robert6966&action=std&direction=2&head_direction=2&img_format=gif&gesture=std&headonly=0&size=l);"></div>
</div>
<div class="nome">
Nome do usuario
</div>
<div class="pq">
Por ter sido o primeiro colocado no Ranking Mensal de Abril!
</div>
</div>
<div class="destaque">
<div class="circulo circulo-2">
<div class="user" style="background-image: url(https://lh6.googleusercontent.com/proxy/YMYIlU_Nve1yLwC4fH_G5pQ60m9dJwyR9wt5kvZxZcDakYT4NbpntyXsybzk1f0EbV8QTVtWCnS9qss9Y1Ai_SPSKnGBuiOdgKMgjJpnGF9BmEeBL7xnNsJ1Svskl3JPJL47pF1AW-OWRyFk5HN5z_mM212Qw8ZP1HkYAkht8wFWQTOEAtb9qs9BaGhKGRwfVNY=s0-d);"></div>
</div>
<div class="nome">
Nome do usuário
</div>
<div class="pq">
Por ter sido o segundo colocado no Ranking Mensal de Abril!
</div>
</div>
<div class="destaque">
<div class="circulo">
<div class="user" style="background-image: url(https://www.habbo.com.br/habbo-imaging/avatarimage?user=dr.jefferson105&action=std&direction=4&head_direction=4&img_format=gif&gesture=std&headonly=0&size=l);"></div>
</div>
<div class="nome">
Nome do usuário
</div>
<div class="pq">
Por ter sido o terceiro colocado no Ranking Mensal de Abril!
</div>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=738728056720762810&widgetType=HTML&widgetId=HTML10&action=editWidget&sectionId=Destaque" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML10"));" rel="nofollow" target="configHTML10" title="Editar">
<img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
</a>
</span>
</span>
<div class="clear"></div>
</div></div>
</div>
<div class="coluna-3">
<div class="box-coluna-3 section" id="Quartos" name="Quartos"><div class="widget HTML" data-version="1" id="HTML11">
<h2 class="title">Quartos</h2>
<div class="widget-content">
<div class="quarto">
<div class="img" style="background-image: url(https://i.imgur.com/wDmUabJ.png);"></div>
<div class="titulo">Sede de Planejamento</div>
<a href="https://www.habbo.com.br/hotel?room=141561895" target="_blank">
<div class="botao"><i class="fa fa-sign-in"></i> Ir para o quarto</div>
</a></div>
<div class="quarto">
<div class="img" style="background-image: url(https://lh4.googleusercontent.com/proxy/3JjZYGdDlQfO6sEhrAtm9zTCoTr0mGHUwYpnkkkhoVegCmo-A3c-IpKsu_QklwHikOc=s0-d);"></div>
<div class="titulo">Centro de Operações</div>
<a href="https://www.habbo.com.br/hotel?room=58580675" target="_blank">
<div class="botao"><i class="fa fa-sign-in"></i> Ir para o quarto</div>
</a></div>
<div class="quarto">
<div class="img" style="background-image: url(https://lh4.googleusercontent.com/proxy/6TsNyPwLmvl_5670qWlBVylphLUQRgcxidQic9I2MkfcNz6rcgYYqx169qPjZUV2nPw=s0-d);"></div>
<div class="titulo">Sala de Contratações</div>
<a href="https://www.habbo.com.br/hotel?room=137220889" target="_blank">
<div class="botao"><i class="fa fa-sign-in"></i> Ir para o quarto</div>
</a></div>
<div class="quarto">
<div class="img" style="background-image: url(https://lh4.googleusercontent.com/proxy/6TsNyPwLmvl_5670qWlBVylphLUQRgcxidQic9I2MkfcNz6rcgYYqx169qPjZUV2nPw=s0-d);"></div>
<div class="titulo">Sala de contratações 2</div>
<a href="" target="_blank">
<div class="botao"><i class="fa fa-sign-in"></i> Ir para o quarto</div>
</a></div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=738728056720762810&widgetType=HTML&widgetId=HTML11&action=editWidget&sectionId=Quartos" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML11"));" rel="nofollow" target="configHTML11" title="Editar">
<img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
</a>
</span>
</span>
<div class="clear"></div>
</div></div>
</div>
<div class="coluna-3">
<div class="box-coluna-3 section" id="Eventos" name="Eventos"><div class="widget HTML" data-version="1" id="HTML12">
<h2 class="title">Eventos</h2>
<div class="widget-content">
<div class="evento">
<div class="img" style="background-image: url(https://i.imgur.com/Vrq4SmO.png);"></div>
<div class="nome"><i>Reunião de Promoção</i></div>
<div class="data"><i class="fa fa-calendar"> 03/03/2020</i></div>
<div class="hora"><i class="fa fa-clock-o"> 20:00 BR/--:--
PT</i></div>
</div>
<div class="evento">
<div class="img" style="background-image: url();"></div>
<div class="nome"><i>Nenhum evento</i></div>
<div class="data"><i class="fa fa-calendar"> --/--/----</i></div>
<div class="hora"><i class="fa fa-clock-o"> --:-- BR/--:--
PT</i></div>
</div>
<div class="evento">
<div class="img" style="background-image: url();"></div>
<div class="nome"><i>Nenhum evento</i></div>
<div class="data"><i class="fa fa-calendar"> --/--/----</i></div>
<div class="hora"><i class="fa fa-clock-o"> --:-- BR/--:--
PT</i></div>
</div>
<div class="evento">
<div class="img" style="background-image: url();"></div>
<div class="nome"><i>Nenhum evento</i></div>
<div class="data"><i class="fa fa-calendar"> --/--/----</i></div>
<div class="hora"><i class="fa fa-clock-o"> --:-- BR/--:--
PT</i></div>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=738728056720762810&widgetType=HTML&widgetId=HTML12&action=editWidget&sectionId=Eventos" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML12"));" rel="nofollow" target="configHTML12" title="Editar">
<img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
</a>
</span>
</span>
<div class="clear"></div>
</div></div>
</div>
</div>
</div>
<div class="stat-card"><title-stat>Mensagens enviadas</title-stat><i class="fas fa-comments" aria-hidden="true"></i>Os nossos membros postaram um total de {TOTAL_POSTS} mensagens</div>
<div class="stat-card"><title-stat>Militares registrados</title-stat><i class="fas fa-users" aria-hidden="true"></i>Temos {TOTAL_USERS} usuários registrados</div>
<div class="stat-card"><title-stat>Novo Militar</title-stat><i class="fas fa-child" aria-hidden="true"></i>O último usuário registrado atende pelo nome de {NEWEST_USER}</div>
<!-- BEGIN switch_chatbox_activate -->
<div class="block">
<div class="h3">
<a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
</div>
{TOTAL_CHATTERS_ONLINE}: {CHATTERS_LIST}
</div>
<!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_footer -->
{AUTO_DST}
- CSS (só a parte dessas informações):
- Código:
/*Página de informações*/
.conteudo-info-1 {
height: 460px;
margin-bottom: 30px;
background: linear-gradient(to bottom,#63d1ff,#0b6090);
box-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.32), inset 0 4px 10px rgba(0, 0, 0, 0.32);
}
.conteudo {
width: 1020px;
margin: 0 auto;
}
.coluna-3 {
width: 320px;
margin: 0 10px;
float: left;
}
.box-coluna-3 h2 {
font-size: 22px;
color: #FFF;
text-shadow: 0 2px 2px rgba(0,0,0,0.2);
text-align: center;
margin-top: 20px;
margin-bottom: 0;
font-weight: normal;
}
.destaque {
background-color: rgb(255,255,255);
height: 104px;
border-radius: 2px;
margin: 10px;
padding: 8px;
padding-bottom: 10px;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
}
.widget-item-control {
float: right;
height: 20px;
margin-top: -20px;
position: relative;
z-index: 10;
}
.item-control {
display: none;
}
div.clear {
clear: both;
}
.box-coluna-3 .evento {
background-color: #404040;
height: 80px;
border-radius: 2px;
margin: 10px;
margin-bottom: 0;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
overflow: hidden;
position: relative;
color: #FFF;
text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
/*-quartos*/
.quarto {
background-color: rgb(255,255,255);
height: 60px;
border-radius: 2px;
margin: 10px;
padding: 8px;
padding-bottom: 10px;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
}
element.style {
background-image: url(https://i.imgur.com/wDmUabJ.png);
}
.quarto .img {
background-color: rgba(0,0,0,0.1);
width: 60px;
height: 60px;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 2px rgba(0,0,0,0.1);
float: left;
}
.quarto .botao {
color: #FFF;
font-size: 14px;
text-shadow: 0 2px 1px rgba(0,0,0,0.25);
background-color: #404040;
height: 25px;
line-height: 25px;
padding: 0 15px;
border-radius: 20px;
margin-top: 5px;
margin-left: 10px;
float: left;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), inset 0 -25px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
}
/* INFO - evento 1*/
element.style {
background-image: url(https://i.imgur.com/Vrq4SmO.png);
}
.box-coluna-3 .evento .img {
background-color: rgba(0,0,0,0.1);
width: 60px;
height: 60px;
border-radius: 2px;
margin: 8px;
float: left;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 2px rgba(0,0,0,0.1);
}
.box-coluna-3 .evento .nome {
width: 200px;
font-size: 16px;
margin: 8px;
margin-bottom: 3px;
float: left;
}
.box-coluna-3 .evento .data {
width: 200px;
font-size: 14px;
margin: 2px 8px;
float: left;
}
.box-coluna-3 .evento .hora {
width: 200px;
font-size: 14px;
margin: 2px 8px;
float: left;
}
.destaque {
background-color: rgb(255,255,255);
height: 70px;
border-radius: 2px;
margin: 10px;
width: 260px;
padding: 8px;
padding-bottom: 10px;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
}
.destaque .circulo {
background-color: rgba(0,0,0,0.1);
width: 90px;
height: 90px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
float: left;
margin: 10px 5px;
}
element.style {
background-image: url(https://www.habbo.com.br/habbo-imaging/avatarimage?user=robert6966&action=std&direction=2&head_direction=2&img_format=gif&gesture=std&headonly=0&size=l);
}
.destaque .circulo .user {
background-repeat: no-repeat;
background-position: center 0;
width: 90px;
height: 140px;
margin-top: -50px;
border-radius: 0 0 45px 45px;
box-shadow: inset 0 -4px rgba(0,0,0,0.1);
transition: all 0.2s;
}
.destaque .nome {
width: 160px;
font-size: 18px;
color: #666;
margin: 10px;
margin-bottom: 5px;
float: left;
}
.destaque .pq {
width: 160px;
font-size: 14px;
color: #888;
margin: 0 10px;
float: left;
}
Re: Organizar itens dentro do painel
Olá @sucodemaracaju,
Para te ajudar, preciso saber onde se encontra este painel. Acessei o link que está no print mas não me levou para lugar algum.
Chanp
Re: Organizar itens dentro do painel
Olá, chanp
O link que está no print é meu fórum teste
o link que tem o painel é esse: https://www.sistemagoph.com.br/
O link que está no print é meu fórum teste
o link que tem o painel é esse: https://www.sistemagoph.com.br/
Re: Organizar itens dentro do painel
Olá,
Então pelo que eu pude entender, você ainda não criou o painel e quer ajuda para criar. Se este for o caso, basta me dizer onde irá colocar o painel.
Chanp
Então pelo que eu pude entender, você ainda não criou o painel e quer ajuda para criar. Se este for o caso, basta me dizer onde irá colocar o painel.
Chanp
Re: Organizar itens dentro do painel
Não, eu coloquei mas ainda está para aprovação nos templates, tlgd?
só queria ajuda pra organizar, não tô conseguindo...
só queria ajuda pra organizar, não tô conseguindo...
Re: Organizar itens dentro do painel
Olá novamente,
Altere a parte fornecida do seu CSS por esta:
Eu consertei a posição dos elementos e adicionei o efeito :hover. Além disso, como no site original, coloquei o segundo elemento na direita. O resultado esperado é este. Falta alguma coisa?
Chanp
Altere a parte fornecida do seu CSS por esta:
- Código:
/*Página de informações*/
.conteudo-info-1 {
height: 460px;
margin-bottom: 30px;
background: linear-gradient(to bottom,#63d1ff,#0b6090);
box-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.32), inset 0 4px 10px rgba(0, 0, 0, 0.32);
}
.conteudo {
width: 1020px;
margin: 0 auto;
}
.coluna-3 {
width: 320px;
margin: 0 10px;
float: left;
}
.box-coluna-3 h2 {
font-size: 22px;
color: #FFF;
text-shadow: 0 2px 2px rgba(0,0,0,0.2);
text-align: center;
margin-top: 20px;
margin-bottom: 0;
font-weight: normal;
}
.destaque {
background-color: rgb(255,255,255);
height: 104px;
border-radius: 2px;
margin: 10px;
padding: 8px;
padding-bottom: 10px;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
box-sizing: unset;
}
.widget-item-control {
float: right;
height: 20px;
margin-top: -20px;
position: relative;
z-index: 10;
}
.item-control {
display: none;
}
div.clear {
clear: both;
}
.box-coluna-3 .evento {
background-color: #404040;
height: 80px;
border-radius: 2px;
margin: 10px;
margin-bottom: 0;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
overflow: hidden;
position: relative;
color: #FFF;
text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
/*-quartos*/
.quarto {
background-color: rgb(255,255,255);
height: 60px;
border-radius: 2px;
margin: 10px;
padding: 8px;
padding-bottom: 10px;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
}
element.style {
background-image: url(https://i.imgur.com/wDmUabJ.png);
}
.quarto .img {
background-color: rgba(0,0,0,0.1);
width: 60px;
height: 60px;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 2px rgba(0,0,0,0.1);
float: left;
}
.quarto .botao {
color: #FFF;
font-size: 14px;
text-shadow: 0 2px 1px rgba(0,0,0,0.25);
background-color: #404040;
height: 25px;
line-height: 25px;
padding: 0 15px;
border-radius: 20px;
margin-top: 5px;
margin-left: 10px;
float: left;
box-shadow: inset 0 -4px rgba(0,0,0,0.1), inset 0 -25px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
}
/* INFO - evento 1*/
element.style {
background-image: url(https://i.imgur.com/Vrq4SmO.png);
}
.box-coluna-3 .evento .img {
background-color: rgba(0,0,0,0.1);
width: 60px;
height: 60px;
border-radius: 2px;
margin: 8px;
float: left;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 2px rgba(0,0,0,0.1);
}
.box-coluna-3 .evento .nome {
width: 200px;
font-size: 16px;
margin: 8px;
margin-bottom: 3px;
float: left;
}
.box-coluna-3 .evento .data {
width: 200px;
font-size: 14px;
margin: 2px 8px;
float: left;
}
.box-coluna-3 .evento .hora {
width: 200px;
font-size: 14px;
margin: 2px 8px;
float: left;
}
.destaque .circulo {
background-color: rgba(0,0,0,0.1);
width: 90px;
height: 90px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 4px rgba(0,0,0,0.1);
float: left;
margin: 10px 5px;
}
element.style {
background-image: url(https://www.habbo.com.br/habbo-imaging/avatarimage?user=robert6966&action=std&direction=2&head_direction=2&img_format=gif&gesture=std&headonly=0&size=l);
}
.destaque .circulo .user {
background-repeat: no-repeat;
background-position: center 0;
width: 90px;
height: 140px;
margin-top: -50px;
border-radius: 0 0 45px 45px;
box-shadow: inset 0 -4px rgba(0,0,0,0.1);
transition: all 0.2s;
}
.destaque .nome {
width: 160px;
font-size: 18px;
color: #666;
margin: 10px;
margin-bottom: 5px;
float: left;
}
.destaque .pq {
width: 160px;
font-size: 14px;
color: #888;
margin: 0 10px;
float: left;
}
.destaque .circulo .user:hover {
height: 150px;
margin-top: -60px;
}
.destaque .circulo-2 {
float: right;
}
Eu consertei a posição dos elementos e adicionei o efeito :hover. Além disso, como no site original, coloquei o segundo elemento na direita. O resultado esperado é este. Falta alguma coisa?
Chanp
Re: Organizar itens dentro do painel
Ficou show, eu entendo um pouquinho sobre isso mas não tenho a capacidade de criar kkkk
pode fechar!
pode fechar!
Re: Organizar itens dentro do painel
Tópico resolvidoMovido para "Questões resolvidas". |
Tópicos semelhantes
» Organizar painel do usuário
» Perfil com itens
» Retirada de itens
» Traduzir itens do overall
» Remoção de itens
» Perfil com itens
» Retirada de itens
» Traduzir itens do overall
» Remoção de itens
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