📣 Seu anúncio aqui? Anuncie no ForoBeta

Widget HTML Personalizado, funciona mas tem um detalhe

  • Autor Autor barcraft
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
B

barcraft

Gamma
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Amig@s,

Configuré un widget en mi sitio web en donde muestro los distintos rankings existentes. Para verlo lo pueden hacer en http://beta.chileallin.com, está al final al costado derecho.

Como podrán ver, cada ranking tiene demasiados espacios entre una fila y otra, a pesar de que puse 0 a todos los valores de border, cellspacing y cellpadding.

Para programar el widget hice lo siguiente:

1.- Modifiqué la plantilla "vbcms_page" y agregué el siguiente script:

Inserir CODE, HTML ou PHP: 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8"> 
		$(function () {
			var tabContainers = $('div.tabs > div');
			tabContainers.hide().filter(':first').show();
			
			$('div.tabs ul.tabNavigation a').click(function () {
				tabContainers.hide();
				tabContainers.filter(this.hash).show();
				$('div.tabs ul.tabNavigation a').removeClass('selected');
				$(this).addClass('selected');
				return false;
			}).filter(':first').click();
		});
	</script>


2.- En la plantilla "additional.css" agregué las nuevas clases:

Inserir CODE, HTML ou PHP: 
		#quilaRanks UL.tabNavigation {
		    list-style: none;
		    margin: 0;
		    padding: 0;
		}
 
		#quilaRanks UL.tabNavigation LI {
		    display: inline;
		}
 
		#quilaRanks UL.tabNavigation LI A {
		    padding: 3px 5px;
		    background-color: #ccc;
		    color: #000;
		    text-decoration: none;
		}
 
		#quilaRanks UL.tabNavigation LI A.selected,
		#quilaRanks UL.tabNavigation LI A:hover {
		    background-color: #333;
		    color: #fff;
		    padding-top: 7px;
		}
		
		#quilaRanks UL.tabNavigation LI A:focus {
			outline: 0;
		}
 
		#quilaRanks div.tabs > div {
			padding: 5px;
			margin-top: 3px;
			border: 5px solid #333;
		}
		
		#quilaRanks div.tabs > div h2 {
			margin-top: 0;
		}
 
		#quilaRanks #tab1 {
		    background-color: #00000000;
		}
 
		#quilaRanks #tab2 {
		    background-color: #00000000;
		}
 
		#quilaRanks #tab3 {
		    background-color: #00000000;
		}

#quilaRanks table{border: none;padding: 0px;spacing: 0px;}

#quilaRanks table tr{border: none;valign: top;}

#quilaRanks table td{border: none;valign: top;}

3.- En el Widget HTML puse el siguiente codigo:

