Greetings,
TinyPortal has a very nice article manager tool and TinyPortal is making the necessary steps to become responsive and mobile friendly. But what if you wanted to give your articles a little jazz?
Well I'm here to share with you a simple CSS code that will provide your articles a nice little box that is mobile friendly and responsive.
First, you need to put this in the index.css for the SMF theme you are using. I suggest putting it at the bottom of the CSS file so it won't be overridden by any of the other CSS declarations.
.boxout {
float: right;
width: 100%;
max-width: 350px;
margin: .4em 0 .4em 1em;
background: #e6ecef;
padding: 0.5em;
border-top: 6px solid #f2b250;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 1.4;
}
.boxout p {
line-height: 1.4;
}
.boxout p:last-child {
margin-bottom: 0;
}
Now save that file. Whenever you want to use it simply in html mode for you html article, do the following...
<div class="boxout default">
your stuff here
</div>
Attached is the end result of what the box looks like. Since it is all CSS base, you can alter its appearance however you desire.