I got a component that is visible when a condition is given or not given, its a that is yellow. the code works fine. now I just want to change the color in some chases for example in blue.
s-help-component.html:
<div *ngIf="visible" class="s-help">
<div class="s-help-content "><span [translate]="text"></span></div>
</div>
The class s-help is given in my global SCSS file. I wrote another CSS class in my global SCSS file and attached following in the code lines where I want to use my s-help component:
<s-help [visible]="true" class="s-help-v2" [text]="'SITEPLAN.INFO.101' | translate"></s-help>
The class s-help-v2 defines that the border color is blue instead yellow.
My problem: it overlaps.
My try to solve the problem:
remove the class tag in the s-help.component.html, but when I do this, the border of the div is always visible even if the condition is false!
My SCSS:
.s-help-v2{
background-repeat: no-repeat;
background-position: center left calc(0.37em + 0.37rem);
background-size: calc(1em + 1rem) calc(1em + 1rem);
border: 2px solid $info !important;
border-radius: 4px;
display: block !important;
color: $gray-700;
min-width: 220px;
white-space: normal !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
Any suggestions how I can solve the overlapping problem, or the problem where the border color is active permanently.
This is my suggestion you can move the class s-help down to the child component level and this will fix the issue!
parent
<s-help [visible]="true" [text]="'SITEPLAN.INFO.101' | translate"></s-help>
child
<div *ngIf="visible" class="" [ngClass]="visible ? 's-help' : 's-help-v2'">
<div [ngClass]="visible ? 's-help s-help-content' : 's-help-v2 s-help-content'"><span [translate]="text"></span></div>
</div>
Second way will be to make the s-help-v2 style the child div like below!
.s-help-v2 > div {
color: blue;
}
Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
I am trying to style an active item in bootstrap list-group similar to this:
See how Recent is highlighted with just a dark border on the left.
This is my code:
Code
This is my css:
.list-group-item.active {
background-size: 10px;
background-color: #add8e6;
border-color: #add8e6;
}
Please advice.
Thanks. Added a border-left: 5px solid blue and it worked
I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
I have a small issue trying to get the following to work, and am not sure if it is something that CSS3 is designed to deal with or not. I have looked around and found that multiple background images are supported, however trying the many examples have resulted in nada.
This is the primary CSS code for rendering my buttons:
.button {
background:#eee url(images/button.gif) repeat-x 0 0;
border:solid 1px #b1a874;
color:#7f7f7f;
font-size:11px;
padding:2px 6px 2px 6px;
cursor:pointer;
line-height:14px !important;
}
The above code produces the standard buttons which are fine. But now I want to add icons on certain buttons, such as a print button. I use 2 sets of additional CSS class:
input.addImage {
background-repeat: no-repeat; /* once */
background-position: 5px 2px;
padding-left: 16px;
vertical-align: middle;
}
And:
input.Print {
background-image: url(../img/buttons/print.png); /* 16px x 16px */
}
As you can see my image is in fact 16x16 which fits nicely into the buttons. However the original background image is stripped away completly, leaving the background color as transparent.
I am sure that if its possible, its something basic I am overlooking, and look forward to figuring this out.
Finally the code for the button:
<input type="button" class="button addImage Print" ... >
Thank you for your valuable time.
When you apply a property in CSS, it completely overwrites any previously defined property for that element. What you need to do is tell it to apply 2 backgrounds to the element, which is done like this:
.button.Print {
background-image: url(images/button.gif), url(../img/buttons/print.png);
}
Multiple backgrounds is only supported within the same CSS class / element definition. Means, you have to set both backgrounds in .button.
Your .print has to contain the default background too seperated by a comma and followed with your print.png icon.
edit
My answer wasn't really clear about that. you have to specify the background first, which should be on top of the other one. Here's some example code with random pictures.
Demo: http://jsfiddle.net/RzWfp/
.button {
background-image: url(http://www.myinkblog.com/wp-content/uploads/2009/02/background2.jpg);
border:solid 1px #b1a874;
color:#7f7f7f;
font-size:11px;
padding:2px 6px 2px 6px;
cursor:pointer;
line-height:14px !important;
}
.button-test {
background-image: url(http://www.famfamfam.com/lab/icons/silk/icons/feed.png), url(http://www.tutorial9.net/wp-content/uploads/2008/07/air-balloon-gradient.jpg);
background-position: left center, center center;
background-repeat: no-repeat;
padding-left: 20px;
}
I'm using Adam Shaw's fullcalendar jquery plugin and it works really well, after speaking to the graphic designer he wishes to use images instead of fullcalendar's prev,next,today and the three view icons (month, week, day).
Using firebug I've isolated that the "prev" icon, for instance, is using the span class
fc-button-prev
However, when I go to the css and create the class applying a background image:
.fc-button-prev {
background-image: url('../images/prev.png');
}
Nothing happens.
Any ideas would be appreciated
May be you have to define display:block in your class like this:
.fc-button-prev {
background-image: url('../images/prev.png');
display:block;
width:50px;
height:50px;
}
because span is an inline element. So, inline element is not take width , height, vertical margin & padding in it.
In fullcalendar 2.x I had to use the following CSS to change "previous" button image:
.fc-prev-button {
background-image: url(../img/icon_arrow_left.png) !important;
background-size: 100% 100%;
width: 50px !important;
height: 50px !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fc-prev-button span {
display: none;
}