News: Welcome to the TinyPortal Support site.

Login  |  Register
* *
TinyPortal on Twitter
Welcome, Guest. Please login or register.
Did you miss your activation email?
August 20, 2017, 11:17:04 AM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 181382
  • Total Topics: 20345
  • Online Today: 94
  • Online Ever: 383
  • (January 02, 2015, 05:58:49 AM)
Users Online
Users: 1
Guests: 77
Total: 78

Skinz





Author Topic: Boxes for Articles CSS Code  (Read 1121 times)

0 Members and 1 Guest are viewing this topic.

Offline mythus

  • Jr. Member
  • **
  • Posts: 17
Boxes for Articles CSS Code
« on: March 06, 2017, 04:43:30 PM »
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.

Code: [Select]
.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...

Code: [Select]
<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.


Offline lurkalot

  • Administrator
  • *
  • Posts: 3645
    • Camera Craniums
Re: Boxes for Articles CSS Code
« Reply #1 on: May 07, 2017, 04:39:40 AM »
Nice little feature, thanks for sharing. ;)
Mick aka lurkalot.  Running TP1.2 and TP1.2R

Camera Craniums Running SMF 2.0.13 / Tinyportal 1.2
Guitarist Guild Running SMF 2.0.13 / Tinyportal 1.2R Beta
The Garden Machinery Forum Running SMF 2.0.13 / Tinyportal 1.2R Beta