Creating custom Content Block

Hi All,

I'm fairly new to Sitefinity, having been tasked with building up a new template for our corporate website.

I've got a lot of the structure built and the master page imported into Sitefinity (version 5.1). I'm now trying to create a custom content block, which will be a fixed width, with a background colour. I want the editor for it to include a new font in the drop-down. My idea is to create multiple of these, with different layouts, so as to reduce the need for our marketing team to have to go through advanced options having to set stylesheets and layouts etc - they'll just be able to drag the content block onto the page and its ready for them to enter their text and images etc.

What I've done so far is to create a new asp.net user control (e.g. customContentBlock.ascx), and I've copied all of the content from the "ContentBlock.ascx" control in the SDK into my new control. I've then wrapped a div around the "contentHtml" literal control, which sets my formatting. In Sitefinity advanced settings, I've created a new tool in the same place as the existing ContentBlock, keeping all of the attributes the same as the ContentBlock but changing the "Layout Template" attribute to point to my new control.

The problem I have is that when I drag this onto my page, it doesn't show my custom formatting by default. If I then go to edit the content, then click advanced, the layout template shows the default, no the one I've entered for the widget. If I change it here it gets formatted as expected, but I don't want users to have to keep doing this.

Is there a way that I can make it so that when I drag my custom content block onto a page, it automatically sets the layout template to my own?

Once I've got this bit sorted I'll be able to start looking at adding the fonts etc. (not that I've a clue how to do that yet :)).

Any help would be much appreciated.

Damian

EDIT: If it helps, I just tried changing the "Control CLR Type or Virtual Path" value for my custom widget to the path of my user control (rather than the default "Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlock, Telerik.Sitefinity"), and dragging the widget onto the page then immediately formatted it correctly. However clicking "Edit" no longer brings up the editor, but instead shows the properties window.

Hurrah, I've got the first bit working now, i.e. getting it to default to the layout template I set for the new toolbox item rather than the generic one. With a bit of playing I added a new "Toolbox Item Parameter" with the key of "layouttemplatepath" and the value of the path to the custom ascx control, and now when I drop the widget onto the page it formats it correctly straight away.

So now I just need to figure out how to add a new font into the drop-down list in the editor. If anyone has any advice on this it would be much appreciated :)

Well done, definitely not how we would have approached the situation but if it solves your problem then that's quite clever.

With regards to modifying tools/fonts/whatever on the ContentBlock, it's important to know it's just a RadEditor behind the scenes, so RadEditor googling will help you out, e.g.,:
http://www.telerik.com/help/aspnet-ajax/editor-fonts.html

Thanks Stephen for your reply.

I found that page for the fonts last week and did manage to get it into the list, however, the one thing that is missing now is that although I can select the font and it does show in the content as the new font, in the list itself the new font shows in Times Roman. I created the new tools file, and pointed to it through the settings, but is there a specific stlyesheet I would need to put the font into for it to show up in the toolbar as that font?

Thanks again.

I'm not too sure with Fonts.  With classes, we solved that problem like so:

Tools XML file:

Thanks again Steven.

Inserting the classes as you've mentioned above works for me, to a point. However, I have a really weird issue.

In my tools file I have the following:

....
  <cssFiles>
    <item name="~/styles/standard.css" />
  </cssFiles>
  <classes>
    <class name="Clear Class" value="" />
    <class name="ContentBlock_Yellow" value=".ContentBlock_Yellow" />
    <class name="NormalText" value=".NormalText" />
    <class name="TT1" value=".TT1" />
    <class name="NormalerText" value=".NormalerText" />
    <class name="ContentBlock_LightBlue" value=".ContentBlock_LightBlue" />
  </classes>
.......

Ignore some of the naming above (e.g. Normaler), this is me getting frustrated and throwing random names at it :)

Some of the classes above already exist in the standard.css file, and these show up fine in the drop-down. However, if I add a new class to the css file, and to the list of classes, it doesn't show up in the editor. However, I know its looking at the right css file and is looking at the latest version of it because if I change an existing style it updates straight away. If I copy and paste an existing class in the css, and just rename it, I cannot get it to go into the list.

Any idea why this would be? Is there something I need to do to get Sitefinity to refresh the list of classes from the css?

EDIT: Actually, I might be wrong in part of the above. I just updated one of the existing classes (NormalText) to have different colour text, and although on the page itself the new colour showed up straight away, in the editor it still shows the old colour. The same question remains however - how do I get the editor to update itself from the stylesheet - it would appear to be caching or something).

Appears it was caching somewhere - I decided to rename the style sheet, then change all references to it, and it now picks up all changes straight away, including new classes.

Ahhhhh Cache.  The crappiest thing in the web development world.  Glad you're progressing so well.

Indeed, equally as crap as browser compatibility. Between them they must take up about 75% of the time taken to build websites!

I'm having great fun at the moment just trying to line up headers. I'm working overtime trying to get the website finished before Christmas (which has always been unlikely, particularly as I haven't got even half the content yet), and by 1am I go to bed happy because I've got so much done. Then, the next morning, I get up, try it in other browsers (because at that time of night/morning I forget/can't be bothered to do this), and they all look different to each other! One of the main issues is that Sitefinity surrounds all text with spans (which actually is probably the right thing to do), which  means that when I put text into a vertical-centred table cell the span appears at the top left in most browsers (with the exception of Firefox which displays it perfect). So now I'm having to edit my CSS to try and get all the nested elements inside of the table cell 100% height and vertical aligned. But then the caching kicks in so no matter how much I refresh (even with Ctrl-F5) it doesn't look any different. 

Need sleep.