Post on 27-Jul-2020
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