This is a migrated thread and some comments may be shown as answers.

[Theme Builder Custom Skin] CSS not showing

10 Answers 43 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Hernan
Top achievements
Rank 1
Hernan asked on 30 Dec 2016, 02:27 PM

Hi Everyone!

I'm new to Telerik Styling and I had and old web skin style (Forest Skin).

I'm trying to "Upgrade" the style to a new custom skin that is still available (Ex. Boostrap) and customize it with colours I need.

The problem relays on that when I finish my DLL of my custom Skin with Boostrap base and load it on my website, when I ran te program the controlers (Ex. Button) doesn't show it's css (It appears all transparent) when I use the Inspect Element of Chrome it looks like it's getting it's css from a WebResources that brings class "RgDecorated". But in my DLL "RgDecorated" does not exist.

I think this is that is getting css from a Telerik Default, buy I can't find it.

As an example of what I'm seeing I leave you two references pictures. One with old Forest.Skin.dll and one with new Forest.Skin.dll

 

 

10 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 03 Jan 2017, 12:57 PM
Hi Hernan,

Can you go through the steps in the following article and make sure that all suggested configurations are applied in your project? Please, make sure that the Theme Builder application can be used to create or modify only themes used in Lightweight RenderMode:
http://docs.telerik.com/devtools/aspnet-ajax/general-information/controlling-visual-appearance/creating-a-custom-skin#create-a-custom-skin-dll-from-an-existing-custom-skin-with-skins-assembly-builder

Regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Hernan
Top achievements
Rank 1
answered on 04 Jan 2017, 03:55 PM

Hi Vessy

So I made a theme using Telerik visual style builder and downloaded and next I used Skin assembly builder to create DLL...

When I put my .dll in Bin folder of my project and run the program, it gives me an error of version Telerik.web.UI " 'Telerik.Web.UI, Version=2014.2.724.40" I know this error is about what version of .NET Framework you are using in your project... but since .dll is the one that is updated, isn't a way to make the version of the .dll the same as the Telerik.web.UI that I'm using?

 

Thanks for the help! :)

0
Hernan
Top achievements
Rank 1
answered on 04 Jan 2017, 07:05 PM

Edit:

For the version of the .dll I create the reference from my website in the project to Telerik.Web.UI 2014.2.724.40 but is still having error when I run the program with the same message.

0
Hernan
Top achievements
Rank 1
answered on 04 Jan 2017, 07:41 PM

Edit:

I could make the program work, I had to reference the Telerik.Web.UI.dll that was in the project... But is still the problem of CSS as in the first post I did, it doesn't show css, such as button,grid,etc.

I had made step by step on the Option of builder+assembly of Telerik, but the problem still persist. What else could be that is making the images or css of grid/buttons/etc not to show?

 

Thanks for the help :)

 

Sorry about re posting T_T

0
Hernan
Top achievements
Rank 1
answered on 05 Jan 2017, 08:25 PM

Hi Vessy:

So I could make it work (The program can load dll of new skin).... I have a new question about this now... it looks like some css of the skin isn't good (widths of arrow for example, photo added) how can I change this css? I tried with the main .aspx using style inside the .aspx file with directive "!important" but it doesn't change the css.

 

Thanks for the help! :)

0
Vessy
Telerik team
answered on 09 Jan 2017, 12:42 PM
Hi Hernan,

I am glad you managed to run the custom Skin library successfully. Regarding the style you want to change - yes, you can change them directly in the aspx files, but you have to ensure that the used selector is heavier than the selector used inside the skin itself. Using the !important statement does not guarantee that the style will be heavier in case the style you want to overwrite is defined with much more specific selector, you can read more details on the matter here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Aside from that, as you are already building a custom skin for your controls, I would advise that you directly apply the desired styles to your skin and rebuild it.

As a final not, I would like to kindly ask you to open separate tickets/threads for each issue you are facing so we can keep the support threads consistent. Thank you for your understanding.

Regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Hernan
Top achievements
Rank 1
answered on 09 Jan 2017, 02:16 PM

Hi Vessy,

Thanks for the article is helpful, but I don't understand what you say about rebuilding the custom skin, because the dll is coming from http://skinsassemblybuilder.telerik.com/ where the only thing that I get is dll already patched. How is that I can do to make corrections in the dll and the rebuild it?

 

thanks for the help!

0
Vessy
Telerik team
answered on 12 Jan 2017, 12:25 PM
Hi Hernan,

When creating a custom/modified/new skin via Visual Style Builder, it generates an archive, containing all styling resources for the created skin (like css files, sprites, etc.). You can extract this archive and modify the desired styles (colors and widths) directly in the files, the archive the files again and upload the modified version to the Skin Assembly builder.

In addition, you can also consider the Fine tuning option of the Style builder and see whether it will be applicable to your scenario:
http://docs.telerik.com/devtools/aspnet-ajax/visual-stylebuilder/fine-tuning

Regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Hernan
Top achievements
Rank 1
answered on 13 Jan 2017, 06:49 PM

Hi Vessy,

 

Thanks for the Help!

0
Vessy
Telerik team
answered on 16 Jan 2017, 11:00 AM
Hi,

You are absolutely welcome, Hernan - let us know should any further issue occurs.

Regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Hernan
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Hernan
Top achievements
Rank 1
Share this question
or