Layouts
DotNetAge offers two layout modes for using Master layout and Page layout that is similar with ASP.NET.
Master layout
The Master layout is a master page that is same as MVC ASP.NET.The Master layout controls the appearance of page header area ,sitetools,site menu,page content area and page footer. By default DotNetAge use the YourWebSiteRoot/Views/Shared/Site.master as default Master layout.
There are some naming elements in Site.master we recommand to keep this naming elements for support theming features, they are:
- dna-page-toolbox - Contains the site tools menu and user quickly menu (login,register,signout and language selector.)
- dna-page – Contains all page area and controling the page display with.
- dna-page-header – Controls page header contents like your website logo, website title or header background image.
- topzone – This is a option area for contains widgets between the page header and page content.
- dna-page-content – Controls the conents of page, they could be html elements or widgets. For dynamic page it contains widget zones (page layout).
- dna-page-footer – Controls the page footer contents.
We could change the css style for this elements in dna-ui.css or use the UI Designer to change the styles of these elements.
How to change apply a new Master page to your website ?
That is very easy to do these,
- Create a new master page and put it into YourSiteRoot/Views/Shared
- For all dynamic pages you could go to Console –> Themes –> Layouts
In Master layout option select your master page and save changes. - For your Controllers or Actions you can put the MasterLayoutAttribute on the top of your controller class to support web site master layout.
Page layout
Only controlling the page - content layout (Widget zones), DotNetAge offers 12 page layouts for using.The page layout is a set of common layout settings that allows user change the content positions without any coding.All dynamic pages could be chnaged the layout in create/edit page settings page.
Custom layout
Some times you maybe place some static contents or make some special conetnt layout that the default page layouts maybe not meet your requirements, DotNetAge allows you add your custom layout. You just need to add a new MVC Action & View in VS.NET then specified the “dna-widget-zone” class on which elements you wants to contain widgets. At laster put <% Ajax.EnabledCustomization(); %> on your view , that’s all.
UI Designer & Theming
As we know Mvc have’t theming conspect, in order to support the theming DotNetAge base on jQuery CSS style framework to provide the css style theme feature.
Why base on jQuery Css style framework ? It will take advantage of jQuery CSS Style Framework / jQuery Theme Roller for web designing. On client side DotNetAge is base on jQuery and DotNetAge provides rich set of client UI controls that means all controls could be supports jQuery theming features. So you could use the existing jQuery css theme for your UI controls that will be saved you time.
There are two ways to design your theme:
Write your *.css file and reference images
YourSiteRoot/Content/Themes is the theme folder of DotNetAge.You could choise one as base theme and change it, DotNetAge will auto detected all css files in theme folder root and add theme into your page header.
Relative resource path support:
If your theme root has “images” folder, you also can use “images/yourimagefile.jpg” to refer to your images or resources.
e.g.:
YourSiteRoot/Content/Themes/flick
YourSiteRoot/Content/Themes/flick/images/button.jpg
In your css file you could write :
#myelement:{background-image:url(images/button.jpg);}
Public resources (absolute path):
DotNetAge use the MVC default resources path to store the public static resource files YourSiteRoot/Content
e.g:
YourSiteRoot/Content/Images/button.jpg
In your css files :
#myelement:{background-image:url(/content/images/button.jpg);}
Managed resources:
DotNetAge allows you using the Managed resources in
- YourSiteRoot/Shared/public
- YourSiteRoot/Shared/private/[username]
e.g:
YourSiteRoot/Shared/public/images - > css: #myelement:{background-image:url(/webshared/home/images/button.jpg);}
YourSiteRoot/Shared/private/[username] –> css: #myelement:{background-image:url(/webshared/[username]/images/button.jpg);}
Use UI Desinger
DotNetAge provides another quickly and easy way for design your theme – UI Designer. Go to Console – > Themes –> UI Desinger
UI Designer provides a browser base UI to design your web and you can see the result immeditately, You could change the background image ,background color , width ,height, set or upload background-image and font styles of Page ,header ,footer, menu ,sitetools and widgets.
In Addition Css Text tab you can also change the css style text manually, there are two options to save your design result:
By default when click the save button that on the bottom of the console the changed style will render in header tag on every pages.
The other way is supply a new theme name and select the “Save as new theme” checkbox, after save DotNetAge will create a new theme folder and save all files and changes and set the new theme to current theme.
-
Average:3
-
पुस्तकें(2044)
-
कहते हैं:
