Custom Colours not working

[rosoau]

No description provided.

[rosoau]

Caprine 2.52.0
Ubuntu 20
Using .deb file to install

Dark Mode is working now but custom.css makes no difference

[dusansimic]

It depends on what is in your custom.css file. The UI of messenger website is changed and thus any old custom styles should not be able to work.

[TiZ-HugLife]

Actually, it seems the custom.css file might be loading in such a way that :root variables are being overridden. To work around #1525, I added in the CSS from here: https://github.com/cicerakes/DarkNight-FBMessenger But I couldn't get it to take effect unless I added !important to every single line in the :root definition.

[rosoau]

Sounds promising HugLifeTiZ. I got it to retain dark mode but not my custom colours. Could you please show us your custom.css?

[TiZ-HugLife]

Sure thing. It's in this gist.

[dusansimic]

@HugLifeTiZ it's very possible that you'd need to add !important to every line in CSS but that is usually the case since you want to override something that already exists. That is really not unexpected.

The reason I mentioned the difference between old and new design is that your old CSS is not going to work on new design. Because whole Messenger CSS is redesigned, you'll need to change most of your custom CSS. I'd just like that everyone keeps that in mind. Don't expect anything from old design to "just work" because essentially Caprine is a wrapper for Messenger.com and thus when you get the new design, it's a different app in a sense that the HTML is completely different, CSS is completely different and we need to fix most of the features since they are broken by the redesign.

[TiZ-HugLife]

This CSS is not for the old design, it's for the new design. Ferdi does not need an !important on every line for the variable changes to take effect. It's not a huge deal, but it may trip up people expecting it to work without that.

[rosoau]

This CSS is not for the old design, it's for the new design. Ferdi does not need an !important on every line for the variable changes to take effect. It's not a huge deal, but it may trip up people expecting it to work without that.

Thanks heaps HugLifeTiZ. I changed text and background to my colours and I'm back again the way it looked before. Great.

[dusansimic]

@HugLifeTiZ I've investigated a little bit. Seems like Ferdi injects css by creating a style tag in the page source and puts the user css in that style tag. Caprine injects css by using Electrons insertCSS function which won't create a style tag, rather somehow inject it directly into that window.

I'm not completely sure how exactly it works but I can see that if css overrides some existing css and it is being injected by creating a style tag, it will override existing css.

On the other hand, if injected css overrides some existing css and it's being injected using insertCSS function from Electron, then it will require !important since it has less priority.

I agree that it might create some problems for people that are not very skilled in CSS but i wouldn't change the way we insert css since this way we don't need to maintain the insertion mechanism, just call a function. A better solution would be to document this special case. Not in depth, just let people know that if they want to override some css they would probably need use !important keyword.

[TiZ-HugLife]

Cool, thanks for the insight. That all sounds good to me. :)

[rosoau]

The custom.css in the latest version is still the old one. But I'm using the new custom.css which HugLifeTiZ let me see. Indeed the top half which shows the old css is not needed. I deleted that part. I think the "!important" is needed where you put them. This css overrides the dark switch. Perhaps we could have a switch to turn off: Caprine Settings > Advanced? Anyway I'm happy to just leave it there. The login window had not adopted colours and is still white. Also as stated elsewhere in this forum it is now necessary to delete the local folder ~/.confi/Caprine and give it a new start. You guys may want to put a note on that matter on the release page. Here is my messenger looks: olive saffron wine

[rosoau]

And the file itself: custom.css

.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.g5gj957u.d2edcug0.hpfvmrgz.kud993qy.buofh1pr {
margin-top: unset !important;
}

/* Scrollbar fixes. */
::-webkit-scrollbar-track, ::-webkit-scrollbar, ::-webkit-scrollbar-corner {
background-color: #14170E;
}
::-webkit-scrollbar {
width: 15px;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #65730060;
background-clip: content-box;
border: 1px solid transparent;
}
::-webkit-scrollbar-thumb:hover {
background-color: #65730090;
}

