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
Related
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
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.
Really simple answer possible but I've not had the chance to work with SASS yet and especially not in Wordpress so bear with me.
I'm working on a site that has been developed in Wordpress and need to make some edits to the CSS (just increase an element's min-height from 54px to 64px at the moment). It has been done using SASS and folders have been set up for the partials and imported via a main.scss.
Where I've got stuck is that I don't understand what I need to change or action to make the _general.scss file (imported via main.scss and in a folder) compile to update the style for this element. I've changed the value from 54px to 64px as it has saved in the _general.scss but this isn't reflected via the browser (if you view the actual scss page) hence it doesn't update the style.
I know I need to recompile it some how ...but how?
Sorry in advance for what is a newbie question from an experienced coder! (embarrassing!)
You do not necessarily need to edit the CSS of the template. You always have other options at your disposal.
you can either create a child theme and make changes in it
you can also create a custom style sheet and import the main stylesheet in your style sheet and put your code into your stylesheet
or you can simply download a plugin which will allow you to put your custom css in the backend of wordpress and the plugin will import the custom css in the end of the main css file.
Following is a link to a plugin that will give you a window to add your custom css into:
https://wordpress.org/plugins/simple-custom-css/
Please use this and do not get messed up with SASS.
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 am wondering why I cant set variables within twitter bootstrap using LESS. I am using ruby on rails which has a bootstrap_and_overrides.css.less file. it has the following statement
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// #linkColor: #ff0000;
So my understanding is that i can set my variables within here. So i set
#black: #333;
and then tried using it in my application.css calling #black file but it does not work? i.e. doesn’t render #333.
Am i understanding this incorrectly?, do all my variables and css styling go within the bootstrap and override file?
Any advice appreciated
Follow the instructions at http://lesscss.org/#usage to make sure your updated less is used, if you are using it client side.
OR
Compile your updated less into CSS and then copy over the updated CSS.
Here's a list of tools that can do the compile. http://bootstrap.lesscss.ru/less.html#compiling
For suggestions on how to organize your bootstrap modifications see the SO question Twitter Bootstrap Customization Best Practices
As an aside, I wouldn't recommend changing #black. Changing it would alter many, many things, including some you might not expect.
If I understood you correctly, you are modifying your bootstrap_and_overrides.css.less file, but the one being used is the application.css file.
If that was the case, of course it's is just natural not to reflect the changes you've made. You must compile your .less file first to .css. to reflect that changes to your .css file.
For a try, use LESS via the client-side and setup your environment like so:
For instance, in your index.html file, put
<link rel="stylesheet/less" type="text/css" href="application.less" />
in the document head. and below it add
<script src="less.js" type="text/javascript"></script>
Download the less.js file from here. and put it inside your root directory, or you may of course customize the location and make the necessary path in the href attrib.
After doing the above, you're ready to modify your application.less file (not the application.css). You may copy you're existing custom styles from the application.css file.
application.less is where you should put your variables.
You may rename your bootstrap_and_overrides.css.less file into application.less and make sure it is the one linked to in the header tag.
For more info about LESS CSS checkout the wiki.