Botão para esconder widgets - acabamento

Qual é minha questão:
No fórum da nossa aliança, já conseguí colocar o botão para mostrar/ocultar os widgets do lado direito.

Houve um problema anterior onde os widgets abríam além do que deveríam abrir, mas resolví isto colocando no código o valor: 'margin-right','262px'

Agora, o que falta são 2 coisas.

A primeira, quando apertamos o botão para mostrar/ocultar o widget, o deslizamento dos widgets é feita da seguinte forma: pequeno deslizamento vertical e depois deslizamento horizontal.

O que preciso é que o deslizamento seja somente horizontal, assim como acontece com o botão daqui do FdF.

A segunda coisa, no topo e no fim da coluna de widgets, há 2 pequenos retãnguos vazios. Gostaria de retirá-los.

Os códigos usados para montar os widgets de topo e fim são:

Topo

Código:

<div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: #f5ebf7 url(http://i47.servimg.com/u/f47/16/97/93/56/vg54yu10.png) no-repeat 0 -13px;" onClick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget-http://resilientorder.alianceforum.com')=='0') { my_setcookie('forum-widget-http://resilientorder.alianceforum.com','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); jQuery('#content-container div#content').css('margin-right','262px');} else { my_setcookie('forum-widget-http://resilientorder.alianceforum.com','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }"></div>

Fim

Código:

<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget-http://resilientorder.alianceforum.com')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>

Obs.: Quando fiz os widgets, marquei a opção "Não" no item "Utilizar um table type" e coloquei o título do widget como

Código:

<no>

Medidas que eu tomei para corrigir o problema:
Lí o tutorial do botão para mostrar/ocultar widgets e também lí tópicos de outros membros com problemas parecidos.

Links e imagens do meu problema:


Endereço do meu fórum:
http://resilientorder.alianceforum.com/

Versão do meu fórum:
INVISION

Olá Julian de L. Lopes!

O efeito resultou em seu fórum, só que como seu fórum é Invision, suponho que o resulto do código é esse mesmo, ou seja, sem o efeito fad-in e fad-out como aqui.

Atenciosamente,
Shek

Hum, entendo...

E não há algum script ou alteração no CSS que apague estes retângulos vazios dos widgets?

Olá, simples, quando for colocar o primeiro codigo que você passou neste topico em um widget, procure por "Utilizar um table-type?" Marque não e salve.

Faça estes mesmos passos com o ultimo widget (que é o ultimo codigo).

Melhores cumprimentos.

(...) procure por "Utilizar um table-type?" Marque não e salve.

Obs.: Quando fiz os widgets, marquei a opção "Não" no item "Utilizar um table type"

O Table Type tira o título e a barra de título, só que no invision, os widgets continuam tendo toda a vorda de controle. Quando não há nada neles além de códigos, fica um retângulo vazio no lugar (veja no meu fórum).

Há algum script ou código do CSS ou algum outro lugar que mude isto?
Acho que deve haver alguma alteração no CSS que permita isto, deixando todos os widgets sem bordas...

Olá, adicione este codigo em seu CSS

.module .box-content {
background-color: transparent !important;
border: none !important;
}

Melhores cumprimentos.

Ele mudou a cor do background para uma mais escurecida, mas só isto.

Talvez o CSS não dê importância a este código e carregue o código da base dele ou talvez este código não funcione no Invision.

Olá, substitua-o por este

.module {
background-color: transparent !important;
border: none !important;
}

Melhores cumprimentos.

Melhorou bastante.

Os widgets ficaram sem bordas. Só ficou a cor do fundo deles 9que é um cinza clarinho).

Se você puder finalizar fazendo um código combinado que além de retirar as bordas também mude a cor do background dos widgets para "Branco", eles vão desaparecer... e esteticamente ficará bem bonito.

Olá, poderia especificar mais como deseja o codigo? Mas, peço logo que substitua-o por este

.module .box-content {
background-color: transparent !important;
border: none !important;
}
.module {
background-color: transparent !important;
border: none !important;
}

Melhores cumprimentos.

Está perfeito.

Muito Obrigado pela ajuda e paciência e Boa Noite.