[FORUM ISSUE] Please fix the CSS of the Image Upload / Image Hotlink forum dialog!

[ricp]

You use https://ckeditor.com for styling and formatting of your forum entries. Absolutely nothing wrong with that, CKE has been around for what seems like decades and I've rolled it into numerous sites in the past.

 

The problem however is that you have failed to properly style it (via CSS), so the page/cke defaults are being picked up which leaves the image upload/hyperlinking dialog looking a complete mess as you can see from these screenshots:

 

Black text on dark background, the upload file button is unstyled and unintuitive.

 

Same as above regarding dark text on dark background, but adds the extra sin of white text on white background for the URL.

 

** These screenshots are from Firefox (v64.0) on Windows 10. Other browsers may differ but this is core CSS so it really shouldn't. **

 

Ok, quick fixes? Sure I can do that here, but really you need to have someone with a webdev background to have a proper look at it. As CSS defines rule supersedence based on all sorts of weighted factors the simplest way is to apply (either inline or via a file) a fix applied after all other CSS has been interpreted. Luckily I have a two line addition that will resolve the issues both with the image upload/hyperlink but also the video embed dialog:

 

.cke_dialog_page_contents, #cke_101_textInput, #fileupload1 { background-color:#fff;color:#000 }
#uploadbutton { background-color:#641010;}

 

I would also amend the #uploadbutton rule to shift the button a little, perhaps like this:

 

#uploadbutton { background-color:#641010; margin: 5px; padding:2px 5px; }

 

Now don't get me wrong, this will not stop it looking horrible, but it will resolve the issues of text not being visible, as can be seen here:

 

 

If this was my own project I'd spend a lot longer getting it looking better but to be honest the forum is looking pretty old and there is only so much polishing you can do. I'm also no fan of vBulletin (for all sorts of reasons, from poor HTML to not being free when thousands of better products are!) but this is not the place to convince you to change.

 

If you could amend this minor bit it would make adding or linking images or videos a whole lot less annoying. Thanks in advance. If you are unsure of anything then just ask I'm happy to explain. Honestly, though, it should be fairly straight forward.

[Gamida]

I also miss being able to change it so you made your own link name. Is it still possible now?

I mean changing something like

 

https://7daystodie.com/forums/showthread.php?100140-FORUM-ISSUE-Please-fix-the-CSS-of-the-Image-Upload-Image-Hotlink-forum-dialog!

 

 

to

 

CSS Fix

[Royal Deluxe]

I also miss being able to change it so you made your own link name. Is it still possible now?

I mean changing something like

 

https://7daystodie.com/forums/showthread.php?100140-FORUM-ISSUE-Please-fix-the-CSS-of-the-Image-Upload-Image-Hotlink-forum-dialog!

 

 

to

 

CSS Fix

 

you mean like

Damn Valve DONT FOLLOW THE LINK ITS EVIL XD

 

 

[noparse]Damn Valve[/noparse]

aka

[noparse]Text[/noparse]

[ricp]

I also miss being able to change it so you made your own link name. Is it still possible now?

 

The forum is vBulletin, so these tags are available...

 

https://www.vbulletin.org/forum/misc.php?do=bbcode

 

With the url code it needs a reference to the actual URL, and with the default behaviour it uses whatever is inside the tags however if you provide an option parameter within the url opening tag then it will use that for the URL and the text inside the tags becomes the link text.

 

You can see an example of that here.

 

Or.....

 

[noparse][url option=https://www.vbulletin.org/forum/misc.php?do=bbcode#url]You can see an example of that here[/url][/noparse]

 

 

Hope that is both what you were looking for and/or helps you.

[ricp]

[noparse]Damn Valve[/noparse]

aka

[noparse]Text[/noparse]

 

Technically that should be [noparse] [/noparse] rather than [noparse] [/noparse] both work but I think that is down to the way the regexp has been constructed.

 

Nice find of the [noparse][noparse][/noparse] tag though, never spotted that and I'll use it to amend my previous comment.

 

** minor edit, it seems that when parsed the output is always [noparse] [/noparse], so ultimately it seems to make no difference how you apply it so long as it's valid.

[ricp]

* bumpity bump *

 

3 months later this very simple fix has still not been implemented, despite it offering a considerable improvement to the user's experience.

[AlyssaFaden]

 

100% - it grinds my gears. been like this since forever. no pride.

[SylenThunder]

Really they just need to make the text white in those areas and it would be fine. It's a super easy fix too.