Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Navigation bar color

13 Answers 167 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Fit2Page asked on 03 Sep 2019, 02:02 PM

Hi,

 

How to change the Navigation Bar color incl. callout and border in 2019.2?

This seems to be changed compared to 2019.1...

Thanks for your answer.

Marc

13 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 04 Sep 2019, 01:51 PM
Recording-129.zip
RadNavigationTestProject.zip

Hi Marc,

I am not aware of changes of the RadNavigation appearance and rendering between versions R1 2019 and R2 2019.

I performed a test with the official R1 and R2 2019 versions and was unable to match differences as shown in the attached video. Can you please check it and let me know if there is something wrong or unexpected?

For your convenience I have attached my test web site project. Do you experience the issue within it? If no, can you modify it so that it starts to replicate the issue and send it back for examination! Thank you!

 

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 04 Sep 2019, 02:23 PM

Hi Rumen,

Misunderstanding here. I was pointing at the Navigationbar in the RadWizard component.

This post was done in the Wizard Thread :-)

Sorry for any misconvenience caused.

Marc

 

0
Rumen
Telerik team
answered on 04 Sep 2019, 02:42 PM
Recording-130.zip
Hi Marc,

Please excuse me for missing the control name of the forum post! 

There is only small appearance related fix in R2 2019 (version 2019.2.514) which concerns RadWizard and it is: Button triangle edge is slightly moved to the right. 
You can check the release notes here.

This is only button positioning fix and we haven't changed any colors. 
 
I performed another test (shown in the video) with the Wizard and have not found any differences. 

Here is my configuration

<telerik:RadSkinManager ID="RadSkinManager1" RenderMode="Lightweight" ShowChooser="true" runat="server"></telerik:RadSkinManager>
       <telerik:RadWizard runat="server" ID="RadWizard1">
           <WizardSteps>
               <telerik:RadWizardStep ID="WizardStep1" StepType="Start">
                   Step 1
               </telerik:RadWizardStep>
               <telerik:RadWizardStep ID="WizardStep2">
                   Step 2
               </telerik:RadWizardStep>
               <telerik:RadWizardStep ID="WizardStep3">
                   Step 3
               </telerik:RadWizardStep>
               <telerik:RadWizardStep ID="WizardStep4" StepType="Finish">
                   Finish step
               </telerik:RadWizardStep>
               <telerik:RadWizardStep ID="WizardStep5" StepType="Complete">
                   Completed!
               </telerik:RadWizardStep>
           </WizardSteps>
       </telerik:RadWizard>

Can you please test with the provided project in my earlier post and let me know if you are able to replicate the issue?

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 05 Sep 2019, 06:57 AM

Yes, but my question is how one can change the NavigationBar color to a custom color?

I cannot find how to change the CSS to do this.

Marc

0
Rumen
Telerik team
answered on 05 Sep 2019, 07:54 AM
Recording-131.zip

Hi Marc,

Thank you for the clarification!

There are two approaches to customize the colors of the Telerik components:

  • To use the Theme Builder which will allow you to change the appearance, save and import the CSS files to style the controls


  • Manually using the Chrome DevTools (or the HTML inspector of another browser) and overriding the built-in CSS classes as explained at 

    For your convenience I recorded a very quick and basic video tutorial of how to get started with the customization and attached it to my reply.

    Here is the code from the sample:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .RadWizard_Office2010Silver .rwzSelected .rwzLink {
            border-color: #c38e00;
            color: #ce0d0d;
            background-color: #25dd5c;
            background-image: linear-gradient(#38362e,#ada07c,#ff7cfc) !important;
        }

        .RadWizard_Office2010Silver .rwzLink:before {
            border-color: #bfc3ca;
            background-image: linear-gradient(135deg,#157ae0,#012163) !important;
        }

        .RadWizard_Office2010Silver .rwzLink {
            border-color: #0de4ac;
            color: #333;
            background-color: #1b55c8;
            background-image: linear-gradient(#235e98,#3365ca) !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />


        <telerik:RadWizard runat="server" ID="RadWizard1">
            <WizardSteps>
                <telerik:RadWizardStep ID="WizardStep1" StepType="Start">
                    Step 1
                </telerik:RadWizardStep>
                <telerik:RadWizardStep ID="WizardStep2">
                    Step 2
                </telerik:RadWizardStep>
                <telerik:RadWizardStep ID="WizardStep3">
                    Step 3
                </telerik:RadWizardStep>
                <telerik:RadWizardStep ID="WizardStep4" StepType="Finish">
                    Finish step
                </telerik:RadWizardStep>
                <telerik:RadWizardStep ID="WizardStep5" StepType="Complete">
                    Completed!
                </telerik:RadWizardStep>
            </WizardSteps>
        </telerik:RadWizard>
    </form>
</body>
</html>

I hope this helps! Please keep me in touch.

 

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 05 Sep 2019, 09:30 AM
capture1a93a4ab66514eeeabdc81805c08a6b6.jpg

Now my exact problem is shown in attached screenshot. version 2019.2 is used here on my side. The markup contains a rwzCallout class, which is not styled from the Theme Style Builder classes. I wonder what creates the difference here....

 

Marc

0
Rumen
Telerik team
answered on 05 Sep 2019, 02:36 PM
Recording-133.zip
Hi Marc,

Thank you for the screenshot!

I examined the source code and was unable to find any regressions or changes in the rendering and stylesheet of the Wizard control between the R1 and R2 2019 releases.

I created a custom skin in the Theme Builder for the wizard and applied it to it without issues. It works perfectly well for the old and latest versions.

Can you please help me to reproduce the issue?

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 06 Sep 2019, 07:47 AM

Hi Rumen,

 

I was able to reproduce...where can send my testproject?

 

Marc

0
Rumen
Telerik team
answered on 06 Sep 2019, 08:46 AM
You can open a support ticket and attach the project in a zip.

Thank you!

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 06 Sep 2019, 09:21 AM
Your ticket ID is: 1428485
0
Rumen
Telerik team
answered on 09 Sep 2019, 09:06 AM
Hi Marc,

Thank you for opening a support ticket and provided a sample project! I appreciate it much!

The solution I'd like to propose is to set the RenderMode property to Lightweight since the Theme Builder produces skins for the lightweight rendering only.

This can be done inline or globally for the whole app in the web.config file:

<appSettings>
    <add key="Telerik.Web.UI.RenderMode" value="lightweight" />
</appSettings>


Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 09 Sep 2019, 09:23 AM

Hi Rumen,

Thank you this works.

I could have thought of that earlier :-)

 

Marc

0
Rumen
Telerik team
answered on 09 Sep 2019, 11:09 AM
You are welcome! That's why we are here to assist you in every situation :)

Keep up the good work!

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Wizard
Asked by
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Rumen
Telerik team
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or