/* Dark theme from Ferdi user.css. /
/ !important spam needed for the colors to actually work in Caprine. */
:root, .__fb-light-mode, .__fb-dark-mode {
--card-background: #170010 !important;
--comment-background: #121400 !important;
--card-background-flat: #121400 !important;
--disabled-button-background: #14170E !important;
--divider: #4d4d4d !important;
--hosted-view-selected-state: #2B001E !important;
--hover-overlay: rgba(255, 255, 255, 0.05) !important;
--media-inner-border: rgba(255, 255, 255, 0.1) !important;
--messenger-card-background: #170010 !important;
--messenger-reply-background: #222600 !important;
--overlay-alpha-80: rgba(41, 41, 41, 0.8) !important;
--popover-background: #170010 !important;
--primary-icon: #FF662A !important;
--primary-text: #FF4800 !important;
--scroll-thumb: #2D3300 !important;
--secondary-button-background: #2D3300 !important;
--secondary-icon: #A8BF00 !important;
--secondary-text: #A8BF00 !important;
--shadow-1: rgba(0, 0, 0, 0.3) !important;
--shadow-2: rgba(0, 0, 0, 0.4) !important;
--shadow-5: rgba(0, 0, 0, 0.7) !important;
--shadow-8: rgba(0, 0, 0, 1) !important;
--shadow-inset: rgba(000, 000, 000, 0.5) !important;
--surface-background: #170010 !important;
--wash: #141700 !important;
--web-wash: #170010 !important;
}

body {
color: #FF662A;
}

/* Delivered icon on left */
.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.pfnyh3mw.d2edcug0.hpfvmrgz.aovydwv3.p8cu3f6v.kb5gq1qc.taijpn5t.b0upgy8r path, .l9j0dhe7.swg4t2nn path, .a8c37x1j.ms05siws.hwsy1cff.b7h9ocf4 path {
fill: #FF662A;
}

path[d="M0 36h36V0H0z"] {
fill: none !important;
}

/* Icons */
path[d="M18 30c-6.627 0-12-5.372-12-12 0-6.627 5.373-12 12-12 6.628 0 12 5.373 12 12 0 6.628-5.372 12-12 12zm5.294-16.707l-7.296 7.295-3.254-3.252c-.352-.353-.919-.439-1.323-.148a1 1 0 00-.128 1.522l3.998 3.997a1 1 0 001.414 0l8.002-8.001a1 1 0 10-1.413-1.413z"] {
fill: #A8BF00;
}

.sp_o5t_XtHjhxN_1_5x {
filter: invert(.8);
}

/* App download */
.oajrlxb2.q2y6ezfg.gcieejh5.bn081pho.humdl8nn.izx4hr6d.rq0escxv.nhd2j8a9.j83agx80.p7hjln8o.kvgmc6g5.cxmmr5t8.oygrvhab.hcukyx3x.jb3vyjys.d1544ag0.qt6c0cv9.tw6a2znq.i1ao9s8h.esuyzwwr.f1sip0of.lzcic4wl.l9j0dhe7.abiwlrkh.p8dawk7l.beltcj47.p86d2i9g.aot14ch1.kzx2olss.cbu4d94t.taijpn5t.ni8dbmo4.stjgntxs.k4urcfbm.tv7at329 {
background: #170010;
}

.sn0e7ne5 {
box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 2px;
}

/* Middle header */
.bafdgad4 {
box-shadow: 0 0 4px rgba(0,0,0,.7)
}

/* Pop-up close icon */
.sp_GOPGoqMu6Pq_1_5x {
filter: invert(.8);
}

/* Feedback icons */
.sp_BQbKIpOzOAx_1_5x, .sp_a51jIvPl6dA_1_5x {
filter: invert(.8);
}

/* Reacts */
.tlilfck6 {
box-shadow: 0 2px 4px var(--shadow-2);
}

[dusansimic]

This seems to be solved. I'll close it now.