Exit
template=Default.htm redirect=null lastedit=1445728531358 lasteditor=Admin var page = { Version:5, Areas:{ vPageTitleArea:[ { type:"Tag", data:{ tag:"h2", content:"Webpage Styling" }, cache:{ }, id:"uniqueid_555", Wrappers:[ ], display:"block" } ], vBodyArea:[ { type:"Text", data:{ content:"This also covers the 'page setup' menu." }, cache:{ }, id:"uniqueid_564", Wrappers:[ ], display:"block" }, { type:"Table", data:{ border:false, autowidth:false, rows:"1", cols:"2", tabs:false, id:"Splitter" }, cache:{ }, id:"uniqueid_565", Wrappers:[ ], display:"block" } ], vStaticTopRightArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vTopNavArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vLogoArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vSiteTitleArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vSloganArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vRightLogoArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vSiteNavArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vSideArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vFooterArea:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" } ], vSplitter_0_0:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" }, { type:"RichText", data:{ richtext:"<h2 class=\\q\\q>Webpage Styling<\\lh2><div>Using master pages, you can style just the master page, and all standard pages will inherit the same styles.<\\ldiv><div>Styles are the colours, and layout options for your web page.<\\ldiv><div>To add or edit the page styles, first open the webpage from the file manager (or the master page).<\\ldiv><div>Go to the \\sPage Setup\\s, and select \\sPage Styles \\l Colours \\l Theme (CSS)\\s.<\\ldiv><div>(CSS or Cascase Style Sheets is a HTML standard for defining the styles of a webpage or webpages).<\\ldiv><div>There are around a hundred options available for customising the styles for your webpage. Because there are so many options available, there is an \\sAuto Style Generator\\s that generates the settings for these hundred options automatically based on just a few key settings.<\\ldiv><div>Because the page needs to optional Inherit from the master page - in a number of places a \\sblank\\s entry or selecting \\sInherit\\s will cause the page to inherit from the master page styles.<\\ldiv><h3 class=\\q\\q>The \\sAuto Style Generator\\s<\\lh3><div>Please note, that running the generator will overwrite all of the current style settings in other areas.<\\ldiv><div>The following options are provided in the generator:<\\ldiv><div class=\\qrichtextlist\\q>Base colour - from here you can select the base colour your website theme will be based on. A variety of shades lighter and darker will be used for the menus, background, text of your page. To use, drag the colour sliders back and forth to select the colour you require. It is recommended you run the \\sGenerate\\s and the \\sPreview\\s the page to see how it looks.<\\ldiv><div class=\\qrichtextlist\\q>Colour Adjust - the generator will attempt to colour the page based on the colour you specified, however, you can apply colour adjustments here to make the page lighter or darker if you feel it needs it. This basically adds contrast to the page.<\\ldiv><div class=\\qrichtextlist\\q>Plain Side Area - by default you will have the side area panel wrapped in coloured boxes, this can be switched off by checking this button.<\\ldiv><div class=\\qrichtextlist\\q>Re-align some text - this (at the time of writing) simply realigns the \\sslogan\\s area to be right aligned rather than left.<\\ldiv><div class=\\qrichtextlist\\q>Override background images- if you have already selected background images for an area, running the generate command would normally leave these in place - you can force these to be overwritten by checking this box.<\\ldiv><div class=\\qrichtextlist\\q>Make side panel body lighter - if using the standard boxes for the side area panels, the body of the panel will appear lighter if this is checked.<\\ldiv><div class=\\qrichtextlist\\q>Font family - the font family that will be used for this page.<\\ldiv><div class=\\q\\q>Once you have selected your options, click \\sGenerate\\s and then \\sPreview\\s the page.<\\ldiv><h3 class=\\q\\q>Inherit<\\lh3><div class=\\q\\q>You can also click the \\sInherit All\\s button to set all styles to inherit - this will inherit from the master file.<\\ldiv><h3 class=\\q\\q>Other General Options<\\lh3><div class=\\q\\q>As well as the Auto Style Generator, there are general options. These are not generated by the style generator.<\\ldiv><div class=\\qrichtextlist\\q>Fixed page width - if blank the page will be 100\\p full page width. Otherwise specify a page width either in \\p or pixels, with \\s\\p\\s or \\spx\\s suffix.<\\ldiv><div class=\\qrichtextlist\\q>Menu spacing - the number of pixels between menu items.<\\ldiv><div class=\\qrichtextlist\\q>Panel spacing - the number of pixels between panels.<\\ldiv><div class=\\qrichtextlist\\q>Tall Menus - this will make the menu bar twice as tall.<\\ldiv><div class=\\qrichtextlist\\q>Narrow Menus - this will make the menu items have the width.<\\ldiv><h3 class=\\q\\q>Side Area Styling<\\lh3><div>There are options for styling the side area as follows:<\\ldiv><div class=\\qrichtextlist\\q>Which side the side area sits - left or right.<\\ldiv><div class=\\qrichtextlist\\q>Insert Divider - select whether a vertical line will appear between the side area and the main body.<\\ldiv><h3 class=\\q\\q>Additional CSS<\\lh3><div>Here you can add override CSS that will be output last on the page to overwrite anything here.<\\ldiv><h3 class=\\q\\q>Styles for Types of content or Areas<\\lh3><div>All of these settings will be generated from the Auto Style Generator - therefore any changes you make here will be lost if you run the auto style generator again.<\\ldiv><div>To leave a style to inherit, either select inherit or leave blank.<\\ldiv><div>All of the folded areas are the same - the only difference is the area they apply to. For each area you get the following options:<\\ldiv><div class=\\qrichtextlist\\q>Background colour - the colour of the background<\\ldiv><div class=\\qrichtextlist\\q>Background to colour - the colour to fade the background to (supported browsers only - all recent browsers)<\\ldiv><div class=\\qrichtextlist\\q>Background image - only applies if the background colours are blank - select a background image<\\ldiv><div class=\\qrichtextlist\\q>Text colour - the text colour - this should be a contrast to the background<\\ldiv><div class=\\qrichtextlist\\q>Text alignment - this can be inherit<\\ldiv><div class=\\qrichtextlist\\q>Border colour - the colour of the perimeter of this content<\\ldiv><div class=\\qrichtextlist\\q>Border thickness - the thickness of the perimeter of the content<\\ldiv><div class=\\qrichtextlist\\q>Shadow depth - if used, will places a gradient shadow around the content, the number applies to how far this gradient extends<\\ldiv><div class=\\qrichtextlist\\q>Corner roundedness - the number of pixels radius for the corner roundness (higher number are more rounded).<\\ldiv><h3 class=\\q\\q>Text Styles<\\lh3><div>There are multiple options available for the various headings. These are generated by the Auto Style Generator, and will be overwritten if the Auto Style Generator is run again.<\\ldiv><div class=\\qrichtextlist\\q>Text Colour - the colour of the text<\\ldiv><div class=\\qrichtextlist\\q>Font family - see HTML CSS documentation on the web<\\ldiv><div class=\\qrichtextlist\\q>Font size - the size of the text (small \\l large)<\\ldiv><div class=\\qrichtextlist\\q>Font weight - bold<\\ldiv><div class=\\qrichtextlist\\q>Font style - italic<\\ldiv><div class=\\qrichtextlist\\q>Text decoration - underline<\\ldiv><div class=\\qrichtextlist\\q>Text alignment - left \\l centre \\l right<\\ldiv><h3 class=\\q\\q>Other \\sPage Setup\\s options<br><br>Page Title<\\lh3><div>Edits the title of the page as it appears in the browser title bar.<\\ldiv><h3 class=\\q\\q>Google Analytics<\\lh3><div>You can enter a google analytics tracking code to receive notifications of page views, interactions with items such as galleries, and other messages.<\\ldiv><h3 class=\\q\\q>Add JavaScript File<\\lh3><div>You can add a javascript file to be loaded with the page (advanced).<\\ldiv><h3 class=\\q\\q>Entrance Effect<\\lh3><div>To soften the loading of a page you can use an entrance effect. At time of writing only a fade is available.<\\ldiv>" }, cache:{ }, id:"uniqueid_566", Wrappers:[ ], display:"block" } ], vSplitter_1_0:[ { type:"Inherit", cache:{ }, Wrappers:[ ], display:"inline-block" }, { type:"Image", data:{ width:300, height:"", img:"$containerpath/Tutorial/.images/PageSetup.GIF", alt:{ englishuk:"Page Setup" }, caption:{ englishuk:"The list of page setup options" }, alt_versionref:"englishuk", caption_versionref:"englishuk", popup:0 }, cache:{ }, id:"uniqueid_567", Wrappers:[ ], display:"block", styles:"plain", applySystemWrappers:1 }, { type:"Image", data:{ width:300, height:"", img:"$containerpath/Tutorial/.images/EditStyles.GIF", alt:{ englishuk:"Edit Style" }, caption:{ englishuk:"A cropped view of the Page Style Editor. There are many more options hidden in folded areas." }, alt_versionref:"englishuk", caption_versionref:"englishuk", popup:0 }, cache:{ }, id:"uniqueid_568", Wrappers:[ ], display:"block", styles:"plain", applySystemWrappers:1 }, { type:"Image", data:{ width:300, height:"", img:"$containerpath/Tutorial/.images/PageTitle.GIF", alt:{ englishuk:"Page Title" }, caption:{ englishuk:"The page title editor" }, alt_versionref:"englishuk", caption_versionref:"englishuk", popup:0 }, cache:{ }, id:"uniqueid_569", Wrappers:[ ], display:"block", styles:"plain", applySystemWrappers:1 } ], vthepageouter:[ { type:"Inherit" } ], vLeftEar:[ { type:"Inherit" } ], vRightEar:[ { type:"Inherit" } ], vStaticTopLeftArea:[ { type:"Inherit" } ] }, Attributes:{ Title:{ type:"Title", data:{ title:"Webpage Styling" }, cache:{ } } } }
0