Tabs and coding

Status
Not open for further replies.

Apollyon

Previously Kross
Original poster
FOLKLORE MEMBER
Invitation Status
Posting Speed
  1. Multiple posts per day
  2. 1-3 posts per day
  3. One post per day
  4. 1-3 posts per week
Online Availability
9 A.M to 12 P.M - 6 P.M to 1 A.M
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Prestige
  5. Adaptable
Preferred Character Gender
  1. Male
  2. Primarily Prefer Male
Genres
Fantasy, Scifi, Modern, Magical, Horror, Romance,
Ok, so, I am not very good at coding. Often times, for some reason, it tends to be redundant and even when I go back and eliminate the redundancies, they always seem to come back. Recently, I had a player in a role-play I was attempting to get started, and still am, create the OOC for me. And she did a pretty good job. However, she and I had disagreements, and I asked her to leave. Now I have to make a new OOC because I can't use her stuff, she made that abundantly clear when she left.

So I have some questions. I had her set up a tab system, gave her the general layout of how I wanted it to look and the text.

904606c6b86fd541a9f785729336b9ad.jpg


Okay, so I've decided to make who made the original OOC anonymous to be courteous. Now, my question is two-fold; how do I make the tab windows colored, and how do I add specific fonts to them? I don't know if EVERYONE sees that font type when they open that tab--and I realize if it is a specialty font then not everyone will see it because not everyone will have it. The browser will choose to show fonts only their computer has and from the known fonts that the site uses. The font is more a curiosity. The background of the tab, however, I would really like to know how that is done.​
 
Are we speaking of the tab content or the tabs themselves? That red background is pretty simple to do with divboxes.

Code:
[div=background:#aa0000; color:#ccc; border:3px solid #ccc; padding:5px;]TEXT[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed vehicula erat. Suspendisse eros urna, tempus at vestibulum vitae, tempus vel diam. In sit amet ante quis justo dictum rhoncus et sit amet felis. Pellentesque et metus convallis, ornare ligula non, mollis elit. Etiam semper gravida tincidunt. Sed risus orci, accumsan in ultrices at, egestas eget purus. Vestibulum vehicula sollicitudin nunc, sed vulputate enim cursus quis. Morbi iaculis leo nec ligula pulvinar rutrum. Maecenas eget augue ac tellus scelerisque sagittis at vitae turpis. Nullam ac leo eget sem convallis lobortis. Donec pulvinar dolor nunc, at tempor felis varius nec. Praesent ac metus ut ipsum mattis scelerisque molestie sit amet eros.

Maecenas mattis orci eu ornare convallis. Nunc condimentum, risus ac faucibus aliquet, purus justo commodo est, nec semper quam leo a nisl. Suspendisse potenti. Donec id hendrerit orci. Aenean commodo metus id nisi condimentum aliquet. Sed sodales ante scelerisque nisi blandit, id consequat tellus gravida. Morbi dictum dolor non sapien semper, a semper mi fermentum. Maecenas ullamcorper sapien non sapien porta, eget tincidunt nibh interdum. Morbi fermentum sed lectus nec dictum. Praesent eget lorem id nibh finibus faucibus. Nullam sagittis ipsum et dolor blandit accumsan. Aenean ipsum libero, aliquam sed congue eu, dignissim nec libero. Donec sodales sem ut nisl cursus tristique.


This was a somewhat quick example to illustrate it, but this is the gist of div box formatting.

You can do some pretty fancy stuff using divs, too;

Code:
[div=background:#AA0000; color:#ccc; border:2px solid #760000; border-radius:10px; padding:10px;]TEXT[/div]

gives you this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed vehicula erat. Suspendisse eros urna, tempus at vestibulum vitae, tempus vel diam. In sit amet ante quis justo dictum rhoncus et sit amet felis. Pellentesque et metus convallis, ornare ligula non, mollis elit. Etiam semper gravida tincidunt. Sed risus orci, accumsan in ultrices at, egestas eget purus. Vestibulum vehicula sollicitudin nunc, sed vulputate enim cursus quis. Morbi iaculis leo nec ligula pulvinar rutrum. Maecenas eget augue ac tellus scelerisque sagittis at vitae turpis. Nullam ac leo eget sem convallis lobortis. Donec pulvinar dolor nunc, at tempor felis varius nec. Praesent ac metus ut ipsum mattis scelerisque molestie sit amet eros.

Maecenas mattis orci eu ornare convallis. Nunc condimentum, risus ac faucibus aliquet, purus justo commodo est, nec semper quam leo a nisl. Suspendisse potenti. Donec id hendrerit orci. Aenean commodo metus id nisi condimentum aliquet. Sed sodales ante scelerisque nisi blandit, id consequat tellus gravida. Morbi dictum dolor non sapien semper, a semper mi fermentum. Maecenas ullamcorper sapien non sapien porta, eget tincidunt nibh interdum. Morbi fermentum sed lectus nec dictum. Praesent eget lorem id nibh finibus faucibus. Nullam sagittis ipsum et dolor blandit accumsan. Aenean ipsum libero, aliquam sed congue eu, dignissim nec libero. Donec sodales sem ut nisl cursus tristique.
 
Last edited by a moderator:
The Tab content boxes, yes. The tabs themselves are either black or gray, depending on rather or not they are selected.

So, that would work for when someone would turn to that tab, it would be red or, whatever color I decided to make it?
 
The Tab content boxes, yes. The tabs themselves are either black or gray, depending on rather or not they are selected.

So, that would work for when someone would turn to that tab, it would be red or, whatever color I decided to make it?
Yep!

As long as there's a divbox inside that tab with whatever CSS formatting you stick in the opening tag, it should always render the box inside the tab.
 
As far as I know you can edit stabs clicky boxes but not actual tabs. Now for fonts, (I'm not sure about stabs here) there's a way to change the "clicky box" font - easiest way I found is to wrap the font code you want the tab-titles to be around the entire tab code and then within the content of the tab, if you'd like that to be a different text you can wrap font codes around that to change it.

for example:
Code:
[font=Arial Black][tabs][tab=Title 1]Praesent nec venenatis nibh. Donec dictum lorem dui, id molestie erat tempor eget. Suspendisse rutrum fermentum nisl, sed rhoncus turpis mattis malesuada. [/tab][tab=Title 2][font=georgia]Praesent nec venenatis nibh. Donec dictum lorem dui, id molestie erat tempor eget. Suspendisse rutrum fermentum nisl, sed rhoncus turpis mattis malesuada. [/font][/tab][/tabs][/font]


  • Praesent nec venenatis nibh. Donec dictum lorem dui, id molestie erat tempor eget. Suspendisse rutrum fermentum nisl, sed rhoncus turpis mattis malesuada.
  • Praesent nec venenatis nibh. Donec dictum lorem dui, id molestie erat tempor eget. Suspendisse rutrum fermentum nisl, sed rhoncus turpis mattis malesuada.
 
@Nebulon Ranger @rissa

Thank you both. Though, honestly, being the amateur I am at coding--this seems more complicated than I imagined. x..x
 
  • Like
Reactions: Nebulon Ranger
~Here to save the day. As the official content creator of Iwakuroleplay, I can recreate your OOC with as many tabs and div boxes that you need. Just let me know if you want my help. ^.^
@Twilight Dream
 
  • Bucket of Rainbows
Reactions: junebug
Status
Not open for further replies.