Basic Guide for the Extension County Website Management …County Website Management System Log into your website Login: You must have a UNL account – this is the same account you

February2017 Page1 IANRMedia

BasicGuidefortheExtensionCountyWebsiteManagementSystem

Logintoyourwebsite

Login:YoumusthaveaUNLaccount–thisisthesameaccountyouuseforMyUNL(Blackboard),UNLEvents

(calendar)system,UNLEmail,etc. Example:hhusker2

1. Onanypagewithinyourwebsite,clickontheUNLLoginlinkintheupper,rightofthescreen(nexttothe

Searchbox).

2. EnteryourusernameandpasswordandclickLogIn.

Tologout,clickontheLogoutlinkintheupperrightcornerintheAdministrationtoolbar(black).

Thesystemwillautomaticallytimeoutafter30minutesofinactivity.

EditContentonYourWebsite Afterloggingin,theAdministrationtoolbar(black)andtheShortcutsmenubar(grey)willdisplayacrossthetopof

yourpageaswellastheView/Edit/Group/Revisionstabs.

TheStructureandConfigurationoptionsontheAdministrationtoolbararedisabled.Forbasicmanagementof

yourwebsite–adding,updating,ordeletingcontent–usetheoptionsontheShortcutmenubar.ClickingtheHomeiconontheAdministrationtoolbargoestothemainExtensionsite’sadministrationhomepage,notthehomepageforyoursite.Togotothehomepageofyoursite,clickthewebsitename(inthesiteheaderabovetheMainMenuorinthebreadcrumbs).

Shortcutmenubar

• Addcontent:createanArticle,Basicpage,FeaturedPromoorWebformorUploadFiles.

• GroupContent:viewalistoffallthepagesonthesite.• Filebrowser:viewanduploadfiles(images,PDFs,etc.).

• WebGuide:viewhelpwebinars,helpdocumentationandcontactinformationforsupport.


Tabsatthetoprightofeachpage

• View:viewthelive(public)page.• Edit:editcontentonthepage.• Revisions:viewpreviousversionsofthepageandrevertbackifneeded.• Group:manageyoursite’sMainMenu(navigationlinks)andadd/editusers.

SwitchtoNew2016Layout

Beforeswitchingtothenew2016layout,createarticlesforthecontentyouwantpostedinthemaincontentarea

onthehomepageandthemain4-Hpage.Onceyoursiteisswitchedtothenewlayout,anythingenteredintothe

homepageeditorBodywillnotdisplay.Instead,thehomepagemaincontentareawilldisplayanarticlefeed.The

feedautomaticallylinkstoeacharticleyoucreated.

1. Tousethenew2016layout,clicktheEdittabonthehomepage.

2. Atthetopofthepage,checktheboxnexttoUsenew2016layoutthenclicktheSavebutton.

Homepage

ThefollowingitemscanbeupdatedbyclickingtheEdittabonthehomepage.

• FacebookPageLinkforthefacebookwidget(displaysinrightcolumn)

• EventsLinkfortheEventcalendar(displaysinrightcolumn)

• RelatedLinksandContactinfo(displaysingreylocalfooterregion)

Afterswitchingtothenewlayout,youwon'tbeabletoeditthemain

contentareaonthehomepage.Themaincontentareawilldisplayan

articlefeed.

The"ShowArticleFeed"and"StackBodyandFacebook"optionsarenotapplicablewhenusingthenew2016layout.


Homepagearticlefeed

OnlyArticlepageswilldisplayinthehomepagefeed.Thefeeddisplaysthearticletitle,summaryandareadmore

link.BasicpageswillnotdisplayinthefeedbutcanbelinkedtofromtheHomeand4-HMainMenudropdowns

andinthegreymenuboxthatdisplaysonthehomepageandmain4-Hpage.

Toaddanewarticle,clickAddcontentontheShortcutsmenubarthenclickArticle.Whencreatinganarticle,you

havetheoptionofenteringasummary.IftheSummaryfieldisleftblank,up-tothefirst800charactersofthearticlebodywilldisplayasthesummaryinthefeed.

Wheneditinganarticle,youcanselectwhetherornotitwilldisplayinthehomepagefeed.Bydefault,articles

displayinthefeedinorderofpublishdatewiththenewestarticlesdisplayingfirst.However,youcanselectto

makeanarticlesticky,sothatitalwaysdisplaysatthetopofthefeed,regardlessofitspublishdate.

Displayapostpermanentlyatthetopofthefeed

1. ClicktheEdittabonthearticlepage.Scrolltothebottom

