How to implement style in SharePoint 2007 (MOSS/WSS) Web Parts using CSS and using property

  • Article

Here are some inputs to change body text inside custom webparts through css and also dynamically through property:

The css for any webparts within a site in WSS/MOSS is controlled from the applied Theme on that site. And you will find it inside:

“C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\”.

I used the Theme called “Wheat”.

Open the theme.css file within the “WHEAT” folder. Add these lines at the end of the file:

**

.divstyle{font-family:Verdana; font-size:10pt; color:aqua}

.inputstyle{font-family:Verdana; font-size:8pt; color:green; font-weight:bold}

And here is the Webpart code:

===================================================

using System;

using System.Runtime.InteropServices;

using System.Web.UI;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Serialization;

using System.Web.UI.HtmlControls;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

using Microsoft.SharePoint.WebPartPages;

namespace WPCSS

{

    [Guid("49005fcc-9b2b-4d5e-b259-c4ff86c1fc98")]

    public class WPCSS : System.Web.UI.WebControls.WebParts.WebPart

    {

        System.Web.UI.WebControls.Style InputStyle2;

        System.Web.UI.WebControls.TextBox SimpleTB;

        // Creating a property to set the font externally

        private string displayFontName = "";

        [WebBrowsable(true), Personalizable(true)]

        public string DisplayFontName

        {

            get { return displayFontName; }

            set { displayFontName = value; }

        }

        protected override void Render(HtmlTextWriter writer)

        {

            // TODO: add custom rendering code here.

            EnsureChildControls();

            //applying the style- divstyle I have added earlier in the theme.css

            writer.Write(@"<div class='divstyle'>Here is some text");

            SimpleTB.RenderControl(writer);

            writer.Write(@"</div>");       

        }

        protected override void CreateChildControls()

        {

            base.CreateChildControls();

            SimpleTB = new System.Web.UI.WebControls.TextBox();

            SimpleTB.CssClass = "inputstyle"; //applying the style- inputstyle I have added earlier in the theme.css

            InputStyle2 = new System.Web.UI.WebControls.Style();

            InputStyle2.Font.Bold = true;

            InputStyle2.Font.Name = displayFontName;

            InputStyle2.Font.Size = 10;

            SimpleTB.ApplyStyle(InputStyle2);

            this.Controls.Add(SimpleTB);

        }

    }

}

=============================================================

Once you deploy the webpart and add it to any page of your site, open the “Site Settings” and changed the site theme to “WHEAT”. This will give you some text in color-aqua and a textbox where you have text with font “Verdana” and font color as green within your custom webpart.

Clear the text inside the textbox.

Now go to “Edit Page” and in the Edit menu of the webpart click on “Modify Shared Webpart”. In the “Miscellaneous” section you will find the property “DisplayFontName”. Type “Arial” there and hit OK. Now if you leave the Edit mode, and type some text in the textbox, you will find the font has changed to “Arial”.