<< MichaelJBaird.com and BlogEngine.net | My Toolbox >>

For the theme on my site, I wanted to add individual styles to certain widgets to differentiate them from one and another and break up the monotonous look. In order to do that, I added a property to the Widget called CSSClass that appends a name to the existing class: widget so you can add different styles in your css to change the look of certain widgets.

BlogEngine.net Custom Widget Styles

So instead of class="widget", you could have class="widget_green" or class="widget_red"

App_GlobalResources/

Add name: cssClass value: CSS Class

App_Code/Controls/

C#-Code: WidgetBase.cs

//Add this to properties at top of WidgetBase.cs
private string _CSSClass;
/// <summary>
/// Gets or sets the style of the widget. It is mandatory for all widgets to set the Style.
/// </summary>
/// <value>The style of the widget.</value>
public string CSSClass
{
  get { return _CSSClass; }
  set { _CSSClass = value; }
}

//Added CssClass to widget class attribute to "protected override void Render(HtmlTextWriter writer)" and some custom title class and bottom class for my postit note widget styles
protected override void Render(HtmlTextWriter writer)
{
  if (string.IsNullOrEmpty(Name))
    throw new NullReferenceException("Name must be set on a widget");

  StringBuilder sb = new StringBuilder();
  sb.Append("<div class=\"widget" + CSSClass + " " + this.Name.Replace(" ", string.Empty).ToLowerInvariant() + "\" id=\"widget" + WidgetID + "\">");

  if (Thread.CurrentPrincipal.IsInRole(BlogSettings.Instance.AdministratorRole))
  {
    sb.Append("<a class=\"delete\" href=\"javascript:void(0)\" onclick=\"removeWidget('" + WidgetID + "');return false\" title=\"" + Resources.labels.delete + " widget\">X</a>");
    if (IsEditable)
      sb.Append("<a class=\"edit\" href=\"javascript:void(0)\" onclick=\"editWidget('" + Name + "', '" + WidgetID + "');return false\" title=\"" + Resources.labels.edit + " widget\">" + Resources.labels.edit + "</a>");
  }

  if (ShowTitle)
  {
    sb.Append("<div class=\"widget_title\"><h4>" + Title + "</h4></div>");
  }
  else
  {
    sb.Append("&nbsp;");
  }

  sb.Append("<div class=\"content\">");

  writer.Write(sb.ToString());
  base.Render(writer);
  writer.Write("</div>");
  writer.Write("<div class=\"widget" + CSSClass + "-bottom\"></div>");
  writer.Write("</div>");
}

C#-Code: WidgetEditBase.cs

//Add to WidgetEditBase.cs Properties
private string _CSSClass;
/// <summary>
/// Gets or sets the CSS class of the widget. It is mandatory for all widgets to set the CSS Class.
/// </summary>
/// <value>The CSS class of the widget.</value>
public string CSSClass
{
  get { return _CSSClass; }
  set { _CSSClass = value; }
}

C#-Code: WidgetZone.cs

//Add to WidgetZone.cs "protected override void OnLoad(EventArgs e)"
control.CSSClass = widget.Attributes["cssclass"].InnerText;

admin/

C#-Code: WidgetEditor.aspx

//Add to WidgetEditor.aspx below "<asp:CheckBox runat="Server" ID="cbShowTitle" Text="Show title" />"
      <br />
      <br />
      <label for="<%=txtCSSClass.ClientID %>"><%=Resources.labels.cssClass %></label>&nbsp;&nbsp;&nbsp;
      <asp:TextBox runat="server" ID="txtCSSClass" Width="150px" />

C#-Code: WidgetEditor.cs

//Add to WidgetEditor.cs in "private void btnSave_Click(object sender, EventArgs e)"
    if (node.Attributes["cssclass"].InnerText != txtCSSClass.Text.Trim())
    {
      node.Attributes["cssclass"].InnerText = txtCSSClass.Text.Trim();
      isChanged = true;
    }

//Add to "private void SaveNewWidget(WidgetBase widget)"
    XmlAttribute cssclass = doc.CreateAttribute("cssclass");
    cssclass.InnerText = "";
    node.Attributes.Append(cssclass);

//Change to "private void InitEditor(string type, string id)"
  private void InitEditor(string type, string id)
  {
    XmlDocument doc = GetXmlDocument();
    XmlNode node = doc.SelectSingleNode("//widget[@id=\"" + id + "\"]");
    string fileName = Utils.RelativeWebRoot + "widgets/" + type + "/edit.ascx";

  if (File.Exists(Server.MapPath(fileName)))
  {
    WidgetEditBase edit = (WidgetEditBase)LoadControl(fileName);
    edit.WidgetID = new Guid(node.Attributes["id"].InnerText);
    edit.Title = node.Attributes["title"].InnerText;
    edit.ID = "widget";
    edit.ShowTitle = bool.Parse(node.Attributes["showTitle"].InnerText);
    edit.CSSClass = node.Attributes["cssclass"].InnerText;
    phEdit.Controls.Add(edit);
  }

  if (!Page.IsPostBack)
  {
    cbShowTitle.Checked = bool.Parse(node.Attributes["showTitle"].InnerText);
    txtTitle.Text = node.Attributes["title"].InnerText;
    txtTitle.Focus();
    txtCSSClass.Text = node.Attributes["cssclass"].InnerText;
    btnSave.Text = Resources.labels.save;
  }

  btnSave.Click += new EventHandler(btnSave_Click);
}

