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;}
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 have an PrimeNg Tree (Angular 2) and I want to delete the selected nodes highlight color.
Image Here
Based on the image I want to delete the blue highlight color.
Instead I want to get this style: Style I want
Here are my styles:
.ui-tree {
width: 100%;
}
body .ui-widget-content {
border: none !important;
}
span.ui-treenode-label {
font-family: Poppins !important;
line-height: 24px !important;
font-size: 14px !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
span.ui-treenode-icon {
line-height: 24px !important;
font-size: 1.2rem !important;
}
.ui-tree .ui-chkbox .ui-chkbox-icon {
margin-left: 0px;
}
.ui-tree .ui-treenode-children {
padding-left: 20px !important;
}
.hidden-tree-node {
display: none;
}
.ui-state-highlight .ui-widget-content {
color: white;
}
You can override the original style by setting:
span.ui-state-highlight {
background-color: transparent !important;
color: inherit !important;
}
A few solutions:
1) Use ng-deep
::ng-deep {
span.ui-state-highlight {
background-color: transparent;
color: inherit;
}
}
2)Target the element in a more specific way
span.ui-treenode-label.ui-corner-all.ui-state-highlight {
background-color: transparent;
color: inherit;
}
Also, try to use SASS. It will make your CSS more readable and smarter. You will love it. By the way you should remove the importance from your code. using importants is not good practice.
I am trying to edit the style of a popover. In this case I want to edit the width of the display. However, I have a global popover style sheet that applies to all popovers in the application.
/* ========================================================================
Component: popovers
========================================================================== */
.popover {
border-radius: 0;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
.arrow {
margin-left: -7px !important;
}
.popover-header {
padding: 1rem 0.75rem 0.5rem;
display: block;
background-color: $secondary;
border-bottom: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.popover-body {
padding: 0.5rem 1rem;
color: $body-color;
}
.popover-close {
position: absolute;
top: -2px;
right: 0;
padding: 0 0.5rem;
color: $gray-lighter;
font-size: 2rem;
font-weight: 400;
line-height: 1;
text-shadow: 0 1px 0 #fff;
&:hover {
cursor: pointer;
color: $body-color;
}
}
I would like to know how in my local css file I can overwrite/add to these inherited styles.
Local Style Sheet:
.team-activity-container {
.icon {
background-image:
background-repeat: no-repeat;
display: inline-block
}
.icon .icon-team {
background-position: -5px -5px;
width: 25px;
height: 25px
}
}
.popover {
background-color: aqua !important;
width: 500px;
}
Edit: The local stylesheet is in the container that displays the popover, and the classes in the html are all related to the contents that fill the popover. While the popover and it's stylesheets are at the global level. how can I edit the popover at the local level without having to touch the global style sheet.
Also, The popover is from ng-bootstrap and I believe the problem is I can't overwrite the default width that bootstrap sets
I don't know all the context you are in, but there are 3 main ways to overwrite existing CSS rules:
add a new stylesheet with the new rules after the existing ones;
if you have control over the new popover HTML, adding a class (for instance version2 so you can edit your variant in a meaningful way as .popover.version2 inheriting what is already sets and changing just what you need);
add "!important" to the rules you add and are intended to overwrite the others, but notice that if the existing rules have already that, it's not going to work.
Depends on the context there could be other solutions like leverage on HTML tags or HTML tags properties if your new popover has some difference with the previous for examples.
I hope this helps.
EDIT: I saw you have edited your question adding stuff.
Looking at the global CSS, if your popover is in a particular container just bind the new rules to the container like this:
.team-activity-container .popover {...rules};
I have a CSS-stylesheet that contains several classes to style accordion elements. Due to several restrictions in the editor software I am forced to use, I need to embed other accordions via JavaScript.
This script only allow me to use three CSS classes to style the accordion. I would like to give them a similar style like those created by the editor.
My problem is that I can't figure out how to 'break down' the following multiple classes (those from the editor software) to the three new classes (those for the JS) to get a similar style of the accordions.
Existing CSS classes from the editor:
<cc:*> Accordeon </cc:*>
.sqracc {
box-sizing: border-box;
margin: 0 auto 30px auto;
max-width: 1400px;
}
.sqracc .sqracchead {
box-sizing: border-box;
margin: 0 30px;
padding: 0;
border-bottom: 1px solid <cc:print value="site.properties.design.boxborder">;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.sqracc .sqracchead:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sqracc .sqracchead div {
padding: 10px 20px 10px 32px;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
cursor: inherit;
float: left;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
min-width: 30%;
-webkit-user-select: none;
user-select: none;
}
.sqracc .sqracccontainer {
display: none;
}
.sqracc.sqraccopen .sqracccontainer {
display: block;
}
.sqracc.sqraccopen .sqracchead div {
background-image: url(<cc:print value="&accopen.svg.filename">);
}
#media screen and (max-width: 767px) {
.sqracc .sqracchead {
margin: 0;
padding: 0 30px;
}
}
And this are my new classes:
.bar {
}
.baropen {
}
.content {
}
I tried the following but it didn't work:
.balken {
box-sizing: border-box;
cursor: hand;
cursor: pointer;
padding: 10px 20px 10px 32px;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
cursor: inherit;
float: left;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
min-width: 30%;
}
.balkenopen {
cursor: hand;
cursor: pointer;
background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat;
}
.inhalt {
padding: 10px;
}
[EDIT]
here is the JS which I embedded in the code of the editor:
<script type="text/javascript" src="<cc:print value="&ddac.url">">">
</script>
<cc:if cond="¶.properties.design.ddaccor.first.default.open">
<cc:set value="0" obj="para.properties.design.ddaccor.first.default.open"></cc:if>
<script type="text/javascript">
<cc:if cond="&topic.properties.design.ddaccor.scrolltop"><cc:set value="true" obj="scrollstatus"><cc:else><cc:set value="false" obj="scrollstatus"></cc:if>
<cc:if cond="&topic.properties.design.ddaccor.default.open gt 0"><cc:set value="&topic.properties.design.ddaccor.default.open-1" obj="topic.properties.design.ddaccor.default.open"></cc:if>
//Initialize first Default Open :
ddaccordion.init({
headerclass: "bar", //Shared CSS class name of headers group
contentclass: "content", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [<cc:print value="&topic.properties.design.ddaccor.default.open">], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: <cc:print value="&scrollstatus">, //scroll to header each time after it's been expanded by the user?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["bar", "baropen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "<cc:print value='&topic.properties.design.ddaccor.slide.speed'>", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
As you can see this script have given classes. And I cant figure out how to edit those classes in order that they create a similar style like the accordion style classes in the editor CSS.
There is only one CSS file for the whole page.
[/EDIT]
I don't know this type of editor but you have two ways to achieve what you want:
Solution#1:
If there is a reference for the editor css
just put it before your customized css reference e.ge
<html>
<head>
<link rel="stylesheet" href="editor.css">
<link rel="stylesheet" href="YourCustomizedStyle.css">
</head>
<body>
</body>
</html>
This will make your style override the editor style
Solution#2:
Use !important on your CSS (I do not prefer this way) like this:
.balken {
box-sizing: border-box !important;
cursor: hand !important;
cursor: pointer !important;
padding: 10px 20px 10px 32px !important;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
cursor: inherit !important;
float: left !important;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat !important;
min-width: 30% !important;
}
.balkenopen {
cursor: hand !important;
cursor: pointer !important;
background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat !important;
}
.inhalt {
padding: 10px !important;
}
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");