ofthepageandclickPublishingoptionsontheleftsidenavigation.

2. ChecktheboxnexttoStickyattopofliststhenclicktheSavebutton.

Removeapostfromthehomepagefeed

1. ClicktheEdittabonthearticlepage.Scrolltothebottom

ofthepageandclickPublishingoptionsontheleftsidenavigation.

2. UnchecktheboxnexttoPromotedtofrontpageandclicktheSavebutton.ThearticlewillstillbevisibletopeoplegoingtothepagedirectlybytypingintheURL(Webaddress).

Changetheorderpostsdisplayinthearticlefeed

1. ClicktheEdittabonthearticlepage.ScrolltothebottomofthepageandclickAuthoringinformationontheleftsidenavigation.

2. ChangetheAuthoredondatetoanearlierorlaterdate.Articlepostsdisplayinorderofpublishdatewiththenewestarticlesdisplayingfirst.


4-HPage

Themain4-Hpagefeedworkssimilartothehomepagefeed.Todisplayan

articleinthe4-Hfeed,select4-HYouthDevelopmentontheeditarticlepageunderRelatedProgram.

RelatedPrograms

Todisplayanarticleinarelatedprogrampagefeed,selectthenameofthe

programontheeditarticlepage.

Addoreditcontentintheeditor

ClickontheEdittabtobeginaddingcontent(text,image,orlink)orto

updatecontentonthepage.

Allsavedchangesareimmediatelymadelive.

ToviewalloftheEditoroptions,clickontheShow/hidetoolbarbutton(outlinedinredinthescreenshotbelow).

Toenlargetheeditpane,click-hold-and-dragonthetwodiagonallinesinthebottom

rightcorner.

TheEditorhastwomodes,WYSIWYGandHTML.TheWYSIWYGmodeworkssimilartousingawordprocesserlike

MicrosoftWord.WorkingintheHTMLmoderequiresknowinghowtowriteandeditHTMLcode.Youmayswitch

backandforthbetweentheWYSIWYGandHTMLmodewhileeditingapage.TheEditormodedisplayedthelast

timeyousavedthepageisthemodethatwilldisplaythenexttimeyoueditit.

Typetextintheeditororpasteitinfromanothersource• Whentypinginnewtext,presstheEnterkeytocreateanewparagraph.• Whenyoupasteintext,usethePasteasPlainTextbuttontopastethetextwithoutany

formattingorthePastefromWordbuttontopastetextfromWordalongwiththeformatting.

• Whenenteringabulletornumberedlist,selectthelisttypeandpresstheEnterkeyaftereachlistitem.

PresstheEnterkeytwiceafterthelastlistitemtoendthelist.

• Whenyouaddheadingsonthepage,thelargestsizeavailableintheFormatdrop-downmenuisHeading2.Thehigherthenumber,thesmallertheheadingtextsize.

• Ifyouhavedatathatneedstodisplayinatable,usetheResponsiveTableGeneratorTooltoensurethe

tablewilldisplaycorrectlyonbothdesktopandmobiledevices(seelinkbelow).

http://ianrmedia.unl.edu/responsive-table-generator-tool


Previewyourchanges

YoumayPreviewanychangesbeforesavingwiththePreviewbuttonatthebottomofthescreen.Previewopens

anewpaneabovetheeditpaneonthesamepage.

UsingthePreviewoptiondeactivatestheUndo/Redobuttonsandthereisno“Cancel”option.Ifyoumadechangesanddonotwantthechanges,simplyclickontheViewtabtoexittheEditmode.

Saveyourchanges

BesuretoSAVEyourchangesbeforeclickingaMainMenulink

ortabotherwiseyourchangeswillbelost.Thereisno“SaveandContinue”option.AfteryouclicktheSavebuttonatthebottomofthescreen,youwillnolongerbeontheEdittab,you’llbeontheViewtabandaStatusbannerwilldisplayatthetopofthepage.ClickontheEdittabtoresumeupdates.

Allsavedchangesonapublishedpageareimmediatelyvisiblebythepublic.

Insert/editanimage

ImprovedownloadingtimebyresizingyourphotosinanimageeditingprogramlikeAdobePhotoshopbefore

uploadingthemorintheFileBrowserafteryouuploadthem.

Recommendedimagesizes

• 1600-1200pxwideforImagesthatstretchthewidthofthebrowser(FeaturedPromo)

• Minimumof350pxwideforsmallimages(useagridlayouttodisplayimagesatasizesmallerthan350px

wide)

ResizeimageinFileBrowser

1. ClickontheimagenameandclickResizeontheFileBrowsermenubar.

2. Enterthenewwidth,clickintheheightboxtoautopopulateitwithaproportionalheightandclickthe

Resizebutton.Theresizedimagewillbenamedslightlydifferentthantheoriginal.

RenameyourimagesbeforeuploadingthemorrenamethemintheFileBrowser.

RecommendationfornamingImagefiles

• Useshort,descriptivenames(ex:bull-snake.jpginsteadofimg00015.jpg).

• Separatewordswithhyphens,donotusespacesorunderscores(ex:prairie-rattlesnake.jpginsteadof

prairierattlesnake.jpg).

• Usealllowercaseletters(ex:prairie-rattlesnake.jpginsteadofPrairieRattleSnake.jpg).

RenameimageinFileBrowser

1. ClickontheimagenameandclickRenameontheFileBrowsermenubar.2. EnterthenewnameandclicktheRenamebutton.


ToaddanimageusingtheWYSIWYGeditor,placethecursorintheeditorwhereyouwanttheimagetodisplay

andclickontheInsert/EditImagebutton.

1. IntheInsert/EditImagedialogbox,clickontheBrowsebuttontoopentheFileBrowserdialogbox.

2. Uploadtheimagefileintotherespectivecountyimagefolder/directory.Ifyouhavealotofimagefilesitmaybehelpfultoorganizethemintoadditionalfolders/directories.a. ClickonUploadintheFileBrowsermenubartoopentheFiledialogbox.

b. IntheFiledialogbox,clickontheBrowseorChooseFilebutton(buttonvariesbybrowser)toopenthedialogboxshowingfilesandfoldersonyourlocalcomputer

ornetworkdrive.

c. SelectthefileandclickontheOpenbutton.Thefilenamewilldisplayinthetext

box.Youcanignorethe“thumbnails”options.

d. ClickontheUploadbuttoninsidetheFiledialogbox.Optional:Youmayuploadanotherfileintothesame

folderbyclickingontheBrowseorChooseFilebuttonagain.

e. Whenfinisheduploadingthefile(s)intothefolder,clickontheXtoclosetheFiledialogbox.

3. IntheFileBrowserdialogboxthenewfilewillbehighlighted,clickontheInsertfilebutton ordouble-

clickthefilenametoreturntotheInsert/EditImagedialogbox.

4. CompletetheInsert/EditImagedialogboxoptionslistedbelow.

a. IntheImageDescriptiontextbox,enterAlternativeTextwhichbrieflydescribestheimage.ThisisrequiredforAccessibilitystandardsasitis

usedbyscreenreaderprogramsforthevisuallyimpaired.

b. SelecttheAlignmentvalueofLeftorRightifyouwantthetexttoflowaroundtheimage.OtheroptionsarenotusedinaWebpage.

c. Iftheimageistoowide,youcanenteranewwidthinthefirstDimensionsfieldwhileleavingthesecondfieldforheightempty.Thiswillallowthe

imagetoremainresponsive.

d. Toaddpaddingaroundtheimage,enterasmallnumber(6-8)intheVerticalandHorizontalSpacefield.5. ClickonInsertbuttontoclosetheInsert/EditImagedialogbox.

6. Optional–UsetheUNLStyles–ImageFrameoptiontogivetheimagetheUNLWDNlightgray

borderstyleandtheappropriatespacingbetweentextandimage.

a. Selecttheimage.

b. ClickontheStylesdrop-downmenuandselectImageFrame.


Insert/editalinktoanuploadeddocument(PDF)file

1. Highlight(select)thetextyouwanttolinktothefile.

2. ClickontheInsert/EditLinkbuttontoopenthedialog box.

3. IntheInsert/EditLinkdialogbox,clickontheBrowsebuttontoopentheFileBrowserdialogbox.

a. UploadthePDFfileintotherespectivecountydocumentsfolder/directory.

b. ClickonUploadintheFileBrowsermenubartoopentheFiledialogbox.

c. IntheFiledialogbox,clickontheBrowseorChooseFilebutton(buttonvariesbybrowser)toopenthedialogboxshowingfilesandfoldersonyourlocalcomputer

ornetworkdrive.

d. SelectthefileandclickontheOpenbutton.Thefilenamewilldisplayinthetext

box.Youcanignorethe“thumbnails”options.

e. ClickontheUploadbuttoninsidetheFiledialogbox.Optional:Youmayupload

anotherfileintothesamefolderbyclickingontheBrowseorChooseFilebuttonagain.

