I am making a form using bootstrap and I would like to make some of the text a "brand color" like you see in the buttons. I know about the text colors available using text-primary etc.
However, I would like to use the button colors for the text.
I tried this
<style>
em {
background-color: #brand-danger;
}
</style>
Also I found the default values for bootstrap colors here http://getbootstrap.com/css/#less but i just want to use their variable or class without manually using the hex value.
What is the way to use their color?
You'll need to create your own LESS/SASS source, tie it in with bootstrap, create your custom styles, then run it through the compiler. The variables, such as #brand-primary/$brand-primary, are only meaningful in the LESS/SASS languages.
And, since BS4 is going SASS, I suggest (if you're going down that path) you do as well.
Example (I'll use LESS since it's more common):
Download the Bootstrap LESS source
Create a new LESS stylesheet for your project and place it along side the others (such as bootstrap.less, mixins.less, etc.)
Add a reference to your new stylesheet within bootstrap.less (this can be done using the #import directive, but make sure to place it towards the bottom).
Compile your new styles.
Related
I am using Angular-material-6. I am using an angular-material stylesheet and my own custom less stylesheet as a master stylesheet. I have a select box in header which shows theme color name like Red, Green, Blue etc. Now my task is to change a less variable as per user choice theme.
for example, by default my application primary color is red and if a user changes it to blue from header select box then it will automatically change my primary variable color to red.
I tried simple way solution like CSS switching from index.html using javascript but I am not sure how to do it with less and less variables.
Thanks in advance.
Less can compile at run-time and is one of the few CSS processors (If not the only one) that can do this and modify CSS vars programmatically at run time.
Check out this SO post: How to use less in Angular component without CLI
Less is a CSS preprocessor which means that it produces CSS at compile-time, not runtime. Therefore you can't do what you are aiming to do.
You can have a look at css variables if you want to dynamically override it. You can also use a CSS in JS or make smart use of the CSS cascading model.
What I want is, for example, to change the css background color of navigations bar of .navbar-default, which can be done by .navbar-default{background-color:#000;}
But I want is, to see the full css style definitions of .navbar-default class, so I can look and change every element(text-color, hovering colors and every other thing) as I like. Rather than inspecting webpage elements for css codes from browsers, I want to look in a place where the definitions contain.
You can find all in readable format here
If you are using the CDN "version" of Bootstrap, then you won't be able to edit the CSS.
A good way to do what you want is by using your own local copy of the bootstrap.css file. You'll find herein all the definitions, and you can alter them as per your wish.
Conversely, you could also edit the .sass or .less files if you want more control.
edit:
Since the OP is using CDN, follow the following steps and you should be just fine:
Identify the element/ tag that you want to edit: div, input, etc.
Identify the attribute you want to edit: color, height, etc.
most importantly: identify the class or id of the element.
After you've done the above, create a new styles file, for example: styles.css, and write your new custom CSS rules in there as per CSS rules.
Include this file by linking it in your .html file using the link tag
Voila!
You can find and edit it in bootstrap.min.css
This is for new version
https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css
Just check the header import link and remove .min part if its minimised link
I am building a website with a framework in which the HTML is automatically generated. Twitter Bootstrap 3 needs the class "form-control" added to each input to properly apply the width to such inputs. Problem is that to add that css class from code, I would need to change the framework in many places.
Is there a work around? Maybe some javascript/jquery that searches all labels in my form, for each label it finds the associated input and finally add the css class? But I really don't know how to do it.
Thanks in advance for any help.
You could edit forms.less and recompile the css, but it could be tricky because you don't want all inputs or text areas to have that .form-control styling.
If you have an ID for your form that you want to apply it to, this should help:
$('#yourFormId input, #yourFormId textarea, #yourFormId input, #yourFormId select').addClass('form-control');
You would need to make sure you are adding all the form field types that are in your form, but that above line would probably cover most of them. This is pretty hacky though, depending on your framework there may be some sort of mixin or function to include class names in auto generated forms.
This is a bad idea because it is a "hacky" implementation of bootstrap. Not only do you need the classes you need the proper html structure. The amount of time trying to craft some magic javascript to implement these two changes would be better spent modifying the framework.
A solution could be to use Bootstrap's Less classes instead of the compiled library and somehow add the necessary tags in your code.
Take a look at this article.
I've not faced this specific problem, but in general when working with Bootstrap 3 I'll build the .less files myself with my own specific changes, e.g. in my .less file:
/* Import the Bootstrap 3 .less files */
#import url('../../Bootstrap/less/bootstrap.less');
/* Now implement my own styling below */
Working with .less, you might be able to pull in the relevant styles from the relevant part of the framework, something like this (where .mydiv is your container element) :
.mydiv {
input,
select,
textarea {
.form-control;
}
}
This would pull in the .form-control styles and apply them to input, select and textarea elements inside .mydiv. I've not tried this, but it's worth a try!
In visual studio I can type "blue" in a CSS value for instance and it will translate it to the appropriate RGB. Is it possible to define custom colors? I'd love to be able to define "companyBlue" or "companyOrange".
Since you're using a CSS file then you shouldn't be using any colornames like Blue, Green,... Because browsers decide for themselves which color value they give to these colors. The color Green might be a completely different color in IE when comparing to Google Chrome.
I'd recommand using hex values instead like:
#000 /* Black */
#fff /* White */
#f00 /* Red */
You can easily get hex values, with this photoshop-like color selector: http://www.2createawebsite.com/build/hex-colors.html
Now, back to your original question, how can you use variablese like companyOrange in CSS? Simply put... with only CSS you cannot use any variables. You however can "store" the value at the top of your CSS file in a comment like so:
/*
COLORS
Black: #000
Company Orange: #f64;
Company grey: #444;
*/
If you really want to use variables instead, you can use a CSS pre-processesor such as SASS, LESS, Stylus,... All of these use variables.
Read more:
http://sass-lang.com/
http://lesscss.org/
http://learnboost.github.com/stylus/
I found this, but don't really love the solution: http://24ways.org/2006/faster-development-with-css-constants/
To truly achieve constants you will need to use something other than
CSS to process the file before it is sent to the browser. You can use
any scripting language – PHP, ASP, ColdFusion etc. to parse a CSS file
in which you have entered constants. So that in a constants section of
the CSS file you would have:
$darkgrey = '#333333';
$darkblue = '#000066';
The rest of the CSS file
is as normal except that when you come to use the constant value you
would use the constant name instead of adding the color:
p { color: $darkgrey; }
Your server-side script could then parse the
CSS file, replace the constant names with the constant values and
serve a valid CSS file to the browser. Christian Heilmann has done
just this for PHP however this could be adapted for any language you
might have available on your server.
Shaun Inman came up with another way of doing this that removes the
need to link to a PHP script and also enables the adding of constants
using the syntax of at-rules . This method is again using PHP and will
require you to edit an .htaccess file.
A further method is to generate static CSS files either using a script
locally – if the constants are just to enable speed of development –
or as part of the web application itself. Storing a template
stylesheet with constant names in place of the values you will want to
update means that your script can simply open the template, replace
the variables and save the result as a new stylesheet file.
While CSS constants are a real help to developers, they can also be
used to add new functionality to your applications. As with the email
address example that I used at the beginning of this article, using a
combination of CSS and server-side scripting you could enable a site
administrator to select the colours for a new theme to be used on a
page of a content managed site. By using constants you need only give
them the option to change certain parts of the CSS and not upload a
whole different CSS file, which could lead to some interesting
results!
As we are unlikely to find real CSS constants under the tree this
Christmas the above methods are some possibilities for better
management of your stylesheets. However if you have better methods,
CSS Constant horror stories or any other suggestions, add your
comments below.
If I want style sheets for different color themes, how can I keep canvas font and line colors in an external CSS file?
I could make hidden dom elements and use them as varaibles.
I could just use javascript to read the current theme and set the colors using javascript variables but then it defeats the purpose of css files. I also want someone else to edit the styles and colors without having to do javascript.
Is there no way to store a setting in a css file and easily read it with javascript (no ajax or jquery)?
The line color, etc. in a canvas element are not affected by CSS, so there is no way to directly do this. The best you can do is use a data file of some sort that stores an object in JSON format containing appropriate canvas variable values for each theme.
Canvas drawing is independent of CSS. You set fonts and colors using Canvas API methods, not by CSS styling. The best I can think of as a counterpart to an external CSS file is an external JavaScript file where you just assign values to variables used in your code for drawing on canvas. That file could be made very simple, just assignments, so it would not require any substantial understanding of JavaScript to edit it.