Issue 78 - How to change tabs color?
Last Post 08/21/2012 9:34 PM by Joseph Craig. 6 Replies.
Author Messages Not Resolved
Abraham Tameru
Nuker
Nuker
Posts:13


--
08/07/2012 2:47 AM
    Hi,
    Many thanks for issue 78, is it possible to change tabs color?
    I tried to add a style like style="background-color:#0000FF;" it doesn't work.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/07/2012 12:35 PM
    Of course you can!

    In the tutorial code, the class="dnnForm dnnModuleSettings dnnClear" add classes to the tabs div so that jQueryUI will pick up styles from the default.css stylesheet, where the styles are defined to conform to the standard DotNetNuke styles. If you want to create your very own CSS file, it's probably best to start with one you download and that you modify.

    You can, of course, modify those styles, or use your own styles or stylesheet for the tabs. You've just got to get the classes right.

    One way to do this is to use the ThemeGallery at http://jqueryui.com/themeroller/#themeGallery to choose a predefined look and feel, or use the ThemeRoller tool there to create your own. You can then download a custom CSS file, add it to your DotNetNuke installation, and use it. As an example, leave the extra classes of of the div with id="tabs" and, just before the jqueryui script, add something like this:

    < link rel="stylesheet" href="/js/jquery-ui-1.8.14.custom.css" type="text/css" media="all" / >

    Here I have placed my custom CSS file in the js directory of the DotNetNuke installation.




    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/07/2012 12:35 PM
    I should have said, too, that there is a lot of information about using jqueryUI stuff in the DotNetNuke Wiki at DotNetNuke.com.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Abraham Tameru
    Nuker
    Nuker
    Posts:13


    --
    08/09/2012 3:07 AM
    I you told me I download a custom css from ThemeGallery. I copied "< link rel="stylesheet" href="/js/jquery-ui-1.8.14.custom.css" type="text/css" media="all" / > " in the footer before the jquery script
    <script type="text/javascript"> jQuery(function ($) { $('#tabs').dnnTabs(); });</script> <br /> It doesn't work. Did I miss something?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/09/2012 8:38 AM
    You will want to look at the page with some developer tools to see if the css file was loaded.

    I assume that you do have a file named jquery-ui-1.8.14.custom.css in your site's js directory. If not, you'v missed an important step: you need to get the custom css file, upload it to your site, and then refer to it with the link tag.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Abraham Tameru
    Nuker
    Nuker
    Posts:13


    --
    08/09/2012 8:57 AM
    you're right my jquery file is jquery-ui-1.8.22.custom.css
    Thanks
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    08/21/2012 9:34 PM
    Did you ever resolve this problem?

    Joe Craig, Patapsco Research Group
    Complete DNN Support


    ---