Controlling Template from Master File/Theme css
I have an idea for setting up a template and I've been trying to figure out if it is possible. Here is a couple things, I want to do
1. Set up an image selector to the top of the page that immediately alters it to cover
2. Have two blocks (one image and one content block) overlapping each-other, or editing the padding so there is no gap between two
I purposefully want to do this so no one can change what goes in each section. I have tried adding the image selector widget code in a container or in a layout section.
<
%@ Master Language="C#" AutoEventWireup="true" %>
<
br
><
br
>
<%@ Register Src="~/App_Data/Sitefinity/WebsiteTemplates/twbs/App_Master/MetaData.ascx" TagPrefix="uc" TagName="MetaData" %><
br
>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %><
br
>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" TagPrefix="sf" %><
br
>
<%@ Import Namespace="Telerik.Sitefinity.Localization" %><
br
><
br
>
<!DOCTYPE html><
br
>
<!--[if lt IE 7]>
<
html
class
=
"no-js lt-ie9 lt-ie8 lt-ie7"
>
<![endif]--><
br
>
<!--[if IE 7]>
<
html
class
=
"no-js lt-ie9 lt-ie8"
>
<![endif]--><
br
>
<!--[if IE 8]>
<
html
class
=
"no-js lt-ie9"
>
<![endif]--><
br
>
<!--[if gt IE 8]>
<!--><
br
>
<
html
class
=
"no-js"
><
br
>
<!--
<![endif]-->
<
br
>
<
head
id
=
"head"
runat
=
"server"
><
br
>
<
meta
http-equiv
=
"content-type"
content
=
"text/html; charset=utf-8"
/><
br
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge,chrome=1"
/><
br
> <
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/><
br
>
<
uc:MetaData
runat
=
"server"
ID
=
"MasterMetaData"
/><
br
> <
asp:PlaceHolder
ID
=
"PlaceHolderScriptTop"
runat
=
"server"
><
br
>
<!--[if lt IE 9]><
br
> <
script
type
=
"text/javascript"
src="
<%= Page.ResolveClientUrl("~/Sitefinity/WebsiteTemplates/twbs/JS/script.top.min.js") %>" async="async">
</
script
><
br
>
<![endif]--><
br
>
</
asp:PlaceHolder
><
br
>
<
title
>
</
title
><
br
>
</
head
><
br
>
<
body
class
=
"standard"
><
br
>
<!--[if lt IE 7]><
br
>
<
p
class
=
"chromeframe"
>You are using an
<
strong
>outdated
</
strong
> browser. Please
<
a
href
=
"http://browsehappy.com/"
>upgrade your browser
</
a
>.
</
p
><
br
>
<![endif]--><
br
>
<
form
id
=
"aspnetForm"
runat
=
"server"
><
br
> <
telerik:RadScriptManager
ID
=
"RadScriptManager1"
CompositeScript-ScriptMode
=
"Release"
EnableScriptGlobalization
=
"True"
EnableScriptLocalization
=
"False"
runat
=
"server"
CompositeScript-NotifyScriptLoaded
=
"True"
LoadScriptsBeforeUI
=
"True"
OutputCompression
=
"Forced"
AjaxFrameworkMode
=
"Disabled"
><
br
>
<
CompositeScript
><
br
> <
Scripts
><
br
> <
asp:ScriptReference
Name
=
"Telerik.Sitefinity.Resources.Scripts.MicrosoftAjax.js"
Assembly
=
"Telerik.Sitefinity.Resources"
/><
br
>
<
asp:ScriptReference
Name
=
"Telerik.Sitefinity.Resources.Scripts.MicrosoftAjaxWebForms.js"
Assembly
=
"Telerik.Sitefinity.Resources"
/><
br
>
<
asp:ScriptReference
Name
=
"WebForms.js"
Assembly
=
"System.Web"
/><
br
>
<
asp:ScriptReference
Path
=
"~/App_Data/Sitefinity/WebsiteTemplates/twbs/js/Modernizr-2.6.2.min.js"
/><
br
>
<
asp:ScriptReference
Name
=
"Telerik.Sitefinity.Resources.Scripts.jquery-1.8.3.min.js"
Assembly
=
"Telerik.Sitefinity.Resources"
/><
br
>
<
asp:ScriptReference
Name
=
"Telerik.Sitefinity.Resources.Scripts.Kendo.kendo.web.min.js"
Assembly
=
"Telerik.Sitefinity.Resources"
/><
br
>
<
asp:ScriptReference
Path
=
"~/App_Data/Sitefinity/WebsiteTemplates/twbs/js/bootstrap.min.js"
/><
br
>
</
Scripts
><
br
> </
CompositeScript
><
br
>
</
telerik:RadScriptManager
><
br
><
br
>
<
br
><
br
> <
div
class
=
"jumbotron"
><
br
> <
div
class
=
"container"
><
br
> </
div
><
br
> </
div
><
br
><
br
><
br
> <
a
accesskey
=
"s"
href
=
"#cpw_main"
id
=
"sfSkip"
class
=
"sr-only"
><
br
> <
asp:Literal
ID
=
"skipToMainContentLiteral"
runat
=
"server"
Text='<%$Resources:PageResources, SkipToTheMainContent %>' /></
a
><
br
>
<!-- ============================================================================== -->
<
br
> <
div
id
=
"PublicWrapper"
><
br
>
<!-- ============================================================================== -->
<
br
> <
div
id
=
"HeaderWrapper"
role
=
"heading"
clientidmode
=
"static"
runat
=
"server"
class
=
""
><
br
> <
asp:ContentPlaceHolder
ID
=
"cph_header"
runat
=
"server"
/><
br
> </
div
><
br
>
<!-- ============================================================================== -->
<
br
> <
nav
id
=
"NavWrapper"
role
=
"region"
clientidmode
=
"static"
runat
=
"server"
class
=
""
><
br
> <
asp:ContentPlaceHolder
ID
=
"cph_nav"
runat
=
"server"
/><
br
> </
nav
><
br
>
<!-- ============================================================================== -->
<
br
> <
section
id
=
"MainWrapper"
role
=
"region"
clientidmode
=
"static"
runat
=
"server"
class
=
""
><
br
> <
asp:ContentPlaceHolder
ID
=
"cph_main"
runat
=
"server"
/><
br
> </
section
><
br
>
<!-- ============================================================================== -->
<
br
> <
footer
id
=
"FooterWrapper"
role
=
"region"
clientidmode
=
"static"
runat
=
"server"
class
=
""
><
br
> <
asp:ContentPlaceHolder
ID
=
"cph_footer"
runat
=
"server"
/><
br
> </
footer
><
br
> </
div
><
br
>
<!-- ============================================================================== -->
<
br
>
<!-- no content below - scriptwrapper is purely for js or css widgets in sitefinity -->
<
br
>
<!-- ============================================================================== -->
<
br
> <
div
id
=
"ScriptWrapper"
clientidmode
=
"static"
runat
=
"server"
title
=
"Only place scripts and styles in this region"
><
br
> <
asp:PlaceHolder
ID
=
"PlaceHolderScriptBottom"
runat
=
"server"
><
br
> <
script
type
=
"text/javascript"
src
=
"<%= Page.ResolveClientUrl("
~/Sitefinity/WebsiteTemplates/twbs/js/script.bottom.min.js") %>" defer="defer" async="async"></
script
><
br
><
asp:ScriptReference
Path
=
"~/App_Data/Sitefinity/WebsiteTemplates/twbs/js/bootstrap.min.js"
/><
br
> </
asp:PlaceHolder
><
br
> <
asp:ContentPlaceHolder
ID
=
"cph_scriptsandstyles"
runat
=
"server"
/><
br
>
<!-- ========================================================================== -->
<
br
> </
div
><
br
> </
form
><
br
></
body
><
br
></
html
><
br
>
FWIW: I typically create a single master template that uses a single contentplaceholder.
The masterpage contains only the elements that are common to all pages (head, body, form and scripts) and I base everything on the template created with that masterpage.
I then use custom layouts to structure the content layouts & themes for my various templates in Sitefinity's template designer, rather than hard-code masterpages.
Custom layouts are just ascx files with the basic directive of:
<%@ Control Language="C#" %> **adjust accordingly**
followed by the layout html.
You can define placeholders in custom layouts using divs using the class of:
"sf_colsIn"