Tutorial } newclass codes [advanced tables]

new

« Prev
1
Next »

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

Tutorial } newclass codes [advanced tables] Aug 9, 2014 7:15:38 GMT -5

Quote

Post by анзие (Anz) on Aug 9, 2014 7:15:38 GMT -5

This was a thing before it was a thing and then it became a thing on this site and I wanted to do the thing so I learned the thing and now I'm teaching you the thing so if you think I'm not doing the thing right I'm probably not.

Let's face it. I'm still new at this.

Either way, a while ago a few people asked me how I made the hover tables without the presto codes. Since my tabling success rate has recently jumped to over half successful, I can probably teach anyone interested a few things about tables.

For those of you wondering what sort of tables I'm talking about, I'm talking about this:-

[newclass=.KaiaBTable]width:350px;height:500px;position:relative; overflow:hidden;[/newclass][newclass=".KaiaBTable .KaiaBSlider]position:absolute; left:0px; top: 0px; bottom: 0px; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s;[/newclass][newclass=.KaiaBTable:hover .KaiaBSlider]left:-350px;-webkit-transition:0.6s all ease-in-out; -moz-transition:0.6s all ease-in-out; -o-transition: all ease-in-out;[/newclass][newclass=.KaiaBScrolly]background:none;[/newclass][newclass=.KaiaBScrolly ::-webkit-scrollbar-thumb]border-radius: 5px; background-color:transparent!important;[/newclass][newclass=.KaiaBScrolly ::-webkit-scrollbar]width: 1px;[/newclass][newclass=.KaiaBScrolly ::-webkit-scrollbar-track] width:1px; background-color: #D9D7CA;border-radius: 5px;[/newclass][googlefont="Mr De Haviland:400"]

[attr="class","KaiaBTable"]

i need a little sympathy

[attr="class","KaiaBScrolly"]

Lorem ipsum dolor sit amet, duo graece offendit no. Ullum persius deserunt quo id. Sit et fabulas commune. Omnis repudiare moderatius pro in, ei ius erant legendos consectetuer. Dico erat eirmod no mel. Vivendum menandri ex eos, cu his nemore fuisset lucilius, quo et admodum maiestatis.

Nec eu modo autem nulla. Has veniam altera noster at. Ullum adipisci dissentiet ea sea, nibh soluta principes at sit. Id suas impedit detracto sed, vel sint prompta partiendo ut. An per soluta eirmod aliquando, te eum quidam definiebas. Platonem patrioque conclusionemque per ad, et qui liber noluisse, pro illud nulla primis an.

Sea solet integre te, vix congue noster alienum eu. Eos ea quando percipit, natum fastidii euripidis no eos. Dicant nominavi efficiantur nam an, ad ferri vivendum scripserit pri, alia meliore vel ad. Usu no populo alienum. Audiam sensibus usu ad. Posidonium sadipscing vix eu, te usu saepe veritus prodesset.

Te utamur imperdiet cum, vix debet numquam lobortis cu. Soleat aliquam prodesset et mea, illud audiam facilisis ea pri. Quot labitur dolores eos ex. Hendrerit contentiones no pri, doming ancillae an vis, lucilius insolens principes ea vel. Mel albucius menandri adipiscing at, vis eu animal democritum, dictas denique mel eu.

Ut enim saepe sit, vix aliquid omittam senserit ne, tempor atomorum sensibus vim cu. Petentium consetetur vel ne. Ne est veniam utroque qualisque, vis ea laoreet intellegebat voluptatibus, nec an ferri definiebas definitionem. An ignota perfecto torquatos est, vim at velit intellegebat. Usu facer pertinacia ullamcorper in.

to sore my insecurities

[attr="class","KaiaBSlider"]

Ivoire Kaia Blackmore

my conscience is as heavy as my ego

Or at least, something like that. Which a lot of you have asked me about...

Of course, if you've come here to learn I'll assume you're already aware on how to make simple tables. If you're not too sure still, I'd suggest taking a look at Zoe's v5 coding tutorial or my own tutorial on how to start out.

I'm planning to do this on a lesson-by-lesson basis. Feel free to try creating your own style of table and linking it to me - try not to clutter this thread up, no matter how tempting it is to show off your fancy new scrollbar or amazing style (trust me, I think we all take a peek into the v5 template thread to cry in awe of what other people make - I do that a lot). Keep it neat and clean so others can read through this with ease, as well.

KEEP IN MIND THAT NONE OF THESE CODES WORK ON YOUR MOBILE.
They will end up looking like a whole bunch of codes with a text area and maybe another picture. The mobile doesn't support newclass codes at all - so I'd suggest for threads that a lot of people are going to want to track on their mobile (ie: Games threads) you stick with the normal codes.

That's all. If I stop making sense anywhere, send me a PM and I'll talk you through whatever you need.

Contents
google your fonts
scrollbars

Last Edit: Jan 7, 2015 15:23:32 GMT -5 by анзие (Anz)

✨ made this. she is my spirit animal.

basic table guide

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

Tutorial } newclass codes [advanced tables] Aug 9, 2014 7:17:51 GMT -5

