Produção de sites com Joomla! 2.5

Trabalhando com templates

Paulo César CastroEscola de Comunicação - UFRJ

Sumário

Mudando o template• Instalandooutrostemplates 6• Visualizarposiçõesnostemplates 8• Customizandoumtemplate 9• Alterandooutroselementosdolayout 10• InspecionandoocódigodaspáginascomFirebug 12

4 5Paulo César Castro - ECO/UFRJ Paulo César Castro - ECO/UFRJ

Mudando o template

SemprequeoJoomla!éinstalado,umconjuntoderecursoséautoma-ticamentedisponibilizadoparaosadministradoresdosite.Entreelesestáotemplate,quedefineaaparênciadosite.SenoPASSO6dainstalaçãodoJooma!,obotãoINSTALAR EXEMPLO DE CONTEÚDO éselecionado,olayoutpadrãodositejáaparecerácomconteúdosdeexemplo.

Otemplatedeterminaumasériedeaspectosrelacionadoàpartevi-sualdosite,comofontes,coresetamanhosdosdiferentestiposdetextos(nosartigos,nostítulos,noslinksetc.),mastambémaposiçãodosvárioselementosqueumsitepodeter,comomenus,caixadebusca,logomarca,banners,formuláriodeloginetc.)etambémaquantidadedeposiçõeseonúmerodecolunasparaadisposiçãodesteselementos.

NahomepagedotemplatepadrãodoJoomla!2.5,porexemplo,sãoexibidas4colunas:adaesquerda,paraosmenuseparaoformuláriodelogin;emais3colunasparaoconteúdodosartigos(títuloseseustextosdechamada).Entreasposiçõesvisíveisparadiferenteselementos,alémdoscitados,háaindaumaposiçãoparaacaixadebusca,outraparaorecursodeaumentarediminuirotamanhodotexto(Fontsize),umaparaalogo-marca(afaixaazulhorizontalcomonomeJoomla!)etc.

MasmesmocomainstalaçãopadrãodoJoomla!,épossívelmudarotemplateoriginal.Paraisso,cliqueemEXTENSÕES > GERENCIADOR DE TEMAS.

Noquadroacima,comaabaEstilosselecionada,sãolistadostrêstem-plates(Site)eopadrão(Beez2 - Default)estámarcadocomumaestrelalaranja( )nacolunaPadrão.Háaindadoistemplatesparaaáreaadmi-nistrativa(Administrator),sendopadrãooBluestork - Default.

SemarcadootemplateBeez5 - DefaulteselecionadoobotãoTOR-

6 7Paulo César Castro - ECO/UFRJ Paulo César Castro - ECO/UFRJ

NAR PADRÃO( ),olayoutdositeserámodificado.

•Instalando outros templates

Masosadministradoresnãoprecisamficar limitadosatrêsmodelosdelayoutparaosseussites.Existemváriossitesquedisponibilizam,gra-tuitamenteoupagos,templatesquepodemserinstaladosnoJoomla!Umaopçãodetemplatesgratuitos,porexemplo,podeseroSiteGround(site-ground.com).

LocalizenoSiteGroundotemplatedesejado,queseajusteaotemadoseusite(cuidandoparaquesejanaversão2.5),efaçaodownloaddoarqui-vocompactado1.Depois,volteàáreaadministrativadoJoomla!eselecione

1 Logoqueotemplateéselecionado,oSiteGroundrequerumrápidocadastro.Um

EXTENSÕES > GERENCIADOR DE EXTENSÕES.NaopçãoENVIAR PACOTE DE ARQUIVOS,cliquenobotãoEscolher arquivoelocalizeoarquivoZIPdotemplate.Emseguida,cliquenobotãoUpload & Instalar.Setudotiverdadocerto,amensagemInstalação de tema concluída com sucessoaparecerá.

Paraqueotemplatepossaserexibidocomolayoutdosite,énecessáriovoltaraEXTENSÕES > GERENCIADOR DE TEMAS.Localizeonovotemplate,selecioneacaixaao ladodonomedeleecliqueemTORNAR PADRÃO( ).

Nocantosuperiordireitodaáreaadministrativa,cliqueemVISUALI-ZAR SITE.

