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


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”.


Comments (2)

  1. niyatee_p says:

    I followed your post regarding how to find sites and subsite.I actually want to retrieve all the contents inside category,top sites and site map and display it as a drop down menu at the top navigation bar.With the help of your post i could very well retrieve all the sites inside site directory but was not able to retrieve SEPARATELY the sites only inside category or only inside top sites or only all the contents of site map.Please do let me know some code using which i can do so.

    thanks in advance.

  2. Nathan says:

    I tried but looks the two added css lines are completed ingored (no green text in web part). Any thoughts? I added them at end of the theme.css file for Wheat theme.

    What am i missing?

    BTW, the font part works.

Skip to main content