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:

Advertisement