Para quem quiser colocar ícones no titulo de cada widget da sidebar (ou outra coisa que consigam imaginar), aqui vai uma dica para envolver cada widget numa <div> com um id diferente, fornecendo assim uma âncora para o especificar as regras de CSS.

 

Ora para aplicar esta dica, primeira deve-se procurar no S2 uma linha semelhante a esta, e que se encontrará dentro da função Page::print:

println "</head><body>\n";

Esta é a zona do S2 em que é construido o <head> do HTML do template, por isso vamos adicionar aqui o seguinte código:

println"""<script type="text/javascript\">

String.prototype.white_spaces = function() {

var meses=new Array(); 

meses=['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']

trimmed=this.replace(/ /g,'');

trimmed=trimmed.replace(/\./g,'');

for (a=0;a<11;a++){

trimmed_mes=trimmed.match(meses[a]);

if (trimmed_mes=trimmed.match(meses[a])){

trimmed="calend";

}

}

return (trimmed);

}

</script>""";

Este código, resumidamente, utiliza uma propriedade dos objectos de todos javascript chamada prototype que permite estender qualquer objectos acrescentando-lhe novos métodos. Em javascript todas as string são objectos do tipo String, que neste caso está a ser estendida para passar a ter um método chamado white_spaces() que remove todos os espaços brancos de uma string. 

Este local, na função Page::print é também um bom sitio para colocar o código da Dica deixada no post http://tubodeensaio.blogs.ua.sapo.pt/29113.html, ou seja println"""<script>jQuery(document).ready( function() { setTimeout( function(){ jQuery('body').css( 'margin-top', 0 ) }, 500 ); });</script>"""; que o que faz é esperar pelo carregamento de todos os recursos da página (jQuery(document.ready)) e depois espera meio segundo (setTimeout( ..... , 500 ) ) para colocar o margin-top do body a 0.

 

Depois de terem estendido o objecto de String na função Page::print devem localizar no S2 a função print_generic_widget e substitui-la pelo código que está em baixo:

function print_generic_widget (string title, string content) {

if ($content->length() > 0) {

if ($title->length() > 0) {

println """<script type="text/javascript">

var title='$title';

document.write('<div id="'+title.white_spaces()+'">');

</script>

 

<div class="title"><div class="pref"></div>$*label_label_prefix""" + """$title</div>

<div class="widgetBg">""";

}

println $content;

println """</div></div> """;

}

}

Este bloco de código modifica a função original, fazendo com que seja imprimido no HTML um pouco de código Javascript que vai criar uma <div> com um id que corresponde ao título da widget sem espaços. Por exemplo, para a widget "Sobre mim" vai ser criada uma <div id="sobremim">.

Para aplicarem CSS especifico à widget Sobre mim apenas terão que utilizar o selector #sobremim.

 

Não tenho a certeza se esta dica se aplica a todos os templates, mas funciona com certeza numa boa parte deles e pode ser vista em funcionamento no template Sapo do Campus.

 

Espero que seja útil e que façam bom uso dela!

 

publicado por jorge-braz às 21:54