DRUPAL7MANUAL“Youmaynoticethatthismanualdoesn’tincludeeverything.Pleaseaddtoit!ThereareabundantDrupal7resourcesoutsideofthisdocument–ifIdidn’tincludesomethinghere,someonemorecapableprobablywroteitdownelsewhere.”~Dr.Smith

ByMarianSmith,Ed.D.,AcademicAffairsAnalyst,UNTOfficeoftheProvostforAcademicAffairs,withcontributionsfromTeresaSchofield,UNTStudentAssistant

UniversityofNorthTexas

1

TableofContents1.GettingStarted.........................................................................................................................................2

2.UsefulTerms............................................................................................................................................3

3.SettingWebsiteInformation....................................................................................................................5

3a.FrontPageInformation......................................................................................................................5

3b.FrontPageURL...................................................................................................................................5

3c.PageRedirects....................................................................................................................................5

3d.SearchBar..........................................................................................................................................5

4.CreatingContent......................................................................................................................................7

4a.Setup..................................................................................................................................................7

4b.BasicPage...........................................................................................................................................7

4c.Article.................................................................................................................................................7

4d.Webform............................................................................................................................................7

4e.ContentFormatting............................................................................................................................9

5.Menus.....................................................................................................................................................10

5a.Horizontal(Top)Menu.....................................................................................................................10

5b.Drop-DownMenu............................................................................................................................11

5c.On-PageMenus................................................................................................................................11

6.NivoSlider..............................................................................................................................................15

7.Toggling..................................................................................................................................................17

7a.Setup................................................................................................................................................17

7b.CodeforToggling.............................................................................................................................17

7c.InsertingImagesintoToggledCode/Tables......................................................................................18

8.PageJumps.............................................................................................................................................20

8a.In-PageJumps...................................................................................................................................20

8b.Out-of-pageJumps...........................................................................................................................20

8c.DeletingAnchors/Jumps...................................................................................................................20

9.UserManagement..................................................................................................................................22

9a.GrantingAccess................................................................................................................................22

9b.EditingAccess...................................................................................................................................22

9c.DeletingAccess.................................................................................................................................22

10. OtherResources.............................................................................................................................23

2

1.GettingStartedYouhaveawebsite!Socool.Nowwhat?

Youneedaccess!

Someone(oneofthewebsite’scurrentusers,orwhoevergaveyouthewebsite)willhavetosetyouupwithauseraccount.MakesuretheyuseyourUNTenterpriseuseridentification,EUID,foryourusername.

Note: Informationongrantingsomeoneelseaccessisgiveninsection9.UserManagement.

TomanageyouDrupal7website,logintotheuserpage(“websitename.unt.edu/user”)withyournormalUNTsystemusername,EUID,andnormalUNTsystempassword.

Then,youcangetstarted.

Throughoutthismanual,auserbar(picturedbelow)willbementionedasameansthroughwhichtoaccess/manageaDrupal7site.Onceyouhaveaccessandlogin,itshouldbeatthetopleftofyourscreen.Ifitdoesn’tappearthere,contactwhoevergaveyouaccessandaskthemforcompleteaccess.

Allofthese“buttons”leadtotoolswithwhichyoucanconfigureyourwebsite.Thehomepagecanbereachedbyclickingthe icontothefarleft.

Note: AllimageexamplesusedinthismanualaretakenfromtheUniversityofNorthTexas’SPOT(StudentPerceptionsofTeaching)website,spot.unt.edu.

“ButwhatifIneedhelp?Imean,anactualpersonwhoknowsDrupalinsideandout?”

Drupalcanbeascarybeast.GoogleisagreatresourceforfindingouthowtouseDrupal(and,well,anything),butgoto10.OtherResourcestolearnmoreaboutUNT’swebsite-managementresourcesandoffices,aswellasotherhelpfulwebsites.

Note: ifyouhavetroublefindingatopic,pressCtrland“f,”thentypethewordyou’relookingfor,andpressenter.Thattool–thefindtool–willtakeyoutoallmentionsofthatword.

3

