iO Dark Mode

iO Dark Mode [Paid] 2.3.4.1.0

No permission to buy ($35.00)
Overview FAQ Updates (54) Reviews (4) History Discussion
Any idea why the XenTR Forum stats font awesome icons aren't working properly for this theme? Using iO Dark Mode and XenTR's Forum Stats widget together.....See here:

image_2023-10-02_020326631.webp
 
DarkGizmo said:
Any idea why the XenTR Forum stats font awesome icons aren't working properly for this theme? Using iO Dark Mode and XenTR's Forum Stats widget together.....See here:

View attachment 291877
Click to expand...
Apologies for the delayed reply; Didn't see this one come through my notifications.

Anyway, most likely the addon is referencing specific FontAwesome icons that a Material replacement isn't in place for, or they are directly specifying the CSS for an icon instead of using the <xf:fa> code.

By default iO uses Material icons; You can switch it to Font Awesome (XF's default) under Appearance -> Style Properties -> Icons, changing the "Icon font" value.
 
willl said:
Apologies for the delayed reply; Didn't see this one come through my notifications.

Anyway, most likely the addon is referencing specific FontAwesome icons that a Material replacement isn't in place for, or they are directly specifying the CSS for an icon instead of using the <xf:fa> code.

By default iO uses Material icons; You can switch it to Font Awesome (XF's default) under Appearance -> Style Properties -> Icons, changing the "Icon font" value.
Click to expand...
No worries! Thank you! :-)
 
@willl I'm taking the opportunity to ask a question: how do I edit the device offline page, "Page could not be loaded" etc etc?

I've edited my thread titles size long time ago, and I see my modifications is affecting this page as well. But it seems that I can't bring it back to a decent size, and the page is actually horribly unreadable like this, as you can see:

1698082800028.webp​


I tried with some custom CSS in the extra.less but looks like it's completely ignored...

How can I fix that?
 
El Porcharo said:
@willl I'm taking the opportunity to ask a question: how do I edit the device offline page, "Page could not be loaded" etc etc?

I've edited my thread titles size long time ago, and I see my modifications is affecting this page as well. But it seems that I can't bring it back to a decent size, and the page is actually horribly unreadable like this, as you can see:



I tried with some custom CSS in the extra.less but looks like it's completely ignored...

How can I fix that?
Click to expand...

That's a weird one; I assume that's not what you've got set currently for your page title size?

Mind sharing a link to your board so I can see how it's rendering on my end?
 
Sure, you can find it here: http://open-my.link/elporcharo

That's the page I get with the web app when the phone or tablet doesn't have internet access.

And it should also be the H1 titles size I've set for thread view, if I recall well. But I'm unable to inspect the page code, otherwise I might have fixed myself.

Thanks for your time, buddy ❤️
 
Ah, ok. Well, unfortunately I don't really have a good way to test that right now, but some quick poking around shows a few other things have exceptionally large font sizes; The Flash Message Bar (Appearance -> Style Properties -> Miscellaneous) by default has a font size value of @xf-fontSizeLargest - Might want to check what you've got that set to, as I'm betting that the font size issue you initially pointed out is because it's using that value.
 
willl said:
The Flash Message Bar (Appearance -> Style Properties -> Miscellaneous) by default has a font size value of @xf-fontSizeLargest - Might want to check what you've got that set to, as I'm betting that the font size issue you initially pointed out is because it's using that value.
Click to expand...
Hello Will,
I've had some time to test today, that value is set as you supposed (so everything is on default):

1699035663335.png​

But I've also tried setting the font size to 14px and nothing changed:

1699035701648.png
​
I thought this was going to appear on the web app only, but I see you can reach this page even by setting your computer browser to "Offline Mode" and reloading the frontend.

And as you can see is way different from the default page:

1699037020283.webp​

So by inspecting the page, I see the affected class is [B]p-offline-header[/B], which is using the [B]font-size: 3.6rem[/B] that I've set for the h1 thread titles:


1699036762924.webp​



Is there a way to edit the offline page CSS to avoid that?
 
Apologies - I wasn't completely clear, but you ended up getting to the core of my question anyway regarding font sizes (I meant for you to check your default font sizes set in Typography) :)

But yeah, you can edit the offline page CSS no prob; that's under the aptly named "offline.less".
 
That's great! (y) (y) (y)

I've added a template modification to set pixel font size as XenForo's default, so I won't lose my edit on the next update.

Thanks for your help! 😃
 
You must log in or register to reply here.

Similar threads

Abu Abdullah
  • Question Question
XF 2.3 Can I add different CSS for Light and Dark Mode individually?
Replies
2
Views
52
Abu Abdullah
Abu Abdullah
interforo
  • Question Question
XF 2.3 dark mode
Replies
8
Views
124
Paul B
P
D
Browser issue UCP Panel icons almost invisible in dark mode
Replies
7
Views
81
Xon
X
AndyB
  • Suggestion Suggestion
Not planned Allow selecting dark mode as default
Replies
14
Views
309
eDaddi
eDaddi
frm
Invisible text below some quotes in light mode, not in dark mode.
Replies
6
Views
129
Paul B
P
Back
Top Bottom