Resource icon

Mocha Style 2.0

No permission to download
Hey guys - as I mentioned in my last post, I was able to successfully install this style after I upgraded to the latest XF version. However - I have discovered one small problem. It seems to "squash" pictures that are posted in some threads. It seems to do this on larger images. I'm posting an example (screenshot) of a picture I uploaded to a thread with the Mocha Style. You can see how it looks squashed. Only does this with this style. Any idea how to fix?

Thanks in advance.

Screen Shot 2021-05-12 at 10.47.17 AM.webp
 
UPDATE: As I didn't get any response here, I posted this question in the main Styles forum and someone had the solution. The issue was this code in the extra-less template:

Code:
.message-body img {
    max-width: 100% !important;
    max-height: 350px !important;
}

Not sure why you would limit the height of images to 350 pixels, but removing this code fixed the issue.
 
UPDATE: As I didn't get any response here, I posted this question in the main Styles forum and someone had the solution. The issue was this code in the extra-less template:

Code:
.message-body img {
    max-width: 100% !important;
    max-height: 350px !important;
}

Not sure why you would limit the height of images to 350 pixels, but removing this code fixed the issue.
I had originally put this there to limit the size in the forum but the new Xenforo version blew that up for some reason and forced this display to skew that way it did. Thanks for pointing this out for everyone.
 
I have discovered one small problem. It seems to "squash" pictures that are posted in some threads. It seems to do this on larger images.

I have exactly the same vertical squashing of embedded images problem on my website. Could someone please explain to the very newbie admin what code I change from what to what to solve this problem.

In addition, this Mocha theme does not allow my 1200 pixel by 215 pixel logo/header to load in full size. Something overrides the style settings and causes the logo/header to be about half size.
 
I have exactly the same vertical squashing of embedded images problem on my website. Could someone please explain to the very newbie admin what code I change from what to what to solve this problem.

In addition, this Mocha theme does not allow my 1200 pixel by 215 pixel logo/header to load in full size. Something overrides the style settings and causes the logo/header to be about half size.
Maybe it's worth trying to use a default Extra.less template, just copy and paste from the default style and see if that makes a difference.
 
Code:
Code:
.message-body img {
    max-width: 100% !important;
    max-height: 350px !important;
}

There is no such code as above in my Mocha Style extra.less template. Do I erase it or just set the 350px to 100%?

Also, there is the following code in my extra.less template, which may be shrinking my 1200x215 logo header:

Code:
.p-header-logo.p-header-logo--image img {
max-width: 600px !important;
max-height: 200px !important;
}

On edit: I solved both the vertically shrunken images problem and the small header/logo image problem by changing the max-width and max-height codes in all four places above to 100%.
 
Last edited:
There is no such code as above in my Mocha Style extra.less template at all. Could this message-body image max width/height code be somewhere else?

However, there is the following code in my extra.less template, which may be shrinking my logo header:

Code:
.p-header-logo.p-header-logo--image img {
max-width: 600px !important;
max-height: 200px !important;
}
^ This, I believe I had to remove that as well.
 
Back
Top Bottom