GameNet
Active member
This is also happening on iPadOS 18
UI.X 2 [Paid] 2025-03-05
- Thread starter ThemeHouse
- Start date
philmckrackon
Well-known member
Seeker-Smith
Well-known member
Put this in the template extra.less you can adjust size.
.p-nav-inner .p-header-logo.p-header-logo--image img {
max-height: 30px;
width: auto;
}
.p-nav-inner .p-header-logo.p-header-logo--image img {
max-height: 30px;
width: auto;
}
shri
Member
Hi there, New to XF, so this might well be a user / config problem on my end. Would appreciate any guidance.
Have installed this on a brand new site which started with 2.2 a couple of weeks ago and upgraded to 2.3 today.
Installed the latest UI.X Addon and UI.X Style today.
Problem 1 of 2: Double icons when subforums are configured to display as a list and not a dropdown.
The rendered HTML on the browser (view source) is as follows. Removing the <svg></svg> element seems to resolve the double icon display, but cannot figure out where this gets inserted from, given my limited XF templating knowledge
(I cannot seem to create a ticket on ThemeHouse.. but this is pretty much all the information I have on hand)
Have installed this on a brand new site which started with 2.2 a couple of weeks ago and upgraded to 2.3 today.
Installed the latest UI.X Addon and UI.X Style today.
Problem 1 of 2: Double icons when subforums are configured to display as a list and not a dropdown.
The rendered HTML on the browser (view source) is as follows. Removing the <svg></svg> element seems to resolve the double icon display, but cannot figure out where this gets inserted from, given my limited XF templating knowledge
HTML:
<li data-template-name="public:forum_list::node_list" data-template-name="public:forum_list::node_list_entry" data-template-name="public:node_list_forum::depthN">
<a href="/forums/twins-and-multiples.59/" class="subNodeLink subNodeLink--forum ">
<i class="fa--xf far fa-comments subNodeLink-icon"><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true"><use href="/data/local/icons/regular.svg?v=1721190842#comments"></use></svg></i>Twins and Multiples
</a>
</li>(I cannot seem to create a ticket on ThemeHouse.. but this is pretty much all the information I have on hand)
shri
Member
Good chance this is a user error, but I cannot find these alternate variables in the style.xml file.
Do I also need to install the UI.X Dark 2.3 version? Or does the base UI.X theme have built in variations?
Problem 2 of 2:
Both the light and dark colors are the same. If this is as intended, thats fine, I can play around and switch things around.
This is a grandchild theme:
UI.X.
--- UI.X. Material (installed from the child-styles directory.. just because I was testing)
------- Site Style
Basic Colors does not seem to have different settings for Default and Alternate
Do I also need to install the UI.X Dark 2.3 version? Or does the base UI.X theme have built in variations?
Problem 2 of 2:
Both the light and dark colors are the same. If this is as intended, thats fine, I can play around and switch things around.
This is a grandchild theme:
UI.X.
--- UI.X. Material (installed from the child-styles directory.. just because I was testing)
------- Site Style
Basic Colors does not seem to have different settings for Default and Alternate
Seeker-Smith
Well-known member
Did you buy both Light and Dark UI.X? I have Dark only so the Light mode does not work.
willl
Well-known member
With the latest changes to how logos render in XF, we inserted default dimensions for the logos that come bundled with the style where appropriate; Those just need to be changed for your logo.
A bug slipped by in e-mail templates that we've got a fix ready for; E-mails will currently render without styling for the time being, but if you want to pop in a hotfix just replace the core.less e-mail template (be sure you're on the e-mail template) with this:
Less:
// NOTE: THIS DOES NOT HAVE ACCESS TO public:setup.less automatically!
// THE LESS HERE SHOULD BE KEPT AS SIMPLE AS POSSIBLE
// UI.X Font Sizes
/* solution for pxs */
@fontSizeNormal: unit((10 * @xf-fontSizeNormal), px);
@fontSizeLarge: unit((10 * @xf-fontSizeLarge), px);
@fontSizeLarger: unit((10 * @xf-fontSizeLarger), px);
@fontSizeLargest: unit((10 * @xf-fontSizeLargest), px);
@fontSizeSmall: unit((10 * @xf-fontSizeSmall), px);
/* solution for rems
@fontSizeNormal: (0.625 * @xf-fontSizeNormal);
@fontSizeLarge: (0.625 * @xf-fontSizeLarge);
@fontSizeLarger: (0.625 * @xf-fontSizeLarger);
@fontSizeLargest: (0.625 * @xf-fontSizeLargest);
@fontSizeSmall: (0.625 * @xf-fontSizeSmall);*/
body
{
margin: 0;
padding: 0;
word-wrap: break-word;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: @xf-emailBg;
font-size: @fontSizeNormal;
font-family: @xf-emailFont;
line-height: @xf-lineHeightDefault;
color: @xf-emailTextColor;
}
table
{
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table,
td
{
border-collapse: collapse;
}
a
{
color: @xf-emailLinkColor;
text-decoration: none;
}
.bbImage
{
width: auto;
height: auto;
max-width: 100%;
}
#bodyTable
{
height: 100% !important;
width: 100% !important;
margin: 0;
padding: 0;
background-color: @xf-emailBg;
}
#bodyTableContainer
{
background-color: @xf-emailBg;
}
.container
{
width: 100%;
max-width: 600px;
}
.header
{
color: @xf-emailHeaderColor;
padding: @xf-paddingMedium @xf-paddingLarge;
border-top-left-radius: @xf-borderRadiusMedium;
border-top-right-radius: @xf-borderRadiusMedium;
font-family: @xf-emailFont;
font-size: @fontSizeLargest;
line-height: @xf-lineHeightDefault;
}
.header a
{
color: @xf-emailHeaderColor;
}
.content
{
background-color: @xf-emailContentBg;
border-radius: @xf-borderRadiusSmall;
color: @xf-emailTextColor;
padding: @xf-paddingLarge;
font-size: @fontSizeNormal;
font-family: @xf-emailFont;
line-height: @xf-lineHeightDefault;
}
.content .bbImage
{
max-width: 100%;
}
.content > p:first-child
{
margin-top: 0;
}
.content > p:last-child
{
margin-bottom: 0;
}
.footer
{
padding: @xf-paddingMedium @xf-paddingLarge;
text-align: center;
color: @xf-emailTextColorMuted;
font-size: @fontSizeSmall;
font-family: @xf-emailFont;
line-height: @xf-lineHeightDefault;
}
.footer a
{
color: @xf-emailTextColorMuted;
text-decoration: underline;
}
.footerExtra
{
margin-top: 1em;
}
h2
{
font-size: @fontSizeLargest;
font-weight: normal;
margin: @xf-paddingLarge 0;
padding: 0;
}
hr
{
border: 0;
border-bottom: @xf-borderSize solid @xf-emailBorderColor;
}
div.message
{
border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
margin: @xf-paddingLarge 0;
padding: @xf-paddingLarge;
}
div.quote
{
border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
border-top: @xf-borderSize solid @xf-emailBorderColor;
border-bottom: @xf-borderSize solid @xf-emailBorderColor;
border-right: @xf-borderSize solid @xf-emailBorderColor;
background: @xf-emailContentAltBg;
margin: @xf-paddingLarge 0;
padding: @xf-paddingLarge;
}
.quote-name
{
color: @xf-textColorAttention;
font-size: @fontSizeSmall;
margin-bottom: @xf-paddingMedium;
}
pre.code
{
margin: @xf-paddingLarge 0;
padding: @xf-paddingLarge;
border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
border-top: @xf-borderSize solid @xf-emailBorderColor;
border-bottom: @xf-borderSize solid @xf-emailBorderColor;
border-right: @xf-borderSize solid @xf-emailBorderColor;
background: @xf-emailContentAltBg;
max-width: 600px;
overflow: auto;
}
.textLink
{
color: @xf-emailTextColor;
text-decoration: none;
}
.linkBar
{
padding: @xf-paddingMedium;
background-color: @xf-emailContentAltBg;
border-top: @xf-borderSize solid @xf-emailBorderColor;
}
.button
{
display: inline-block;
padding: 5px 10px;
border: none;
border-radius: @xf-borderRadiusMedium;
color: @xf-buttonTextColor;
text-decoration: none;
.xf-buttonBase();
.xf-buttonDefault();
.xf-buttonPrimary();
font-size: @fontSizeSmall;
background-color: @xf-buttonPrimaryBg;
}
.buttonFake
{
display: inline-block;
padding: 5px 10px;
font-size: @fontSizeSmall;
}
.minorText,
.unsubscribeLink
{
font-size: @fontSizeSmall;
color: @xf-emailTextColorMuted;
}
.minorText a,
.unsubscribeLink a
{
color: @xf-emailTextColorMuted;
text-decoration: underline;
}
.unsubscribeLink
{
margin-top: 1em;
text-align: center;
}
.mediaPlaceholder,
.spoilerPlaceholder
{
border-radius: @xf-borderRadiusSmall;
margin: @xf-paddingMedium 0;
padding: @xf-paddingMedium;
font-size: @fontSizeLargest;
line-height: 3;
text-align: center;
border: @xf-borderSize solid @xf-emailBorderColor;
background-color: @xf-emailContentAltBg;
}
.inlineSpoilerPlaceholder
{
font-size: @fontSizeSmall;
background-color: @xf-contentAltBg;
border: @xf-borderSize solid @xf-borderColorLight;
border-radius: @xf-borderRadiusSmall;
padding: 1px @xf-paddingSmall;
}
.u-opposite { text-align: right; }
// ################################ ACTIVITY SUMMARY ###############################
.p-activitySummary #bodyTableContainer
{
padding: 0;
}
.summaryContentWrapper
{
padding: 0 @xf-paddingLarge;
max-width: 1200px;
}
.summaryHeaderBar
{
color: @xf-chromeTextColor;
background: @xf-chromeBg;
font-family: @xf-emailFont;
font-size: @fontSizeLargest;
line-height: @xf-lineHeightDefault;
padding: @xf-paddingMedium @xf-paddingLarge;
a
{
color:@xf-chromeTextColor;
}
img
{
max-height: 200px;
vertical-align: bottom;
&.logo-svg
{
max-width: 200px;
}
}
}
.summaryOuterHeader
{
width: 100%;
table-layout: fixed;
margin: @xf-paddingLargest 0;
}
.summaryOuterHeader-content
{
font-size: @fontSizeLarger;
font-weight: @xf-fontWeightNormal;
color: @xf-emailTextColorMuted;
}
.summaryBlock
{
color: @xf-emailTextColor;
background-color: @xf-emailContentBg;
border: @xf-borderSize solid @xf-emailBorderColor;
border-radius: @xf-borderRadiusSmall;
border-collapse: separate;
width: 100%;
table-layout: fixed;
margin: @xf-paddingLargest 0;
}
.summaryBlock-header
{
font-size: @fontSizeLarger;
color: @xf-majorHeadingTextColor;
background: @xf-majorHeadingBg;
border-bottom: @xf-borderSize solid @xf-borderColorLight;
border-top-left-radius: @xf-borderRadiusSmall;
border-top-right-radius: @xf-borderRadiusSmall;
padding: @xf-blockPaddingV @xf-blockPaddingH;
a
{
color: @xf-majorHeadingTextColor;
}
}
.statsGroup
{
display: flex;
flex-flow: row wrap;
font-size: @fontSizeLarge;
}
.stat
{
flex: auto;
vertical-align: top;
margin-right: @xf-paddingMedium;
margin-bottom: @xf-paddingMedium;
}
.stat-label
{
font-size: @fontSizeSmall;
color: @xf-emailTextColorMuted;
}
.p-activitySummary .content.content--attribution,
.p-activitySummary .content.content--footer,
.p-activitySummary .content.content--footer table
{
font-size: @fontSizeSmall;
color: @xf-emailTextColorMuted;
a:not(.button)
{
color: inherit;
text-decoration: underline;
}
}This one slipped by me! I'll get a fix put in for the next update we do, but as a hotfix add the following to extra.less:
Code:
.subNodeLink.subNodeLink--forum .subNodeLink-icon:before { display: none; }Our base styles don't actually directly support variations currently; We have a separate version of UIX that utilizes Variations in development, but there are still a number of bugs with XF's Variations itself that made us hesitate to release it for now (and, for example, you can't have a child with variations if the parent doesn't have variations enabled).
At some point we may update all our styles to work with Variations out of the box, but that may not be until 2.3 gets another patch or two to iron out the issues.
Seeker-Smith
Well-known member
I notice that there is an issue with the node icons when the node is a page. It shows up twice.
willl
Well-known member
Good catch! I'll get a fix in place for the next update on that.
Seeker-Smith
Well-known member
Related to the page node. There is no bottom bar with the arrow and more. Could that be fixed or added?
willl
Well-known member
We actually haven't ever had that on the page nodes as far as I can recall; You're actually the first person I've seen request it.
It could probably be added with some custom template work, but as of right now we don't have any plans to add that to the Nodes core addon.
Seeker-Smith
Well-known member
No issue. I wasn't sure if it was there before. Just seemed when I looked at it today.We actually haven't ever had that on the page nodes as far as I can recall; You're actually the first person I've seen request it.
Seeker-Smith
Well-known member
Oops my mistake.We actually haven't ever had that on the page nodes as far as I can recall; You're actually the first person I've seen request it.
ThemeHouse
Well-known member
ThemeHouse updated UI.X 2 with a new update entry:
Version 2.3.0.0.1 Released
Read the rest of this update entry...
Version 2.3.0.0.1 Released
Read the rest of this update entry...
GameNet
Active member
Thank you for releasing the new update for your style and I am very helpful that’s @ThemeHouse will fix other’s issues as soon as possible
PumpinIron
Well-known member
Anyone having this issue since upgrading to XenForo 2.3?
I'm running the latest version of the UI.X theme and the UI.X add-on.
If I switch to the XenForo default theme this issue goes away, so it has to be related to UI.X.
I'm running the latest version of the UI.X theme and the UI.X add-on.
If I switch to the XenForo default theme this issue goes away, so it has to be related to UI.X.
Last edited:
GameNet
Active member
I am not having issues related to the toolbar but I am having issues related render and others issues like account menu are not currently displaying on iPadOS 18. Its seems to be ok on macOS 15
PumpinIron
Well-known member
Yep, I'm running iOS and MacOS as well and there's a variety of problems / issues. I'm going to have to compile a list of them all.
PumpinIron
Well-known member
More weird stuff with double icons on buttons after upgrading to 2.3:
