Design and CSS styles
Version 7.x > Design and CSS styles > How to change site theme. View modes: 
User avatar
Member
Member
pavel.1991-tut - 2/16/2013 4:17:33 AM
   
How to change site theme.
I have the next task: My site must have some themes. How can I change site theme? For example, web-parts have their css stylesheet, web-parts layouts have their own css stylesthees, and there is tab "themes" in which one can add css stylesheets. I need, for example, that when I choose red theme, the stylesheet "red.css" from tab "themes" in web-part would be loaded to site. Please tell me how to do this?

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 2/19/2013 12:56:58 PM
   
RE:How to change site theme.
Assuming you have your different themes setup in App_Themes directory, you can simply change the style sheet the site is using and the site will do the rest of the work (images, css, etc). Here is some code to create a webpart:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ThemeChanger.ascx.cs" Inherits="CMSWebParts_Custom_ThemeChanger" %>
<asp:DropDownList ID="ddlThemes" runat="server" OnSelectedIndexChanged="ddlThemes_SelectedIndexChanged" AutoPostBack="true" />

Code behind:
using CMS.CMSHelper;
using CMS.PortalControls;
using CMS.SiteProvider;
using System;
using System.Web.UI;

public partial class CMSWebParts_Custom_ThemeChanger : CMSAbstractWebPart
{
#region "Methods"

/// <summary>
/// Content loaded event handler
/// </summary>
public override void OnContentLoaded()
{
base.OnContentLoaded();
SetupControl();
}


/// <summary>
/// Initializes the control properties
/// </summary>
protected void SetupControl()
{
if (this.StopProcessing)
{
// Do nothing
}
else
{
// Set WebPart properties
if (!Page.IsPostBack)
{
// populate the list on first page load
GetThemes();
}
}
}


/// <summary>
/// Reloads data
/// </summary>
public override void ReloadData()
{
base.ReloadData();

// Reload data in all controls if needed
// PLEASE PUT YOUR CODE HERE
}

/// <summary>
/// Gets stylesheet names/id and binds to dropdownlist
/// </summary>
protected void GetThemes()
{
ddlThemes.DataValueField = "StyleSheetID";
ddlThemes.DataTextField = "StyleSheetDisplayName";
ddlThemes.DataSource = CMS.SiteProvider.CssStylesheetInfoProvider.GetCssStylesheets(CMSContext.CurrentSiteName, "", 20);
ddlThemes.DataBind();
}

#endregion
protected void ddlThemes_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlThemes.SelectedIndex > -1)
{
// check for a valid stylesheet
CssStylesheetInfo css = CssStylesheetInfoProvider.GetCssStylesheetInfo(Convert.ToInt32(ddlThemes.SelectedValue));
if (css != null)
{
// get the site info
SiteInfo site = SiteInfoProvider.GetSiteInfo(CMSContext.CurrentSiteID);
if (site != null)
{
// set the stylesheet property
site.SiteDefaultStylesheetID = css.StylesheetID;
// save the info back
SiteInfoProvider.SetSiteInfo(site);
}
}
}
}
}

FYI, I haven't tested this but it should work without an issue. This is dependent on the stylesheet being associated with a site.

User avatar
Member
Member
kentico_davidb2 - 2/20/2013 4:44:30 AM
   
RE:How to change site theme.
Hi Pavel,

please find also related information that you might find useful at following destinations:

http://devnet.kentico.com/docs/devguide/app_themes.htm

http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx

Dave