Quote

Post by анзие (Anz) on Aug 9, 2014 7:17:51 GMT -5

Google Your Fonts

Rather than leaving you with just a little ramble (above), how about I teach you about googlefonts first? This is a quick little thing you can do to not have to invoke the powers of Photoshop to make your font all fancy. I've spoken about this with Ghosty in one of the question threads, as well as, I think, a couple of other people, but just in case none of you care to find the other thread...

The code I use to make fonts usable in your post is

[*googlefont="font name:number that is usually 400"]

Note that this does not immediately change the font you want changed. This only gives this font as an option, much like how Times New Roman, Arial, Comic Sans MS and etc are all available on a regular basis. You have to use the usual code to change your font.

[*googlefont="Montserrat:400"][font face="Montserrat"]this font is called Montserrat, and it is only available on Google. I don't know if it's downloadable for you to use in GIMP or Photoshop - you're welcome to try because I've never done so.[/font]

(No asterisk, I just want you to see what it looks like)

That code will give you:

[googlefont="Montserrat:400"]this font is called Montserrat, and it is only available on Google. I don't know if it's downloadable for you to use in GIMP or Photoshop - you're welcome to try because I've never done so.

Some notes on googlefonts:-
Googlefonts do not show up on preview. I have to emphasize this because if you're anything like me, you check your preview before you post to make sure the table looks alright. Don't be worried when the code shows up somewhere on your table (depending on where you put it, of course) and the font you tried changing didn't change. It'll work on the actual post.
Googlefonts also do not work on PM - though if you try using them on your messages I'd consider you extremely fancy.
I don't use more than one type of googlefont in my posts, for the simple fact that sometimes they don't load out for me and I get disappointed. However, you can use more than one. Simply separate the font type with a semi-colon ( when you're typing out the code.

For those of you who have trouble imagining what I'm talking about:

[*googlefont="font name:number;font name:number;font name:number;"]

That's all for now.

next lesson: scrollbars

Last Edit: Aug 9, 2014 7:21:38 GMT -5 by анзие (Anz)

✨ made this. she is my spirit animal.

basic table guide

анзие (Anz)
Retired Staff

1,547 POSTS
last seen Jun 14, 2015 16:34:46 GMT -5

probably away

Tutorial } newclass codes [advanced tables] Jan 7, 2015 15:22:18 GMT -5

Quote

Post by анзие (Anz) on Jan 7, 2015 15:22:18 GMT -5

Scrollbars

>>For the purposes of this tutorial, as Proboards does not show newclass codes in [*code][/*code], I will place an asterisk within the codes so you are able to see. Note that the asterisk is NOT required for the codes to be effective.

Before I start talking about scrollbars, if you know CSS or basic HTML, then you will understand the contents of these codes better.

I'm not sure if I've mentioned this before, but as I sought to learn the newclass codes, I had to do further research myself (my coding knowledge prior was limited to web-creation, and basic web-creation at that) and hence may not necessarily understand why certain codes exist or work the way they do. I'll do my best to answer you, of course, if you want to know - but keep in mind that I could be wrong. I myself don't necessarily have knowledge of the codes, though I have an idea of where to put them and how to write them. Most of this comes from practice - so if you, like me, are lacking in CSS/HTML knowledge, then welcome, welcome!

Keep in mind that these codes are not to be written in div elements. They are separate identity codes that you can name after anything, written in square brackets in this style: newclass=.nameofyourcode /newclass. I will later explain how they are used to affect your tables.
Do remember these two specifically:
::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
They're important to this section.

I'm sure you've seen these around, especially if you're versed in tabling.

background
border
background-color
width
border-radius
opacity

Pretty simple stuff, right? These codes also exist for div and table elements, and are pretty easy to remember (if you didn't know them before!).

The only difference is how these codes are used.

This specific scrollbar requires three different newclass identities (usually seen on CSS as <div id="ID NAME">) to define ONE element of your table - meaning the scrollbar.

>> For the purposes of this tutorial, the identity of this scrollbar is "TuteScroll". Keep in mind that the identity - capitalization and all - HAS to be exactly the same as you first write it for ALL your codes to define ONE element of the table.

Identity #1

[*newclass=.TuteScroll][*/newclass]

That is your first - and main - identity for this scrollbar. Now what do you need in it? This identity has nothing to do with the scrollbar itself - it only defines the area that the scrollbar exists for - in most cases, your text area. Hence, you want your text area to be visible.

So what do you do?

[*newclass=.TuteScroll]background:none;[*/newclass]

You make your background nonexistent, of course.

That's the end of your first identity.

Identity #2

Remember how I told you to keep in mind those two strange :: codes - which are otherwise known as pseudo-elements. These elements allow code authors to access to this otherwise inaccessible information (x).

The first one is used in this identity.

::-webkit-scrollbar

which gives you the newclass code of

[*newclass=.TuteScroll ::-webkit-scrollbar][*/newclass]

As a pseudo-element, it exists with the identity because - I believe - it defines the identity. It's practically telling the identity what it's meant to be doing, or what it's meant to be used for.

So what can you do with this one? You can adjust the width, the opacity. This one identity encompasses the ENTIRE scrollbar - not specific parts of it. So if you don't want a very large scrollbar, use this.

[*newclass=.TuteScroll ::-webkit-scrollbar]width:1px;[*/newclass]

or, if you want a larger one, use this:

[*newclass=.TuteScroll ::-webkit-scrollbar]width:10px;[*/newclass]

What if you want it to be invisible?

[*newclass=.TuteScroll ::-webkit-scrollbar]opacity:0;[*/newclass]

That's about it.

Identity #3

::-webkit-scrollbar-thumb

This pseudo-element defines the background of the scrollbar. You know the little thing that runs up and down when you scroll? This element does NOT define that part.

[*newclass=.TuteScroll ::-webkit-scrollbar-thumb][*/newclass]

You can define this however you want, really. Make it transparent! Give it a pretty neon color! Or a pastel background! Or maybe you want an image - go for it! Make it a rounded edge, or leave it white - it's completely up to you.

I will give you an example here:

[*newclass=.TuteScroll ::-webkit-scrollbar-thumb]width:1px; background-color:#fff; border-radius:2px;[*/newclass]

Keep in mind that this should have the same width as ::-webkit-scrollbar code from before.

Identity #4

::-webkit-scrollbar-track

Now, this one will adjust that little rectangle that runs up and down the scrollbar. It works exactly the same as the scrollbar-thumb - I won't repeat myself, so if you need a further explanation send me a message.