Background colour

12 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 22 Dec 2011 Link to this post

    Hi All,

    So am I missing a trick somewhere.

    At the moment the main skin that I use is Office2010Blue.  When using RadDock the background is mediumish blue but I want it to be white.  I can change the content cell css to white but the surrounding cells stay as blue.  I can understand this when using rounded corners as the image padding is needed but when not using rounded corners there is no need to provide the image.

    Is there a work around for this?

    Regards,

    Jon
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 26 Dec 2011 Link to this post

    Hello,

    You can find information how to customize the appearance of RadDock in the following articles:
    Controlling Appearance,
    Skins,
    Tutorial: Creating a Custom Skin,
    RadDock's HTML Rendering and CSS
    and
    CSS Skin File Selectors.

    Kind regards,
    Rumen
    the Telerik team
     
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 10 Jan 2012 Link to this post

    Hi Rumen,

    Thanks for that.  I had actually already seen these and realised that waht I need to do goes beyond their scope a little.

    I want to have a CSS based way of overriding the images that are used in the skin for the edges on the sides and bottom of the panel.  I want to have the panel's background changed to a colour of my choosing then have the left bottom and right borders pickup the skin color.

    I don't want this to be for rounded panels - which I appreciate require the use of images.  

    Regards,

    Jon

  5. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 12 Jan 2012 Link to this post

    Hi Jon,

    You can modify the background and the borders of the RadDock controls by changing its default CSS styles. In the attached sample page I have demonstrated a possible approach. Please use it as a reference for incorporating the desired appearance into your actual project.

    All the best,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 01 Feb 2012 Link to this post

    Many thanks Slav, that did the trick.  I had to muck around with the padding a little - hiding the cells removed the padding but it just needed putting back into the centre column.

    Best Regards,

    Jon
  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 02 Feb 2012 Link to this post

    Hi Slav,

    I've noticed a new issue with this, for some reason on some pages the contenttemplate contents disappear  below is a sample page that does this,  removing the css that does the display:none resolves this but obviously then displays the sides to the raddock panel.  It's almost as if the contenttemplate content is in the wrong page.

    Any thoughts?

    Regards,

    Jon

    <head runat="server">
        <title></title>
        <style type="text/css">
             
    /* CSS for RadDock custom background colour - have to remove the surround which uses images for the borders and use css borders instead */
         /* this will remove the unwanted cells */
        .rdTop .rdLeft,
        .rdTop .rdRight,
        .rdMiddle .rdLeft,
        .rdMiddle .rdRight,
        .rdBottom
        {
             display: none;
        }
       
        /* put the necessary border as the image border from the sprite was removed when the left and right cells were disabled */
        .rdTop .rdCenter,
        .rdMiddle .rdCenter
        {
            padding-left:8px !important;
            padding-right:8px !important;
            border-left: 1px solid #9eb6ce !important;
            border-right: 1px solid #9eb6ce !important;
            background-color: white !important;
        }
        .rdMiddle .rdCenter
        {
            border-bottom: 1px solid #9eb6ce !important;
            padding-top:2px !important;
            padding-bottom:5px !important;
        }
     
        /* Setting custom background colour to Dock content */
        .RadDock table.rdTable tr.rdMiddle td.rdCenter .rdContent
        {
            background-color: white !important;
        }
    /* END OF CSS for RadDock custom background colour */
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadStyleSheetManager ID="pgRadStyleSheetManager" runat="server"></telerik:RadStyleSheetManager>
            <telerik:RadScriptManager ID="pgRadScriptManager" runat="server"></telerik:RadScriptManager>
            <telerik:RadDock ID="uxRadDockSecurityProblem" runat="server"  Height="65px" Top="100px" Width="400px"
                EnableRoundedCorners="false" Pinned="true" Title="j"
                EnableAnimation="false" AutoPostBack="false" Resizable="false" DefaultCommands="None" EnableDrag="False"
                Tag="">
                <ContentTemplate>
                    sddd           
                </ContentTemplate>
            </telerik:RadDock>
        </form>
    </body>
    </html>
  8. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 06 Feb 2012 Link to this post

    Hello Jon,

    I tested your code sample for the described behavior, but I wasn't able to reproduce the issue. Please ensure that the provided snippet indeed isolates the problem. I have attached a screen capture so that you can verify that I haven't missed something.

    Note that the proper way to create new appearance for the dock control is to use the guidelines in the help article Tutorial: Creating a Custom Skin in order to create a new skin. If you need to modify the look of RadDock further, you are free to do so, but keep in mind that such customizations are not supported and may lead to an unexpected behavior.

    In case you continue experience problems, please open a support ticket  and send a sample demo which reproduces the issue and which is fully runnable and does not need any modifications to be done in order to be ran. Once I receive it, I will help you get the desired behavior, if possible.

    Kind regards,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  9. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 06 Feb 2012 Link to this post

    Hi Slav,

    That's odd however I just tried in Chrome and it works like in your screen shot.  The bug seems to be happening in IE8 - looking at your screenshot it looks like you are on IE9 - is that right?

    Yeah using a new skin would be problematic as I want the colour to change for all skins and the skin to be a standard...  Thus a custom skin would only open up more work etc....

    Regards,

    Jon
  10. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 08 Feb 2012 Link to this post

    Hi again Slav,

    I've just tried this in a new empty website and the same thing happens on IE8, I've also cleared the cache and the problem is still there.  It doesn't appear when using Chrome.

    Fingers crossed the fact that it is a browser issue will allow a work around to be done.

    Regards,

    Jon
  11. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 09 Feb 2012 Link to this post

    Hello Jon,

    Indeed, the content is not displayed under Internet Explorer 8. It appears that the height of the RadDock's content container is not calculated correctly when the rendered border cells of the control are removed via CSS and the page is viewed under the mentioned browser. To alter this effect, please add the following handler of the RadDock OnClientInitialize event in order to set the correct height of the container element for your custom scenario:
    <telerik:RadDock ID="uxRadDockSecurityProblem" runat="server" Height="65px" Top="100px"
        Width="400px" EnableRoundedCorners="false" Pinned="true" Title="j" EnableAnimation="false"
        AutoPostBack="false" Resizable="false" DefaultCommands="None" EnableDrag="False"
        Tag="" OnClientInitialize="OnClientInitialize">
        <ContentTemplate>
            sddd
        </ContentTemplate>
    </telerik:RadDock>
    <script type="text/javascript">
        function OnClientInitialize(sender, args) {
            if ($telerik.isIE8) {
                var dockHeight = $telerik.getBounds(sender.get_element()).height;
                var titlebarHeight = $telerik.getBounds(sender.get_titleBar()).height;
                sender.get_contentContainer().style.height = dockHeight - titlebarHeight;
            }
        }
    </script>

    Regards,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  12. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 09 Feb 2012 Link to this post

    Hi Slav,

    Many thanks - works great!

    Will that go in as a bug fix or will I need to keep it in as a patch? i like to have as few as possible work arounds in the code...

    Regards,

    Jon
  13. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 10 Feb 2012 Link to this post

    Hello Jon,

    I am very happy that the problem is successfully resolved!

    Note that this fix is required, because some custom modifications have been applied to the RadDock control. Such changes are out of the scope of our support system and resolving any bugs that are caused by them is developer's responsibility. As the bug that you have encountered is specific only to your custom setup, it doesn't need to be fixed in the default RadButton control.

    Feel free to contact us again if you run into more difficulties.

    All the best,
    Slav
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017