InícioLogo CSS do meu fórum
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
Logo CSS do meu fórum
por VagnerX 17.02.12 11:44
Qual é minha questão:
Um amigo meu me passou um codigo CSS que ele usa no logo do site dele... gostaria d saber se á como usar esse codigo deixando ele como logo do meu forum.
Link do logo:http://tympanus.net/Tutorials/CollapsingSiteNavigation/
Codigo HTML:
CODIGO CSS:
Java Script
Medidas que eu tomei para corrigir o problema:
Nenhuma
Links e imagens do meu problema:
Não tenho
Endereço do meu fórum:
http://www.narutobrazil.com
Versão do meu fórum:
PHPBB2
Um amigo meu me passou um codigo CSS que ele usa no logo do site dele... gostaria d saber se á como usar esse codigo deixando ele como logo do meu forum.
Link do logo:http://tympanus.net/Tutorials/CollapsingSiteNavigation/
Codigo HTML:
- Spoiler:
- <div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:5;">
<img src="images/1.jpg" alt="image" />
<span class="cc_title">Collection</span><ul></div>
CODIGO CSS:
- Spoiler:
.cc_menu{
width:700px; /*140px * 5*/
height:600px;
position:relative;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.cc_item{
text-align:center;
width:140px;
height:600px;
float:left;
border-bottom:1px solid #000;
background:#444 url(../images/bg.png) repeat top left;
position:relative;
-moz-box-shadow:3px -3px 10px #000;
-webkit-box-shadow:3px -3px 10px #000;
box-shadow:3px -3px 10px #000;
}
span.cc_title{
color:#fff;
font-size:16px;
top:200px;
left:5px;
position:absolute;
padding:3px 0px;
background:#111;
width:130px;
display:block;
z-index:11;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.cc_item img{
position:absolute;
width:140px;
height:600px;
top:-600px;
left:0px;
}
.cc_content{
width:600px;
height:600px;
border-bottom:1px solid #000;
position:absolute;
left:-700px;
background:#444 url(../images/bg.png) repeat top left;
overflow:hidden;
-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;
}
.cc_content p{
background:#000;
padding:20px;
opacity:0.7;
}
span.cc_back{
position:absolute;
bottom:10px;
right:10px;
cursor:pointer;
color:#ddd;
}
Java Script
- Spoiler:
//all the menu items
var $items = $('#cc_menu .cc_item');
//number of menu items
var cnt_items = $items.length;
//if menu is expanded then folded is true
var folded = false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave)
.find('.cc_submenu > ul > li')
.bind('click',function(){
var $li_e = $(this);
//if the menu is already folded,
//just replace the content
if(folded){
hideContent();
showContent($li_e.attr('class'));
}
else //fold and show the content
fold($li_e);
});
function m_enter(){
var $this = $(this);
clearTimeout(menu_time);
menu_time = setTimeout(function(){
//img
$this.find('img').stop().animate({'top':'0px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
},200);
}
function m_leave(){
var $this = $(this);
clearTimeout(menu_time);
//img
$this.find('img').stop().animate({'top':'-600px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
}
$('#cc_back').bind('click',unfold);
function fold($li_e){
var $item = $li_e.closest('.cc_item');
var d = 100;
var step = 0;
$items.unbind('mouseenter mouseleave');
$items.not($item).each(function(){
var $item = $(this);
$item.stop().animate({
'marginLeft':'-140px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e.attr('class'));
}
});
});
}
function unfold(){
$('#cc_content').stop().animate({'left':'-700px'},600,function(){
var d = 100;
var step = 0;
$items.each(function(){
var $item = $(this);
$item.find('img')
.stop()
.animate({'top':'-600px'},200)
.andSelf()
.find('.cc_submenu > ul')
.stop()
.animate({'height':'0px'},200);
$item.stop().animate({
'marginLeft':'0px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = false;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave);
hideContent();
}
});
});
});
}
function hideContent(){
$('#cc_content').find('div').hide();
}
Medidas que eu tomei para corrigir o problema:
Nenhuma
Links e imagens do meu problema:
Não tenho
Endereço do meu fórum:
http://www.narutobrazil.com
Versão do meu fórum:
PHPBB2
VagnerX- **
- Membro desde : 02/11/2008
Mensagens : 65
Pontos : 109
Re: Logo CSS do meu fórum
por Dury 18.02.12 21:35
Boa noite Vagener!
Infelizmente não é possível. O que pode ser possível é aplicação do código CSS para o logo, mas o Javascript não será.
Poderá usar a classe:
Até mais!
Infelizmente não é possível. O que pode ser possível é aplicação do código CSS para o logo, mas o Javascript não será.
Poderá usar a classe:
Leia o conteúdo do tutorial: https://ajuda.forumeiros.com/t16183-header {
Propriedades
}
Até mais!
Dury- Membro Entusiasta
- Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829 -
Tópicos semelhantes» [Logo] Logo mais criativo para meu fórum
» [Logo] Logo para fórum de Clan
» [Logos] Dragão Diário: Blog, Site e Fórum
» [Logo] Hi-Tech Brasil verde
» [Logo] Logo para Forum de Pesca
» [Logo] Logo para fórum de Clan
» [Logos] Dragão Diário: Blog, Site e Fórum
» [Logo] Hi-Tech Brasil verde
» [Logo] Logo para Forum de Pesca
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
Facebook
Twitter
Youtube
