16Sep2008
Michael Baird
Author
Michael Baird
Category
BlogEngine.net
Tags
, , ,
BlogEngine.net

BlogEngine.net Custom Widget Properties

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

Back to Top

Custom BlogEngine Widgets

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/

WidgetBase.cs

WidgetBase.cs - Top of class
//Add this to properties at top of WidgetBase.cs
private string _CSSClass;
/// 
/// Gets or sets the style of the widget. It is mandatory for all widgets to set the Style.
/// 
/// The style of the widget.
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("


");
if (Thread.CurrentPrincipal.IsInRole(BlogSettings.Instance.AdministratorRole))
{
sb.Append("X");
if (IsEditable)
sb.Append("" + Resources.labels.edit + "");
}
if (ShowTitle)
{
sb.Append("



" + Title + "



");
}
else
{
sb.Append(" ");
}
sb.Append("


");
writer.Write(sb.ToString());
base.Render(writer);
writer.Write("


");
writer.Write("");
writer.Write("


");
}

WidgetEditBase.cs

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

WidgetZone.cs

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

admin/

WidgetEditor.aspx

//Add to WidgetEditor.aspx below ""
<%=Resources.labels.cssClass %>   

WidgetEditor.cs

WidgetEditor.cs - btnSave_Click(object sender, EventArgs e)

//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);
}

blog.js

blog.js - function editWidget(name, id)

//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

/***********************************************
** 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;}
Sharing is caring.
  • Subscribe to Post Comment Feed
  • Share this post on Delicious
  • StumbleUpon this post
  • Share this post on Digg
  • Tweet about this post
  • Share this post on Mixx
  • Share this post on Technorati
  • Share this post on Facebook
  • Share this post on NewsVine
  • Share this post on Reddit
  • Share this post on Google
  • Share this post on LinkedIn

Comments

6 responses to "BlogEngine.net Custom Widget Properties"

  • Wanderlei Wanderlei says:
    10/3/2008 3:13:27 AM

    Very very good!

  • Jim says:
    2/5/2009 5:18:20 AM

    Darn, this is nice.  Shame more people have not found this or commented on it.  Thanks for sharing it.  Oh.. and you should submit this to the BlogEngine.NET folks so it can be incorporated into a future release.

  • Jayaprakash Jayaprakash says:
    4/20/2009 8:00:23 PM

    Hi all
    Nice widget thanks

    i want to create a widget where i want show a pics of books and enter the details of book like author title etc and display it in front page
    showing the book pics like thumbnail  
    it should have an option to upload images of pics of books
    if i click on book pics it should display the details of book how can i go abt it
    pls help me
    thanks

  • Talsja Talsja says:
    6/4/2009 6:46:20 AM

    Dear michael,

    I have implemented your sample codes and css. Everything works just fine so no errors. The only strange thing is that the css class is not set to the one i provided. I have added a tagcloud widget and set it's css class to widget_blue.
    When i take a look at the renderd html i see :

    div id="widget" class="widget">
    <div class="widget_title">
    </div>
    <div class="content">.....

    when i look at your html i see :
    <div id="widgetzone">
    <div id="widget224fbdec-949e-49e9-820b-bb9543018d2c" class="widget_blue tagcloud">
    <div class="widget_title">
    </div>
    <div class="content">

    How is t possible when we both have the same code your renderd html differs to mine.
    Do you have any idea?

    Thanx in atvance

    Talsja

  • Talsja Talsja says:
    6/4/2009 7:18:45 AM

    Hi Micheal,

    I've got the solution.
    In your examples above you say :

    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 id="\"widget"" class="\"widget"">
    ");
    if (Thread.CurrentPrincipal.IsInRole(BlogSettings.Instance.AdministratorRole))
    {
    sb.Append("<a href="http://www.michaeljbaird.com/admin/Pages/%5C%22javascript:void%280%29%5C%22" title="\""" class="\"delete\"" onclick="\" removewidget(="">X</a>");
    if (IsEditable)
    sb.Append("<a href="http://www.michaeljbaird.com/admin/Pages/%5C%22javascript:void%280%29%5C%22" title="\""" class="\"edit\"" onclick="\" editwidget(="">" + Resources.labels.edit + "</a>");
    }
    if (ShowTitle)
    {
    sb.Append("
    <div class="\"widget_title\"">
    <h4>" + Title + "</h4>
    </div>
    ");
    }
    else
    {
    sb.Append(" ");
    }
    sb.Append("
    <div class="\"content\"">
    ");
    writer.Write(sb.ToString());
    base.Render(writer);
    writer.Write("
    </div>
    ");
    writer.Write("");
    writer.Write("
    </div>
    ");
    }


    here you must replace sb.Append("<div id="\"widget"" class="\"widget"">");
    with sb.Append("<div id=\"widget\" class=\" " + _CSSClass + "\">");

    So now everyone who missed this one also know knows what to do Smile
    Thanx for your great post.

    Talsja

  • Joedel says:
    6/21/2009 10:28:43 PM

    Just one question, what are the other advantages of Blog Engine aside from custom widgets?

Comments are closed