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.
Related
I'm building a site with Orchard which need to support two languages. I've installed Culture Picker Module which allowed me to separately input 2 languages for the same content. It looks pretty nice actually. However, when I click on the translations button, it only change the content, but for other elements like menu, it still remains in English. Is there any way to change completely for the whole page? Or how to make a global button of changing the language? Thanks a lot!
Click on Manage Content in Administration. You have to search for widgets and then add a part. After that, you search for Localization.
Then, go to the widgets area. You can select a widget like the menu, and then you can just simply add a translation and add the translated version of your menu as the other answer proposed.
Have you created the Localized version of your menu?
I have a problem in the WordPress menu. I need to add some additional HTML or images or any custom text. Currently I am using jQuery to append to Menu item's submenus <ul>. I am currently using this static method, but I want it to be dynamic.
Here is what I want. Like how they have images and text in submenus.
Please guide me on how to have it dynamic in wp_nav_menu().
considering the default wp nav menu is rather limited when it comes to design options, the only possibility in my opinion is implementing a custom menu walker. some good starting info on that topic can be found here: http://jamescollings.co.uk/blog/wordpress-custom-walker-output-section-of-menu/
using this approach you can still manage your menu structure with wordpress standard tools, but have a lot more freedom when it comes to layouting the output.
another approach would be using some extended menu plugins like for example http://wpmegamenu.com/
I am currently trying to update an existing RefineryCMS app from gem version so I can be up to date add bootstrap 3 at the same time.
gem "refinerycms", "~> 2.0.10"
to
gem "refinerycms", "~> 2.1.0"
After removing outdated blocks and deleting a couple overridden views from the site's past I have got the site successfully functioning again with its current database's content.
Now that Refinery has switched over to the Menu Presenter in exchange of the old partials. How can I add, remove and edit the classes of all elements within the new Menu Presenter system?
I would like to have control of the surrounding div's to the most inner <"li"> an <"a"> children elements.
I have been looking at the http://refinerycms.com/guides/menu-presenter guide. I think I understand this guide as a way of adding a secondary menu to the footer of your footer declared pages. So only specific pages that are not in the existing menu at the top will populate the menu explained in the example.
I apologize for my lack of understanding, but I am having a hard time using this example to answer my question above about Refinery's initial main menu's classes.
Not entirely sure what you're trying to achieve, but I think the answers are all in the source of Menu_Presenter:
https://github.com/refinery/refinerycms/blob/master/pages/app/presenters/refinery/pages/menu_presenter.rb
You should be able to set the attributes on a presenter then render the menu thus:
presenter = Refinery::Pages::MenuPresenter.new(menu_items, self)
presenter.first_css = "my_first_item_class"
presenter.last_css = "my_last_item_class"
presenter
To style the links ( elements) just set "link_tag_css" on your MenuPresenter.
If you're trying to do something with nested dropdowns for Bootstrap, that could get a little more complicated. The trouble, as you probably know; with Bootstrap if you want dropdowns you need to insert data attributes to various link elements.
This post: Rails Bootstrap Navbar and refineryCMS gives a method to override MenuPresenter, but I haven't read and understood the code fully and it needs a couple of tweaks. Worked OK for me, though I am sure there are more elegant ways to achieve nice nested menus.
I am making a top menu, and it looks like this:
http://i.stack.imgur.com/5O5G5.png
The contact tab will remain in its place and the home tab has to be first.
IF the user wants to add another tab, they can in the cms editior (DNN) they would just create the link and wrap the div tag about the link etc..
im stuck to how i can get the css to add the menu tab and push the home tab to the left as the menu grows?
If sounds like you are trying to manually build the menu using HTML. What you need to do is ensure that you have the DNN navigation control as part of your skin and it will handle adding the menu items for you. You'll be able to modify the menu to look however you like using CSS.
The best way to learn DNN skinning is to look at one of the existing skins (found in /Portals/_default/skins/) and then copy one of the skins and start making changes to change it to your desired look.
The DNN skinning architecture is very well done and easy to pick up for anyone who knows ASP.NET (though it is different from Master Pages). The hardest part is picking and learning to work with the various navigation providers. Most people work with DNNMenu which is more complicated than it needs to be on the CSS Side. The DDR Menu which will be the default provider for DNN 6+ should be easier to work with. But the documentation for it isn't complete yet so it takes some learning to get started with it.
I'd like my theme to display a menu in a completely custom way. What functions should I have to use in my theme code? Is there any good tutorial out there?
Yes, proceed to api.drupal.org and take a look at theme_menu_tree, theme_menu_item, and theme_menu_item_link. With these overrides, you can change the html that is output by the menu system, and then style accordingly with CSS.
For a tutorial, I would suggest going through the Drupal 6 theming guide.
You might also want to check out this article from palantir, on the menu block module.