http://www.shape5.com

VertexFrameworkhttp://www.
shape5.
comVertexFrameworkGuidehttp://www.
shape5.
comJoomlaVertexhttp://www.
shape5.
comhttp://www.
shape5.
comTheS5VertexFrameworkisasetoffunctionalitythatcreatesthecorelogicandstructureofatemplate.
ThepurposeoftheS5Vertexframeworkistounifythelayouts,designs,andfunctionsthatShape5hasbuiltovertheyearstocreateoneofthemostflexible,robustandpowerfultemplateblueprintsavailable!
TheS5VertexFrameworkisusedinalltemplatesreleasedafterJune2011.
StartbuildingyournewsitesonVertexToday!
Copyright2012Shape5.
comRevisionHistoryVertex2.
0–6/15/2012InitialReleaseforVertex1.
0–5/15/2011TableofContents:1.
Preamble12.
VertexFrameworkRequirements.
22.
1ServerRequirements2.
2BrowserCompatibility2.
3Installation2.
4Download3.
TemplateSpecific.
44.
Layout–Fixed,Fluid,ResponsiveandMobile54.
1Overview-Fixed,Fluid4.
2ResponsiveIntroduction4.
3HowResponsiveWorksinVertex4.
4ColumnSizes,SmallTablets,andMobile4.
5IE7andResponsive4.
6ResponsiveHowTo's5.
Menu125.
1Overview5.
2InstallingthePlugin5.
3EnablingtheMootoolsUpgradePlugin5.
4WheretoConfigureMenuItems5.
5SplittingaMenuintoMultipleColumns5.
6PublishingaModuletotheMenu5.
7GroupingChildrenUnderTheirParent5.
8SettinguptheSubText5.
9AddingaMenuIcon5.
10ConfiguringEffects,MenuSelection,DelaysandOrientation5.
11MenuFlexibility6.
RowSizes21http://www.
shape5.
com6.
1BriefOverview6.
2ChangingModuleSizes7.
General238.
Javascripts248.
1Multibox8.
2LazyLoad8.
3Tooltips8.
4InfoSlide9.
FixedTabs2810.
DropDown2811.
AdvancedUsers2911.
1HowToAddaNewModulePositioninVertex11.
2HowToAddNewAdminOptions11.
3WherearealltheJoomlafunctionsdefined12.
FAQ321.
PreambleThecontentofthisdocumentisrelatedtotheShape5Vertextemplateframework.
VertexFrameworkislicensedunderGNU/GPLAllimages,CSS,php,andJavascriptareShape52012TheSoftware'VertexFramework'isintendedforuseinJoomla!
(1.
6+)(Joomla!
isfreeSoftware,licensedunderGNU/GPL;Joomla!
isavailablefromwww.
joomla.
org[http://www.
joomla.
org])2.
VertexFrameworkRequirements/Installation2.
1ServerRequirementsTheVertexFrameworkhasthefollowingSystemRequirements:PHPversion5.
2.
16orhigher-http://www.
php.
nethttp://www.
shape5.
comJoomla!
1.
6.
xorhigher-http://www.
joomla.
org2.
2BrowserCompatibilityVertexFrameworkiscompatiblewithmostmajorbrowsersincluding:InternetExplorer(version7.
0+),Firefox,Chrome,Safari,2.
3InstallationPleaserefertohttp://www.
shape5.
com/joomla_tutorials.
htmlforinstallationinstructionsonaVertexSiteShaperorjustthetemplateitself.
2.
4DownloadThenewestversionoftheVertexFrameworkisavailableunderthedownloadssectionofshape5.
comonceyouareloggedin:http://www.
shape5.
com/component/option,com_docman/Itemid,96/task,cat_view/gid,190/Pleaserefertothefollowingpageformoreinformation:http://www.
shape5.
com/joomla/framework/vertex_framework.
html3.
TemplateSpecificEverytemplatebuiltonVertexalsocomeswithitsownuniquetemplatespecificoptionsapplicabletothatparticulartemplatesuchashighlightcolors,socialicons,andmuchmore.
ThesefeaturesareinadditiontothestandardfunctionsofVertex,andarestillcontrolledthroughtheveryuserfriendlyinterfaceofVertex.
Thebelowscreenshotisanexampleofatemplatewiththeseoptions:http://www.
shape5.
com4.
Layout-Fixed,Fluid,ResponsiveandMobile4.
1OverviewVertexincludesaswitchbetweenfluidandfixedlayoutssoifyoupreferfluidyoucaneasilyswitchtothislayout.
Asyoucanseefromthepicturebelowyoucanadjustthewidthofanycolumnonthepage,aswellasthebodywidthandmaxbodywidth.
Lastly,we'vedesignedthearticlestoloadbeforetheleftandrightcolumnsforSEOoptimization.
TheyarerepositionedwithCSSsovisuallyyouseenodifferenceinthelayout.
http://www.
shape5.
com4.
2ResponsiveIntroductionVertexgivesyoutheoptiontoenableordisabletheresponsivelayoutfeatureontemplatesbuiltwithVersion2andhigher.
Responsivecanbeenabledwhileusingeitherthefluidorfixedlayoutabovegivingyoutheultimateflexibilityincreatingyoursite!
BesuretoreviewourResponsiveBestPracticestutorialforspecificinformationaboutsettinguparesponsivelayoutwebsite.
YoucanalsohideareasonVertexsuchasrowsofmodules.
Soforexampleonatabletormobilephoneyoumaynotwantallthemodulesandrowsvisibleasoncetheystartstackingoneachothertheverticalscrollingmaybecomequitelargeorsomemodulesmaynotbedesignedforresponsivestylewebsites.
Asyouwillnoticefrombelowscreenshotyoucanselectdifferentareasontheframeworkwhereyouwouldliketohidetheserowsofmoduleswhenthescreenisatabletormobile.
SimplyselecttheareathatyouwanttohideandtheVertexframeworktakescareoftherest!
Thesefieldsdoworkindependentofeachother,soifyouwanttohidesomethingonbothtabletandmobilesizedscreensyoumustselectthesameareaonbothfields.
http://www.
shape5.
com4.
3HowResponsiveWorksinVertexTheresponsivefeatureofVertexusesmediaqueriestoactivateCSSatcertainscreenwidths.
OneofthebiggestadvantagestotheVertexResponsiveLayoutisthatwestartthelayoutasifitweredesignedforadesktopviewer,andthensimplyreduce,modify,orremovecertainsectionsorfontsizesbasedonthesizeoftheuser'sscreen.
Whenthescreenchangesitwilladjustasdescribedbelow.
Themajorityofrowsandcolumnswillnotchangetheirbasicstylingorpositionsuntiltheyreachthemobileversion.
Again,onlyminoradjustmentsaremadeonvaryingscreensizessothatyoualwaysknowwhatyoursitewilllooklikeandwherecontentwillbeplaced!
Ifthecolumnwidthoptionisenabled,thebodyissettofluid,andthebodywidthreaches1300pxthecolumnsizeswillincreaseby30%.
Ifitreaches1900pxtheywillincreaseby60%.
Ifitreaches2500pxtheywillincreaseby90%.
Ifyouareusingthemax-bodywidthcalculationsthecolumnwidthswillbebasedoffofthissettinginsteadofscreenwidth.
Between971pxand1300pxnochangeswilloccurtothelayout.
Thisisthestandarddesktopviewofthetemplate.
At970px(astandard10inchtabletscreen)thebodywidthwillbecomefluidandwillfillmostoftheviewingarea.
Iftheinsetcolumnsareusedonthepagetheywillbecombinedintotheiradjacentcolumnstocreateonecolumntoincreasethecentercolumn'savailablewidth.
At750px(astandard7inchtabletscreen)themobilenavigationbarwillappearforeasiernavigation.
Ifthecolumnwidthoptionforsmalltabletsisenabledyoucansetthecentercolumntostaytheiroriginalsizes,reducethewidthby20%,orstackintoonecolumn.
http://www.
shape5.
comAt580px(astandardmobiledevicesize)theentirebodywillbecomeonesinglecolumnandmodulestackontopofeachother.
Someadjustmentstotheheaderandfooterwilloccur.
Belowareillustrationsofthecentercolumnsonlyinthescenariosdescribedabove.
4.
4ColumnSizes,SmallTablets,andMobileIfyouaredesigningyoursiteforverywidescreensaswellasstandarddesktopscreens,thenconsiderenablingtheColumnWidthIncreasefeature.
Ifthebodywidthissettofluidthentheleft,left_inset,left_top,left_bottom,right,right_inset,right_top,andright_bottompositionswillincreasetheirwidthsforlargerscreenstokeepeverythingproportionate.
Ifthebodywidthreaches1300pxthissizewillincreaseby30%.
Ifitreaches1900pxitwillincreaseby60%.
Ifitreaches2500pxitwillincreaseby90%.
Ifyouareusingthemax-bodywidthcalculationswillbebasedoffofthissettinginsteadofscreenwidth.
Theoriginalwidthsarecalculatedinthegenerallayoutarea.
Forsmallerscreensitisoftenhardtomakeallofyourcontentfitinthemaincentercolumns.
Ifthescreensizereaches750pxyouhavetheoptiontokeepthewidthsofthecentercolumnshowtheyare,reducethemby20%,orstackthemontopofeachotherinasinglecolumn.
Thisoptionismeantfor7inchtabletsandaffectsthemaincentercolumnsonly.
At580pxallpositionswillbecomeasinglecolumnformobiledevices.
Whenthescreensizereaches750pxwide(anythingsmallerthanastandard10inchtablet),anavigationbarwillappearacrossthetopofthesiteandthebottom.
Thisbarreplacesthemainmenu,login,register,andsearch,foreasieruseronmobiledevices.
Intheconfigurationyoucanchoosewhattoenableonthesebarsaswellaschangethecolorsandstylehoweveryouwouldlike.
Eventhoughthisisaresponsivelayoutandthereisnoseparatelayoutpageformobiledevices,thatdoesnotmeanthatyoursite'sviewerswillunderstandthisorevenknowwhataresponsivelayoutis.
Ithasbecomeastandardforwebsitesthatuseamobilelayouttohavealinktoviewthedesktopviewofthewebsite,andthisiswhatyoursiteviewerswillexpecttosee.
Thislinksimplyturnsofftheresponsiveconfigurationusingacookieandcallsthewebsitelikeastandarddesktopwouldwhenviewinginmobile.
Thereisthenalinktoreturnbacktothemobileviewofthesitepresented.
http://www.
shape5.
com4.
5IE7andResponsiveIE7andIE8donotinherentlysupportcssmediaqueries,whichiswhatmakesresponsivelayoutspossible.
Becauseofthisjavascriptisneededtoaddthesefunctionstothebrowsers.
Javascriptcanaffectsiteperformance,soifyouexperienceanyslownessonyoursiteusingIE7andIE8simplyturnresponsiveoffforthesebrowsers.
WhenitisdisabledtheIE7andIE8willsimplyusethedefaultbodywidthandfixed/fluidsettingsfromtheGeneralLayoutsection.
Keepinmindthattheprimarytargetofresponsivelayoutsshouldbefortabletsandmobiledevices,whereIE7andIE8donotexist.
Whenyousetamax-widthtoanimageorinputboxandsayyousetittomax-width:100%itdoesn'tlookatthesurroundingDIV'swidth,itlooksatthewidth+padding.
SoiftheDIVhaspaddingonitthenitstretchespasttheDIV.
We'veaddedthebelow.
http://www.
shape5.
com-webkit-box-sizing:border-box;/*Safari/Chrome,otherWebKit*/-moz-box-sizing:border-box;/*Firefox,otherGecko*/box-sizing:border-box;/*Opera/IE8+*/ThistellsittostrictlylookattheDIV'swidthandtheneverythingworksfine.
IE8supportsitbutIE7doesnot.
SoforimagesinIE7we'vejustaddedthefollowing:img.
ie7,img.
boxed,img.
boxed_black,img.
padded{max-width:95%!
important;}Soimageswiththoseclassnameswillnevergetlargerthan95%.
We'veaddedinaclass"ie7"thatsomeonecanaddiftheyneeditto.
SojustremembertocheckyoursiteinIE7tobesureallimagesareshowingproperlyinresponsivemode.
4.
6ResponsiveHowTo'sHideSpecificModulesviatheHideClassesForacompletelistofHideClassesdownloadourResponsiveBestPracticesdocumentfromthetutorialspage:http://www.
shape5.
com/joomla_tutorials.
htmlIfyouhaveonlyaspecificmodulethatyouwouldliketohideatcertainscreensizes,andnotanentiresectionofthetemplate,thisisthebestapproach.
Thisisimportant,ahideclassshouldbeusedtohideanentiremoduleposition,butratheraspecificmodulepublishedtothatposition.
Inotherwordsifyouhavetwomodulespublishedtothesamepositionyoucanhideone,butnotboth,orthelayoutwillbewrong.
Ahideclassisaclassthatcanbeappliedtoanyelementonthepageandhidesthatparticularelementatcertainscreensizes.
Classesrangein100pxincrementsforlargescreensand50pxincrementsforsmallscreens.
Usethesesparinglyifyoucan.
Asarecommendation,theprimarytargetoftheseclassesshouldfocusontabletandmobilesizedscreens.
Widescreenmonitorsvaryinsizesoit'smuchhardertousetheseclassescorrectlyforlargemonitors.
Tabletandmobiledevicesaremuchmoreconsistentinsizesoitismucheasiertoapplythesmallerhideclasses.
Forexample,sayyouwanttohideaspecificmodulewhenthescreensizesreaches900pxwide,andremainhiddenforanyscreenbelow900px.
Simplyaddclass=hide_900tothetitleofthemodulelikethis:Theclassissimplyputintothetitleofthemodule.
Theremustbeaspacejustbeforeclass=,anddon'tworry,theclassareaofthetitlewon'tactuallyshowonthelivesite,it'sonlyshowninthebackend.
Itmustbeenteredexactlyasshownabove.
Thetitlecanbepublishedorunpublished,ithttp://www.
shape5.
comdoesnotmatterwhich.
Simplyaddingtheclassestothetitlewillapplytheclassestotheentiremodule.
WhatifyouwantittohidethemoduleonlyforacertainrangeThat'seasyjustadd_onlytotheendoftheclassname.
hide_900_onlywillonlyhidethatelementfrom900pxtothenextincrementinthehideclasses,whichis850px.
Soitwillonlybehiddenfrom850pxto900px.
Youcanalsoaddmultipleclassestothetitlelikethisclass=hide_900_onlyhide_850_onlywhichwillapplybothclassestothemodule.
WhatifyouwanttohidethemoduleandthenshowitagainlaterThat'ssimple,useshow_intheclassinsteadofhide_.
Thiswillmakethemoduleshowforthespecifiedsizenomatterwhatothersettingsareonthemodule.
Soifyouwanttohidethemodulefrom1000pxandbelow,butyouwanttoshowitagainlaterthendosomethinglikethefollowingclass=hide_1000show_600.
Thiswillhidethemodulefrom600pxto1000px.
IsthereamoresimplewayYes,ofcourse,theabovedirectionsareforexperienceduserswhowanttotweaktheircontentforeveryavailablescreensize.
Ifyoudon'twanttomessaroundwithspecificwindowsizessimplyusethefollowingclassesinstead,whichhavepresetscreensizesappliedtothem:hide_wide_screenhide_standard_screenhide_large_tablethide_small_tablethide_mobileshow_wide_screenshow_standard_screenshow_large_tabletshow_small_tabletshow_mobileHideSpecificContentviatheHideClassesIfyouhaveonlyspecificcontentorimageswithinanarticleormodulethatyouwanttohidethenusethesamehideclassesdescribedabove,butwrapthatspecificcontentinsideoftheclassinsteadofapplyingittotheentiremodule.
Forexample,intheimagebelow,thethirdparagraphwillhideat900pxandthenshowagainat700px.
ForacompletelistofHideClassesdownloadourResponsiveBestPracticesdocumentfromthetutorialspage:http://www.
shape5.
comhttp://www.
shape5.
com/joomla_tutorials.
html5.
Menu5.
1OverviewTheS5FlexMenusystemisaverypowerfulpluginthatprovidesfunctionalityfarbeyondwhatthestandardJoomlamenusystemcanprovide.
ThispluginisintendedtobeasanextensionoftheexistingmenusysteminJoomlatoaddmanynewfeatures.
ThispluginmayonlybeusedwithShape5templatesspecificallydesignedaroundthisplugin.
Ifatemplateiscompatiblewiththispluginitwillbespecifiedonthetemplate'sdemopageathttp://demo.
shape5.
com.
5.
2InstallingthePlugin1.
IfyouhaveinstalledaShape5templateusingasiteshapertheS5FlexMenupluginisalreadyincludedandinstallationisnotnecessary.
IfyouhaveinstalledatemplateintoanexistingJoomlainstallationtheninstallationisrequiredforthemenusystemtoperformcorrectly.
2.
InJoomla1.
5'sbackendnavigatetoExtensions/InstallandUninstall.
InJoomla1.
6navigatetoExtensions/ExtensionsManager.
3.
Browsefortheplugin'szipfileandclickUpload&Install4.
OncethepluginisinstallednavigatetoExtensions/PluginManagerhttp://www.
shape5.
com5.
Onceonthepluginmanagerpagesearchfor"S5FlexMenu"andenabletheplugin5.
3EnablingtheMootoolsUpgradePlugin1.
ThisstepisonlynecessaryifyouareusingJoomla1.
5.
Thismenurequiremootools1.
2orhigher.
2.
NavigatetotheExtensions/PluginManagerpageasyoudidaboveinstep#3.
Onthispagesearchfor"MootoolsUpgrade"andenabletheplugincalled"System-MootoolsUpgrade".
5.
4WheretoConfigureMenuItems1.
InthebackendofJoomlanavigatetothe"Menus"itemacrossthemainmenu.
Onceonthispageeditthemenuofyourchoice.
2.
TheparametersfortheS5FlexMenuwillbeshowninthebackendofanymenuitem.
Simplyeditanymenuitem.
3.
Whenyouhaveenteredtheeditscreenofamenuitemyouwillseeasectionofparametersontherightsideofthepageinanaccordionstyle,eachwiththeirowntitles.
TheS5flexMenusettingsarefoundunder"S5FlexMenuParameters".
http://www.
shape5.
comThepictureaboveisofJoomla1.
6,theJoomla1.
5sectionmayappearclosertothetopoftheaccordion.
4.
ThissectionwillcontrolhowyouconfiguretheS5FlexMenu.
Thestepsbelowwillteachyouhowtouseeachofthesesettings.
5.
5SplittingaMenuintoMultipleColumns1.
Thenumberofcolumnsshowninasubmenuiscontrolledbyitsparent.
Forexampleinthepicturebelowyouwillseesixsubmenuitemsshownintwocolumns.
Thisisbecausetheparentitem,"Extensions",issettoshowtwocolumnsinit'sconfiguration.
http://www.
shape5.
comBelowweseehowthe"Extensions"itemisconfiguredtoshowtwocolumns.
5.
6PublishingaModuletotheMenu1.
Belowyoucanseethatyouhavetheoptiontodisplayeithermenuitemsormodulesinthesubareaofaparentmenuitem.
In#4abovemenuitemsarebeingpublishedaschildrenoftheitem"Extensions".
Bydefaultamenuwillbesettoshowmenuitemsastheirchildren,however,youmayalsoloadmodulepositionsastheirchildren.
Todothissimplyselect"ModulePositions"andthenselectapositionfromtheselectareabelowthat,ies5_menu1,s5_menu2,s5_menu3,etc.
2.
Onceyouhaveselectedamodulepositiontoloadinthesubareasimplypublishanymoduletothatpositionfromthemodulemanager.
http://www.
shape5.
comInthepicturebelowyouwillseeamoduleloadedjustbelowthemenuitem"MenuModuleExample",thatmenuitemistheparentofthemoduleloadedbelowit.
Belowistheconfigurationofthemenuitem"MenuModuleExample"Allthatisneededthenistopublishanymoduletothes5_menu1position(orwhateverpositionyouchoose)fromthemodulemanagerareaofJoomla.
http://www.
shape5.
com5.
7GroupingChildrenUnderTheirParentChildrenmaybegroupedornon-groupedfromtheirparentsundertheparameter"Groupchilditems".
Youmaygroupeithermenuitemsormodules.
Groupingsimplymeansthechildrenwillshowinthesameareaoftheparentratherthananewflyoutwindow.
Youmaygroupmodulesormenuitems.
Non-Grouped:Grouped:5.
8SettinguptheSubText1.
Subtextcanbeaddedtoanymenuitem.
Itisveryeasytosetup,simplytypethesubtextintotheparameterbelow.
Ifyoudonotwithtohavesubtextsimplyleavethisparameterempty.
5.
9AddingaMenuIconMenuiconsarecontrolledthroughthedefaultJoomlamenusystem.
OpentheParameters(Basics)(1.
5)orLinkTypeOptions(1.
6+)tabandchooseanymenuimage.
Asetofsampleimageshasbeenprovidedatshape5.
comandshouldbeloadedintotheimages/storiesfolder.
http://www.
shape5.
com5.
10ConfiguringEffects,MenuSelection,DelaysandOrientation1.
Alloftheseitemscanbechangedfromthetemplateconfigurationpage.
SimplynavigatetoExtensions/TemplateManager2.
Onceonthetemplatemanagerpageopenyourtemplate'slinkbyclickingonitstitle.
Thiswillbringyoutothetemplateconfigurationpage.
3.
Abouthalfwaydownthepageyouwillfindthefollowingparametershttp://www.
shape5.
com4.
Youmayadjustthesesettingstoyourliking.
Belowisadefinitionofeachparameter.
a.
ShoworHideMainMenu-Settingtohidewillcompletelydisablethemenusystemb.
MenuName-Choosewhichmenuyouwouldliketodisplayc.
LevelsDeep-Thisnumbercontrolshowmanylevelsdeepyouwouldlikethesubmenustoappear.
Anysubmenusafterthisnumberwillnotappear.
d.
OpenDelay-Howlongdoyouwanttheopeningjavascripteffecttolast.
e.
HideDelay-Howlongshouldasubmenuappearonthepageafterthemousehasleftf.
Opacity-Settheopacityofthemenu.
100isalwaysrecommendedg.
Orientation-Setthemenutohorizontalorvertical.
Verticalshouldonlybeusedifthetemplatehasbeenspecificallydesignedforthislayout.
Effect-Choosehowyouwouldlikethesubmenustoenterthepage.
5.
11MenuFlexibilityIfthemenuiswiderthanthescreenitselfitwillautomaticallyadjustsothatnothingiscutoffwhenviewingit.
Itwilladjustin2waysverticallyandhorizontally.
Soifthemenuisgoingtogetcutoffhorizontallyitwilloutputandautomaticallyadjustitsposition.
Forexamplethescreenshotbelowshowsthemenuatfullwidth:http://www.
shape5.
comThisscreenshotshowsthesamemenuadjustingforwhenthenscreenwidthistoonarrow.
Thecolumnsautomaticallybegintostackontopofeachotheranddisplayasshown:http://www.
shape5.
com6.
RowSizes6.
1BriefOverviewInfiniteLayouts:Becausetherearesomanymodulepositionsavailableinsomanydifferentareas,thenumberoflayoutsyoucancreatearelimitless!
Anaverageof90positionsareincludedineachdesign!
Forexample,ifyouwouldliketoshowyourmaincontentareaontherightsideofyoursitebutstillhaveacolumnofmodules,simplypublishedyourmodulestotherightorright_insetpositionsorboth.
Thesamewouldbetruefortheopposite,ifyouwantacolumnontheleftsimplypublishmodulestoleftorleft_inset.
Ofcourseyoucanalwayschoosetonothaveacolumnatall.
Remember,anymodulenotpublishedtowillautomaticallycollapseandtheremainingareawillautomaticallyadjust.
Thereisnoneedtochooseapre-definedlayoutforyourentiresite,simplyusethepowerofcollapsingmodulepositionsandtakeadvantageofthenumerousamountsofmodulepositionstocreateanylayoutyoucandreamof!
Besuretocheckoutthelayoutofmodulesbelow.
Allmodulesarefullycollapsible:WhatexactlyisacollapsingmoduleIt'squitesimple,wheneveramoduleisnotpublishedtoapositionthatpositiondoesnotappearonthefrontendofthetemplate.
Considertheexamplebelow:Thisparticularrowhas6modulepositionsavailabletopublishto.
Let'ssayyouonlywanttopublishto4ofthesepositions.
Thetemplatewillautomaticallycollapsethemodulesyoudonotwanttouseandadjustthesizeofthemodulesaccordingly:Ifnomodulesarepublishedtotherowtheentirerowitselfwillnotshow.
Thebestfeatureofthisiseverymodulecanbepublishedtoitsownuniquepagessothelayoutofyoursitecanchangeoneverypage!
6.
2ChangingModuleSizesTheVertexFrameworkallowsyoutoadjustthewidthofthemodulescontainedinanyrowofmodulesorsetittoautomatic.
Forexampletop_row1contains6modulepositions,ifyoupublishmodulestohttp://www.
shape5.
comonlytop_row1_1andtop_row1_2themoduleswilleachbesetto50%oftheavailablespaceoryoucanchoosetosetthempercentagesmanuallylike60%and40%.
YoucaneasilychangethisintheadminareaofVertexadminunderthe"RowSizes".
Ifyouwanttomanuallysettherowwidthswithoutusingtheslidersjustclickthelittlegeariconandyouwillbeabletoenterinwhateverpercentagewidthsyoudesire.
Ifonlyasinglemoduleispublishedtotherowthenthewidthautomaticallybecomes100%.
7.
GeneralUnderthegeneraltabyoucanenableJSorCSScompressionforVertextocompressallthecssandjsfilesincludedandusedinVertex.
Thiswilldramaticallyincreaseyoursite'soverallperformanceandreducetheamountofcallstoyourserver.
Donotenablethisfeaturewhileyoursiteisindevelopment,itwillcacheyourfilesuntiltheyexpire,makingitdifficulttomakeeditstoadevelopmentsite.
http://www.
shape5.
comJSCompression-Enablingthisfeaturewillcompressalltemplatespecificjsfilesintotwocachedphpfiles,oneatthetopandoneatthebottomofthesite'ssource.
CSSCompression-Enablingthisfeaturewillcompressalltemplatespecificcssfilesintotwocachedphpfiles,oneatthetopandoneatthebottomofthesite'ssource.
UnderthisgeneralareaisthespotwhereyoucanaddanyGoogleanalyticscriptoranyotherJavascriptorcodethatyouwantappendedtothebottomoftheindex.
phpfiletobecalledabovethetag.
ImagesPercentageWidth–Thisoptionwillsetallimagesinmodulesandarticlesonlytothesetpercentageofthisfieldautomatically.
Enteranumberfrom1to100toenableit.
Itshouldbeusedasalastresort,butitisofferedasanautomaticsolution.
ImageAutoHeight–Ifanimagehasamax-widthonitthiswillmaketheheightautomaticallyadjusttobeproportionatetotheimage'swidth.
Forexampleifyouhaveanimagethat's200pxwide,andit'sinsidea100pxwidediv,themax-width:100%callwillsettheimageto100px.
Thisoptionwillmakesurethattheimageheightstaysproportionatetothenewwidth.
Wecannotthinkofareasonwhythiswouldn'tbeusedsoit'senabledbydefault.
http://www.
shape5.
comImageMaxWidth–Thisoptionmakessurethatimagescannotbecomelargerthantheiravailablespace.
Enablingthisfeaturewillsetimagestoamax-widthof100%(meaning100%ofthesurroundingelement'swidth).
Thisoptionishighlyrecommendedtokeepenabled.
HideComponentArea:Youcanchoosewhetherornotshowthecontent/componentareaonthefrontpage.
Ifyouchoosenoyoumusthaveamodulepublishedinoneofthefollowingrows:middle_top,above_body,below_body,ormiddle_bottom,orthelayoutwillnotshowcorrectlybecausenomiddlecolumnwillbepresent.
Ifyouchoosenoanddisableallmodulespublishedtothemain,middleareaofthesite,ie:left,right,left_inset,above_body,etc.
thenentiremiddlesectionwillcollapse.
OptionalLoginandRegisterURLs:BydefaulttheloginandregisterlinksfoundatthebottomoftheGeneraltabaredesignedtoworkwiththeS5Boxmodule.
However,youcanoverridethisandsimplyenteryourowncustomurlsthatthewebsitewillredirecttoonclick.
8.
JavascriptsThescriptsmentionedinthissectionwillneedtobeenteredintothehtmlsourceviewerofyoureditor.
EachjavascriptneedstobeenabledundertheJavascriptstabintheconfiguration.
8.
1MultiboxSupportsarangeofmultimediaformats:images,flash,video,mp3s,html!
AutodetectsformatsoryoucanspecifytheformatHtmldescriptionsGroupingofimages,videos,etcEnable/Disablepageoverlaywhenmultiboxpopsup(viatemplateparameters)Enable/Disablecontrols(viatemplateparameters)http://www.
shape5.
comToenablemultiboxusethefollowingaroundanyimage.
Beloware3examplesofmultiboxusedonsomeimages:MultipleImage#1.
Itcansupporthtml.