Editar Plugin

[fernandosiri]

Olá Pessoal!

Gostaria de pedir a ajuda de vocês para fazer uma pequena alteração no plugin User Directory Shortcode. Esse plugin cria uma tabela com algumas informações dos usuários cadastrados no site, porém eu queria formatá-lo um pouco. Vou colocar uma imagem de como ele é, e como eu gostaria que fosse.

Ele é assim:
http://i1176.photobucket.com/albums/x333/fernandosiri/tcoacutepia.png

Eu quero torná-lo assim:
http://i1176.photobucket.com/albums/x333/fernandosiri/t2.png

Como tem muitos usuários cadastrados a leitura da forma que está fica muito complicada, é tudo muito juntinho.

Se alguém puder me dar uma luz de que alteração eu devo fazer, eu ficarei muito agradecido.

[gilvancn]

Olá Fernando,
A melhor alternativa pra seu problema é mudar o css padrão do tema (referente a table, th e td) para atingir o que você quer, porque se alterar algo no plugin e houver uma atualização do mesmo você irá perder todas as modificações feitas. Mesma questão se aplica ao tema, então é aconselhável que você ative um tema filho para fazer as alterações a seguir:

No style do tema filho adicione esse css:

table, th, td {
	border: 1px solid rgba(0, 0, 0, 0.3);
}
table {
	width: 100%;
	font-size: 14px;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin-bottom: 30px;
	line-height: 1.2857142857;
}
th {
	background: #969696;
	font-weight: 700;
	padding: 8px;
	border-width: 0 1px 1px 0;
	text-align: center;
	text-transform: uppercase;
}
td {
	padding: 8px;
	border-width: 0 1px 1px 0;
	text-align: left;
}
.tr-gray {
	background: #dddddd;
}

Para obter o background de cores alternadas, faça o seguinte:

Supondo que você já tem a chamada do jQuery no header do seu site, coloque esse código no footer do tema filho:

<script type="text/javascript">
	$t = jQuery.noConflict();
		$t(document).ready(function() {
		$t('table.mackerel-table tr:odd').addClass('tr-gray');
	});
</script>

Obs.: Não é recomendado o uso desse plugin porque já está a quase 2 anos sem ser atualizado, porém aparentemente ele está rodando sem problemas no WordPress 4.0.

Espero ter ajudado 🙂

[gilvancn]

Usando o css que descreví acima irá afetar todas as tabelas contidas no seu site, caso tenha mais tabelas nele. Se você não quiser que isso aconteça, é simples, basta você usar no tema filho o css abaixo no lugar do anterior:

table.mackerel-table, .mackerel-table th, .mackerel-table td {
	border: 1px solid rgba(0, 0, 0, 0.3);
}
table.mackerel-table {
	width: 100%;
	font-size: 14px;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin-bottom: 30px;
	line-height: 1.2857142857;
}
.mackerel-table th {
	background: #969696;
	font-weight: 700;
	padding: 8px;
	border-width: 0 1px 1px 0;
	text-align: center;
	text-transform: uppercase;
}
.mackerel-table td {
	padding: 8px;
	border-width: 0 1px 1px 0;
	text-align: left;
}
.tr-gray {
	background: #dddddd;
}

[fernandosiri]

Muito obrigado gilvancn! Funcionou perfeitamente!

[gilvancn]

Que bom que deu certo pra ti. 🙂