•OBSERVAÇÃOAntesqueumtemplatenovosejaescolhido,éprecisocertificar-sedaspo-siçõesqueeleoferece emrelaçãoao template antigo.Se comparadososdois templates padrãodo Joomla! (Beez2 - Default eBeez5 - Default)

linkparadownloaddoarquivoseráenviadoparaoe-maildousuário.

8 9Paulo César Castro - ECO/UFRJ Paulo César Castro - ECO/UFRJ

comolayoutdaterceiraimagem,napáginaanterior,nota-sequeomenusuperior,acaixadebuscaeorecursoparaaumentarotexto(Fontsize)somem.Significa,então,queonovotemplatenãotemPosiçõesnapartesuperiorparaesteselementos.

•Visualizar posições nos templates

Para visualizar as posições dos templates, selecioneEXTENSÕES > GERENCIADOR DE TEMAS.Depois,cliquenobotãoOPÇÕES( ).Natelaqueaparece,selecioneaabaTemase,emPré-visualizaçãoPosiçõesdeMódulos,escolhaaopçãoAtivado.

CliquenobotãoSalvar & Fechar.Voltandoàteladostemplates,cliquenaabaTemas.Comarelaçãode

temasdisponíveis,cliquenaopçãoPré-visualizarparaverasposiçõesdecadatemplate.

•OBSERVAÇÃOEssasposiçõesdevemserinformadassemprequeummóduloouum

pluginforusadonosite(verMódulosePlugins).

•Customizando um template

UmtemplatepodeserproduzidodozeroporquemconheceafundoPHP,CSS(CascadeStyleSheet)eJavaScript.Masparaquemnãosabeusaressaslinguagens,épossívelrealizaralgumasmudançasnocódigoCSS,principalresponsávelpelolayoutdosite,paracustomizarcertoselementosdeumtemplate.

Comecemospelalogomarca.Emalgunstemplates,amudançadaima-gemdalogomarcapodeserfeitadiretamentepelaáreaadministrativa.ÉocasodostemplatesBeez2eBeez5.SelecioneEXTENSÕES > GEREN-CIADOR DE TEMASedepoisnaabaEstilos.CliquesobreonomedotemplateBeez2 - DefaultnacolunaEstilo.Umanovatelaéabertae,doladodireito,apareceaabaOpções Avançadas.

Éimportantequeasubstituiçãodoarquivodaimagem original (joomla_black.gif), localizadanesteexemplonapastaimages (dentrodewww),sejasubstituídaporoutraimagemcomasmesmasdimensões(larguraxaltura)equeestasejacolocadanamesmapasta.

10 11Paulo César Castro - ECO/UFRJ Paulo César Castro - ECO/UFRJ

Aoabrirapastaimages,épossívelverqueaimagemtem225pixelsde largurapor50pixelsdealtura.Comisso,anova logomarcadeveserproduzidaemumprogramacomooPhotoshop,porexemplo,comasmesmasmedidas.Eseofun-dofortransparentenaimagemoriginal,deverásertambémnanova.

Feitaasubstituição,vejaadiferençaentreasduaslogomarcas.

Quandootemplatenãotemaopçãodemudançadalogomarcapelaáreaadministrativa,umaopçãoésubstituiroarquivodiretamentenapastaondeeleseencontra.Nestecaso,éimportante,alémdemanterascarac-terísticasjáapontadasacima,conservarnoarquivonovoomesmonomedoarquivoantigo(inclusiveaextensão).Portanto,seoarquivoantigosechamalogo.jpg,queonovo,quandocriado,mantenhaomesmonome.

•Alterando outros elementos do layout

Masasmudançasnolayoutdeumsitevãobemalémdalogomarca.Ousuáriopodenãogostar,porexemplo,dafonte(corpo,tamanho,entreli-nha...)dostítulosedostextos,dacordefundodaspáginasetc.

Agrandemaioriadoselementosquecompõemolayoutdeumtempla-teemJoomla!sãodefinidoscomCSSeessesarquivosestão,geralmente,armazenadosnapastacss,encontradapeloseguintecaminho:

c:\wamp\www\templates\nome-do-template\css

Aediçãodessesarquivospodeserfeitapelaáreaadministrativa.Cli-queemEXTENSÕES > GERENCIADOR DE TEMAS > aba Temas.Sãoexibidasminiaturasdashomespagesdostemplates.Cliqueentãononomedo templatequepretendeeditar (porexemplo,Beez_20 Detalhes e Ar-quivos).

