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.
Related
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.
New to sass I stuck with the problem how to enable the dynamic change of a website theme - lets say a dark and a light theme - through user interaction. The template I use as a base (coreui) has a _custom.scss file in which various variables are defined
...
$navbar-bg: #fff;
...
The values of these variables would need to be set dynamically depending on the user choice of the theme and I have no clue how to get this done. Any pointer how to implement this would be highly appreciated.
SASS is a preprocessor which means essentially it gets compiled down into regular CSS and then shipped to the client. If you want to change themes you'll have to dynamically load different stylesheets using javascript.
Case 1
In the case that you want the user to pick between multiple prepackaged themes. This can easily be done with multiple "theme" style sheets which import the various parts of your style. First import the different colors, then import the main bodies of your sass. For example:
theme1.sass:
#import 'theme1';
#import 'base';
#import 'other';
theme2.sass:
#import 'theme2';
#import 'base';
#import 'other';
Then in javascript you could remove the old stylesheet and add the new one when the user does whatever is needed to change the theme. For example inside the onclick of a button you could put:
document.getElementById('cssTheme').setAttribute("href", "/path/to/theme");
It's probably best to take a bit of care and put the element in the head of the document, but this is a good starting point. That could be made to look a lot nicer with Jquery, but I didn't want to assume you'd have that.
Case 2
In the case that you want the user to dynamically change colors of individual element colors it might be worth looking into CSS Variables. Current support in IE/Edge is crumby but it is pretty interesting. Then as the user changes the fields you could just be changing the css variable in a <style> tag somewhere on the page and it should propagate through the document.
If you want more browser support then I think really the best way would be with OK sure's answer. This one gives you the benefit of just changing a variable and not having to reset each element style that uses that variable.
You have 2 options I think.
Option 1) Recompile the styles whenever a change is made by running a command serverside to generate a new CSS file for the user. This will be potentially very resource hungry and probably not recommended.
Option 2) Take the variables you want to be accessible, find where they are mentioned in the bootstrap source and either generate a file or just inline these styles after the stylesheet is included in the template.
So for your example here, depending what language you're coding in, or templating (this is a twig example) you're using, you could inline the following in the head of your template:
<style>
.navbar {
background-color: {{ user_theme.navbar-bg | default('#eeeeee') }}
}
</style>
It's tough to tell you exactly how to do this without knowing what frameworks/languages/infrastructure you're using.
If you were using Twig & PHP for example, you could send a user_theme object to the template, and have an include file which contains all the styles that need modifying with default values as above.
I am working on theme changer with angularjs and I can't seem to find a way how to replace one sass file with another (both of them contains variables) when user changes his theme. I know that when sass is compiled to css the variables are gone. Is there a way to switch up those files and recompile whole css? I have managed to find that it should be somehow possible to do by calling server to recompile css, but I couldn't find more information. Thank you.
One way we are doing these things is having multiple files for different themes. Example content =
variables ...
primary: '#smtng'
.themeName{
.header{
background-color: primary
}
}
And in your app.html you can add class to your html tag which will represent themeName. You can hold theme name in some storage and load it from there.
Basically you are loading all themes, but only rendering css for active theme
For my latest project here at work, I was told to develop custom (Stencil) themes for BigCommerce so we can distribute them via the BigCommerce theme marketplace. I come from a Wordpress background, so making this leap is making my head spin a little bit, but I think I understand how their platform is put together for the most part. There are components which are called by Handlebars expressions, and these may be rearranged in the template files while any default styles can be applied through config.json and the client can make basic changes through the theme editor GUI.
Here's where I'm still lost, though. Some of the design requirements call for heavy CSS changes, not just a JSON variable. I have a fully developed HTML/CSS theme I would like to use by converting it into a format that BigCommerce will accept, but I can't find any documentation on how to go about doing this. I could tediously modify each of the existing SCSS files, or I could override them as if I was developing a child theme. I'm tempted to scrap the SCSS altogether and start over, but then I would need to recreate the SASS functions used to pull in the JSON where needed.
I work much better when I begin with a blank canvas (or at most a rough sketch) and build upon it, rather than morphing a complete product into what I need. Is there any way to do this with BigCommerce?
It's been a little while since I posted this question, and since then I have learned a bit more about Stencil development.
The short answer here is, add on, don't delete. BigCommerce's Cornerstone theme is not a blank theme like _underscores for wordpress. It's a fully developed, yet very basic theme. It's best to avoid editing its default files where possible, because it may be updated in the future and could potentially overwrite your changes. Instead, add folders with your custom theme's name within it. For example, you would normally see:
/scss/layouts/body/_body.scss
So you could add your own styles while leaving the above structure intact:
/scss/layouts/customtheme/body/_body.scss
We do not have to override the styles defined in the former _body.scss, because we'll also need to import your newly created styles into
/scss/layouts/_layouts.scss
In this file, you'll see this snippet at the top:
// =============================================================================
// LAYOUTS
// =============================================================================
// Global layouts
// -----------------------------------------------------------------------------
// Header
#import "header/header";
// Page
#import "body/body";
Since an underscore defines an SCSS partial, we know that just creating _body.scss doesn't do anything. We have to find the main SCSS file and add #import "body", or in this case, we must add it to another partial which gets imported into the main file. So simply delete or comment out the default
//#import "body/body";
and replace it with
#import "customtheme/body/body";
And there you go. You are not overriding or competing with any existing styles, and you've customized the look of the body. You can also add your own components, but that's another topic for another time. Suffice to say, there are more SCSS files in
/scss/components/
and they follow the same principles.
Did you try using the stencil resources provided by BigCommerce youtube channel?
Also, the forums would be a great place to start having a chat for best practice questions.
I'm a Drupal newbie plus I don't have much experience updating code, styles, and scripts in an open-source project. I've inherited a site running Drupal 5.16.
In Drupal, I have created a page that is not published. The main content node has a node-unpublished class which is defined in /modules/node/node.css. This class has styling that makes viewing the unpublished page unreasonably hard do to the theme of the site. I believe that the node.css file should not be touched since it is part of the Drupal core.
What is the proper way to over-ride the style a css class within the Drupal core?
I assume it would be to over-ride it in the theme's css, but I want to double check that I'm conforming to open-source conventions.
Thanks.
Overriding in the theme's CSS is a common approach. Another option is Stylestripper, which lets you disable whole core stylesheets.
Any rule that is specified after that rule (and that conflicts with it), will override it.
If you cant to leave the core files untouched, you can create a "Customizations.css" file, and just write your own rules from there.
Note that it will only override the attributes you explicitly assign new values. So unless a given attribute is overridden, it'll keep that attribute from the prior rule.
.node-unpublished { color: red; background-color: black; }
.node-unpublished { color: black; }
The result of the above will be black text upon black background...