UI.X 1.5.22.0

[n00bsaibot]

Insert the css in responsive selectors.

@maxResponsiveWideWidth, @maxResponsiveMediumWidth and @maxResponsiveNarrowWidth.

https://xenforo.com/community/resources/responsive-design.2193/

 

[Dad.]

Thank you Mike.

I don't have UI.X yet, I'm thiking about buying it.
Do you have some kind of trial or demo where I can have a look at the admin options and not just at the frontend)?

Thank you for your interest!

At this time, we do not have this, as it would be fairly difficult to allow. We hope for 2.0 to have a system where people can actually go in and edit and build the theme before they buy it. But we do not have this feature yet. Until then I hope the screenshots, front end demo, and reviews help spark your interest!

 

[Axel B]

Insert the css in responsive selectors.

@maxResponsiveWideWidth, @maxResponsiveMediumWidth and @maxResponsiveNarrowWidth.

https://xenforo.com/community/resources/responsive-design.2193/

Thanks for your reply. I've read the article. Is it possible to suppress the responsive behaviour? From what I read I have to copy the CSS I have now three times to have it work on all three resolutions? Or I'm missing something. Thanks in avance!

 

[n00bsaibot]

just looked closer at the other post. @media (min-width: 1025px) is not going to render below 1025px... why not just change the min-width to something like 480px?

 

[Axel B]

just looked closer at the other post. @media (min-width: 1025px) is not going to render below 1025px... why not just change the min-width to something like 480px?

Tried that m8. Doesn't work. The @media (min-width: 480px) is added, but the @media (min-width: 1025px) supersedes (is that the right word?) this. I have no clue where or why UI.X is generating @media (min-width: 1025px) for all my extra.css

 

[stilly]

It looks like the sticky sidebar is aligning the top of the border around the button. You could reduce that spacing if you wanted the actual button to line up.

For the second issue, do you have a link we could look at?

I cant send a link as the issue is when you are creating an event, the average user wont see this, admins are the only that can create an event at this time.

@Bob anything you can think of that is fancy about this input? @stilly would you mind checking if any template modifications aren't running?

All template modifications are running.

 

[Dad.]

I cant send a link as the issue is when you are creating an event, the average user wont see this, admins are the only that can create an event at this time.
View attachment 124458




All template modifications are running.

Bob has claimed responsibility for this fix, and we are grateful for it .

 

[stilly]

Alright cool. @Bob get at it, lol, I put up 40 books the manual way, lol,

Edit: see a new release out today, cool, thanks,

 

[n00bsaibot]

Tried that m8. Doesn't work. The @media (min-width: 480px) is added, but the @media (min-width: 1025px) supersedes (is that the right word?) this. I have no clue where or why UI.X is generating @media (min-width: 1025px) for all my extra.css

View attachment 124450

Weird. If your CSS in the extra.css file?

Any results if you search templates for '1025px' ?

 

[stilly]

@Mike Creuzer

On one of my sites, the forums node list looks like this (antiquark)




I would like to achieve the same type of look in UI.X. I looked at my extra.css in antiquark and tried copying a bit of code to UI.X but couldn't get it.

Any suggestions:

 

[Axel B]

Weird. If your CSS in the extra.css file?

Any results if you search templates for '1025px' ?

Yes everything is in the extra.css
No I cannot find anything with '1025px'
@Mike Creuzer do you know what to do?
All the stuff I put into extra.css is wrapped with @media (min-width: 1025px). So for example my custom prefixes don't work on tablets or mobiles. How can I prevent this? Where is this coming from?

 

[n00bsaibot]

What if you wrap your extra.css statements with !important?

@media (min-width: 48opx)
{
yourcss; !important
yourcss; !important
yourcss; !important
}

 

[Arno Nühm]

What if you wrap your extra.css statements with !important?

@media (min-width: 48opx)
{
yourcss; !important
yourcss; !important
yourcss; !important
}

Better this:

@media (min-width: 480px)
{
yourcss !important;
yourcss !important;
yourcss !important;
}

 

[Freelancer]

Using !important for every modification you made in general is a very bad advise. It will influence behavior of objects like buttons and links and will make UIX functionality be broken real quick. That is not good coding (and extremely rarely needed with XF CSS hierarchy if done right).

EDIT/EDIT: Found the "bug", a typo in the CSS.
@Axel B

Your page code revealed that your CSS has a typo...

@media (min-width: 1025px) {
    body,
    .nodeList .categoryStrip,
    .sidebar .section .secondaryContent h3,
    .sidebar .section .secondaryContent h3 a,
    .mainContent .section .widget.XMWidgets_Tag.non-sidebar-widget h3,
    .mainContent .section .widget.XMWidgets_Tag.non-sidebar-widget h3
    a {
        background: url('http://mainecoon.nl/images/xmas/christmas_wallpaper.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important
    }

After that ALL of the other CSS code is following. But one important thing is missing. The Curly Bracket to CLOSE the @media properties. Setting a "}" after the above code and before the code that is following will resolve your problem completely.

 

[Axel B]

@Freelancer, many many many thanks! This solved the issue!
/hugs

 

[Freelancer]

@Freelancer, many many many thanks! This solved the issue!
/hugs

Merry Christmas

 

[Axel B]

Merry Christmas

You too m8!

 

[Skylined]

Could you guys please add Strava to the Social Media icons or have the option to let the admins add their custom icons?

 

[Axel B]

How can I force wrapping the buttons Edit, Delete, IP, Warn and Report into the button Tools an all resolutions?
Is this something that can be done by using CSS? I couldn't figure out how this works.
Or is it a UI.X setting that I've missed?

Thanks in advance!

 

[Infopro]

I think you're looking for:
Style Properties: ├ [UI.X] Threads and Posts > Responsive Message Controls Viewport Width