The Lgin Page Designer A new Lgin Page tab is nw available when yu g t Site Cnfiguratin. The purpse f the Admin Lgin Page is t give fundatin staff the pprtunity t build a custm, yet simple, layut fr their lgin page. This functinality was develped t allw fundatin staff t have mre cntrl ver the cntent f this page. When the custm lgin page is activated, dnrs wh are accessing the lgin page will be redirected t the custm layut page. If a fundatin decides t use a custm layut, it is recmmended t have a staff member that has sme HTML and CSS knwledge. The admin lgin page prvides a basic layut initially with place markers fr where yu shuld add specific sectins. The tls can be used t build ut the page frm there. The layut shwn abve is what all fundatins will initially have when they first access the Lgin page. This layut gives fundatins a basic frmat t fllw. Alternatively, a fundatin can build a cmpletely new layut. The image belw shws what a cmpleted Lgin Page may lk like nce the Lgin Frm Elements have been added and mdified. 1
#1 - Use Custm Layut? This setting at the tp f the Lgin Page cntrls whether yur site uses the default lgin page r yur wn custm page. 2
#2 The Editr Menu The Menu shwn belw cntains all the features that are available when making a custm lgin page layut. The table belw prvides a breakdwn f each menu ptin: File Menu Optin Descriptin New dcument Print CSS prperties Dcument prperties Edit Und Ctrl+Z Insert Red Cut Cpy Paste Paste as text Select all Find and Replace Insert Image Insert link Creates a new Lgin page dcument. Prints the current Lgin page. Allws yu t link the Lgin page t a Custm Style Sheet (CSS) f yur chsing. Lets yu set the fllwing prperties: Title Keywrds Descriptin Rbts Authr Excding Ctrl+Y Ctrl+X Ctrl+C Ctrl+V Ctrl+A Ctrl+F This tl lets yu insert an image int the page and resize it if needed, with prprtins cnstrained r nt. Fr mre details, click the link t the left. Add a link t the page by entering a URL, text t display, Title, and chse if the link pens a new windw. Fr mre details, click the link t the left. 3
View Menu Optin Descriptin Frmat Special Character Hrizntal Line Anchr Page break Insert date/- time Nnbreaking space Lgin Frm Elements Shw invisible characters Shw blcks Visual aids Preview Fullscreen Bld Italic Underline Lets yu insert a special character frm the chart displayed. Inserts a hrizntal line at the cursr lcatin. Insert an anchr at the cursr lcatin. Insert a page break at the cursr lcatin. Chse frm the fur frmats available. Inserts a space character that prevents an autmatic line break (line wrap) at its psitin. Selecting a frm element inserts the default text fr the sectin selected at the current lcatin f the cursr. Elements include: Lgin Frm (Required) Registratin Link Term Links Paragraph Sectin Dem Link Shws nrmally invisible frmatting characters. When selected, the layut will shw the utlines f each sectin inside f the layut. This feature is useful fr quickly determining the number f layers f each sectin, and where the brders f each begin and end. When selected, it will place a dtted brder arund tables that are present in the layut. This is t make table brders visible in the layut, when a table is nt specified and nt visible. It will nt shw the dtted brder n the lgin page. Shws a preview f the current Lgin page. Expands the editing page t fullscreen. Ctrl+Alt+F. Press Ctrl+Alt+F t return t nrmal view. 4
Menu Optin Descriptin Strikethrugh Superscript Subscript Frmats This menu prvides submenus fr: Heading Styles Heading 1 Wraps text inside f a <h1> tag. Heading 2 Wraps text inside f a <h2> tag. Heading 3 Wraps text inside f a <h3> tag. Heading 4 Wraps text inside f a <h4> tag. Heading 5 Wraps text inside f a <h5> tag. Heading 6 Wraps text inside f a <h6> tag. Inline Text Styles Blck Types Bld Wraps text inside f a <strng> tag. Italic Wraps text inside f a <em> tag. Underline Wraps text inside f a <span> tag and adds an inline css underline style. Strikethrugh Wraps text inside f a <span> tag and adds an inline css line-thrugh style. Superscript Wraps text inside f a <sup> tag. Subscript Wraps text inside f a <sub> tag. Cde Wraps text inside f a <cde> tag. Paragraph Wraps text inside f a <p> tag. Blckqute Wraps text inside f a <blckqute> tag. Div Wraps text inside f a <div> tag. Pre Wraps text inside f a <pre> tag. Alignment f text Left Adds an inline css style f text-align: left. This left aligns text. Center Adds an inline css style f text-align: center. This center aligns text. Right Adds an inline css style f text-align: 5
Menu Optin Descriptin Table Tls Edit Buttns Clear Frmatting Insert table Table prperties Delete table Cell Rw Clumn Surce Cde right. This right aligns text. Justify Adds an inline css style f text-align: justify. This aligns the text t the justify prperty When selected, it will remve all f the frmatting ptins listed abve frm the selected area. Inserts a table up t 10x10 in size. Fr mre details n managing tables, see Wrking with Lgin Page Tables. Enabled if a table is selected. Allws yu t set the fllwing ptins: Width Height Cell spacing Cell padding Brder width Captin - adds a text line abve the table Alignment Style Brder clr Backgrund clr Deletes the selected table after cnfirmatin. Cell Prperties Merge cells Split cells Insert rw befre / after Delete rw Rw prperties Cut rw Cpy rw Paste rw befre / after Insert clumn befre / after Delete clumn Opens the Surce Cde windw which displays the current frm as HTML cde fr editing. Custm HTML cde can be cpy and pasted int this frm. The buttns under the editr menu bar prvide the same functinality as thse described in the menus abve. 6
Lgin - Insert Image The Insert Image functinality allws yu t uplad a new image r select and delete an existing image. When clicking n Insert Image, the fllwing pp up bx will appear: T the right side f the Surce field, clicking n the search icn will pen a new windw fr brwsing fr upladed images: T Uplad a new image, click n the Uplad Image buttn, and select the image t uplad. T Delete an existing image frm this list, click n the X buttn t the right f the desired image. T Select an existing image t place int the layut, simply click n the image. Then the previus pp up bx will be ppulated with infrmatin abut that image: 7
It is pssible here t add an Image Descriptin and als update the length and width f the image. Once ready, click Ok, and the image will be inserted int the layut where specified: 8
Lgin - Insert Link The Insert Link functinality allws fr a link t be placed n the custm layut. When Insert Link is clicked, the fllwing pp up bx will display: The Url is the external r internal dcument link needed fr the link t wrk. Text t display cntains the text that will be displayed in place f the Url. The Title is the text that will display when the muse cursr is hvering ver the link. The Target has tw ptins. When Nne is used, clicking n the link will direct the current brwser windw t the new Url. New Windw will pen a new brwser tab r windw fr the new Url when the link is clicked. Frm here, it is pssible t make tw different types f links: 1. External Website Create a link t a website utside f the DnrCentral dmain: After clicking Ok, the link will be placed nt the custm layut. 2. Internal Dcument Create a link t an upladed dcument: 9
The main difference fr the Internal Dcument link is that a dcument must first be upladed t DnrCentral. T d this, simply click n the Search icn t the right f the Url field. Next uplad, r select/delete an existing dcument. The fllwing screensht shws the results after adding ne f each f the abve links t a layut: 10
Lgin - Wrking with Tables The Insert Table functin will insert a table with up t ten rws and ten clumns. After a table is inserted int the layut, yu will need t adjust the size f the table by dragging the crners t a chsen size. The Table Prperties becmes accessible after inserting a new table. When selected, a pp up windw will display, allwing yu t edit the Width, Height, Cell Spacing, Cell Padding, Brder, Captin, and Alignment f the selected Table: There is als an Advanced tab that shws the css styles entered frm the cntrls inside f the General tab. This Advanced tab als allws the user t cntrl the brder and backgrund clr f the table: The Delete Table ptin becmes available when the current selected item in the layut is a table. When selected, the table will be remved frm the layut. The Cell submenu cntains three ptins: 11
Cell Prperties Becmes available when a specific cell is selected frm a table. A pp up windw will display that allws yu t custmize the Width, Height, Cell Type (Cell <td> r Header Cell <th>), Scpe, Hrizntal Align, and Vertical Alignment n the General tab: Inside f the Advanced tab, additinal ptins are available t edit the clr f the specified cell s brder and backgrund, similar t the Table Prperties mentined abve. Merge Cells When selected, a pp up bx displays ptins t cmbine the selected cell with a number f cells t the right r belw. Fr example, t merge the fllwing cells: Clumns entered is 2. It is tw because it includes the selected cell and the cell t be merged. Rws entered is als 2 because it includes ne fr the cell selected, and ne fr the rw t be merged. 12
As a result, a 2x2 cell will be made frm the merged cells: Split Cell When selected, this ptin will split cells that were previusly merged tgether. Unfrtunately after the cells are split, they d nt return t unifrm height and width. Use this feature with cautin. If the selected cell was nt previusly merged with ther cells, the Split Cell feature will d nthing. The Rw submenu Insert Rw Befre Inserts a new rw abve the selected cell. Insert Rw After Inserts a new rw belw the selected rw. Delete Rw Deletes the selected rw. The remaining rws will increase in size. This is because the table cntains specific width and height prperties that remain in place. Rw Prperties When selected, a pp up bx will display cntrls fr the Rw Type, Alignment, and Height: 13
Rw Type There are three ptins available: Bdy The main type f rw usually used. This makes the rw the standard <tr>. Header This makes the rw the header rw. It will wrap this specific <tr> rw inside f a <thead> tag. Fter This makes the rw the fter rw. It will wrap this specific <tr> rw inside f a <tft> tag. Alignment There are fur ptins available Nne Defaults internal cntent t left aligned. Left Internal cntent left aligned. Center Internal cntent centered. Right Internal cntent right aligned. Height User can set the height f a selected rw. Inside f the Advanced tab, a user can set the brder and backgrund clr fr the whle selected rw. There is als a field that lists all the currently used css prperties frm the ther cntrls fr the selected rw. Cut Rw This will cpy and remve the selected rw frm the table. Cpy Rw This will cpy a selected rw frm a table. Paste Rw Befre This will insert a cpied r cut rw int a table abve a specified rw. This will nly wrk if the pasted rw is different frm the selected rw. Paste Rw After This will insert a cpied r cut rw int a table belw a specified rw. This will nly wrk if the pasted rw is different frm the selected rw. The Clumn submenu cntains the fllwing ptins: Insert Clumn Befre This will add a new clumn befre a specified clumn. If there are multiple rws in a table, the new clumn will keep the height and width 14
prperties f each rw. Insert Clumn After - This will add a new clumn after a specified clumn. If there are multiple rws in a table, the new clumn will keep the height and width prperties f each rw. Delete Clumn This will delete a specified clumn frm the table. The rest f the clumns f a table will adjust accrdingly when a clumn is inserted r deleted. Lgin - Surce Cde The Surce Cde menu ptin pens a pp up bx which displays the html structure f the custm layut: This tl will be useful fr admin users wh are familiar with Html and CSS. It allws yu t build the html structure manually and see the results inside f the editr. If yu chse t build an html layut frm scratch, yu can simply highlight everything in the surce cde editr and delete it. Then yu can paste in yur wn layut and see the results after clicking Ok. If yu include image references in the css file r use <img> tags, yu will need t uplad the images t DnrCentral fr use. Including Ggle Fnts: It is pssible t use Ggle Fnts n custm style sheets t: 1. G t Ggle Fnts - https://www.ggle.cm/fnts# 2. Select the fnts desired and cpy the link <link> prvided: 15
<link hreff='http://fnts.ggleapis.cm/css?family=asap:400,400italic,700,700italic' rel='stylesheet' type='text/css'> 3. Inside the surce cde windw, past the abve <link> inside the <head> sectin, withut the http: prtin. 4. Finally, insert the fnt-family chsen int the desired html sectin inside the <style> css sectin: 16
#3 Layut Editr The Layut Editr is where a user can enter text, clr settings, and images int their custm layut. The system will cnvert the entered text, clr settings, and images int html and style attributes. NOTE: This layut area is nt designed t take HTML and CSS cde directly. There is a separate Surce Cde ptin in the Tls menu fr entering custm HTML and CSS cde t be displayed as part f the custm layut. Here's what the frm lks like after adding the paragraph sectin. 17
#4 Bttm Buttns This sectin cntains the main buttns that allw fr saving, canceling, and viewing tips fr develping a custm layut. Save - The Save buttn will save the current cntent inside f the Layut Editr and the status f the Use Custm Layut checkbx. T use a custm layut, it is required that the checkbx is checked and the tw required sectins, Lgin Frm and Term Links, are present. If all cnditins are nt met, the checkbx will be reset t unchecked but the ther changes will be saved. Cancel - The Cancel buttn will return the layut cntent t its last saved state. Help - The Help buttn pens a pp up bx that displays sme reminders and tips fr making a custm layut. 18