Drupal 7 Manual Omega Theme: www.nwu.ac.za distance.nwu.ac.za news.nwu.ac.za IT Training & Empwerment
Table f Cntents 1. Take nte... 1 2. Hw t lgin... 2 3. Starting a page... 3 4. Editing an existing page... 6 4.1. Methd 1 (Selecting a Business Unit)... 6 4.2. Methd 2 (navigating via hme page)... 7 4.3. Methd 3 (using page URL)... 8 5. Editing page... 8 5.1. Tlbar... 9 5.3. Adding cntent... 12 5.3.1. Uplading files... 12 5.3.2. Hyperlinks... 13 5.3.2.1. Linking t a website... 13 5.3.2.2. Linking t anther Drupal page n the NWU dmain... 13 5.3.2.3. Linking t a dcument... 14 5.3.2.4. Linking t an e-mail address... 15 5.3.2.5. Linking t an anchr... 16 5.3.3. Images... 17 5.3.3.1. Resizing images befre uplading them t Drupal... 17 5.3.3.2. Uplading images t Drupal... 20 5.3.3.3. Inserting an image in yur website... 21 6. Multilingual pages and page translatin... 22 Table f Cntents i
Drupal 7 Manual: Omega theme 1. Take nte Remember this url t lg in with: http://www.nwu.ac.za/user/lgin Always use Mzilla Firefx r Ggle Chrme as brwser when creating r editing in Drupal. If this brwser is nt available n yur wrkstatin, please lg an IT-Help and request the Firefx versin as used fr Share. Never uplad dcuments in Wrd frmat. Save the dcument t PDF first. Keep images t belw 1MB filesize. Try t uplad images in png frmat rather than jpeg. There must be n spaces in filenames when uplading dcuments r images t Drupal, fr example: test image.png shuld rather be test-image.png r testimage.png Cntact the Web Office any time: WebOffice@nwu.ac.za 1
2. Hw t lgin Open yur Firefx brwser and type http://www.nwu.ac.za/user/lgin in die address line t pen Drupal. Lgin with yur NWU staff number and netwrk passwrd. (We recmmend that yu bkmark this page) 12407496 NWU# Netwrk Passwrd After successful lgin, the fllwing screen (with the black Administratin tlbar at the tp f the Drupal windw) will appear. 2
3. Starting a page 3.1. Create a new page Lg in t Drupal (see sectin 2) G t Cntent> Add cntent Chse Infrmatin Abut Cntinue with page set-up (see the next sectin). 3.2. Page set-up The page set-up is very imprtant, as it will determine yur page ranking, language settings, which business unit the page will fall under (imprtant fr navigatin) and mre. It is als very easy! 3
Yu will need t cmplete the fllwing fields: Title Bdy (d the rest f the set-ups first, then return t bdy) Language (start with English. Once yur page is cmplete, there is a translate ptin t create the Afrikaans and Setswana equivalents). URL path settings (This will be yur web address) Meta tags (imprtant fr search engine ptimisatin and page ranking) 3.2.1. Title [fr sitemap]:* a) Hme page If the page yu are creating is the first page (hme page) f yur new site, use nly the name f yur department. The NWU name will be added autmatically. An example is: Yu type: Research Supprt Yur web page visitrs will see the fllwing: b) Secndary pages If the page yu are creating is a secndary page, the rder changes smewhat. Nw write page tpic, then yur business unit. The NWU name will nce again be added autmatically. Yu type fr example: Cntact Research Supprt Tip: Ggle cuts the page title after 70 characters remember t keep the limitatin in mind. Yu can use acrnyms prvided it is the recgnised name f yur department (e.g. CTexT instead f Centre fr Text Technlgy). 3.2.2. Language Chse the relevant language (d nt chse Language neutral). We recmmend that yu start with English. Once yur page has been set up, there is a translate ptin t create Afrikaans and Setswana versins f the same page. 4
3.2.3. Business Unit* Click the drp-dwn menu and select yur Business Unit frm the list displayed. Please make sure that yu have chsen the right Business Unit befre saving r publishing yur page. 3.2.4. URL path settings The page URL is the address that peple see when the page is listed in search engine results: G t URL path settings t create a custm URL: Generate autmatic URL alias shuld nt be ticked Anything yu add in the field will autmatically be added t the NWU dmain URL, fr example: Yu type: ctext The URL that will be created will be: www.nwu.ac.za/ctext Similarly, if yu type: ctext/staff The URL will be: www.nwu.ac.za/ctext/staff If yu are creating a hme page, nly type the name f yur department r business unit. It shuld be as shrt as pssible, but shuld als still make sense t the user. If yu have an acrnym, use nly that, e.g. www.nwu.ac.za/trade Fr secndary pages, d the abve, but add the subject f the page, e.g: trade/visin-and-missin. The URL will then be www.nwu.ac.za/trade/visin-and-missin IMPORTANT: use nly lwer case fr URL path settings, and put - between wrds where necessary. There must be n spaces! 5
4. Editing an existing page 4.1. Methd 1 (Selecting a Business Unit) Lg in t Drupal by ging t www.nwu.ac.za/user/lgin Click n Cntent Select the relevant Business Unit frm the given drp-dwn list Click n Apply A list f all the pages within that business unit will appear: 6
T list these pages in alphabetical rder, click n Title t srt the list. Find the relevant page and click n edit (in the peratins clumn). Yu will nw be in the editing page (see sectin 5) 4.2. Methd 2 (navigating via hme page) Lg in t Drupal by ging t www.nwu.ac.za/user/lgin Click n the hme icn in the upper right crner Navigate t yur page (the same way yu wuld if yu were a user visiting the hme page) Yu will see several tabs. Select the edit tab. If yu cannt see the tab, yu either did nt lg in crrectly, r yu d nt have permissin t edit this page. Cntact the Web Office fr assistance. 3. 7
4.3. Methd 3 (using page URL) Lg in t Drupal by ging t www.nwu.ac.za/user/lgin Insert page URL in brwser address bar Enter Yu will see several tabs. Select the edit tab. If yu cannt see the tab, yu either did nt lg in crrectly, r yu d nt have permissin t edit this page. Cntact the Web Office fr assistance. 3. Yu will nw be in the editing page (see sectin 5) 5. Editing page Yu shuld nw be n the editing page Ensure that all pre-sets are cmpleted (see sectin 3) G t the Bdy area Familiarise yurself with the tlbar Insert yur headings Start adding cntent 8
5.1. Tlbar Surce: t edit the html surce cde Cut, Paste Paste, Paste as plain text, Paste frm Wrd Und, Red Find, Replace Image: t insert a picture Flash: t insert flash cntent Table: t insert a table Insert Hrizntal Line Insert Special Character Maximize: t enlarge the editr t full page size Shw Blcks: t shw paragraph blcks Paragraph Frmat: NWU Web Template styles Fr fnt frmatting Fr paragraph frmatting Link, unlink Anchr: t add an anchr 5.2. Headings Crrect use f headings is very imprtant, nt nly t rientate readers, but als fr search engine ptimisatin. All NWU pages use styles that were pre-set as part f the NWU s theme in Drupal 7 (Search engines priritise text that was given the Heading 1 styles fr example). 9
We recmmend the fllwing frmat in the interest f standardisatin: 5.2.1. Yur business unit hme page Heading 1: Faculty name Heading 1 (new line): Business unit Heading 2: Tpic Fnt clurs may be changed, prvided it adheres t the NWU crprate identity. 5.2.2. Secndary pages Heading 1: Business Unit Heading 1: Tpic Heading 2: Sub-tpics 10
5.2.3. Banners There is an ptin t use banners instead f text headings. Banners, while visually mre attractive, d hwever invlve mre careful set-up t ensure SEO. The fllwing has t be set in the picture prperties: Alternative text (shws up when brwsers d nt shw pictures. Als imprtant fr prgrammes that make use f speech technlgy when users can t see the screen). Width and height must bth be set at 100%. This ensures scalability fr users wh use different devices (e.g mbile screens). It will hwever nt wrk if the banner is nt designed in the right size. Cntact Graphiks, yur marketing department r the Institutinal Web Office fr assistance! Example: 11
5.3. Adding cntent 5.3.1. Uplading files IMPORTANT: In rder t be able t link t a dcument fr example, the dcument (file) must first be upladed nt the Drupal server. Make sure that yur filename cntains n spaces as this will result in errr messages in n yur editing page. Replace spaces with hyphens (e.g. test-dcument.pdf). The filename shuld als make sense and act as a type f descriptin f the dcument (e.g.nwuannualreprt.pdf). This will benefit SEO Assuming yu are lgged in n Drupal, g t Cntent > Files The file brwser windw, displaying all the business units in alphabetical rder, will appear. Navigate t yur business unit and chse (r create) a flder t stre yur dcuments in. Click n the uplad files icn Click n Brwse s find the file n yur cmputer hard drive. Multiple uplads are pssible. Just brwse t each file yu want t uplad. Click n Ok. The file(s) are nw upladed nt the Drupal server, and are ready t be linked t (see sectin 5.3.2). IMPORTANT: If yu uplad a file/dcument in a flder, and a file/dcument already exists within that same flder with the same name, the newer versin will autmatically verwrite the ld versin 12
5.3.2. Hyperlinks 5.3.2.1. Linking t a website Yu shuld nw be in the bdy windw n the editing page. Highlight the text that has t link t a website Click n the link buttn and the Link dialgue bx will pen up. Chse Link Type URL and insert the page URL that yu want t link t in the URL field Nw navigate t the Target tab and select New Windw (_blank). Click n OK. 5.3.2.2. Linking t anther Drupal page n the NWU dmain Yu shuld nw be in the bdy windw n the editing page. Highlight the text that has t link t the Durpal page. Click n the link buttn and the Link dialgue bx will pen up. Chse Link Type URL and insert the URL f the page that yu want t link t (cpy the URL when yu visit the page in yur brwser). 13
Nw navigate t the Target tab and select New Windw (_blank). Click n OK. 5.3.2.3. Linking t a dcument IMPORTANT: Linking t a dcument can nly ccur nce the dcument has been upladed (see sectin 5.3.1). This example will be based n linking t a dcument that had already been upladed. Yu shuld nw be in the bdy windw n the editing page. Highlight the text that has t link t the dcument. Click n the link buttn and the Link dialgue bx will pen up. Chse Link Type URL Click n the Brwse Server buttn 14
The File Brwser windw will appear. Business units are displayed in alphabetical rder. Scrll t and select the relevant business unit. G the flder where yur upladed the dcument that yu want t link t (see sectin 5.3.1). Right click n the dcument and chse Select file Nw navigate t the Target tab and select New Windw (_blank). Click n OK. 5.3.2.4. Linking t an e-mail address A s-called mailt link allws the user t send an e-mail when clicking n it. Yu shuld nw be in the bdy windw n the editing page. Highlight the text that has t link t the e-mail address. Click n the link buttn and the Link dialgue bx will pen up. Chse Link Type E-mail 15
Type (r paste) the relevant e-mail address in the E-Mail Address field. Yu have the ptin t create a custmised subject and message t accmpany the e-mail autmatically. This is hwever nt cmpulsry. Click n OK. 5.3.2.5. Linking t an anchr Anchrs allw yu t link t a specific place within the same webpage by creating an anchr link. Inserting an anchr Yu shuld nw be in the bdy windw n the editing page. Highlight the text (r put the cursr right befre it) that has t link t be an anchr. Click n the anchr buttn and the anchr dialgue bx will pen up. Type in any name fr yur anchr that will make sense t yu, prvided it is nly ne wrd r is hyphenated where mre than ne wrd is needed (there can be n spaces in the name!) Yu will nw have an anchr t link t. 16
Linking t the anchr Yu shuld nw be in the bdy windw n the editing page. Highlight the text that has t link t be an anchr. Click n the link buttn and the Link dialgue bx will pen up. Chse Link Type Link t anchr in the text Click n the anchr name that yu created. 5.3.3. Images IMPORTANT: When uplading yur image nt the Drupal server (using the same steps yu wuld when uplading a dcument see sectin 5.3.1), ensure that it is as clse t the right size as pssible and nt bigger than 1MB. Resizing the image in Drupal may cause distrtin. It als just resizes the image withut reducing the filesize (space the image will take up in the server). Preferrably use PNG frmats. 5.3.3.1. Resizing images befre uplading them t Drupal Yu may use any pht-editing sftware (such as Adbe Phtshp) t edit yur phts. The belw example makes use f Windws Paint (a default prgramme included in mst versins f Windws). G t the Windws start buttn n the bttm left side f yur screen and select Paint Yu will nw be in the Paint prgramme Click n the File icn and select Open Click n the File icn and select Open Navigate t the image yu want and pen it 17
The image nw has t be resized. D nt uplad the image t Drupal befre the image is rughly the right size. Resizing directly in Drupal, will change the image measurements, but the file size (the space the image will take up n the Drupal server) will remain the same, thus wasting precius memry. There are tw ways t resize in Paint: Yu want t make the image smaller but d nt have exact measurements: G t Hme>Resize Chse the Percentage ptin Make sure that Maintain aspect rati is ticked Enter Hrizntal and Vertical percentages. This indicates the percentage by which the image will be made smaller. If yu insert 25 fr example (it will autmatically be the same fr bth because yu have chsen t maintain aspect rati...meaning it will resize prprtinally), it means that yur image will be resized t 25% f its current size. Similarly, had yu inserted 50%, bth the width and height wuld have been halved. 18
Yu have the exact size that yur image shuld be in pixels An example is when yu knw the pht yu shuld uplad with yur news article shuld be at least 600 pixels wide. G t Hme>Resize Chse the Pixels ptin Make sure that Maintain aspect rati is ticked Here yu need nly enter ne pixel value (e.g. 600 hrizntal). Because yu have chsen t maintain aspect rati, the vertical pixel value will autmatically adjust t the new hrizntal value, while maintaining the image prprtins. If yu d nt maintain aspect rati, distrtin f the image culd take place. G t File>Save as>png picture t save the image in PNG frmat n yur cmputer. We recmmend this frmat fr all web images. Yur image is nw ready t be upladed t Drupal and t insert int yur website. 19
5.3.3.2. Uplading images t Drupal Yu shuld nw be in the bdy windw n the editing page. Place the cursr where the image shuld appear n the web page. Click n the Image buttn. The Image Prperties ppup windw will be displayed. Click n Brwse Server The file brwser windw, displaying all the business units in alphabetical rder, will appear. Navigate t yur business unit and pen. Find the file within yur business unit that yu wish t uplad yur image t (yu can, fr example, create a file called Images under yur business unit. Yu can then uplad all yur images t this ne central place). Click n the Uplad files icn Click n Brwse s find the image n yur cmputer hard drive. Multiple uplads are pssible. Just brwse t each file yu want t uplad. Click n Ok. 20
The images are nw upladed nt the Drupal server, and are ready t be inserted int yur webpage (see sectin 5.3.3.3). IMPORTANT: If yu uplad an image in a flder, and an image already exists within that same flder with the same name, the newer versin will autmatically verwrite the ld versin 5.3.3.3. Inserting an image in yur website If yu had fllwed the steps in sectin 5.3.3.2 crrectly, yu shuld nw see the images that yu have upladed. Navigate t the image yu wish t insert and duble click The Image prperties pp-up windw will appear. If yu fllwed the steps in sectin 5.3.3.1 crrectly yur image sizes will be crrect, and yu will nt need t change that. Yu will, hwever, need t add Alternative text. Sme users turn ff image lading when using a mdem r have a slw cnnectin. Whatever yu type in this field will then display instead, still infrming the user what they wuld have seen, had the image displayed. It shuld therefre be quite descriptive. Chse whether yur image must align left, right r centre in the Alignment field. 21
The HSpace (hrisntal space) and VSpace (vertical space) fields refer t the space that will surrund the image. Only insert values if yu want padding arund yur image. The value that yu insert in the Brder will determine the thickness (if any) f the brder arund yur image (where 1 is very thin and 5 is much thicker fr example). If yu want n brder, simply leave the field blank r insert 0. 6. Multilingual pages and page translatin Lg in t Drupal by ging t www.nwu.ac.za/user/lgin Insert page URL in brwser address bar Enter Edit the English page. Click n the Translate ptin. Click n the add translatin buttn. A cpy f the English page will be made with the language autmatically set t the language yu chse t translate. Mdify the bdy f the page and save the page. 22