2.UsefulTermsNow,I’mgoingtogiveyouabunchofinformationthatyoumightnotunderstandorcareabout.Don’tpanic!Understandingmostofitdoesn’tmatterifyoufollowthedirections,butifyou’recurious,here’swhatdifferenttermsmean.

Term DefinitionAnchor Asubsetlinkinsideapagethatleadsdirectlytothatsectionofthepage.

BasicPage Themostbasiccontenttype–youcanputpictures,text,links,andmoreonthis.

Block Thinkofthisasa“box”ofcontentthatyoucanassigntoapageandmovetoablockregionofapage.

BlockRegions Theregionsonapage,whichcanbeviewedbygoingto“Structure”ontheuserbar,“Blocks,”thenBlockscanbemovedtodifferentregions–thisishowyouarrangecontentonapage.

ContentType Acontenttypeisjustwhatitsoundslike.It’swhatapage,article,andwebformare:typesofcontentthatfillvariousroles.

DevelopmentWebsite

A“testsite”inwhichcontentforanewwebsiteisput,andthenthedevelopmentsiteismade“live”:everythingfromthedevelopmentsite(typically,“websitename-dev.unt.edu”)iscopiedintoanactivesite(“websitename.unt.edu”).Thedevelopmentsitecanstillexistafterthis,andcanbeusedasapracticesite.

DisplaySuite Thetoolwithwhichyoucanorganizethewayblocksaredisplayedfordifferentviewmodes.

EditMode Themodeinwhichyoucaneditapage.The“Edit”buttonisaffixedtotherightsideofthepage,under“View”andover“ManageDisplay.”

Menu Alistoflinks,or“menuitems,”thatcanbedisplayedinvariousformats.

Modules The“controlroom”foryourwebsite–here,youcan“flipon”certain“switches,”tochangewhat“buttons”becomeavailable.

Node Apage.Moreaccurately,theuniqueidentifierforanormalpage(asopposedtoaWebformorArticle),foundwhilehoveringoverthe“edit”button(whichisaffixedtotherightsideofuserviewinDrupal7;seeEditMode)andlookingtothebottomleftofthescreen(wherethenodenumbercanbefoundafter“node/”).

ParentItem Theitemunderwhichanodecanfallasasubset.Assigningaparentitemtoapagewillmakethatpageintoamenuitem.

Toggling Thisis“hiding”textbehindanotherpieceoftext.Example:foranFAQpage,youcouldhaveaquestion,andthenuponclicking

4

onthatquestion,text(ananswer)couldappearunderneathit.Ifyouclickedonthequestionagain,thetextwouldthendisappear.

UserBar Thenavigationmenuwhichshowsupatthetopofauser’spagewhenloggedin.Itlookslikethis:

Throughoutthismanual,differentbuttonsonthisbarwillbereferenced(mostlyContent,Structure,andModules).

ViewMode Aformatofpage,article,orwebformthatyoucancreate,thenassignmenustoandarrangedifferentlythanotherviewmodes.

Webform Aregistrationpage.Ithasfill-in-the-blanks,multiple-choiceoptions,etc.thatyoucanusetorequestinformationfromyourwebsite’svisitors.

Weight Theorderassignmentofamenuitem.“Heavier”(greaternumericvalue)itemsfloatdownortotheright,while“lighter”(smallernumericvalue)itemsfloattothetopoftheleft.

WYSIWYG Standsfor“WhatYouSeeIsWhatYouGet,”pronounced“wizzywig.”Thisisthesetofoptionsyouseewhenineditmode,andit’syourtoolboxforeditingcontent.Itlookslikethis:

5

3.SettingWebsiteInformation3a.FrontPageInformation

1)Toeditthe“SiteName”(circledbelow),goto ontheuserbar,looktotheSystemsectiononthetopright,andselectSiteInformation.

2)Here,youcanalsoedittheinformationatthebottomofyoursite(circledbelow).Toedittheseareas,gototheDepartmentInformation,ContactInformation,andSocialMediasections.

3b.FrontPageURLTosetthefrontpageofyourwebsiteasanythingotherthanitsbasicURL(websitename.unt.edu),scrolldowntothe sectionoftheSiteInformationpage(thesamepageusedin3a).IntheDefaultfrontpagebox,fillintherestoftheURL

withthenecessaryaddendum.Thenscrolldownand .

3c.PageRedirects1)ToaddorchangeURLredirects(ormakeapageredirecttoanother),goto

,“SearchandMetadata,”then“URLredirects.”Click ,andaddorcompletethe and URLs. .

2)Youcanalsogotoeditmodeforapage,thenscrolldownandselectthe tab.Select ,completetheURLforthe pageyouwishtoleadtothispage,and .

3d.SearchBar1)Ifyou’dlikeotherstobeabletosearchyoursite,goto and“Blocks.”

2)Lookatblockregionsbyclickingon ,anddecidewhereyou’dliketheSearchBartogo.

6

3)Togoback,select ,anddrag-and-drop(using )the“SearchForm”blocktotheblockregionyou’dliketoplaceitin.OnerecommendedblockregionisUserBarSecond.

7

4.CreatingContent4a.Setup

1)Eachofthefollowingcontentpiecesareautomatically“Published”(visibletothepublic).Tochangethis,gotothe tabatthebottomofeditmodeanduncheckthe“Published”box.

2)Ineachpieceofcontentyoucreate,gobelowtheBody(EditSummary)box,selectintheTextformatbox.FullHTMLformatwillallowtextaddedtotheBody

toappearasyouformatit(withcolor,bolded,etc.).

4b.BasicPageTocreateabasicpage,goto ,then .Clickon ,thenaddatitle(whichwillbecomepartoftheURL).See4e.ContentFormattingbelowformoreinformationonplacingoftext/images/etc.withinyourpage.

4c.Article Tocreateanarticle,goto ,then .Clickon ,thenaddatitle(whichwillbecomepartoftheURL).Articlesareidenticaltopagesincontentformatting.

4d.Webform WebformCreation

1)Tocreateawebform,goto ,then ,then .UnderTextFormat,selectFullHTML.Then,addtexttothe sectionjustasyouwouldtoabasicpage.Thistextwillbeabovethewebformitself.Then .

2)Afteryousave,you’llberedirectedtoanotherpage(the“WEBFORM”tab)whereyoucanbuildyourwebform.Here,youcanseethemajorcomponentsofawebform,whichareexplainedbelow.

a. LABEL

sareshownonthewebform;ifyouwantedtoknowsomeone’sfirstnamewhentheyusethewebform,youcouldwrite“FirstName,”thenselect“Textfield”for .OtheroptionsforLabelscanbe“LastName,”“Position,”“Doyouhaveanydietaryrestrictions?”and“Department.”

b. FORMKEYYoudon’tneedtodoanythinghere!AFormKeyisjustthenameofthecomponentyou’remaking.

c. TYPEOptionsforTypearelistedinthedrop-down.Ifyou

8

wantsomeonetotypeinformationintoabox,“Textfield”allowsthemtodojustthat.ThisistheTypethat’susedmostoften,alongwith“Selectoptions.”UnlikeTextfield,SelectOptionsrequiresyoutoentertheoptionsfromwhichsitevisitorscanchooseone(ormultiple,ifyoucheck“Multiple”asshownabove).UnderOptions*,you’llneedtoaddoptionsasfollows:

1|Titleoffirstoption2|Titleofsecondoption

d. REQUIRED

Ifyouwantafieldtobemandatory,checkthebox under andthen.

e. OPERATIONSUnderthiscolumn,you’llmostlyusetheEditbuttonfordifferentwebformcomponents(itdoeswhatyouthinkitdoes:editthecomponent).Clonecreatesidenticalcomponents,andDeletegetsridofcomponents.

Onceyou ,yourwebformcanbeviewedthroughtheVIEWoptionatthetopofthepage.

WebformResults

1)Toviewwebformresults,gototheupperrightcornerofthewebformpageineditmode,andclickontheResultstab(picturedright).Thereareseveralwaysyoucanviewwhohassubmittedwhat:

a.The“Submissions”taballowsyoutoseesubmissions,andtosortthem,byclickingon“SUBMITTED,”“USER,”“IPADDRESS,”or“OPERATIONS.”

