Joomla!

Class Suffix Guides

By Muhammad Syafiq 29 January 2008

Acknowledgements & License License This document is released under the Joomla! Electronic Documentation License Acknowledgements I would like to pass on my thanks to Amy Stephen, Chad, Chris Davenport, Shantanubala and all the people that help me. Thanks Muhammad Syafiq

Table of Contents

Introduction........................................................... Example................................................................ Class Suffix?.......................................................... Module Class Suffix............................................. Page Class Suffix............................................... Menu Class Suffix............................................... Thing to be Considered................................................. Conclusion/Summary.....................................................

4 4 5 6 6 7 8 9 10

Introduction Joomla!Version1.5ClassSuffixistheeasiestwaytomodifyJoomla!sstyle.Itisimpossibleforustofind onemoduleandstylingthemoduleinthesamedirectorylikeweusedtodoinsimplehtmlsites.Allthe stylingisdoneinsidethetemplate.cssfilewhichislocatedinsidethetemplatedirectory. Asexample,forWindowsusers,thedirectoryis\templates\rhuk_milkyway\css\template.css,which rhuk_milkwayismytemplatename. Iamusingrhuk_milkwayasmytemplate.Othertemplatesmayhavedifferentsettings. Firstletsseeanexample. 1. Asexample,wearegoingto modifythepollsmodule.

2. Type_pollstyle1insidethe moduleclasssuffix. Togohere,clickModuleManager underExtensionstab.Afterthat clickonpollsmodule.

