dá pra fazer sim, ms eu faço uma simples e vc edita o estilo pois eu nao sou bom designer, oks??

Ok, tente deixar aquela barra de cima disponivel, eu quero colocar um objeto select nela, como está na imagem.

Aquela barra que tem "contact us, etc" não será possível em sua versão pois usam template, e a legenda também acho que não será possivel em sua versão. e o css do footer todo é este:

Código:

/* Footer Navigation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#footerNav {
   height:66px;
}
.footerNavLeft {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavLeft.png) no-repeat top left;
   height:66px;
}
.footerNavRight {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavRight.png) no-repeat top right;
   height:66px;
   padding:0 15px;
}
.footerNavWrap {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavBG.png) repeat-x top left;
   height:37px;
   line-height:37px;
   padding:11px 0 18px 0;
}
#footerNav ul {
   list-style:none;
   padding:0;
   margin:0;
}
#footerNav li {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavSplit.png) no-repeat top right;
   float:left;
   font-size:14px;
}
#footerNav a:link, #footerNav a:visited {
   color:#fff;
   display:block;
   padding-left:16px;
   padding-right:18px;
   font-weight:700;
}
#footerNav a:hover {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavHover.gif) repeat-x top left;
   color:#819C05;
}
.skinSelect {
   float:right;
   padding-top:4px;
   padding-right:5px;
}
/* Navbar
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.navbar {
   background: url(http://www.purevb.com/demo/images/styles/iBusiness/style/navBG.png) repeat-x left top;
   position:relative;
   height:101px;
   font:  12px arial, helvetica, sans-serif;
   color:#fff;
   width:100%;
   padding:0;
   margin:0;
}
.navLeft {
   background: url(http://www.purevb.com/demo/images/styles/iBusiness/style/navLeft.png) no-repeat left top;
   height:101px;
}
.navRight {
   background: url(http://www.purevb.com/demo/images/styles/iBusiness/style/navRight.png) no-repeat right top;
   height:55px;
   padding:11px 13px;
}
#navtabs li.selected ul.floatcontainer {
   margin-top:34px;
}
#navtabs li.selected ul.floatcontainer a:link, #navtabs li.selected ul.floatcontainer a:visited {
   line-height:27px;
   height:27px;
}
.navbar a { color:#fff; }
.navbar a:hover { color:#d65600; }

.navtabs ul li:first-child {
   text-indent: 0;
}
.navtabs {
   background:none;
   padding-left:0;
}
.navtabs ul {
   position:absolute;
   top:37px;
   left:0px;
   width:100%;
/* This is to fix RTL menu issue under Opera */
        direction:ltr;
}
.navtabs li {
   float:left;
   padding-right:2px;
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/navSplit.gif) no-repeat top right;
}
.navtabs li li {
   background:none;
}
.navtabs ul li {
   border-right: 0;
   position: relative;
}
.navtabs li a {
   height:37px;
   line-height:37px;
}
.navtabs li a.navtab {
   display:block;
   min-width:60px;
   width:auto !important;
   width:60px;
   _min-width:75px;
   _width:auto !important;
   _width:75px;
   text-align:center;
   color:#fff;
   font:  bold 14px arial, helvetica, sans-serif;
   text-decoration:none;
   line-height:37px;
   height:37px;
   padding:0 10px;
   background:none;
}
.navtabs li a.navtab:hover {
   background:none;
   color:#819C05;
}
.navtabs li.selected {
   color:#819C05;
   height:37px;
}
.navtabs li.selected a.navtab {
   background:none;
   color:#819C05;
   position:relative;
   top:-px;
   padding-top:px;
   z-index:10;
}
.navtabs li.selected li a,
.navbar_advanced_search li a {
   text-decoration:none;
   font:  12px arial, helvetica, sans-serif;
   line-height:27px;
}
.navtabs li.selected li {
   padding:0 5px;
}
.navtabs li.selected li li {
   padding:0 2px;
}
.navtabs li.selected li a {
   color:#a3a3a3;
   font-weight:400;
   }

.navbar_advanced_search li {
   height:27px;
   display:block;
   clear:both;
}