b.Ineverreallymessedwiththe“Analysis”tab;feelfreetoexperimentandaddtothismanual!

c.The“Table”allowsyoutoseedetailsforeachindividual’sregistration,includingthetimetheyregistered,theiruserID(iftheyhadonewhenregistering),theirIPaddress,andtheiranswersforeachcomponentyoucreated.

d.The“Download”taballowsyoutodownloadwebformresultsinaMicrosoftExcelorDelimitedtextfile.ItypicallyuseMicrosoftExcel.Todothis,select“MicrosoftExcel”underExportformat,then“Label”underColumnheaderformat.Click todownloadyourtableofresults.

9

e.The“Clear”taballowsyoutoclearresultsonawebform;usethiswithcaution!Onceyouclearawebform,noneofitsresultscanberetrieved.

4e.ContentFormatting

1)InsertingImages

Toinsertanimage,putyourcursorwhereyouwantanimagetofallonyourpage.Youcansendaphotototheleft,rightorcenterofthepageafteryouinsertit,sodon’tworryaboutthat-justfocusonwhere(vertically)onthepageyouwantthephoto.Savethephotosomewhereonyourcomputerwhereyoucanfindit,thenclickonbuttonlabeled(a).

Click ,then onthetopleft,then .Selecttheimage, ,then .Adjustthewidthandheightbychangingoneofthenumbers:asyouchangeonedimension,theothershouldchangetoaccommodate.Ifitdoesnot,simplyclick ,andgobacktoeditthedimensionsagainbyselectingthephotoandclickingthephotoicon(a)again.Youcansendthephotototheleft,right,orcenterofthepagebyselectinganoptiononthe menu.Youcanalsoaddablackbordertothephoto( ).

2)InsertingLinks

TolinkaURLtoaphotoorsectionoftext,highlightthephotoortextthatyouwishtoleadtotheURL,andselectthelinkicon(b).PlacetheURLintotheURLspace,thenselect .IntheTargetdrop-downbox,selectthewindowyou’dliketheURLtoopeninwhenitisclicked.Click tosave.

3)InsertingTextfromWord(andotherplaces)

ToinsertanyquantityoftextcontentfromWord(oralmostanyothersource),selectoption(d)andpressCtrl+Vtopastethecopied(tocopy,pressCtrl+C)textintothewindowthatopens,andpress tosave.

4)TextColor,Size,andFont

Tomodifythecoloroftext,selectoption(c).Thesizeandfontoftextcanbemodifiedbyusingthebuttonstotheleftofoption(c), .

10

5.Menus5a.Horizontal(Top)Menu

1)Tocreatethisblackbar(picturedabove)andadditemstoit,goto“Structure>Blocks”viatheuserbar,move fromundertheDisabledsection(nearthebottomofthepage)toundertheMenusection,thensave.

2)Toaddvarious“buttons”(asabove,“WelcometoSPOT,”“StudentResources,”etc.),goto“Structure,”“Menus,”“MainMenu”viatheuserbar.Click toaddoptions.UnderMenulinktitle*,assigntheitemwithatitlethatyouwishtoappearonthemenupicturedabove.UnderPath*,inserttheURLtowhichyouwantthebuttontolead.

Note: Tofindthenodeofapage,seeNodeunder2.UsefulTerms.

3)Ifyouwanttoassignanexistingwithin-websitepagetoahorizontalmenu,gotothepage.Under“Menusettings,”click“Provideamenulink,”giveitaMenulinktitle(whichwillappearonthehorizontalmenu),andlistitsParentItemasthenameofthemenuyoumovedandaddedlinksto(above:“<MainMenu>”).Itwillthenappearonthehorizontalmenu.

4)Toarrangemorethanoneoftheseitems,assigneachaWeight(picturedabove).The“lighter”(ormorenegative)anitemis,thefurthertotheleftitwillappear.

11

5b.Drop-DownMenu1)Toaddapagetoadrop-downmenu,createthepage,thenlistitsparentitemaswhateveritem(onthehorizontalmenu)thatyouwouldlikeittoappearunder(picturedright).

