I want to use bootsrap in my asp.net 4 project.
I installed bootstrap in visual studio using nuget:
I have global css file:
/*Global styles*/
body, form
{
direction: rtl;
font-family: Arial;
font-size: 16px;
color: #333333;
margin: 0px;
padding: 0px;
background-position: bottom;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #f8f8f8;
}
input[Type=text], input[Type=password], input[Type=button], input[Type=submit], input[Type=reset], input[Type=file], select, textarea
{
margin: .2em .05em;
border: 1px solid #333333;
color: #333333;
}
input[Type=text], input[Type=password], input[Type=file], select, textarea
{
max-width: 225px;
width: 98%;
}
input[Type=text]:disabled, input[Type=password]:disabled, input[Type=file]:disabled, select:disabled, textarea:disabled
{
background-color: #E6F6FA;
}
input[Type=button], input[Type=submit], input[Type=reset]
{
background-color: #EEEEEE;
cursor: pointer;
}
input[Type=button]:hover, input[Type=submit]:hover, input[Type=reset]:hover
{
background-color: #DCDCDC;
}
I need to define style of the buttons and other elements using bootstrap, I want to it in global css file.
So my question how can I use bootstrap in css file?
You can import the CSS file like stara_wiedzma said.
However you can't import bootstrap's .btn class for input[Type=button], input[Type=submit], input[Type=reset] globally with CSS
I think you are looking for something like LESS of SASS.
With LESS and SASS you can do things like:
input[type=button]{
.btn;
.btn-success;
// your own styles...
}
Google: "bootstrap less workflow" for some setup and examples.
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
Related
so I'm using a gorgeous search bar component that I found on codepen in my react (CRA) project.
I have imported css in the default src/index.js
Then I have my search component which is composed of Search.js and Search.module.css.
Clearly Bootstrap styling and the Search component styling doesn't work together, when I comment the bootstrap file import in src/index.js, the Search component will be working fine.
So how can I override bootstrap only on my Search Component?
Here is the css of the Search.module.css
#import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
font-family: Roboto, sans-serif;
padding: 0;
margin: 0;
}
.flexbox {
background: linear-gradient(155deg, #cccccc, #e8ecee, #d4d4d4);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.search {
margin: 20px;
}
.search>h3 {
font-weight: normal;
}
.search>h1,
.search>h3 {
color: white;
margin-bottom: 15px;
text-shadow: 0 1px #eaeff1;
}
.search>div {
display: inline-block;
position: relative;
}
.search>div:after {
content: "";
background: white;
width: 4px;
height: 20px;
position: absolute;
top: 40px;
right: 2px;
transform: rotate(135deg);
box-shadow: 1px 0 #eaeff1;
}
.search>div>input {
color: white;
font-size: 16px;
background: transparent;
width: 25px;
height: 25px;
padding: 10px;
border: solid 3px white;
outline: none;
border-radius: 35px;
box-shadow: 0 1px #eaeff1;
transition: width 0.5s;
}
.search>div>input::placeholder {
color: #5a5a5a;
opacity: 1;
}
.search>div>input::-ms-placeholder {
color: #efefef;
}
.search>div>input::-ms-input-placeholder {
color: #5a5a5a;
}
.search>div>input:focus,
.search>div>input:valid {
width: 250px;
}
As you haven't shared the code snippets. I am assuming the bootstrap search will be using: text and button tag. Now, the CSS of this would be coming from bootstrap.
You can do the following:
1) Make a search component level class eg "search-module"
2) Now, create css or scss file import in the search component and within that css
override the bootstrap css by :
.search-module input[type=search] {...}
OR
3) you can do this overriding on your main style.css file too.
You need do to step 2 for all the other conflicting classes, tags, and IDs in the bootstrap with the search component.
PS: This will bloat your CSS. Best would be if you can just pick that part of Bootstrap which is required and rest you write your own style.
Thank you.
I cannot seem to get rails to recognize an image that I need to use for a background. The last thing I tried was to rename my css file layout.css.scss to layout.css.scss.erb so the asset_path helper could be used, but it does not work. The image is located in the app/assets/images directory. layout.css.scss.erb is located in the app/assets/stylesheets directory. The css styling is: background-image: url(<%= asset_path 'Jolie2.jpg' %>); It is located near the end of the layout.css.scss.erb file. I am posting the whole file as well as the partial that displays the image. Please help.
// layouts.css.scss.erb
#import "colors";
header#page-header {
font-family:'Lobster', cursive;
color: $secondary-color;
background: $primary-color;
border-radius: 5px;
padding: 5px;
h1 {
text-align: center;
text-transform: uppercase;
}
}
footer#page-footer {
margin-top: 10px;
font-weight: bold;
text-align: center;
border-radius: 5px;
padding: 5px;
color: $secondary-color;
background: $primary-color;
}
aside#page-sidebar
{
a:link
{
color: black;
}
a:visited
{
color: black;
}
a:hover
{
color:#FFA68F;
}
font-weight: bold;
margin-top: 5px;
border-radius: 5px;
float: right;
background: $primary-color;
width: 244px;
}
aside.image
{
background-image: url(<%= asset_path 'Jolie2.jpg' %>);
width: 244px;
border-radius: 5px;
margin-top: 5px;
clear: both;
float: right;
}
// _jolie.html.erb
<aside class="image">
</aside>
`
it should work:
Are you using up-to-date gems sass-rails and sprockets?
Try to rename .css.scss to .scss
Try to replace image-path('Jolie2.jpg') with
asset-url('Jolie2.jpg', image) or image-url('Jolie2.jpg')
I solved this problem by specifying the css height: attribute. Thanks for the suggestions
I am using a bootstrap template that has a stylesheet called styles.css. I want to modify the following class in styles.css
.contact {
background-color: #56bc94;
color: #fff;
padding: 80px 0;
}
I created a common.css that I place after styles.css and added the following
.contact {
background-color: #f5f5f5;
padding: 80px 0;
}
However, it's not over-riding the styles.css class. I tried with !important as well, but doesn't work.
.contact {
background-color: #f5f5f5 !important;
padding: 80px 0;
}
In common.css use:
#import url("styles.css");
.contact {background-color: #f5f5f5; padding: 80px 0;}
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
I want to load only the css needed for the login page for performance. On my other pages I want a grouped css file that will be cached on every page which contain all my css.
I have the following files:
minifiedcssforloginpage.scss
grouped-pages.scss
In minifiedcssforloginpage.scss I declare $load-complete-css:false. Afterwards I import myproject.scss which contains all the imports of my modules, layouts, core... In myproject.scss i want to do something like
#if $load-complete-css {
#import module1;
#import module2;
#import module3;
}
So minifiedcssforloginpage.scss would generate minifiedcssforloginpage.css with less css then grouped-pages.css (that has a var $load-complete-css set to true).
But I get an error that this is not possible "Import directives may not be used within control directives or mixins".
It's one of those things that's just not allowed. The only thing you can do is turn those imports into mixins (import the file outside the #if and call the mixin where appropriate).
Clarification:
_partial.scss
#mixin partial {
.test { color: red }
// other styles here
}
styles.scss
#import "partial";
#if $someval == true {
#include partial;
}
The core dev team is reluctant to implement this feature, although they are considering the implementation of a brand new dependency system.
See the following Github issues :
Allow #import within #if (#451)
Using #import statements within control directives or mixins (#779)
Allow optional #imports (#779)
Dynamic Dependencies (#739)
Put your styles into various partial files in a way that makes sense to you. Then, you can have create a separate SASS file for your login page that imports only the files with the relevant styles.
To quote from my answer to another question:
It is currently not possible to use SASS to include files dynamically.
#import cannot be used within control directives (e.g. #if) or
mixins, using a variable in an import directive is erroneous syntax,
and there is no directive for ending file execution early (which
effectively would allow conditional imports). However, you can
solve your issue by changing how you structure your style rules.
... If you have styles that [should be] conditionally included [they]
should be encapsulated in mixins, in 'module' or 'library' files. ...
The main idea is that importing one such file will not output any
css. This way, you can import these files redundantly so you can use
the mixins wherever you need them.
There isn't currently a way to place import statements within if blocks, unfortunately.
The closest alternative I'm aware of is to use the additionalData field to add a preprocessor function to your webpack sass-loader config:
{
loader: "sass-loader",
options: {
sassOptions: {
includePaths: [...],
},
additionalData: (content: string, loaderContext)=>{
// More info on available properties: https://webpack.js.org/api/loaders
const {resourcePath, rootContext} = loaderContext;
const finalPath = someCondition ? path1 : path2;
return content.replace(/SomeDynamicPathPlaceholder/g, finalPath);
},
},
},
More info on the additionalData field here: https://webpack.js.org/loaders/sass-loader/#additionaldata
I know this is a seriously old question, but we recently implemented this in our own tiny UI framework like this:
ui-framework/config.scss
$components: (
"component-a": true,
"component-b": false
) !default;
// A bunch of other default config
ui-framework/main.scss
#import "component-a";
#import "component-b";
ui-framework/component-a.scss
#if (map-get($components, "component-a") {
.component-a {
// Bunch of code here
}
}
ui-framework/component-b.scss
#if (map-get($components, "component-b") {
.component-b {
// Bunch of code here
}
}
And then in each project:
a-project/main.scss
// NOTE: We only want component b in this project
$components: (
"component-a": false,
"component-b": true
);
#import "ui-framework/config.scss";
#import "ui-frameowrk/main.scss";
We don't do this for every single component, but the huge ones that aren't always in use (like slideshow, dialog, form related code etc).
Old question, I know; just felt I'd provide an alternative scenario and expanded example based on something I was working on.
I ran into this issue because I was hoping to use one SCSS file for smaller screens and one for larger (top menu nav on desktop and burger menu for mobiles).
Using Blazor without Bootstrap, I was wanting to use the one menu structure in terms of the actual html and then use the SCSS to switch between the two at the relevant sizes. I'd created a SCSS file for the desktop version of the nav, and started on one for the mobile version. My plan, before I was aware of this stumbling block, was to selectively import the SCSS based on a media query in a mixin (aptly named mobileOrDesktop).
My idea was to use this mixin to do all the base structure manipulation for the media sizes. Something like this:
#mixin mobileOrDesktop {
#media (min-width: 961px) {
#import 'desktopNavbar.scss';
.container-fluid {
margin-top: 70px;
height: calc(100% - calc(60px + 70px));
}
//show the footer, maybe tweak the font size, etc
}
#media (max-width:960px) {
#import 'moblieNavbar.scss';
.container-fluid {
height: 100%;
}
//hide the footer, maybe tweak font sizes, etc
}
}
Unfortunately, we can't do that due to how SCSS works. So, rather than just dumping all the CSS in the media query (I wanted to keep it relatively split up so that it was more manageable for debug/altering), I had a hunt for alternatives.
Similarly to Cinnamon, I found the most viable solution to be importing the SCSS outside of the mixin and simply including it within the mixin:
#import 'desktopNavbar.scss';
#import 'mobileNavbar.scss';
#mixin mobileOrDesktop {
#media (min-width: 961px) {
#include desktopNavbar;
.container-fluid {
margin-top: 70px;
height: calc(100% - calc(60px + 70px));
}
}
#media (max-width:960px) {
#include moblieNavbar;
.container-fluid {
height: 100%;
}
}
}
With the imported SCSS files being a mixin themselves, i.e. the desktopNavbar.scss becomes:
#import 'siteVariables.scss';
#mixin desktopNavbar {
#navbar {
.burgerIcon {
display: none;
}
.nav {
overflow: hidden;
background-color: $navy;
vertical-align: middle;
height: 70px;
line-height: 70px;
color: $blizzard;
position: fixed;
top: 0;
width: 100%;
display: block;
z-index: 99999999;
.leftBlock, .midBlock, .rightBlock {
display: inline-block;
vertical-align: middle;
height: 70px;
padding: 0px;
margin: 0px;
line-height: 70px;
}
.leftBlock {
width: 20%;
.imgLogo {
margin-left: 10px;
margin-top: 5px;
max-width: 120px;
}
}
.midBlock {
width: 60%;
text-align: center;
.navbar-nav {
display: inline-flex;
flex-wrap: nowrap;
flex-grow: 2;
flex-shrink: 2;
list-style: none;
vertical-align: middle;
margin: 0px;
padding: 0px;
.nav-item {
max-width: 175px;
color: $white;
display: inline-block;
vertical-align: middle;
height: 70px;
.btn-link {
font-size: 16px;
text-align: right;
color: $white;
padding: 14px;
line-height: 20px;
text-decoration: none;
vertical-align: middle;
span {
font-family: 'Font Awesome Solid';
line-height: 60px;
height: 60px;
vertical-align: middle;
padding: 5px;
}
}
&.dropdown {
font-size: 16px;
text-align: right;
line-height: 20px;
text-decoration: none;
vertical-align: middle;
.dropbtn {
font-size: 16px;
text-align: right;
line-height: 20px;
text-decoration: none;
vertical-align: middle;
span {
font-family: 'Font Awesome Solid';
line-height: 60px;
height: 60px;
vertical-align: middle;
padding: 5px;
}
}
.dropdown-content {
display: none;
position: fixed;
top: 68px;
text-align: center;
background-color: $star-command;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999999999;
.dropdown-header {
color: $blizzard;
}
.dropdown-item {
color: $powder;
padding: 12px 16px;
text-decoration: none;
display: block;
&:hover {
background-color: $blizzard;
color: $navy;
}
}
}
&:hover {
background-color: $star-command;
.dropdown-content {
display: block;
}
}
}
}
}
}
.rightBlock {
width: 20%;
}
}
}
}
And the site SCSS can simply be:
#import '../../FontAwesome/scss/fontawesome.scss';
#import '../../FontAwesome/scss/regular.scss';
#import '../../FontAwesome/scss/solid.scss';
#import 'siteVariables.scss';
#import 'mixins.scss';
//import other stuff here
html, body {
height: 100%;
overflow: hidden;
width: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
margin: 0px;
#include mobileOrDesktop;
.container-fluid {
overflow: auto;
main {
padding: 15px;
}
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
.dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
}
}