Inserir CODE, HTML ou PHP: 
<div id="quilaRanks">		
	<div class="tabs"> 
		<ul class="tabNavigation"> 
			<li><a href="#tab1">DTD</a></li> 
			<li><a href="#tab2">DREAMS</a></li> 
			<li><a href="#tab3">ENJOY</a></li> 
		</ul> 
	<div id="tab1"> 
		<h2>Drive The Dream</h2> 
			<a href="http://www.chileallin.com/salas/partypoker" target="_blank" title="PartyPoker.com">
				<img src="http://banners.partypartners.com/images/marketing-materials/partypoker/spanish/gif/234x60/SuperSignupBonus/234x60_gif@poker_sp_us.gif" border="0" alt="PartyPoker.com" title="PartyPoker.com" width="194" />
			</a>
			<p>
				<div class="tabla_rankings_chileallin">
					<table border="0" cellpadding="0" cellspacing="0">
						<tr><td><b>Fechas Jugadas</b></td><td>:</td><td><b>2</b></td></tr>
						<tr><td><b>Fechas por Jugar</b></td><td>:</td><td><b>0</b></td></tr>
					</table>
					<table border="0" cellpadding="0" cellspacing="0">
						<tr><td><b>Lugar</b></td><td><b>Nick</b></td><td><b>Puntos</b></td></tr>
						<tr><td>1.-</td><td>Patty_star</td><td>127.42</td></tr>
						<tr><td>2.-</td><td>socitoYPC</td><td>79.30</td></tr>
						<tr><td>3.-</td><td>sweetydani</td><td>79.30</td></tr>
						<tr><td>4.-</td><td>aleboldo</td><td>61.07</td></tr>
						<tr><td>5.-</td><td>b4rcr4ft</td><td>58.16</td></tr>
						<tr><td>6.-</td><td>titocarisma</td><td>56.08</td></tr>
						<tr><td>7.-</td><td>loritaslora</td><td>52.53</td></tr>
						<tr><td>8.-</td><td>MarceloPozas</td><td>50.16</td></tr>
						<tr><td>9.-</td><td>GUSRANA</td><td>49.51</td></tr>
						<tr><td>10.-</td><td>Chilenoxxx</td><td>49.13</td></tr>
					</table>
					<table border="0" cellpadding="0" cellspacing="0" align="center">
						<tr><td>Ultima Actualizacion:<br><b>04 de Julio de 2010</b></td></tr>
						<tr><td><a href="http://www.chileallin.com/archivos/rankings/promo-DDWQ/ranking-20100710.png" target="_blank"><b>Ranking Completo</b><a></td></tr>
					</table>
				</div>
			</p>
        </div> 
        <div id="tab2"> 
 
            <h2>Dreams 2010</h2> 
				<a href="http://www.dreamspremierpoker.com/ranking/" target="_blank" title="Ranking Dreams">
					<img src="http://www.chileallin.com/archivos/casinos/dreams/dreams-logo_ranking.png" border="0" alt="Ranking Dreams" title="Ranking Dreams" width="194" />
				</a>
			<p>
				<table border="0" cellpadding="0" cellspacing="0">
					<tr><td><b>Lugar</b></td><td><b>Nick</b></td><td><b>Puntos</b></td></tr>
					<tr><td>1.-</td><td>Shaun Sheffield</td><td>617</td></tr>
					<tr><td>2.-</td><td>Mauricio Zeman</td><td>569</td></tr>
					<tr><td>3.-</td><td>Jaime Barrios</td><td>539</td></tr>
					<tr><td>4.-</td><td>Daniel Oliva</td><td>532</td></tr>
					<tr><td>5.-</td><td>Danny Manriquez </td><td>512</td></tr>
					<tr><td>6.-</td><td>Cristian Jotar</td><td>506</td></tr>
					<tr><td>7.-</td><td>Maximiliano Saez </td><td>487</td></tr>
					<tr><td>8.-</td><td>Carlos Lama</td><td>473</td></tr>
					<tr><td>9.-</td><td>Claudio Moya </td><td>445</td></tr>
					<tr><td>10.-</td><td>Bruno Fulgeri</td><td>438</td></tr>
				</table>
				<table border="0" cellpadding="0" cellspacing="0" align="center">
					<tr><td>Ultima Actualizacion:<br><b>05 de Julio de 2010</b></td></tr>
					<tr><td><a href="http://www.dreamspremierpoker.com/ranking/" target="_blank"><b>Ranking Completo</b><a></td></tr>
				</table>
			</p>
        </div> 
        <div id="tab3"> 
            <h2>Enjoy 2010</h2> 
				<a href="http://www.enjoypokerseries.cl/descargas/ranking_completo.pdf" target="_blank" title="Ranking Enjoy">
					<img src="http://www.chileallin.com/archivos/casinos/enjoy/enjoy-logo_ranking.png" border="0" alt="Ranking Enjoy" title="Ranking Enjoy" width="194" />
				</a>
			<p>
				<table border="0" cellpadding="0" cellspacing="0">
					<tr><td><b>Lugar</b></td><td><b>Nick</b></td><td><b>Puntos</b></td></tr>
					<tr><td>1.-</td><td>Juan Jose Mantilaro</td><td>3104</td></tr>
					<tr><td>2.-</td><td>Sebastian Ruiz</td><td>2475</td></tr>
					<tr><td>3.-</td><td>Cristian Velasquez</td><td>2242</td></tr>
					<tr><td>4.-</td><td>Amos Ben</td><td>2066</td></tr>
					<tr><td>5.-</td><td>Felipe Morbiducci</td><td>1964</td></tr>
					<tr><td>6.-</td><td>Aurel Bogdan</td><td>1855</td></tr>
					<tr><td>7.-</td><td>Carlos Zuñiga</td><td>1721</td></tr>
					<tr><td>8.-</td><td>Leonel Otazo</td><td>1525</td></tr>
					<tr><td>8.-</td><td>Esteban Vallejos</td><td>1525</td></tr>
					<tr><td>9.-</td><td>Eduardo Hercovich</td><td>1516</td></tr>
					<tr><td>10.-</td><td>Aldo Caprile</td><td>1411</td></tr>
				</table>
				<table border="0" cellpadding="0" cellspacing="0" align="center">
					<tr><td>Ultima Actualizacion:<br><b>06 de Julio de 2010</b></td></tr>
					<tr><td><a href="http://www.enjoypokerseries.cl/descargas/ranking_completo.pdf" target="_blank"><b>Ranking Completo</b><a></td></tr>
				</table>
			</p>
        </div> 
    </div> 
</div>


El problema es que esos espacios grandes en el ranking no los quiero, deseo algo ordenadito y que no ocupe mucho espacio para abajo.

Si lo pruebo en un HTML simple en mi PC se ve bien, pero al ponerlo en el widget hereda alguna clase que cambia todo.

Si alguien pudiera ayudar en este tema se lo agradecería.

De ante mano, muchas gracias!
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
Debe ser por el css de vBulletin. Y si no usas tablas y re acomodas todo eso utilizando divs <div> o listas <ul>? De esa forma creo que te quedaría mejor formateado.
Si no quieres eso, pues intenta añadiendo css directamente en las tablas, algo como style="padding: 0; margin: 0;"
No te aseguro que eso funcione, pero intentalo.

Saludos.
 
Perfecto, ahi me funcionó por fin.

La solucion fue la siguiente:

1.- Cree una clase llamada "tabla_rankings_chileallin" en pla plantilla additional.css:

Inserir CODE, HTML ou PHP: 
.tabla_rankings_chileallin table tr td{
    valign: top;
    border: none;
    margin: 0;
    padding: 2px;
    nowrap;
}


2.- Cada vez que abro una tabla, antepongo:

Inserir CODE, HTML ou PHP: 
<div class="tabla_rankings_chileallin">

Porsupuesto despues la cierro con
Inserir CODE, HTML ou PHP: 
</div>


Muchas gracias por la ayuda Elmer 😉
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

C
Adicionar botão de doação PayPal no WordPress a partir de HTML personalizado
Respostas
1
Visitas
221
BotBeta
BotBeta
G
Widget Estético de Redes Sociais para Blogger
2 3
Respostas
59
Visitas
6K
garlock
G
xdsebaxd
Colocar publicidade em meu site sem utilizar widgets
Respostas
12
Visitas
1K
xdsebaxd
xdsebaxd
Alcarver
Problema com popup em página: afeta o widget do formulário
Respostas
3
Visitas
864
Alcarver
Alcarver
C
Problema com um widget html, para hotmail
Respostas
1
Visitas
1K
Santori
S
Voltar
Topo