Forums / Designing with Sitefinity / Using Cufon on Site Menu

Using Cufon on Site Menu Cancel

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.

19 posts, 2 answered

Patrick Julicher

31 posts
Registered:
28 Feb 2010

28 Feb 2010
Link to this post
I would like to style the Site Menu by using Cufon. Got it working for all h1 to h6 tags. Is there any way to use Cufon on the Site Menu? Any help would be appreciated!

Kind regards, Patrick
Radoslav Georgiev

3370 posts
Registered:
01 Feb 2016

01 Mar 2010
Link to this post
Hello Patrick Julicher,

Thank you for using our services.

The Site Menu control is actually a RadMenu control (part of RadControls for ASP.NET AJAX control suite). To be honest we have not tested styling the the RadMenu with a tool as Cufon. From looking into Cufon's API I see that it add styles to html tags. The RadMenu is rendered on the page as a series of nested DIV, UL, LI, A, and SPAN tags. I guess you can use this tools to provide styles for this tag. You can use any browser developer tools to inspect the rendered menu to find which tags to style. For more information on how the RadMenu is rendered, please take a look for at its CSS selectors. It would be easier if the tool works with CSS class names as it will be easier to control appearance of specific elements.

I hope this post helps you. If you have more questions, please free to get back to us.

Kind regards,
Radoslav Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Steve

3037 posts
Registered:
03 Dec 2008

01 Mar 2010
Link to this post
This works here...

My cufon.js contains my font as well as "var $ = $telerik.$;" prefixed to the top to use the telerik embedded jQuery

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <telerik:RadScriptManager runat="server">

            <Scripts>

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

                <asp:ScriptReference Path="~/scripts/Cufon/cufon-telerik.js" />

            </Scripts>

        </telerik:RadScriptManager>



        <telerik:RadMenu ID="menu" runat="server">

            <Items>

                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">

                </telerik:RadMenuItem>

                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">

                </telerik:RadMenuItem>

            </Items>

        </telerik:RadMenu>

    </div>

    <script type="text/javascript">

        Cufon.replace('.rmText');

        Cufon.now();

    </script>

    </form>

</body>

</html>

Answered
Patrick Julicher

31 posts
Registered:
28 Feb 2010

02 Mar 2010
Link to this post
Hi Steve,

Thnkx! I will give this a try!

Regards, Patrick
Patrick Julicher

31 posts
Registered:
28 Feb 2010

02 Mar 2010
Link to this post
Hi Steve,

I got it working! Thanks a lot. Now I only need to style margins and paddings some more!

Regards, Patrick
Steve

3037 posts
Registered:
03 Dec 2008

02 Mar 2010
Link to this post
No problem, I user Cufon just about everywhere :)

It's like hitting the pretty button on your website

Do you mind marking that post as The Answer?
Patrick Julicher

31 posts
Registered:
28 Feb 2010

04 Mar 2010
Link to this post
Hi Steve,

Have you ever experienced any styling problems after using cufon on the menu? I cannot seem to change the hover color for the text any more!
Also, could you post the content of your cufon.js file including the telerik var? I cannot seem to get that var included. You could also mail it to me at pjulicher@hotmail.com.

Thanks in advance.

Best regards, Patrick
Steve

3037 posts
Registered:
03 Dec 2008

04 Mar 2010
Link to this post
Yes, well the problem is that it's changing your divs or spans to be a bunch of nested canvas tags :)

So the workaround is something like this

$(document).ready(function() {

    createhover('h2 a');

    createhover('h3 a');

    createhover('h4 a');

    createhover('h5 a');

    createhover('h6 a');

});

function createhover(id) {

    $(id).hover(

      function() {

          $(this).attr("style", "color: #00929F");

          Cufon.replace(id);

      },

      function() {

          $(this).attr("style", "color: #D9946E");

          Cufon.replace(id);

      }

    );

}

So in document.ready it assigned hoverover\out events to the elements you want...you might have to play with the selectors to make them specific enough...but same prinicpal. The good part about this though, is where the css :hover tag fails in IE6, the above will work fine :)

This is a snippit from the script

/*

* Copyright (c) 2009 Simo Kinnunen.

* Licensed under the MIT license.

*

* @version 1.09

*/