2)Assigntheitemweight:“lighter”itemswill“float”tothetopofthelistofmenuitems.

3)Toaddadrop-downitemforadrop-downitem(basically,tohaveanotheroptionappeartotherightofadrop-downoption),simplyassignapage’sparentitemaswhatevermenuitemyouwouldlikeittoappearbeside(thisisdoneintheParentitemboxcircledabove).

4)Tomakeadrop-downmenuautomaticallyappearwhenthemousehoversoveritsparentitem(aboveexample:uponhoveringover“EvaluationForms,”thedrop-downmenuappears),gotoStructure>Menus>Home,thenclick“edit”fortheparentitem(aboveexample:“EvaluationForms”)underwhichyouwishadrop-downmenutoappearautomatically.Checktheboxfor“Showasexpanded,”save,andthedrop-downmenuwillappearautomaticallywhenhoveredover.

5c.On-PageMenusThereareseveralstepsrequiredtocreatemenusthatappearonabasicpage.

EnableModules

First,you’llneedto“flipafewswitches”sothatyoucancreateanddisplayamenu.

1)Goto viatheuserbar,thenscrolldowntothe section,andmakesureDisplaySuiteExtras,DisplaySuiteFormat,andDisplaySuiteUIareallenabled,orchecked .

Savebyclicking atthebottomofthepage.

2)Goto for“DisplaySuiteExtras”.Under“FieldTemplates,”checktheboxfor .Under“Other”,enablefieldsasoutlinedbelow(Viewmodeper

12

node,Pagetitleoptions,Regiontoblock,Viewsdisplays,Viewmodeswitcher,Hiddenregion).

CreateaMenu

1)GotoStructure>Menus>AddMenu,thengivethemenuatitle(whichwillappearonthevisiblemenu)and .

2)Click ,givethelinkatitle,thenassignthelinka“path”(aURLthatthelinkwillleadtowhenclickedon).Addotherlinksthatyouwishtoappearonthemenu.Afteryousaveeachlink,youwillberedirectedtothemainmenu’slistoflinks,whereyoucanadjusttheorderofmenuitems/linksbymovingthisbutton: .Click tosavethisorder.

Note: Toaccessthesemenus,youcanalsogoto“Structure,”“Menus,”andselectthemenuyouwishtoeditorview.

CreateaViewMode

1)Next,gotoStructure>DisplaySuite>ViewModes>AddaViewMode.AddaLabel(ortitle)thatyoucanrecognize,enable“Node”under ,and .

Aftersaving,thetitleofthepage(topleft)shouldbe“DisplaySuite.”Toarriveatthispage,youcanalsogotoStructure>DisplaySuite>ViewModes.

2)Fromhere,clickon intheupper-rightcornerofthepage.ClickforBasicPage,thenscrolldownandselect .Here,click

toenabletheViewModeyoujustcreated,andSave.

3)Now,atthetopofthepage,the“ViewMode”should

13

appearasapageformatoption,asshownabove.

Selectthisviewmode,andonthispage,gotothe“Selectalayout”drop-downbox,andchoose“Two

Column9-3”ifyouwantthemenutobeontherightsideofthepage,and“TwoColumn3-9”ifyouwantthemenutobeontheleftsideofthepage.Save.

AddaBlockField

Afterhavingsavedthisnewlayout,thepagewillshowmoreoptions.

1)GotoCustomfieldsnearthebottomofthepage,thenselect“Managefields”(showntotheright).Then,select .

Note: Anotherwaytogettothesame“Managefields”pageistogotoStructure>DisplaySuite>Fields.

2)Labeltheblockfield(recommended)thesameastheViewModeand/orMenuthatyouareattemptingtocreate.

3)Enable“Node”under .Under ,under“Menu,”selecttheMenuthatyoujustcreated,andsave.

ConfigureBlock

Now,goto“Structure”and“Blocks”viatheUserBar,thenscrolldownandselect fortheMenuyoujustcreated.

1)Createatitlecongruentwiththemenuthatyoujustcreated.

2)Under“Contenttypes”atthebottom-leftofthepage,showblockforallcontenttypes.

3)Under“Roles,”displayblockforwhateverusersyouwanttoseethemenu.Ifyoudonotselectanyroles,theblockwillbevisibletoallusers.Thenclick .

ArrangeBasicPage

Now,theblockfieldisenabledfortheviewmodethatallowsthemenuyouhavecreatedtoappear(confusedyet?Iwastoo).Ontheuserbar,goto“Structure”and“DisplaySuite,”thenselect forBasicPage.

1)SelecttheViewModeyouwishtouse(exampleabove:“Menu1”),makesuretheproperlayoutisselectedunder“SelectaLayout,”thensave.

14

2)Drag-and-drop(using )theBlockFieldyoujustcreatedtothe“Rightside”field(or“Leftside”ifyouwantthemenuontheleftside).Ifyouselect“Leftside”fieldoranotherfield,makesureyoumove“Body”to“Rightside.”For“Body,”makesureyougotothedrop-downboxunder“Label,”andselect“<Hidden>.”Save.

3)Now,gototheabove“Edit”button(picturedabove),andunder“MenuSettings”(picturedright),under“AvailableMenus,”enablethemenuyoujustcreated.

4)Onthesamepage,gotothe“DisplaySuite:Extras”tab,andunder“Viewmodes,”enablethemenuyoujustcreated.

Tosave,click .

EnableViewModeonContentTypes

1)Next,gotothe“edit”modeoftheBasicPagethatyouwantthemenutobedisplayedon.

Atthebottomofthepage,selectthe“Displaysettings”tab,andthenunderViewmode,selecttheviewmodethatyoujustcreatedabove(theonethathasthemenuthatyoucreatedalreadyengrainedinitsdisplay).

Now,save,andthereyouare!Amenuwillbedisplayedontheright-handsideofyourpage.

15

6.NivoSliderYourwebsite’sNivoSliderisa“displaywindow”(examplebelow)inwhichyoucanplacepicturesandcaptions.ToaccessandconfiguretheNivoSlider,goto andNivoSlider.

CreationofaNivoSlider

1) Onceyou’vegoneto andNivoSlider,you’llneedtochooseanimage(ormorethanoneimages)thatwillappear.Asshownright,select“Browse”underUploadanewslideimage,andselectaphoto.Upload.

Note:Beforeaddingphotos,cropeachimageasnecessarytomakesuretheimagesyouuploadareallthesamesize.

2) Afteryouupload,you’llbesenttoapagewhereyoucanspecifyhowyouwanteachimagedisplayed.YoucanaddmoreimagesthroughthesamemechanismyouusedinStep1),andthey’llappearintheordertheywereuploaded(shownright).

3) Abovethelistofimages(shownright),thereisanothermenuofoptions.Here,youcanre-arrangeNivophotos,selectwhetherornotthey’republished,orselecttodeletethem;notethannoneofthesechangeswillbesaveduntilyouclick attheverybottomofthepage.

4) Ifyouselectanimage(“Image1:”or“Image2:”etc),youcangiveitaTitle,Description(here,makesuretochangetheTextformattoFullHTMLbeforeinsertingtext),youcanLinkslidetoURL,decidetoShowslideonspecificpages,andselecttheTransitionstyleinwhichtheslideswillprogress.

16

Note: ToLinkslidetoURL,insertthepathofthein-websitedestinationpage.Example: for“website.unt.edu/content/example,”insert“content/example.”

5) Underthe tab,youcaneditslidespeed,size,placement,andappearance.Forbestresults,select“Default”under“Theme,”donotenablethe

function,andclick .

6) tosavechanges.

On-PagePlacementoftheNivoSlider

TosendtheNivoSlidertoablockregion(asshowninthefirstexampleabove),gotoandBlocks.DragtheNivoSliderblockuptotheregioninwhichyouwishitto

fall(recommended:PrefaceFirst).Click tosave.

Now,yourNivoSliderwillbevisibleonallpagesofyourwebsite.

