I am trying to style my react component. But i get for my understanding weird behaviour.
<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd'
: 'timeline-item-icon-even'], [inProgress])}>
What i get in the dom is:
timeline-item-icon-odd___3K5am progress
where progress is from the variable inProgress.
In my opinion i tought this is the way to do it but apparently it only renders the first class and completely ignoring the second.
I have set up a single html an css file where i checked my styles before applying and there they all work correctly.
CSS:
.timeline-item-icon-odd {
background-color: gray;
border-color: gray;
}
.progress {
background-color: green !important;
border-color: green !important;
}
So what i want to achieve is as to have the background according to the variable in inProgress.
I hope somebody has any idea.
Thank you in advance!
Regards
If you want to add inProgress together with your other conditional css classes you need to add inProgress like this:
<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd'
: 'timeline-item-icon-even',inProgress])}>
I hope this would solve the issue. I have tried this and it worked.
The Solution:
<div className={classNames(
scss[isOdd ? 'timeline-item-icon-odd' : 'timeline-item-icon-even'],
scss[inProgress]
)}
>
The solution was the scss in front. So a syntax error.
Related
I previously created a swiper (ngx-swiper-wrapper) and I changed the color of the arrows the following way:
::ng-deep.swiper-button-next::after, ::ng-deep.swiper-button-prev::after {
color: $primary-light;
}
Now I created another one on a different page where the color should be black. The problem is when I visit the page with the first swiper and then I navigate to the other page with the second swiper, the color stays the white.
Is there a better way to change the color or a workaround?
Thanks
I've been running into the same issue, and spent days looking for a better solution, till i found one, it works just fine, no need to change the svg image or somthing just add the code below into your css file :
::ng-deep .swiper-button-next,
::ng-deep .swiper-button-prev {
color: #207868 !important;
}
:root {
--swiper-theme-color: #207868 !important;
}
I tried it and changed a few things and it's working:
::ng-deep .swiper{
.swiper-button-next::after,
.swiper-button-next::after{
color: #207868;
or
--swiper-theme-color: #207868;
}
}
Hello and greetings to you all.
I have a strange reaction with css in one website that i'm making.
There is this code
<a class="instagram-photo image" id="p1130472628000663001_176824616" href="PROFILE" target="_blank" data-name="NAME" data-caption-std="Colors #thefeditor" data-caption="Colors #thefeditor <a target="_blank" href="INSTA LINK;>View Photo</a> " data-created="1448982860" data-author="AUTHORNAME" data-likes="87" data-comments="0" data-profile="PROFILE LINK" rel="group"><img src="IMAGE LINK"><span class="journal-meta">Example Name<span>username</span></span><span class="icon">Image</span></a>
The above image is set with the following background color.
media="all"
.classic-view .instagram-photo.image {
background-color: #3dc0f1;
}
I'm trying to change the blue color (#3dc0f1) color to this
background-color:rgba(255,215,0,0.6) !important;
With no luck because i want to change the color ONLY to this id
id="p1130472628000663001_176824616"
because if i go to the custom css and put this css code
.instagram-photo
{
background-color:rgba(255,215,0,0.6) !important;
}
It changes all the images, but i want to change the images with the ID that i gave you above.
I have tried
#p1130472628000663001_176824616.instagram-photo {
background-color:rgba(255,215,0,0.6) !important;
}
But it didnt work. Any idea of how can i make it work? Thanks!
P.S. the answer below is also correct but i also managed to do it with
a[id*="_176824616"][class*="image"]
{
background-color:rgba(255,215,0,0.6) !important;
}
Thanks a lot!
Why not just doing:
.instagram-photo#p1130472628000663001_176824616
{
background-color:rgba(255,215,0,0.6) !important;
}
That way, you are declaring a rule to CSS that says that you want to set the background color to an element of class instagram-photo and with id having your id - notice that the class and id are concatenated to one phrase on the rule. This is done in order to specify the rule containing both class and id on a specific element and not the nested ones.
Also, consider that for simplicity, you could simply do:
#p1130472628000663001_176824616
{
background-color:rgba(255,215,0,0.6) !important;
}
By "saying" to CSS you want to apply the rule only to the element(s) with the specific ID, without taking into consideration its class - this is specific on your case, so it should work fine.
In addition, consider avoiding using !important, as this can lead to unexpected behavior on your rules and violates the sequence the rules are applied.
How can I use the attribute expanded when I style it using CSS?
I got a dropdown which is
expanded="false"
and when it's open it becomes
expanded="true".
There is no class so I was wondering if I can use that attribute for styling?
Thanks
div[ expanded="true"]{
color:red;
}
<div expanded="true">huujioujo</div>
Yes, you should be able to:
div[expanded=true] { color: red; }
However, there isn't a expanded HTML attribute that I know of? It would be better to just add the class .expanded instead of using expanded="true".
I'd like to know if there's a way to apply the same styles to IDs that start with the same workds.
For example, I have #youtube_gallery_item_1, #youtube_gallery_item_2,....and the number keeps increasing, so I can't add a new ID every time I add a new item. FYI, I'm working with Wordpress and YouTube SiimpleGallery plugin.
I'd appreciate your help!
The "starts with" selector in CSS3.
div[id^=youtube_gallery_item] {
}
Note that this doesn't work in IE8 and below.
What would be a better idea would be to assign all of your #youtube_gallery_items a class, and then assign styles to that class. I'm sure that the plugin that you're using is doing this. Look at the source code, and if you see that they all have the same class, use:
.name-of-the-class {
}
You can use an attribute selector:
[id^="youtube_gallery_item"] {
color: skyblue;
}
http://jsfiddle.net/p9Ya8/
I would suggest adding a class
.youtube_gallery_item {
background: ;
width: ;
...
}
Its compatible with all browsers and is the easiest way to get around.
<div id="youtube_gallery_item_1" class="youtube_gallery_item"></div>
<div id="youtube_gallery_item_2" class="youtube_gallery_item"></div>
<div id="youtube_gallery_item_3" class="youtube_gallery_item"></div>
I would like to override setting that already defined with selecting
parent selector but I don't know how.
Say, there are 2 pages on a website like the following...
-Home page-
<body><h1 class="sifr">Home</h1></body>
-About page-
<body class="about"><h1 class="sifr">About</h1></body>
then, I have these in sirf-config.js...
sIFR.replace(fontname, {
selector: 'h1.sifr',
css: '.sIFR-root { color: #666666; font-size:29px; }'
});
sIFR.replace(fontname, {
selector: 'body.about h1.sifr',
css: '.sIFR-root { color: #FFFFFF; font-size:29px; }'
});
but it doesn't work...
If anybody help me I would appreciate.
Run the replacements for body.about h1.sifr before h1.sifr. sIFR doesn't calculate specificity but executes the replacements in-order. Replacing h1.sifr replaces all such elements, so body.about h1.sifr only finds elements that have already been replaced.
Check the order your loading CSS vs issuing the replace commands ...
I don't use Sifr, so I don't know exactly how it works. I assume that the code creates CSS code like this:
h1.sifr { color: #666666; font-size: 29px; }
body.about h1.sifr { color: #FFFFFF; font-size: 29px; }
If it does, that will override the color style for the heading in the about page, as the selector for the second line is more specific than the selector in the first line.
You can read more about specificity here.
If it doesn't work, it's because there is something in your code that doesn't look like you think it does, and it may very well be something in some other part of your code that you haven't shown here that is causing the problem.
You can use the Firebug plugin in Firefox to inspect the elements in the page to see exactly which css is affecting each element.