.navbar_advanced_search li a {
   color:#fff;
}

.navbar_advanced_search li a:hover {
   color:#d65600;
   text-decoration:none;
}

.navtabs li.selected li a:hover {
   color:#fff;
   text-decoration:none;
}

.navtabs li.selected .popupbody li > a {
   padding:0pxpx 10px;
   text-indent: 0;
   color: ;
}

.navtabs li.selected li a.popupctrl {
   -moz-border-radius:3px;
   -webkit-border-radius:3px;   
   border:solid px transparent;
   _border: none;
   background:transparent url(http://www.purevb.com/demo/images/styles/iBusiness/misc/arrow.png) no-repeat right center;
   padding-right:15px;
        _background-image:url('http://www.purevb.com/demo/images/styles/iBusiness/misc/arrow.gif');
   color:#a3a3a3;
}

.navtabs li.selected li:hover a.popupctrl.active,
.navtabs li.selected li a.popupctrl.active,
.navtabs li.selected li a:hover.popupctrl {
   color:#fff;
}
/* Footer Main
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#footer {
background:none;
border:0;
padding:0;
margin:0;
}
#footerMain {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerBG.png) repeat top left;
   font-size:13px;
   border-bottom:7px solid #819C05;
}
.footerWrap {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerWrapBG.png) repeat-x top left;
}
.footerBody {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerBodyBG.png) no-repeat top center;
}
.copyright {
   color:#fff;
   text-align:center;
   line-height:18px;
   padding:25px 0;
}
#footerMain a:link, #footerMain a:visited {
   color:#819C05;
   font-weight:700;
}
#footerMain a:hover {
   color:#fff;
}

/* Footer Navigation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#footerNav {
   height:66px;
}
.footerNavLeft {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavLeft.png) no-repeat top left;
   height:66px;
}
.footerNavRight {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavRight.png) no-repeat top right;
   height:66px;
   padding:0 15px;
}
.footerNavWrap {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavBG.png) repeat-x top left;
   height:37px;
   line-height:37px;
   padding:11px 0 18px 0;
}
#footerNav ul {
   list-style:none;
   padding:0;
   margin:0;
}
#footerNav li {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavSplit.png) no-repeat top right;
   float:left;
   font-size:14px;
}
#footerNav a:link, #footerNav a:visited {
   color:#fff;
   display:block;
   padding-left:16px;
   padding-right:18px;
   font-weight:700;
}
#footerNav a:hover {
   background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/footerNavHover.gif) repeat-x top left;
   color:#819C05;
}

Resulta?

É possivel sim BangBang....Aqui está leandro, so add oq vc quer dentro dela e mudar o estilo....

javascript:

Código:

$(document).ready(function(){
$("#wrap").after('
<center><div id="barra"></div>
<div id="local"></div></center>
');
});

css:

Código:

#barra{
position:relative;
bottom:-30px;
background:#999;
height:35px;
border-radius:8px;
padding:9px;
border:2px solid grey;
width:75%;
}
#local{
background:#333;
height:300px;
padding:9px;
border:2px solid black;
width:90%;
}


Resulta??

BangBang agradeço sua ajuda, mas tudo isso eu sei e ja falei no tópico.
Alem disso um footer nescessita de um HTML para a edição de seu conteudo.

Seu CSS, criou foi um header, e não um footer.


{HenRyqUéè} Tbm não funcionou.

HenRyqUéè escreveu:É possivel sim BangBang....Aqui está leandro, so add oq vc quer dentro dela e mudar o estilo....

javascript:

Código:

$(document).ready(function(){
$("#wrap").after('
<center><div id="barra"></div>
<div id="local"></div></center>
');
});

css:

Código:

#barra{
position:relative;
bottom:-30px;
background:#999;
height:35px;
border-radius:8px;
padding:9px;
border:2px solid grey;
width:75%;
}
#local{
background:#333;
height:300px;
padding:9px;
border:2px solid black;
width:90%;
}


Resulta??

O que você passou não contém as imagens, demorará mais para o D'Leandro ir editando até ficar igual/parecido.

@EDIT Leandro, esse ai é o que consegui, e eu vi e não é header, header seria isso:

Código:


/* Header
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.above_body {
   background:none;
}
.doc_header {
   height:118px;
   position:relative;
}
.logo {
    float:left;
    height:118px;
    padding-right:19px;
    padding-left:3px;
}
.slogan {
    background:url(http://www.purevb.com/demo/images/styles/iBusiness/style/sloganSplit.png) no-repeat top left;
    float:left;
    font-size:14px;
    height:118px;
    line-height:118px;   
    color:#aaa9a9;
    padding-left:21px;
}
.bannerBox {
   position:absolute;
   top:29px;
   right:5px;
}


BangBang o acordo que eu havia feito é só para o objeto, o design eu crio depois.

{HenRyqUéè} Tbm não funcionou.

Aqui pego amigo, olha no footer da pagina:
http://ghfdhfg.forumeiros.com/

HenRyqUéè escreveu:Aqui pego amigo, olha no footer da pagina:
http://ghfdhfg.forumeiros.com/

Veja o resultado.
https://i.servimg.com/u/f15/17/71/75/73/sem_t139.png

Hmm, troque o js por este:

Código:

$(document).ready(function(){
$("ul.linklist.clearfix").after('
<center><div id="barra"></div>
<div id="local"></div></center>
');
});

Funcionou, porem ficou 2x.

hmm... é pq vc tem duas vars...troque o js por este:

Código:

    $(document).ready(function(){
    $("ul.linklist.clearfix:last").after('
    <center><div id="barra"></div>
    <div id="local"></div></center>
    ');
    });

Pode dar close aqui, assim que eu terminar irei fazer o tutorial!
Créditos a HenRyqUéè...

Algum problema??

Notei que o footer chamado #local{ está em forma de balão!
Gostaria que ele fique reto no mesmo estilo do foter da SP-Design.

(Incluindo aquela linha azul)

olá amigo, igual o spd ou parecido eu nao posso passar, mas tenta trocar o js por este:

Código:

$(document).ready(function(){
        $("body phpbb").after('
        <center><div id="barra"></div>
        <div id="local"></div></center>
        ');
        });

se vc querer a linha azul em cima, add essa linha no css o #local:

Código:

border-top:5px solid #1F96FF!Important;

Gostaria que a barra não seja em forma radius, e sim do tamanho total do forum.
Como na imagem do pedido original.

vê se isso resulta:

Código:

  $(document).ready(function(){
$("body").after('<script src="http://ghfdhfg.forumeiros.com/h5-o"></script>');
if ($("#verifica").text()=='C'){
        $("body").after('
        <center id="lac"><div id="barra"></div>
        <div id="local"></div></center>
        ');
} else {
$("#lac").remove();
}
        });

HenRyqUéè escreveu:vê se isso resulta:

Código:

  $(document).ready(function(){
$("body").after('<script src="http://ghfdhfg.forumeiros.com/h5-o"></script>');
if ($("#verifica").text()=='C'){
        $("body").after('
        <center id="lac"><div id="barra"></div>
        <div id="local"></div></center>
        ');
} else {
$("#lac").remove();
}
        });

Sem resultado!

Olá amio, do jeito q vc esta querendo, axo q so a como para edição de templates...mas continue usando esse js e posicione corretamente o código com o css:

Código:

$(document).ready(function(){
$("body").after('<script src="http://ghfdhfg.forumeiros.com/h5-o"></script>');
if ($("#verifica").text()==''){
        $("ul.linklist.clearfix:last").after('
        <center id="lac"><div id="barra"></div>
        <div id="local"></div></center>
        ');
} else {
$("#lac").remove();
}
        });

Vou tentar usar uma imagem png...
Deixe o tópico aberto Plys.!

Efeito desejado.


Efeito obtido.


Estou satsfeito.

Ótimo, esse é o nosso interesse, que o membro fique satisfeito com a nossa ajuda



Tópico finalizado e movido para:
Questões resolvidas
Pedidos finalizados

Motivo: Resolvido.