I'm looking for a good design "pattern" for a sidebar navigation menu in jsf.
I really wanted to use rich:menuPanel but it is limited in too many ways (Mainly, that if i use rich:menuPanelItem I can't make the icons any other size than the default 16x16.
So... Anyone has a good one?
TnX!
I think you can adjust every aspect of any richfaces component through CSS, so using it and changing the height/width properties using CSS should just help you do what you want
Related
There are two problems that I have using the EnhancedDateRangePicker in Vaadin 14(source: https://vaadin.com/directory/component/date-range-picker):
The design is broken when I add the component somewhere in a layout but that happens only when I add a label. If I don't the design is as expected to be. Here is a screenshot to see what exactly happens -
The other problem is that the dash is not visible clearly in this color(light gray I think). Is there a way to change the color of the dash?
Could you please tell me is there any way to make the design as I mentioned in the above two points?
Thanks in advance :).
The problem is solved. It's not the problem with the component, it is actually the Theme which we are using in our projects and the component just overrides the theme styles and that brokes the component. When I put it in a blank page there is no problem. Thanks you all very much for the effort :).
I prefer OneUI V3.0.2 to 2.0 except for one element, which is paging. I think the new style looks horrible.
Here is an example of the old paging style:
And here is an example of the new styling:
I would like to replace the new styling with the old, but just for this one element, or at least to create my own style for paging.
I have looked at the OneUI documentation, but there is something that I don't understand. I am using a dataView in my layout, but when I go to look at how things are implemented, it always seems that they are using raw html, so there is a table element in there. I don't understand that. I want to know how to style a custom control, not html.
Any help would be greatly appreciated.
Styling is done by your browsers rendering engine. It applies CSS to HTML. That's how it works. So you need to create some CSS with !important to fix it.
Easiest way to figure it out: load the page, use FF or Chrome Dev tools that allow you to live edit the CSS and see the result instantly. Once you have it, copy to a CSS file and add to your project.
Comparing to a V2 page makes it easier to figure out.
Just reading the CSS source is rather a pain. The Dev tools rock
I cannot find any examples in Rikulo on how to create and use menu bar, menu, sub menu and menu items.
could anyone point me in the right direction please?
regards
No, it is not supported. There are too many styles and variants. Many of them don't require much JS code. Here are some examples. You can port one to your application and wrap it as a Rikulo UI component, if you want.
I assumes you're talking about Rikulo UI. If you're using Bootjack, you can pick one from Bootstrap's 3rd party libraries.
Here's a tricky one: has anybody seen a YUI dialog/panel implementation with nice OS X style shadows around the dialog, instead of the blocky shadow that is implemented by default with the "underlay" element?
You can see this type of shadow on Amazon.com popup windows. It requires quite a bit of PNGs but looks very nice.
I'm thinking of inserting extra DIVs or replacing the .underlay element, and hook into the dialog size event to adapt the dimensions. The latter would be required because YUI uses some CSS trickery to make the underlay element "snap" to the dialog dimensions with CSS only in modern browsers, and uses a manual dimension update for IE.
EDIT: Just checked YUI 3. The Panel widget is not available yet, only the Container and it's still beta. So I'm looking at solving this in YUI 2.
PS: Oh I guess I could include the PNG shadow as part of the Panel's header, body and footer (hd, bd, ft), as an extra padding. And use a css rule to hide YUI's underlay. Hmmmmmm I just wish I didn't have to do this because it changes calculations for the draggable area, it's not a great way to do it.
For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!