var $ = $telerik.$;

var Cufon = (function() { ...<replace with line from the cufon website...too long to post>
Patrick Julicher

31 posts
Registered:
28 Feb 2010

04 Mar 2010
Link to this post
Hi Steve,

Thanks again. Unfortunately adding the telerik var to the cufon.js throws a Javascript error (Cufon not defined). I will have a try with the workaround you've provided.

Kind regards, Patrick
Steve

3037 posts
Registered:
03 Dec 2008

04 Mar 2010
Link to this post
Hmm, if you're loading Cufon in the ScriptManager after the jQuery

...and your cufon.js is this http://cufon.shoqolate.com/js/cufon-yui.js

...and you're doing your Cufon.replace\Cufon.now at the bottom of your page (header should fail...)

Then it should be golden, I've never had that fail

Any scripts that reference or use Cufon need to be loaded after the Cufon scriptmanager line

Answered
Patrick Julicher

31 posts
Registered:
28 Feb 2010

04 Mar 2010
Link to this post
Hi Steve,

Great help! I included the font definition in the cufon.js, instead of a seperate js file and added the telerik var. After placing the script at the bottom of the page, it all works.
Now I'll only try the hover of the text color.

Thanks again!

Gr, Patrick
Patrick Julicher

31 posts
Registered:
28 Feb 2010

10 Mar 2010
Link to this post
Hi Steve,

Could you tell me where to put the code you suggested for the workaround to create the hover effect?

Gr, Patrick
Steve

3037 posts
Registered:
03 Dec 2008

10 Mar 2010
Link to this post
Make an external .js file to handle all of your javascript and load it in the scriptmanager (after the jquery lines)

keep in mind you'll need keep in mind you'll need
var $ = $telerik.$; at the top of the script...well you dont NEED it, but if you dont youll need to prefix all $ with "$telerik.$"...and thats clunky :)

Eliza Sahoo

5 posts
Registered:
25 Jan 2010

22 Apr 2010

Link to this post

The following code snippet demonstrates how you can add an event handler as well as a CSS class to an element using ScriptManager.

Sys.UI.DomEvent class provides API for attaching handlers to DOM element.
Sys.UI.DomElement class provides API and Properties for manupulating DOM elements.

bilal

5 posts
Registered:
05 Jul 2010
30 Aug 2010
Link to this post
hi

i have a jquery Menu, and i want to use it as SiteMenu, how can i replace SiteMenu with my jquery Menu.

you can see the image.

Can you help me.

thanks
- menu.png
Ivan Dimitrov

16072 posts
Registered:
12 Sep 2017

30 Aug 2010
Link to this post
Hello bilal,

It depends on which plugin you use. You can use CmsManager and its GetPages() method to populate your menu or get the SiteMapNode items from SiteMap DataSource

Regards,
Ivan Dimitrov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
bilal

5 posts
Registered:
05 Jul 2010

31 Aug 2010
Link to this post
Hi Ivan

i'm new with Sitefinity, so may be i didn't understand you, but can you show me any example for jquery Menu put it as SiteMenu.

Thanks
Ivan Dimitrov

16072 posts
Registered:
12 Sep 2017

31 Aug 2010
Link to this post
Hello bilal,

The only thing here that concern Sitefinity is how to get the pages. You can do this by using CmsManager and its method -GetPages (Finding Pages). Another option is retrieving the pages from SiteMapNodeCollection

Best wishes,
Ivan Dimitrov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Steve

3037 posts
Registered:
03 Dec 2008

31 Aug 2010
Link to this post
Hi bilal,
It should be fairly simple...

Find out how that jQuery component wants the html to be structured (div, ul, etc)

Use the methods Ivan has provided you to structure it like that in a usercontrols code behind file (loop through the nodes, create maybe a LiteralControl).

Reference that usercontrol in your webconfig as a control and\or toolbox item.

Add it to your page or masterpage in code or with the page editor

Finally in your masterpage call the jQuery menu's init function (whatever it is) and that should transform the basic HTML structure into your (animated?) menu.

19 posts, 2 answered

Using Cufon on Site Menu Cancel

Support Resources

Tools

Sitefinity Professional Services