TinyPortal

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.

Nice little feature, thanks for sharing. ;)