Beluk
24 ديسمبر 2018، 7:52ص
1
I have tried to add custom colors for tags using this post:
https://meta.discourse.org/t/add-a-custom-fontawesome-icon-and-color-to-your-tag/67881 !
This worked delicious for the desktop version, but not for the mobile version.
(the css script is in the common one)
Is there something extra I need to care for?
dax
(Daniela)
24 ديسمبر 2018، 8:37ص
2
First, the second screenshot seems the “desktop view” on mobile to me.
Second, I’m not sure what code are you using but yes, CSS classes on mobile may be different from desktop.
4 إعجابات
Beluk
24 ديسمبر 2018، 9:18ص
3
I used Google Chrome Developer tools to simulate mobile version. This reflect exactly the same what i seeing on my mobile device.
My code in common css is:
@mixin fAwesome2 ($fa, $col) {
&:link, &:visited, &.bullet::before {
background-color: #33333F;
color: $col;
}
&.bullet::before {
content: $fa;
}
}
[data-tag-name="bug"] { @include fAwesome2("\f135", #FF6448); }
[data-tag-name="feature"] { @include fAwesome2("\f135", #3CB371); }
[data-tag-name="quickwin"] { @include fAwesome2("\f135", #FFA500); }
[data-tag-name="declined"] { @include fAwesome2("\f135", #808080); }
[data-tag-name="question"] { @include fAwesome2("\f135", #1E90FF); }
[data-tag-name="urgent"] { @include fAwesome2("\f135", #EE82EF); }
How can i found out what i have to change to get to the same result on mobile and desktop version?
dax
(Daniela)
24 ديسمبر 2018، 9:46ص
4
4 إعجابات
Beluk
24 ديسمبر 2018، 10:15ص
5
Well, i have read the post but for colors it looks to me there is no change, only for handling SVG Icons, right?
Meanwhile I have tried to analyze what is different on mobile and desktop and found out that on mobile version i have additionally the folowing code lines:
.topic-list .topic-item-stats .num .fa, .topic-list .topic-item-stats a, .topic-list .topic-item-stats a:visited {
color: #919191;
}
This is hiding my custom color. If i disable this line in the designer it activate the script below and after that is shows correct also on mobile.
How can it be removed or changed in an custom css?
dax
(Daniela)
24 ديسمبر 2018، 11:17ص
6
Beluk:
Well, i have read the post but for colors it looks to me there is no change, only for handling SVG Icons, right?
Nope, even for colors. I think you have other customizations that interfere with the CSS of the tags.
Try only to add !important
as in the code below:
@import "common/foundation/mixins";
[data-tag-name="tag1"]:link,
[data-tag-name="tag1"]:visited,
[data-tag-name="tag1"].bullet:before {
color: red !important;
}
إعجاب واحد (1)
Beluk
24 ديسمبر 2018، 11:30ص
7
I’m using v2.2.0.beta6 +84 without any other customizations. Adding !important fixed it! Thanks for your help and merry christmas.
4 إعجابات
system
(system)
تم إغلاقه في
23 يناير 2019، 11:35ص
8
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.