Note: You’llnoticethattextsaying“NivoSlider”isaboveyourpublishedNivoSlider.Totakethisaway,gobacktoStructure>Blocks,findtheNivoSliderblock,clickconfigure,andunder“BlockTitle,”replacetitlewith<none>.

17

7.TogglingAsexplainedin2.UsefulTerms,togglingisagreattoolfor“hiding”contenttoconservespace.It’scommonlyusedforFAQpages,whereaquestioncanbeclickedontoseeitsanswer,andthenclickedonagaintohidethatanswer.

Here’sanexample:https://spot.unt.edu/content/student-resources

7a.SetupFirst,goto ,“ContentAuthoring,”and“CKEditor.”UnderProfiles,selecteditforthe“Full”Profile.SelectADVANCEDCONTENTFILTER,andselectthe“Disabled”button(shownright),thenscrolldownand .

7b.CodeforToggling1)Totoggle,yourpage’sTextformatneedstobeinFullHTML(see4b.BasicPageforanexplanation).

2)Then,ineditmodeforyourpage,select“Switchtoplaintexteditor”(locatedbelowthebottomleftcornertheBody(Editsummary)section).Now,you’rereadytoinsertcode.

3)Copy-and-pasteeverythingthat’sbelow(allpurple,green,andbrowntextthat’sbetweenthetwoblacklines)intotheBody(Editsummary)section,andthen .

DONOTEDITTHEFOLLOWINGSECTION.

<styletype="text/css">a:hover{

cursor:pointer;

text-decoration:none;

}

</style>

<scripttype="text/javascript">

jQuery(document).delegate(".toggle",'click',function(){

varcollapser=jQuery('#toggle-'+this.id);

if(collapser.is(":visible")==false){

jQuery('.animated').hide();

18

collapser.show('slow');

}else{

collapser.hide('slow');

}

});

</script>

<p>Thisisanintroductoryphrasethatyoucanputabovetoggledmaterial.</p>

<h5class="toggle"id="thisistheidforfirstquestion"><a>Thisisyourfirstquestion?</a></h5>

<divid="toggle-thisistheidforfirstquestion"style="display:none;">

<pclass="rteindent1">Thisisyourfirstanswer.</p>

</div>

DONOTEDITTHEABOVESECTION.

Voila!Whenyouclickon“Thisisyourfirstquestion?”wordswillappearunderneath.Ifyouwanttoaddmore,keepreading!

4)Noticethe“thisistheidforfirstquestion”–thisistheuniqueidentifierforthefirstquestion/answerpair.Foreachadditionaltoggledpair,you’llneedtocreateanewID(withnospaces,nonumbers,andnocaps),whichcanbeanynonsenseyouprefer.

5)Toaddaquestion/answerpair,copyandpastethebrownsectionabovebelowthefirstquestion,andadjustwordingasnecessary.

5)Don’tchangeanyofthespacinginthecode;thesmallestchangescanrenderitinvalid.Justreplacewordingasnecessary.

7c.InsertingImagesintoToggledCode/TablesThebestwaytoaddimageswithintogglecodeisto:

1)Addtheimageoutsideofthetoggledmaterial.

2)Then,copyandpasteallthatisincludedandwithin<td><imagalt=""srcand/></td>.Asanexample,belowisanexampleofwhatyouwouldneedtocopy/paste:

<td><imgalt=""src="//advisortraining-devd7.unt.edu/sites/default/files/picturename.jpg"style="width:100px;height:55px;"/></td>

19

<tr>

<td><em>LauraFlowers,<em>ArtsandSciences</em></em></td>

<td><em>AdvisoroftheYear</em></td>

<tdclass="rtecenter"><imgalt=""src="//advisortraining-devd7.unt.edu/sites/default/files/ATW_Laura%20Flowers_0.jpg"style="width:126px;height:190px;"/></td>

</tr>

20

8.PageJumpsSometimes,apagehasalotofcontentonit.Ifyoudon’twanttotoggleandcondenseallofthatinformation,pagejumpshelpyoutogoquicklytoasectionofthatpage,eitherviaanoutsidelink,ora“tableofcontents”orlinkonthepageitself.

