Theme layout styling override

Locked
mhkchhaya
Posts: 3
Joined: 16 Oct 2015, 16:09

19 Oct 2015, 04:46

Hello,

I have searched the Primefaces/sentinel forum before posting this question; but could not find enough information/answer.
If I have missed particular link or answer, please forward me.

Basically, I am looking for answers on following regarding sentinel theme + layout:
1. How easy it is to change the form label alignment (left->right)? Will overriding original CSS cause any maintenance overhead when get the theme upgrade?
Same question for font color, font size etc.
2. How easy it is to change the icons of default options? For example, down arrow key is used to expand/collapse the menu option. Can I change that with +/- type of icon?
3. What is best way to change default menu option to keep it expanded/collapsed (entire menu options) based upon cookie settings? Means, menu option would remain default Expanded-All if cookie variable is set. I believe this would need change in javascript(jquery) side. Is it advisable to change default behavior considering future updates from the theme? Is there any sample code/example to achieve this?
4. Is theme appropriate for larger screen (22+ inches)? My concern is default form label settings being left aligned. Left align makes more sense if the input field is right below the label (working better for smaller devices as well), but is stressful to eyes when label and input are in same line (to avoid horizontal scrolling of the form) on larger screen.
5. What should be the best practise as far as CSS/JS overriding is concern and how to make it less maintenance issue/rework?

Thanks in advance,
-Mihir.

aragorn
Posts: 3743
Joined: 29 Jun 2013, 12:38

21 Oct 2015, 11:45

1. How easy it is to change the form label alignment (left->right)? Will overriding original CSS cause any maintenance overhead when get the theme upgrade?
Same question for font color, font size etc.
- You can override theme.css in Sentinel. We added Less feature for Rio, Modena, Adamantium, Volt; (Less Detail: http://lesscss.org/ ) You can easily change font-size, color, background-color, .. of components in Rio, Modena, Adamantium, Volt. Sentinel doesn't have LESS feature. Therefore, you can try to override css. I can help you.
2. How easy it is to change the icons of default options? For example, down arrow key is used to expand/collapse the menu option. Can I change that with +/- type of icon?
- You need to override JS and SentinelMenuRenderer. If you want these changes, I can do them and send changes.
3. What is best way to change default menu option to keep it expanded/collapsed (entire menu options) based upon cookie settings?
- <ps:menu> (left menu on Sentinel) ?? or p:*menu (primefaces component)
4. Is theme appropriate for larger screen (22+ inches)? My concern is default form label settings being left aligned. Left align makes more sense if the input field is right below the label (working better for smaller devices as well), but is stressful to eyes when label and input are in same line (to avoid horizontal scrolling of the form) on larger screen.
- All of our Layouts have responsive feature. For this feature, break points of media query;

Code: Select all

@media (min-width: 1201px) {
...
}

@media (min-width: 641px) {
...
}

@media (min-width: 641px) and (max-width: 1200px) {
 ...
}
  
/* Landscape phone to portrait tablet */
@media (max-width: 640px) {
...
}
 
/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px) {
..
}
Also, we added responsive feature for primefaces components on 5.2.4+ and 5.3. On next Layout releases, Layout and responsive components will be able to work in harmony. (http://www.primefaces.org/showcase/ui/m ... sive.xhtml)

mhkchhaya
Posts: 3
Joined: 16 Oct 2015, 16:09

28 Oct 2015, 00:27

Thanks for your time and response. Is it possible the changes you are mentioning via JS could be implemented in bean by using MenuModel?
Also, what is your recommendation as far as using MenuModel design itself is concerned? We have role+permission based menu options (dynamic) and, would be helpful to control the expand/collapse (no need to remember in cookies) based upon roles. So when I know that user with highest role would not want entire menu to be expanded (or only limited menu items expanded), whereas, it would be more helpful to keep entire menu expanded for the user with limited role (and so limited options).

Basically, I am looking for something I can configure in Java(bean) so that it can be overridden/configured for different apps.

Looking forward for your guidance.

Thanks,
-Mihir.

aragorn
Posts: 3743
Joined: 29 Jun 2013, 12:38

02 Nov 2015, 08:51

You can use model attribute of ps:menu. You can create dynamic menu in bean with this attribute.
when I know that user with highest role would not want entire menu to be expanded (or only limited menu items expanded), whereas, it would be more helpful to keep entire menu expanded for the user with limited role (and so limited options).

I will try to rewrite js and ps:menu in this week. Similar issue; http://forum.primefaces.org/viewtopic.php?f=23&t=43588

Locked

Return to “Sentinel”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest