XF 2.X I'm having trouble with image resize in my Forum. Extra.less is not working, apparently (NOVA/XF 2.1)

palhanow

Customer
Hello guys, I'm sorry, but it's me again.

I hate bugs and your support is so much better than the XF and I'm thinking this is theme related.

1548945029422.png

So, basically the history of the problem is in this thread:

https://xenforo.com/community/threads/problems-on-unfurling-urls-in-my-xf.160177/

Basically the Unfur URL system was doing ok after the change (remove minimum img size), because the images are showing so much bigger than usual, specially in the Unfur URL system.

After that, i did removed the minimum img size and was working fine.

Now, the problem is back. The images are bigger again.

You can see in the thread.

The code for my extraless is this:

Code:
/* Resize Image */
.message-body img {
    max-width: 450px !important;
    max-height: 450px !important;
}
/* Resize Image */
/* Node Icons */
#XF{
    .node--id2 .node-icon i::before{
        content: '\f0a1';
    }
.node--id3 .node-icon i::before{
        content: '\f257';
    }
.node--id4 .node-icon i::before{
        content: '\f19c';
    }
.node--id5 .node-icon i::before{
        content: '\f19c';
    }
.node--id7 .node-icon i::before{
        content: '\f21b';
    }
.node--id10 .node-icon i::before{
        content: '\f109';
    }
.node--id9 .node-icon i::before{
        content: '\f26c';
    }
.node--id8 .node-icon i::before{
        content: '\f21e';
    }
.node--id11 .node-icon i::before{
        content: '\f0d6';
    }
.node--id12 .node-icon i::before{
        content: '\f05a';
    }
.node--id16 .node-icon i::before{
        content: '\f1ea';
    }
.node--id17 .node-icon i::before{
        content: '\f041';
    }
    .node--id18 .node-icon i::before{
        content: '\f0ac';
    }
    .node--id19 .node-icon i::before{
        content: '\f258';
    }
    .node--id20 .node-icon i::before{
        content: '\f02d';
    }
    .node--id21 .node-icon i::before{
        content: '\f11b';
    }
    .node--id22 .node-icon i::before{
        content: '\f1e3';
    }
    .node--id27 .node-icon i::before{
        content: '\f132';
    }
}
/* Node Icons */

/* Signature Image Size */
.message-signature
{
    .bbWrapper
    {
        .bbImage
        {
            max-width: 300px;
            max-height: 150px;
            overflow-x: auto;
            overflow-y: auto;
        }
    }
}
/* Signature Image Size */

/* Jump Button */
#scrolldownhere
{position:relative;top:-500px}
/* Jump Button */

/* Donations Icon */
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="doacoes"]:before { content: "\f0d6"; }
/* Donations Icon */

/*Invert Button */
.formButtonGroup .formButtonGroup-primary .button--icon--reply
{
  float: right;
  margin-left: 7px;
}
/*Invert Button */

/*Action Bar*/
.actionBar-action:before {
    margin-right: 5px;
}
.actionBar-action--edit:before {.m-faContent("\f040");}
.actionBar-action--report:before {.m-faContent("\f071");}
.actionBar-action--ip:before {.m-faContent("\f002");}
.actionBar-action--delete:before {.m-faContent("\f00d");}
.actionBar-action--spam:before {.m-faContent("\f024");}
.actionBar-action--warn:before {.m-faContent("\f12a");}
.actionBar-action--history:before {.m-faContent("\f1da");}
/*Action Bar*/
If i enter in the Forum using the ("DO NOT EDIT" Parent Style) the problem is solved, but my childs is not working. The extra.less in the Parent Style are empty.

Any thoughts?

Thank you very much.
 

Russ

Pixel Exit Staff
So your css here:

Code:
.message-body img {
    max-width: 450px !important;
    max-height: 450px !important;
}
Even though your intention may be to target just regular post images it's targeting the image inside the unfurl preview.

Try adding this to help:

Code:
.bbWrapper .bbCodeBlock--unfurl img {
    max-height: 60px;
}
 

palhanow

Customer
Thanks for your tip...

But unfortunately not worked at all.

Even if i remove all the code, is like the extra.less is not working, or the forum isn't "reading" or following his instructions.

Bizarre.

Should i reinstall the theme and make the modifications again?
 

Russ

Pixel Exit Staff
The only way your CSS wouldn't be updated usually comes down to:

  • Bad CSS somewhere above
  • Cache
If you want to submit a ticket I can take a closer look with an admin login.
 

Russ

Pixel Exit Staff
It's probably your CSS above, try this so the images have a max-width in mobile.

Code:
@media (max-width:@xf-responsiveNarrow) { .message-body img { max-width: 100% !important; max-height: 100%; } }
 

palhanow

Customer
Worked very well!

Thanks!

Now, another question, is a custom job.

I don't know if you guys make plugins, but I'm needing one.

Is basically a plugin that let me (admin) switch on and off the Ads in determined threads. Just a button in the top with a ON/OFF switch off when i need it.

I'm geting a lot of flags from AdSense and I'm a little worried.

If you guys can make this, how much will cost?

Thanks again.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.