I want to develop a custom skin or a css for ASP default menu.
I want my menu look like the custom controls that are available for purchase like Rad from Telerik.
If have tried to google for CSS properties of the ASP Menu but have found only some expose properties. Would really appreciate some help here.
I think this is a question of CSS markup + graphics design.
See simple css tutor:
Creating Navigation Menus with CSS
Now, design video:
How to create a web 2.0 menu bar in Photoshop
Deep design tutor:
Tutzor web 2.0 style design
Now, talking about ASP.NET + CSS, try ASP.NET 2.0 CSS Friendly Control Adapters
Related
Piranha CMS uses Bootstrap 4.1.1 out of the box. The question is just this, is there any opportunity to use other css framework? I mean to use it in client part of the project. I understand that it's possible to customize WYSIWYG editor to use any classes from any css framework, but in preview in manager module of Piranha CMS one will not see correct page view as cms uses Bootstrap 4.1.1.
As Piranha is a decoupled CMS you can use any css framework you want in your client application. The wysiwyg editor in the Admin UI can be styled with custom style sheets, but the concept here is not to mimic 100% the front end application, rather give the editor a good hint of what he/she is doing.
When you click preview in the admin it will actually open a new page that contains an iframe with the actual site, so here the editor will see the actual layout of the content.
Best regards
I am having such a difficult time trying to figure out how to style my basic vertical navigation with drop-down sub-pages in Sitefinity.
I cannot find a simple tutorial or explanation for what CSS classes I need to target in order to change the style of my navigation, the documentation provided is SO UNCLEAR, and I haven't found much help in the forums.
All I can find so far is that I need to create a main.css file which I use to create a customized skin, but I can't get a straightforward answer about what to target for this specific look.
Any help would be much appreciated from this Sitefinity newcomer!
The Navigation Widget is using the Telerik RadControls to generate the menu's. This could be:
RadMenu
RadPanelBar
RadTreeView
...
Based on the Navigation mode you choose, one of these is rendered. Probably you are using the Simple Vertical Menu?
You could override the classes that are generated, or define a Skin.
Goto the designer of your Navigation Widget
Add a name (e.g. CustomSKin) into the 'Wrapper CSS' field.
Check your markup using e.g. Firebug or Chrome Extensions. You will see this prefix added to the markup of your navigation section.
Then you can declare the classes you want to style like this:
.RadPanelBar_CustomSkin .rpRootGroup {
// Your css
}
You could always take a look at the documentation of the RadControls that Telerik offers:
http://www.telerik.com/help/aspnet-ajax/panelbar-appearance-css-selectors.html
Kind regards,
Daniel Plomp
The easiest way to me seems to go to the Sitefinity Template builder, then follow the steps bellow:
Go to the http://templatebuilder.sitefinity.com
Go to Navigation and drag a vertical menu.
Go to appearance, choose a skin for the navigation from the Navigation Skin dropdown.
Export the template (save it to your had disk).
Unzip it and go to the \css folder.
Now change the Menu.SkinName.css.
Hope this helps. I guess the folks at Telerik didn't put more info on styling menus as there is a template builder that gets some of the work done.
I have developed a site using ASP.NET Telerik controls and components. Its not working (positioning, screen resolution) fine on mobiles devices (scaling across resolutions).
I decided to integrate bootstrap in my site but bootstrap-responsive styles are not adjusting what I need.
Has anyone tried bootstrap with asp.net Telerik components? are both compatible?
Any suggestion/proper guide ?
There are incompatibilities between some frameworks like Bootstrap and Telerik. The main problem is different frameworks make use of CSS style names and if two different frameworks use the same name, there will be conflicts. I noticed this with the latest version of Bootstrap (3.0) and the latest version of Telerik, in some Telerik controls the checkbox formatting was over-ridden by Bootstrap. Unfortunately it's very tricky to fix, you need to customize it to a point that it would be easier not to use the framework at all.
Link Says
It depends on what you're trying to accomplish. In general, bootstrap
2.0 is a lot easier to work with along with Telerik because they style less of the default elements, like . In 2.0, they require you
to add some class to a element, which means that they don't
try to style a Telerik grid, for example. This makes it look better.
What you won't get is a "Bootstrap themed" version of the Telerik
controls. Continuing with the Telerik grid example, if you use that
in conjunction with Bootstrap it will look like a Telerik grid, not a
Bootstrap table, with it's nice pager buttons, etc. That will take a
lot of work to change, and I don't recommend it. Telerik emits html
with its own CSS class names and mapping that back to Bootstrap would
be a chore. I've found, actually, that with Bootstrap I use a lot
less of Telerik than I did before, and just use more straight html +
Bootstrap.
If you do decide to integrate Telerik in your site, I recommend the
Telerik "Simple" theme, which seems to match Bootstrap's default
colors best.
RadImageEditor icons are hidden when I use bootstrap.
So I must say that it is not 100% compatible.
If you need bootstrap to make your page responsive, you can use RadPageLayout: http://www.telerik.com/products/aspnet-ajax/responsive-page-layout.aspx. Thus, you can drop Bootstrap. Here is its documentation: http://www.telerik.bg/help/aspnet-ajax/page-layout-overview.html. In case you are using some styling it provides, perhaps RadFormDecorator can help you style the forms you have: http://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx.
If you let me do a suggestion, you can check for MDBootstrap (it´s a front-end framework built on top of Bootstrap). There you will find an article with free ASP.NET templates.
Yes, I recently build ASP.NET 2013 Web Application using Bootstrap and Telerik ASP.NET Ajax version Q2 2015 and .NET Framework 4.5.1 .
During my implementation of this project, I had one issue:
• One issue is that when I use the RadAjaxManager, I got this error:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
• To fix this, I wrapped the code section with the control.
I am relatively new to website design and specifically working in ASP.NET, i am using CSS to style my site, but when i use ASP.NET Controls like GridView, Navigation controls, etc ...
they are messed up by the style sheets, and you can't see that until you run the website, because the controls are translated to HTML and so affected by CSS in a way that you can't predict, how to solve this, and is there a better way to layout and desgin sites in ASP.NET.
You can use ControlAdapters or better use ASP.NET MVC
A great method that's worked well for me is to create Skins for your ASP.NET controls.
http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx
http://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-skins-with-css-for-a-flexible-and-maintainable-aspnet-web-site
After getting my skins and CSS classes created for the different pieces of my ASP.NET controls I'll then run my app in a browser with good developer tools, Google Chrome has a stellar set of dev tools that allow you to modify your css classes and styles right in the page so you can see the results immediately. I'll then update my Skin CSS classes to match the styles I created using the browser dev tool.
I have used the CSS Friendly menu in one of my projects and have found it great, however I have 2 different areas in the same project and would like to use the CSS Friendly menu in just some of my pages.
How can I prevent all other menus from using the Css Friendly menu dll?
Thank you
Josimari
There's a propery that the CSS Friendly adapters look for called "AdapterEnabled". If you add this to each control you don't want to use the CSS Friendly adapters and set it to "false" then they should render using the standard framework method.