8a.In-PageJumps1)Forbothofthefollowingoptions(8aand8b),gotoeditmode.Highlightthetext/imagethat’satthetopofthesectionyouwanttojumpto.Then,clickontheanchorbutton(picturedright),andgivetheanchoraname(picturedbelowandright).

a2)Then,highlightthetext/imagethatyouwanttoleadtothesectionofthepagethatyoujustsetastheanchor.

a3)Selectthelinkbutton andunder“LinkType,”select“Linktoanchorinthetext”(picturedbelow).

Withinthe“SelectanAnchor”box(picturedleft),andunder“ByAnchorName,”choosetheanchoryoujustmadeandthenclick .

Click atthebottomofthepagewhenyou’redone.

8b.Out-of-pageJumpsWhatifyouwantedanoutsidelinktoleadtothatanchoryoujustmade?Easy!

Note: Youwillhavehadtocompleted8abefore8b.

b2)Aftersaving,clickonthelinkthatyoumade.That’lljumpyoudowntotheanchoritself,butnoticethattheURLatthetopofyourscreenchanged.

b3)CopyandpastethisnewURLtootherpagesthatyoumake,andit’llleadrighttothat“subset”ofthepage.

8c.DeletingAnchors/JumpsToremovethelinktotheanchor,clickonthetextthat’slinkedtoitandclick

Toremoveoredittheanchoritself,rightclickontheanchor(therewillbeanexttoit)andselect“EditAnchor”(tochangethename)or“RemoveAnchor.”

21

Note: Ifyouchangetheanchor’sname,itsURLwillchange.You’llneedtoeditanyplaceswhereyouputthatlink–theoldonewon’twork.

Rememberto allyourwork!

22

9.UserManagement9a.GrantingAccess

1)ToaddausertoaDrupal7website,gototheuserbar,andselect“People,”“AddUser.”

2)ForaUNTDrupalwebsite,usethenewuser’sUNTeuidastheir .Addthenewuser’se-mailaddress,andany (tomyknowledge,thepasswordyouenterisirrelevant,asUNTwillalreadyassociatetheireuidwiththeirUNTsystempassword).

Whenthenewusersignsin,theymustusetheirUNTeuidandUNTportalpassword.

3)Next,selectthenewuser’s as ,thenselectalloptionslistedunder.There’snoneedtoenable ,andthere’snoneedto

botherwith .

9b.EditingAccess

1)Toeditacurrentuser’spermissions,goto“People”and“Permissions,”then .

2)Goto under fortheuser’srow,andeditasyoulike.Imyselfdon’tknowwhatthedifferentpermissionsmean;foranyuserwhowillbemakingedits,Itypicallywouldgivethemallpermissions.

9c.DeletingAccess1)Todeleteordisableauser(fromthepagementionedin9aand9b),gotothedropdownboxpicturedtotheright.Here,youcanselectusersandblock,unblock,andcanceltheiraccounts,aswellasaddtoorremovefromtheirroles.

2)Pressthe“Update”buttontosavechanges.

23

10. OtherResourcesGeneral https://omega.unt.edu/WebDevelopment,ITServices,CollegeofArts&Sciences

http://itservices.cas.unt.edu/services/web

HelpDesk,UniversityIT https://it.unt.edu/drupaluserhelpNivoSlider https://www.ostraining.com/blog/drupal/nivo-slider/HTMLCodingInstructions www.w3schools.comITSSCentralWebServices(CWS) https://itss.untsystem.edu/divisions/ets/cwsITSSCWSServiceNowTicketingSystem

Here’swhereyoucansubmita“helpme!”tickettothegeniusfolkatCWS.

1) Gotohttps://unts.service-now.com/andloginwithyourEUIDandpassword.

2) GotoRequestaService>WebServices>Internetandthenselecttheitemthatbestdescribesyourrequestorissue.

3) CompletetheformandclickOrderNow.UNTIdentityGuide http://identityguide.unt.edu/build-your-project/web-

email-social-media

ThispublicationisprovidedbytheUniversityInformationTechnologyDrupalUserGroup,April2017.Formoreinformation,contacttheauthor,Dr.MarianSmith,orUITDrupalHelpDesk.