3. Nowaddthiscodeinside template.cssanywhereyouwant.I addthiscodesattheendofthe lineofthetemplate.cssfileand commentit/*customstyle*/ div.moduletable_pollstyle1 td{ /*content*/ color:#FF0000; fontfamily:Arial, Helvetica,sansserif; textalign:left; fontstyle:italic; } div.moduletable_pollstyle1 h3{ /*title*/ color:#FF0000; textalign:left; fontstyle:italic; }

Addthehighlightedcodeinsidetemplate.css.The fileislocatedinside\templates\rhuk_milkway \css\template.css.

Weaddthesamesuffixthatweusedinsidethe pollsmoduleclasssuffix_pollstyle1tothe div.moduletableclass. Remember:theclasssuffixyouareaddingmust beexactlythesameastheclasssuffixinthe modulemanager.div.moduletable_pollstyle1is notthesameasdiv.moduletablepollstyle1or div.moduletable_pollstyle1. Nowsavethetemplatefileandrefreshyour browser.Itshouldlookliketheimageontheright.

SowhatisJoomla!ClassSuffix? Asyousee,allthedesignisdoneinsidethetemplate.css.SinceJoomla!isacomplexwebapplication,it willbehardforustodostylinginJoomla!.Thatswhyweusethisbecauseitsavesustimetodosome individualstylingratherfinditonyourowninsidethetemplate.cssfileandmodifyit. Yousavealotoftimebyaddingasuffixthere,andmakeanewcodetothetemplate.cssfile. Joomla!ModuleClassSuffix ModuleClassSuffixisusedinstyilingthemodules.Asanexample,wearegoingtodosomestylingon theMainMenumodule. 1. Letseeonemoreexample.Now wearegoingtomodifymain menumodule. 2. Inadminpage,gotoextension tabandclickatmodule manager.Then,findthemain menumodulethere.Clickthe module. 3. Type_style1moduleinthe ModuleClassSuffixbox Thenopenthetemplate.cssinside/templates/rhuk_milkway/cssdirectorywithtexteditorlikenotepad. Find/*modulecontrolelements*/comment.(Youalsocanpasteitattheendofthetemplate.css codes,andcommentit/*customstyle*/) 1. Modifyitbyaddingthesestatements: 2. Nowrefreshyourbrowser.Itshouldlook likethebelowimage. div.module_style1{ fontfamily:Courier; fontsize:13px; fontweight:bold; color:#c393a2; texttransform:capitalize; textalign:left; } div.module_style1h3{ fontfamily:Courier; color:#c393a2; }

Joomla!PageClassSuffix Joomla!PageClassSuffixworkswhenwewanttodosomestylingtothecontent.Inthisexampleweare goingtodosomesimplestylingonJoomla!1.5Overviewheading. same tothe 5. Thenpastethecodeintothe template.cssfile.Wearegoingto modifytheheadingonly. 6. Theresult .contentheadingoverview { background:#CCFF33; fontfamily:"AgencyFB"; } 4. Youshouldseethisbyusing FirefoxWebDeveloperpluginin theJoomla!Overviewpage. 3. TypeoverviewinsidethePage ClassSuffixbox. 1. Toseethecontentbeforethe stylingisapplied,clickonthe 'Joomla!Overview'link. 2. Intheadminpage,clickonthe menutab.SelectMenuManager. ThenclickJoomla!Overview.

The goes contentpaneopenoverview,ifyouwanttomodifythestyleofthewholecontent.

 Joomla!MenuClassSuffix ThelastclasssuffixinJoomla!IsMenuClassSuffix.ThistimewearegoingtodosomestylingontheKey Conceptmenu. Bynowyoushouldbeatleastfamiliarwiththeadminpage.Bygoingtomodulemanagerunder extensionstab,clickonKeyConceptsmodule.TypehorizontalinsideMenuClassSuffixbox. Then,gotoFirefoxandfind outwhatyouwanttodoby usingFirefoxWeb Developerplugin.

Remember,wearenotgoingtochangethemodule.Soignorethe.module_menu. Afterthat,copyandpastethiscodeinsidethetemplate.cssfile. .menuhorizontal.item38 { border:thin#FF0000groove; } Andtheresultis:

Ifyoudo.menuhorizontal.item38insteadof.menuhorizontal.item38,theresultisnothing.So makesureofthespaceinfrontof.item38.Ifyoudo.menuhorizontal,theborderwillchangewrapsthe entirelinkthere. MenuClassSuffixisusefulwhenyoudontwanttochangetheentiremodule.Inthisexample,ifwe use.module_menu(defaultmodulesuffix),thebluewrapwillgone(italsowillaffectthemenumodules thatusethesamesuffix).

 Thingstobeconsidered 1.Now,canyoutellwhatthebigdifferencebetweenthese2codesis? div.module_style1 div.moduletable_pollstyle1td { {/*content*/ fontfamily:Courier; color:#FF0000; fontsize:13px; fontfamily:Arial,Helvetica,sansserif; fontweight:bold; and textalign:left; color:#c393a2; fontstyle:italic; texttransform:capitalize; } textalign:left; } Theformerdoesnthaveatable,butthelatterhasatablebesidethemodule(noticethebold).Youmay askwhyIwrotedifferentclasses.Butsinceitisdifferentwehavetospecifyitcorrectly.Thisisvery crucialthingstoconsiderwhenwegoingtodosomestylingtodifferentmodule.LuckilyMozillaFirefox hasWebDeveloperextensionthatcantelluswhatthemodulesclassis.Wealreadyuseditalotinthe previousexample.

Noticediv.module_menu24(ignorethenumber)there.Thistellsuswhatclassweshouldmodifyinside template.css. 2.Addthesuffixproperly.Rememberifthesuffixisstyle2intemplate.cssfile,youmustexactlyenter likemodulesuffixormoduletablesuffix.Inthiscase,enteritmodulestyle2ormoduletablestyle2. Trimmingorspacingtothesuffixwillmakenochangetotheclasses. 3.Ifyouwanttodoa singlemenustyling,followtheclass informationexactlyfromthe FirefoxWebDeveloperplugin.Asexamplein thepicture,ifyouwantto changetheJoomla!Homelink,type .menu.item11{}andnot .menu.item11{}.

 Conclusion Joomla!ClassSuffixdidanawesomejobinstylingmodules.Otherthanfindingtherequiredmodule itselffromthedirectory,wejustaddedthesuffixinsidetherequiredmodulemanagerandcodedit insidethetemplate.cssfile.ClassSuffixesalsohelpusmodifyspecificmodules,likewhatwedidtothe mainmenumodule.Inconclusion,ClassSuffixessaveustimeinstylingtherequiredmodules,menus andpages. Summary