+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Using Cufon on Site Menu

Using Cufon on Site Menu

19 posts, 2 answered
  1. Patrick Julicher
    Patrick Julicher avatar
    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
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    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.
  3. Steve
    Steve avatar
    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>
     
    <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
  4. Patrick Julicher
    Patrick Julicher avatar
    31 posts
    Registered:
    28 Feb 2010
    02 Mar 2010
    Link to this post
    Hi Steve,

    Thnkx! I will give this a try!

    Regards,  Patrick
  5. Patrick Julicher
    Patrick Julicher avatar
    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
  6. Steve
    Steve avatar
    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?
  7. Patrick Julicher
    Patrick Julicher avatar
    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
  8. Steve
    Steve avatar
    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>

  9. Patrick Julicher
    Patrick Julicher avatar
    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 
  10. Steve
    Steve avatar
    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
  11. Patrick Julicher
    Patrick Julicher avatar
    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
  12. Patrick Julicher
    Patrick Julicher avatar
    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
  13. Steve
    Steve avatar
    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 :)
  14. Eliza Sahoo
    Eliza Sahoo avatar
    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.
  15. bilal
    bilal avatar
    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
  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    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
  17. bilal
    bilal avatar
    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
  18. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    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
  19. Steve
    Steve avatar
    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.
Register for webinar
19 posts, 2 answered