HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Bonk plugin - Responsive image display
humantex
New
I've added this into a 3.3 version of Vanilla, and it works out of the box.
There's one aspect that may not display well if users are visiting the site with mobile devices when using the default 'Keystone' theme, and possibly other mobile-ready themes. The 404 images selected to display won't be responsive by default.
I reworked both the page and the CSS to be mobile friendly. For others who may want to modify their own, here's the code I used for both files.
The reworked 'bonk.php':
<?php if(!defined('APPLICATION')) die();
$this->Head->Title('404-Error');
$this->AddCssFile('bonk.css', 'plugins/Bonk');?>
<body>
<div class="Menu">
<div></div>
<div id="Content">
<div class="div-404 Center"> <!-- new class added to set div up for responsive image content-->
<h1>No matches found</h1>
<p><img src="/plugins/Bonk/design/images/error2-404.jpg"></p> <!-- edit for path and 404 image name -->
<p><h16>The page you are looking for was not found. Please Check that you entered the correct url.</h16></p>
</div>
</div>
<div id="Foot">
</body>
</html>
And, the reworked 'bonk.css':
#Body {
margin: 0 auto;
color: white;
background: transparent !important;
width: 100%;
}
#Content {
width: 98% !important;
margin: 0 auto;
float: none;
}
#Panel{
display: none !important;
}
.div-404 {
/* added to transform div for responsive sizing*/
width: 100%;
padding: 30px;
}
.div-404 img {
/* added to make the image display as responsive */
width: 50%;
margin: 30px;
max-width: 300px; /* optional */
}
#Foot {
background:none transparent !important;
}
h16{
font-size: 1rem;
font-weight:bold;
color:#999;
text-shadow:0 1px 0 #fff;
}
1
Comments
It looks like Markdown didn't take for the code blocks... or did I use something that Vanilla doesn't convert?
Though clearly being code oriented, this forum uses the current "Rich editor" plugin which is a "medium style" editor, which means it might be suited for bloggers or who ever.
If you mark a paragraph you can format it as code. I did that for you.
Thanks for the assist @R_J ... I tried highlighting the entire block and got no tooltip like I did for a single line, so was stumped and tried using the triple-tilde, inserted in-line. Is there an option to switch editors and select 'advanced' instead of the default?
Dashboard > settings > posting > post format
( and mobile format)
Thanks @Kaspar ... but the question referred to posting within the community forum here. I found no editor choices to select by editing my profile.
You can mark blocks, also via mobile.
For mobile it is at the bottom of the ediror field.
For desktop mode it is to the left
There is no way to choose your own editor. That makes sense because it would make quoting a night mare. Furthermore different editors might have different features which would lead to confusion. So the editor chosen by the forum owner is the editor every member must use.
Thanks @Kaspar and @R_J . Vanilla is new for me, and I'm just getting used to it's feature set; as both a forum user here, and as an admin/coder. I've sorted out the formatting with a little experimentation.