iO Dark Mode

iO Dark Mode [Paid] 2.2.15.0.2

No permission to buy ($35.00)
Overview FAQ Updates (44) 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

Mr Lucky
Duplicate Resource text not viewable in dark mode
Replies
3
Views
409
Paul B
Paul B
N
Dark mode? Can't download any plugins.
Replies
2
Views
357
Nodybuddy
N
L
  • Locked
Not a bug Io Dark mode
Replies
1
Views
528
Chris D
Chris D
DigNap15
  • Question Question
XF 2.2 Is there a dark mode button feature for Xenforo?
Replies
13
Views
883
Paul B
Paul B
C
ITA - [cXF] Light and dark mode switch
Replies
0
Views
433
Carlitos132
C
Top Bottom