f. Whenfinisheduploadingthefile(s)intothefolder,clickontheXtoclosetheFiledialogbox.

4. IntheFileBrowserdialogboxthenewfilewillbehighlighted,clickonInsertfile inthemenubaror

double-clickthefilenametoreturntotheInsert/EditLinkdialogbox.

5. Target–Ignorethissetting.

6. Title–Thisisadescriptionthatdisplaysasatooltipbubblewhenthemousepointerishoveredoverthelink.

Itisalsousedbyscreenreaderprogramsforthevisuallyimpaired.

7. Class–Ignorethissetting.

8. ClickontheInsertbuttonwhenfinished(orUpdatewhencorrectingalink).


Insert/editalinktoawebpage(URL)oremailaddress

1. Highlight(select)textyouwanttolink.

2. ClickontheInsert/EditLinkbutton toopenthedialogbox.

3. EntertheLinkURL.Youmaycreatealinktoapagewithinyourwebsite,a

pageonanotherwebsite,oranemailaddress.

• Whenlinkingtoapageoutsideofyourwebsite,typeorpastethecompleteURL(includinghttp://)intotheLinkURLtextbox.HINT:Toavoidaspellingerror,openthepageyouwanttolinktoinaseparatebrowserwindowandcopytheURL(Webaddress).

i. Target–Optional.ItisrecommendedthatyouleaveTargetatthedefault(NotSet)setting,whenlinking

toapagewithinyoursite.Thiswillopenthepageinthesamewindow.Whenlinkingtoapageona

differentsite,changethesettingtoOpeninaNewWindow(e.g.,linkingtoanAdobeConnectwebinarURL).

ii. Title–Optional.Usedtoprovideadditionalinformationthatthelinktextdoesn’tprovide.

iii. Class–Ignorethissetting.

• Whenlinkingtoapagewithinyourwebsite,entertheportionofthepageURLthatidentifiesthepagewithinyoursite(e.g.,

statewide/buffalo/page-name/).Donotinclude

http://extension.unl.edu/.

HINT:OpenanewtabandtypetheURLforyourwebsite

intotheaddressbarandpressEnter.Youwillnowhavea

secondoccurrenceofeditingyourwebsite.Navigatetothe

pageyouwanttolinktoandcopythe“siteportion”of

thatpageURL(seeexampleatright).Returntotheoriginal

browsertabandpastethetextintotheLinkURLtextbox.i. Target–Ignorethissetting.



• Whencreatinganemaillink,typemailto:followedbytheemailaddresswithnospacesintheLinkURLtextbox

(e.g.,mailto:[email protected]).

i. Target–Ignorethissetting.



ClickontheInsertbuttonwhenfinished(orUpdatewhencorrectingalink).


Addanewpage

1. ClickonAddcontentintheShortcutsmenu(graybar).

2. ClickBasicpageorArticle.• CreateArticlesfortimelycontentthatdisplaysonthehomepagefeed,main4-HpagefeedorRelated

Programfeed,likeanannouncementforanupcomingevent.

• CreateBasicpagesforpermanentcontentlikean“aboutus”page.BasicpageswillnotdisplayinthefeedbutcanbebelinkedtofromtheHomeor4-HMainMenudropdownandinthegreymenubox

thatdisplaysonthehomepageormain4-Hpage.

3. Atthetopofthescreen,completetheTitlefield.TheTitleisusedinmultipleplaces(See“FairPremiumBook”

intheexamplescreenbelow).

• PageTitle–displaysonthebrowsertab.ThePageTitleisthefirstlineoftextthatdisplaysonalistinginGooglesearchresults.

• FilenameintheURL(Webaddress)

• Breadcrumbmenutextforthepage• Firstheadingonthepage<h1>–displayedimmediatelybelowtheMainMenu.

4. Editsummary–WhencreatingaBasicpageyoucanignoretheEditsummarylink.WhencreatinganArticle,clicktheEditsummarylinktocustomizethetextthatdisplaysonthehomepagefeed,main4-Hpagefeedor

RelatedProgramfeed.IftheSummaryfieldisleftblank,up-tothefirst800charactersofthearticlebodywilldisplayinthefeed.

5. Enteryourcontent.Seeprevioussectionsformoreinformation.

IfyouwanttodisplayyourcontentintheUNLGridFramework(columns),pleaseseetheIANRMediaUNLcms

pageformoreinformation(http://ianrmedia.unl.edu/unlcms).

6. RelatedProgram–WhencreatingaBasicpageyoucanignoretherelatedprogramoption.Whencreatingan

Article,selectingarelatedprogramwilldisplaythearticleinthefeedontherelatedprogram’spage.Selecting

4-HYouthDevelopmentwilldisplaythearticleinthemain4-Hpagefeed.

7. SiteHierarchyfields–ChecktheboxnexttoDisplayinmenutoaddalinktothepageintheredmenubar.

UnderParentitemselectHomeor[CountyName]4-Htodisplaythepageintheredmenubardropdown

underHomeor[CountyName]4-Handinthegreymenuboxthatdisplaysonthosepages.


8. Saveyournewpage.YouwillseeagreenStatus-successmessageatthetopoftheViewpageversion.

Thispageisliveinyourwebsite,howeversearchenginesanduserswillnotbeabletofindthepageunlessyoulinktoitfromanotherpage.

MenuBar

Afterswitchingtothenew2016layout,themainmenushoulddisplayHome,[CountyName]4-H,Educational

Programs,andNebraskaExtensionacrossthetop.Youmayaddup-totwoadditionallinksontheMainMenu.

Donotdisplaymorethansixlinksonthemainmenu.Havingmorethansixlinkswillcausethemainmenutowrap

ontotwolineswhichshouldbeavoided.Inaddition,trytolimitthenumberofmainmenudropdownlinksto

aroundsixeach.Limitingthenumberofnavigationlinkstoamaximumofsixacrossandsixdownprovidesan

optimumuserexperience.

AddpagesinthedropdownmenuunderHomeor4-H

ClicktheGrouptabonthehomepage.

ClickonMenusthenclickonlistlinks.

Click-hold-and-dragthemovetool(lookslikeacross)nexttothe

pageanddragitunderHomeor[CountyName]4-Htowhereitlooksindented.

MakesurethecheckboxunderEnabledischeckednexttothepage.PageswiththecheckboxcheckedunderEnabledwilldisplayontheredmenubarorinthedropdown.Youcan

removeapagefromthemenubyuncheckingtheEnabledcheckbox.

ClickSaveconfiguration

UseRevisionstoreturntopreviousversionofcontent

Ifyousaveanupdatetothecontentandthedisplayofcontentisnotcorrect,youcanreverttoaprevious

version.ClickontheRevisionstabtoseethepageedits(displayedinreversechronologicalorder).


TheComparebuttonwillshowyouside-by-sidecomparisonsoftheHTMLcodeviewforthe2selectedversions.

Toreturntoapreviousrevision,selectthatversionandclickontheRevertlinkunderOperations.Youwillasecondscreenaskingyoutoconfirmtherequest.ClickontheRevertbuttontocompletetheprocess.Youwill

thenseethemessagethatthepagecontenthasbeenchangedbacktoapreviousversion.Allversionsofthepagearestillavailable.

Removeapagefrompublicview

TopreventthepublicfromgoingtothepagewithadirectURL(Webaddress),youcanunPublishthepage.

3. ClicktheEdittabonthepage.Scrolltothebottomofthepageand

clickPublishingoptionsontheleftsidenavigation.1. UncheckPublishedandclickontheSavebutton.

ToreturntothepageloginandentertheURLinthebrowseraddressbarorgototheGroupContentscreenandclickonthepageTitle.

ThesafestwaytoDeleteapageistogototheEditmodeofthatpage.Click

ontheDeletebuttonatthebottomofthescreen.Youwillreceiveawarning

screenandneedtoclickonthesecondDeletebutton.Thiswilldeletethe

pageANDALLcontentthatwascreatedasapartofthepage.

Additionalwebsiteitems

FeaturedPromoonthehomepageToaddanimagewithtextandalinkatthetopofthehomepageclickontheAddContentmenuoptionandthen

selectFeaturedPromo.The“FeaturedPromo”rotationhasalimitof5items.IftheCountysitedoesnothave5

items,thesliderotationwillincludeslidesfromtheUNLExtensionadministrationsite.Forbestimagedisplay,pleaseuseanimagewithawidthofatleast1200px.

Foragraphicaldescriptionofthecompletehomepagecontentlayoutpleasegoto

http://extension.unl.edu/guide/statewide-homepage.png.

Webform

ForinstructionsonhowtocreateaWebformpage,pleaseseethe“HowtoCreateaForminUNLcms”pageinthe

IANRmediawebsite(http://ianrmedia.unl.edu/how-create-form-unlcms).

Documents

Basic Guide for the Extension County Website Management …County Website Management System Log into your website Login: You must have a UNL account – this is the same account you