NaabaFolhas de Estilo,vejaarelaçãodearquivoscss,cujaquanti-dadedependedo template.Cliquenoarquivodesejadoparaeditá-lonaprópriaáreaadministrativadoJoomla!

OcódigoCSSentãoéexibidoe,apósasmudançasnocódigo,épreci-

12 13Paulo César Castro - ECO/UFRJ Paulo César Castro - ECO/UFRJ

soclicarnosbotõesSALVARouSALVAR & FECHARparavisualizaroresultado.

•Inspecionando o código das páginas com Firebug

UmadificuldadeparausuárioscompoucoconhecimentodecódigosésaberqualtagdoCSSdeveseralteradaparacausaramudançaesperadanoelementodo layout.Umadicaparafacilitaresseprocessopodeserainstalaçãonosnavegadoresdealgumcomplementoquepossainspecionarocódigodapáginaqueestásendoexibida.UmadasopçõeséoFirebug,que,apósinstalado,dispõenonavegadorumbotãocujaimageméumabarata.

Comapáginaexibindooelementoquedesejamodificar,cliquenoíco-nedoFirebug.Ateladonavegador(aquiestásendousadooFirefox)serádivididaemduasáreas.Nadebaixo,serãoexibidososcódigosdapágina.

Cliquenobotãodeinspeção(oícone ouapalavraInspect)epouseomousesobreoelementodoqualdesejaverocódigo.Naimagemabaixo,foiselecionadooelementotexto,sendocolocadoomousesobreumdosparágrafos.

Najanelaabaixo,àdireita,éapresentadoocódigoCSS,eastagsqueformatamotextoestãoemdiferentesarquivos.Atagquedefinefamíliadafonteestánoarquivopersonal.css,tendocomofonteprincipalaArial,atravésdoseguintecódigo:

body{ background: #e0dedf url(../images/personal/bg2.png) repeat-x; color: #333; font-family: arial, helvetica, sans-serif;}

Paraquea fontedo textomudeparaTimes New Roman, éprecisoacrescentarestainformaçãoàtagrespectiva,queficará:

font-family: times new roman, arial, helvetica, sans-serif;

Feitaamudança,éprecisoclicarnobotãoSALVAR.Emseguida,cli-queemVisualizar siteparaversearealmenteafontemudou.Seapáginajáestiverabertanonavegador,bastaatualizá-la(noWindows,cliqueemF5).Eiscomoficaotexto,jácomanovafonte,Times New Roman.

14 15Paulo César Castro - ECO/UFRJ Paulo César Castro - ECO/UFRJ

Paramudaracordotexto,seránecessário,nomesmoarquivo,editaraclasse#all.

#all{ color: #333333; border:solid 0px ; padding-top:0px; background:#fff}

Para mudar a cor representada pelo código hexadecimal #333333(preto)paraovermelho,éprecisomudarovalorpara#FF0000.

Otextodosartigosestáalinhadoàesquerda(left).Parajustificarotex-to(justify),vê-sequeéprecisareditaraclasse#all,masdessavezpresentenoarquivoposition.css.

#all{ margin: 0 auto; max-width:1050px; padding: 0px; text-align: left;}

Comamudança,apropriedadetext-align ficaassim:

text-align: justify;

Eis, ao lado, o arti-gocomasmudançasnotexto.

Fonte: Times New Ro-manCor:vermelhoAlinhamento: justifica-do.

LocalizadasaspropriedadesdoCSSqueafetamoselementosdolayoutquesepretendealterar,umaoutraformadeeditá-loséusarumsoftwarededesenvolvimentoparaweb,comoéocasodoDreamweaver.Nele,aaediçãodoscódigosdosite, tantodoCSSquantodeoutras linguagens(PHP,JavaScriptetc.),ficamaisfácil.

NocasodosarquivosCSS,queafetamolayoutdaspáginas,bastaabri--losnoDreamweaver,localizarapropriedadedesejada,fazerasalterações,salvaroarquivoevisualizarapáginanonavageadorparaverasalterações.

Eisoarquivopersonal.cssabertonoDreamweaver.

16 Paulo César Castro - ECO/UFRJ