HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media


Welcome to TinyPortal. Please login or sign up.

April 20, 2024, 10:55:47 PM

Login with username, password and session length
  • Total Members: 3,885
  • Latest: Growner
  • Total Posts: 195,165
  • Total Topics: 21,219
  • Online today: 174
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 1
  • Guests: 59
  • Total: 60
  • tino

Boxes for Articles CSS Code

Started by mythus, March 06, 2017, 11:43:30 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.



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

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.


Nice little feature, thanks for sharing. ;)