is there some tutorial explaining how to customize "Login" component?
For instance using a custom background or align the form in different way?
Thanks
There are two parts to the answer for your question.
THEMES (aka customizing your login svg image)
You can customize the SCSS variable for login background: $clr-login-background. Take a look at how I added the dark theme svg here. This means that you will have to build the Clarity styles as part of your apps build process even though you are only customizing one of the themeable variables for Clarity SCSS. There is more information on custom themes here, in the docs. This info on building a custom theme is near the bottom of the page.
LOGIN FORM
For the specifics of the form you use in your app, you can add the pieces that make sense for your specs. There are styles for: .title, .subtitle, .username, .password, .error etc ...
If you look at the example in the Login Page docs you can see how the form uses those elements and modify them for your use case.
Related
I have attached an image of the demo that is displayed on the main page for Material UI. I really like this theme and I want to use one like it with MUI to create my web application. Is there any way that I can use this theme (style my components like this) or do I have to replicate it from scratch?
You can find the code for that theme here: https://github.com/mui/material-ui/blob/v5.8.0/docs/src/modules/brandingTheme.ts.
You can see it used here: https://github.com/mui/material-ui/blob/v5.8.0/docs/src/BrandingProvider.tsx#L23.
I've created a code sandbox that demonstrates using this theme: https://codesandbox.io/s/mui-docs-theme-example-0mys5d?file=/index.tsx. brandingTheme.ts in the sandbox is an exact copy of the file in GitHub. It is then used from within index.tsx in the sandbox. demo.tsx just shows a few different components in order to see the theme in action.
If you want to implement your own fancy theme, you can simply customize the MUI theme using theming or even modify components' style like this!.
Take a look at premium template if you want to buy something.
There are also a few free themes you may find just but googling like:
Free React Dashboard...
DNN 9.3.2 / 2sxc 10.25.2
I have a DNN theme that I use for a certain type of subportal - I will have 8 subportals ultimately. Each subportal has the same layout, but they will have different colours in their respective theme. So I will have to create a stylesheet with the CSS rules and the colours for each theme. I know there is a couple of relatively simple ways I can do this:
Modifying the portal.css of each portal to override the theme or (simple but might be hard to maintain updates)
Building a custom theme for each portal (overkill)
Using SCSS to create a template with 8 different variable files (works fine but doesn't allow modifications by the Content Editors)
So, I'm curious if there's a more clever way through 2sxc that makes it easy for not only me to maintain, but also my portal's Content Editors.
I want to create 2sxc Content module with a few different fields for colour pickers that will allow me (and my content editors) to simply open up the 2sxc edit modal (on the homepage), fill out all the colour fields, and then a razor template will output the CSS template with the colours to override the theme styles on the DNN skin. I know I can do this with inline CSS but that would mean the module would have to appear on every page, and I'd also prefer to avoid inline CSS.
So my idea is that it would work like this:
Have a 2sxc Content module on a single page on each portal
Edit modal > the fields would be something like: primary colour (rgba), secondary colour (rgba), grey colour (rgba), etc
Once save is clicked, the template modifies a portal-level theme.css file which is loaded by the skin
Any changes to the module would result in a rewrite of the CSS file.
I could update the c# razor template to add, remove, or modify rules or transform the values of the input.
Is this possible or is it too complicated? Is there a better way of going about this?
So I've been away for a long time, I hope my answer will still help...
We have a very simple solution :). If you check out bootstrap instant template you'll see that we add various classes to the <body> tag.
https://github.com/2sic/dnn-theme-bootstrap4-instant/blob/master/controls/body-css-classes.ascx#L86-L91
That way we can just use normal CSS of the theme with rules based on portal-27 etc. to vary by portal.
I created a widget, lets call it Vaadin addon, and included a css-file using the stylesheet annnotation: #StyleSheet({ "custom.css" })
Now I'm wondering how to handle the usage within different themes. My first idea was, to write the css like this:
.valo .mybutton { background: red;}
.reindeer .mybutton {background: yellow;}
The problem is, if my application theme extends the reindeer theme, the html will not contain any reindeer class name, same with valo. I didn't found documentation on this topic.. (what I read is this post)
Is this the right approach though? You have to define look of your component for each theme available on your own and decide what is the best visual representation of your component in that given theme. If that theme changes, you have to change your add-on too. If there is new theme, you will have to update your component too.
More suitable approach might be just to use standard vaadin css classes, thus letting theme decide how your component will look. You just define structure of your component and logical parts from which it consists using standard vaadin classes. This way, your component will fit perfectly no matter what theme is used, also it is prepared for any number of new custom themes to be published. I do not say you should not include styles to your add-on, i just say you should consider not tying your add-on to any concerte themes.
I am new to Liferay and I have the following problem. I need to create portal theme - this is ok, no problem. This will style my portal and default portlets. But in some of my own portlets I use ZKOSS pages, which reqires completely different styling. My question is, how to do it that Liferay theme classes will not influence my ZKOSS pages? There are some general styles in Liferay theme like for input etc but I dont want those rules to be applied inside my ZKOSS portlets. Hope I explained myself clearly. Any suggestions?
You can set the <css-class-wrapper>My_Portlet</css-class-wrapper> in liferay-portlet.xml
for details see: http://www.liferay.com/community/wiki/-/wiki/Main/Liferay+UI+Guidelines
I don't know ZKOSS portlets, but the generic way to introduce portlet specific theme css is through the DOM: Inspect your page, see how your ZKOSS portlets are generated: Liferay generates a wrapper around each portlet that contains the portlet-name, you can use that for styling.
As I don't have ZKOSS available, here's an example to have some specifically ugly styling applied to every Navigation portlet:
.portlet-navigation .portlet {
background: purple;
}
Use Firebug or similar tools to find out the relevant DOM structure and just add the required styling for these elements to your theme
You can also use Liferay color schemes to define separate UI for same portlet.
Liferay 7/DXP:
https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/specifying-color-schemes
Liferay 6.2:
https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/specifying-color-schemes
Does anyone know how I can change a css files like roadmap.css for trac? I figured out where the file is but when I modify it, the modification is overwrote on page load/refresh.
Example of where my roadmap css is – x:\xx\xx\BitNami Trac Stack projects\.egg-cache\Trac-0.12.1-py2.5.egg-tmp\trac\htdocs\css\roadmap.css
I would like to add some different classes for the milestone graph like
table.progress td.promote { background: #dcefdc}
Instead of modifying the existing stylesheets, add your custom styles to a new stylesheet and link it into your pages. Your custom styles should override the built-in styles. See TracInterfaceCustomization for more info and CookBook/SiteStyleCss for examples.