Content Designer Widget – Sitefinity 4.x

  • Content Designer Installation Guide
    • Make a folder named Common on the root of your web application.
    • Make a folder named Widgets and copy folder ContentDesigner into it (/Common/Widgets/ContentDesigner).
    • Download Images and Styles folders and copy them in /Common as well.
    • Structure should look like below after you copy necessary files for the sample:

    Common
    – Widgets
    – ContentDesigner
    – ContentDesigner.ascx
    – ContentDesigner.ascx.cs
    – ContentDesigner.ascx.designer.cs
    – Designer.cs
    – Designer.js
    – Template.ascx
    – Images
    (All images in attached Images folder)
    – Styles
    – jquery-ui-1.8.14.custom.css

    • Now browse to your Sitefinity Backend and goto Administration > Settings > Advanced > Toolboxes > Toolboxes > PageControls > Sections > ContentToolboxSection > Tools > (Create New).
    • Enter the fields with the values as shown below:

    • Save the settings and edit your any existing page or create a new one.
    • Drag and drop your widget which we named ‘Tabs designer’ in the configuration on to your page.
    • Click Edit to customize the tabs view.
    • You will see the designer like this:

    • Click ‘Add Tab’ to add a new tab on the control.

    • Under ‘Put up some content’, you will see couple of fields to put up your desired content into a newly added tab.
    • Select a style for your tabs container in the CSS Style field.
    • Simple copy/paste some content or write it in Content field.
    • Select an image for the tab to be shown as normal state and for the hover/selected state under Image and Hover Image fields.
    • You can add and/or delete as many tabs as you want with inner content and tab images for each.
    • Here is the final result with ‘Fun’ style selected:

Advertisements

About Saad Khan

Saad is an ASP.NET developer with 4 years of experience, and has also made a number of contributions to the Sitefinity marketplace and community. He loves to explore new code, and create innovative tools and procedures while exploring new approaches in his work with Sitefinity and MVC. As an experienced .NET developer, he frequents both Telerik and Microsoft technologies. In his spare time, Saad is an avid gamer and movie fanatic, and also experiments with new and interesting tools on the Microsoft platform.​​

8 comments

  1. I’ve found this from the Sitefinity forums. Would you mind giving some additional documentation on how this widget is supposed to work? I’ve registered the widget and have added three tabs but no content shows up when the tabs are saved.

  2. Charles R

    Down load is empty – sorry I would have liked to see how you had done this

  3. You can download complete working example with installation + usage guide from here http://bit.ly/qRXK8p

  4. Thank you Saad. This is a great widget and one of very few that actually come with the source code which is much appreciated.

  5. Karl

    I would love to see how this works. I can’t seem to get the link provided to work.

  6. Jeff

    Looks like a great control but I’m having some problems getting it to work properly. I followed your instructions and registered the control then added it to a page but when I create a new tab from the designer the area to add content is not visible.

    Any ideas? I’m using Sitefinity 4.4.

    Thanks

  7. Hello Jeff,

    Please confirm if you`re using Firefox?
    As far as I remember, there was a minor bug in FF.

    Please use below link to get the .js files with this fix:
    https://skydrive.live.com/?cid=cfcd9c5351f146f8&sc=documents&uc=1&id=CFCD9C5351F146F8%21131#

    Thank you

  8. Jeff

    Running under windows 7 I applied the new code from the url you provided above then tried it in both IE9 and FF13. Clicking on “Add Tab” does not make the fields visible. I’m also running SF5.

    Any ideas?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: