News: When asking for support, it helps us and you, if you read the Posting Guidelines

Login  |  Register
* * *

Welcome !!!

Welcome, Guest. Please login or register.
Did you miss your activation email?
Please welcome Freelyyyy, our newest member.

 
 

TinyPortal on Twitter
Welcome, Guest. Please login or register.
Did you miss your activation email?
May 25, 2017, 04:08:37 PM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 181012
  • Total Topics: 20308
  • Online Today: 71
  • Online Ever: 383
  • (January 02, 2015, 05:58:49 AM)
Users Online
Users: 2
Guests: 35
Total: 37

Please read the Posting Guidelines


Author Topic: Boxes for Articles CSS Code  (Read 832 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.


Online lurkalot

  • Administrator
  • *
  • Posts: 3484
    • 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