JavaScript-Code: widget.js

//Change to "function editWidget(name, id)" for additional 50px from 500 to 550 height because of extra Property
var size = { 'height': 550, 'width': 750 };

CSS Example

CSS-Code: CSS

/***********************************************
** WIDGETS
***********************************************/
  /*GLOBAL*/
.widget,
.widget_green,
.widget_red,
.widget_blue{
  width: 240px;
  margin-bottom: 20px;
  padding: 0;
  display: block;
}
.widget ul,
.widget_green ul,
.widget_red ul,
.widget_blue ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget li,
.widget_green li,
.widget_red li,
.widget_blue li{
  margin: 0 0 0 15px;
}
.widget .content,
.widget_green .content,
.widget_red .content,
.widget_blue .content{
  padding: 15px 10px 15px 10px;
}
.widget-bottom,
.widget_green-bottom,
.widget_red-bottom,
.widget_blue-bottom{
  width: 240px;
  height: 5px;
}
.widget .edit,
.widget_green .edit,
.widget_red .edit,
.widget_blue .edit{
  float: right;
  margin: 0 5px 0 0;
}
.widget .delete,
.widget_green .delete,
.widget_red .delete,
.widget_blue .delete{
  float: right;
}
  /*YELLOW*/
.widget{background: url(css/images/grunged_widget_yellow.png) 0 top no-repeat scroll;}
.widget-bottom{background: url(css/images/grunged_widget_yellow.png) 0 bottom no-repeat scroll;}
  /*GREEN*/
.widget_green{ background: url(css/images/grunged_widget_green.png) 0 top no-repeat scroll; }
.widget_green-bottom{background: url(css/images/grunged_widget_green.png) 0 bottom no-repeat scroll;}
  /*RED*/
.widget_red{background: url(css/images/grunged_widget_red.png) 0 top no-repeat scroll;}
.widget_red-bottom{background: url(css/images/grunged_widget_red.png) 0 bottom no-repeat scroll;}
  /*BLUE*/
.widget_blue{background: url(css/images/grunged_widget_blue.png) 0 top no-repeat scroll;}
.widget_blue-bottom{background: url(css/images/grunged_widget_blue.png) 0 bottom no-repeat scroll;}
 /*TITLES*/
div.widget_title{
  width: 180px;
  height: 30px;
  margin: 10px 0 0 5px;
  padding: 0;
  display: block;
}
div.widget_title h4{display: none;}

.administration .widget_title{background: url(css/images/grunged_widget_title.png) 0px 0px no-repeat scroll;}
.blogroll .widget_title{background: url(css/images/grunged_widget_title.png) 0px -30px no-repeat scroll;}
.calendar .widget_title{background: url(css/images/grunged_widget_title.png) 0px -60px no-repeat scroll;}
.categorylist .widget_title{background: url(css/images/grunged_widget_title.png) 0px -90px no-repeat scroll;}
.linklist .widget_title{background: url(css/images/grunged_widget_title.png) 0px -120px no-repeat scroll;}
.monthlist .widget_title{background: url(css/images/grunged_widget_title.png) 0px -150px no-repeat scroll;}
.mostcomments .widget_title{background: url(css/images/grunged_widget_title.png) 0px -180px no-repeat scroll;}
.newsletter .widget_title{background: url(css/images/grunged_widget_title.png) 0px -210px no-repeat scroll;}
.pagelist .widget_title{background: url(css/images/grunged_widget_title.png) 0px -240px no-repeat scroll;}
.recentcomments .widget_title{background: url(css/images/grunged_widget_title.png) 0px -270px no-repeat scroll;}
.recentposts .widget_title{background: url(css/images/grunged_widget_title.png) 0px -300px no-repeat scroll;}
.search .widget_title{background: url(css/images/grunged_widget_title.png) 0px -330px no-repeat scroll;}
.tagcloud .widget_title{background: url(css/images/grunged_widget_title.png) 0px -360px no-repeat scroll;}
.twitter .widget_title{background: url(css/images/grunged_widget_title.png) 0px -390px no-repeat scroll;}

Related Resources

MichaelJBaird.com and BlogEngine.net Well I finally got my website up and running. After a couple of years using Joomla and a Apache/My...My ToolboxMichael J. Baird's list of software installed on his computer.