What's new

Tutorial RpNation - BBCode+ Guide

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#76
With something like
Code:
[input class="csginput csgage" type=text maxlength=3][/input]
Are you creating an instance of the "csginput" class named "csgage"?
No, that's creating an instance of both "csginput" and "csgage".
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#78
I’m still confused. I don’t see any declarations of a class named “csgage” anywhere in that example. Does it not need the class to be defined?
There isn't really a concept of "defining" a class in CSS; it's not like a class from a language with OOP. A class is just a name. So you can define a style for it, and you can define what happens when a certain event associated with that class is triggered, but there's no previous step of defining the class itself. In this case, "csgage" is used solely as an identifier for the script.
 

AgWordSmith

A Freckled Encounter
Moderator
#79
@Lyro Within the class tag are we only limited to fonts such as Courier new and Helvetica? I tried to use a google font like the [font] tag allows, but it didn't' work, wanted to know if that was why?
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#80
@Lyro Within the class tag are we only limited to fonts such as Courier new and Helvetica? I tried to use a google font like the [font] tag allows, but it didn't' work, wanted to know if that was why?
Any font that the [font] can load will also work with the classes. You simply need to use the [font] tag somewhere in your code to actually load the font in the first place (doesn't matter if it's before or after the class), and it will work. This also applies to inline styles for divs.
 

AgWordSmith

A Freckled Encounter
Moderator
#81
Any font that the [font] can load will also work with the classes. You simply need to use the [font] tag somewhere in your code to actually load the font in the first place (doesn't matter if it's before or after the class), and it will work. This also applies to inline styles for divs.
Ohhh ok, Thank you!
 

Necessity4Fun

One more time, up and running!
#82
Hey @Lyro , been trying something I admit, complex, for a starter like myself but! Been trying to get the hover function to work, however I am confused about something...
Say I have a div with a bunch of things in it (height, width, positioning...), do I add all of these to the div itself right after the '=class' bit like I normally would, or do I add to the class itself?
I'm not trying to change size or anything here, just making a bg image show up in the div when I hover over it... How would I do something like that? : O

I know, a bit of a silly question, maybe, but seeing an example would probably help ^^'
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#83
Hey @Lyro , been trying something I admit, complex, for a starter like myself but! Been trying to get the hover function to work, however I am confused about something...
Say I have a div with a bunch of things in it (height, width, positioning...), do I add all of these to the div itself right after the '=class' bit like I normally would, or do I add to the class itself?
I'm not trying to change size or anything here, just making a bg image show up in the div when I hover over it... How would I do something like that? : O

I know, a bit of a silly question, maybe, but seeing an example would probably help ^^'
I'm a bit confused by your question. Are you talking about a div's inline style? Because you can't enable hover effects from there, you have to use a class style.

To do what you want to achieve, though, you need to define a class style for the "base" look of your div, then another class style for the changes to apply on hover. So something like this:

Hover over me



Code:
[div class=myClass]Hover over me[/div]
[nobr]
[class=myClass]
background-color: red;
height: 427px;
width: 500px;
[/class]

[class name=myClass state=hover]
background-image: url(https://vignette.wikia.nocookie.net/hollowknight/images/f/f4/Promo_03.png/revision/latest?cb=20170306225513);
background-size: contain;
[/class]
[/nobr]
 

Necessity4Fun

One more time, up and running!
#84
I'm a bit confused by your question. Are you talking about a div's inline style? Because you can't enable hover effects from there, you have to use a class style.

To do what you want to achieve, though, you need to define a class style for the "base" look of your div, then another class style for the changes to apply on hover. So something like this:

Hover over me



Code:
[div class=myClass]Hover over me[/div]
[nobr]
[class=myClass]
background-color: red;
height: 427px;
width: 500px;
[/class]

[class name=myClass state=hover]
background-image: url(https://vignette.wikia.nocookie.net/hollowknight/images/f/f4/Promo_03.png/revision/latest?cb=20170306225513);
background-size: contain;
[/class]
[/nobr]
Hahaha... I could have worded that better ^^'

It was more like I have this div that's a bunch of things:
Code:
[div=width: 280px; height: 490px; background-color: #baa989; border-top-left-radius: 13px; border-bottom-left-radius: 13px;][/div]
But I was confused whether that salad of functions went inside the class 'block' or if I could use it like that after doing the whole div=class bit
BUT! I think you answered my question anyway, so now I'm gonna try things while using your example as a guide >w<

Thank you! Will come back if I get stuck or confused again o/
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#85
Hahaha... I could have worded that better ^^'

It was more like I have this div that's a bunch of things:
Code:
[div=width: 280px; height: 490px; background-color: #baa989; border-top-left-radius: 13px; border-bottom-left-radius: 13px;][/div]
But I was confused whether that salad of functions went inside the class 'block' or if I could use it like that after doing the whole div=class bit
BUT! I think you answered my question anyway, so now I'm gonna try things while using your example as a guide >w<

Thank you! Will come back if I get stuck or confused again o/
Just remember that inline styles (e.g. [DIV=...]) overwrite class styles, so if you have an inline style applied hover won't work.
 

AgWordSmith

A Freckled Encounter
Moderator
#86
@Lyro Is it possible to toggle on click? Like I want this to switch back and forth between the colors when its clicked


Hello


This is the code so far:
Code:
[nobr]

[class=button]
Cursor:pointer;
background-color:grey;
border:2px Solid Black;
[/class]

[class=ButtonClick]
background-color:white;
border:2px Solid Black;
[/class]

[Script class=button on=click]
addClass ButtonClick
[/script]

[div class=button style="padding:2px;"]  [font=The Girl Next Door]Hello[/font][/div]
[/nobr]
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#87
@Lyro Is it possible to toggle on click? Like I want this to switch back and forth between the colors when its clicked


Hello


This is the code so far:
Code:
[nobr]

[class=button]
Cursor:pointer;
background-color:grey;
border:2px Solid Black;
[/class]

[class=ButtonClick]
background-color:white;
border:2px Solid Black;
[/class]

[Script class=button on=click]
addClass ButtonClick
[/script]

[div class=button style="padding:2px;"]  [font=The Girl Next Door]Hello[/font][/div]
[/nobr]
Here's a simple way to do it: set a variable that keeps track of whether the class was added or not, and toggle it between two values every time the button is clicked.

Hello

Code:
[nobr]

[class=button]
Cursor:pointer;
background-color:grey;
border:2px Solid Black;
[/class]

[class=ButtonClick]
background-color:white;
border:2px Solid Black;
[/class]

[Script class=button]
set addedClass 0
[/script]

[Script class=button on=click]
if (eq ${addedClass} 0) (addClass ButtonClick) (removeClass ButtonClick)
if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0)
[/script]

[div class=button style="padding:2px;"]  [font=The Girl Next Door]Hello[/font][/div]
[/nobr]
 

ewolf20

the aspiring roleplayer
#88
so i'm doing some code and i wanna ask how can you put the image on the left without breaking the code? and in addition, how to add a border around it? sorry for the noob question and do please show some visuals along with that.
 

Fyuri

積ん読
Administrator
Supporter
#89
so i'm doing some code and i wanna ask how can you put the image on the left without breaking the code? and in addition, how to add a border around it? sorry for the noob question and do please show some visuals along with that.
Can you post the code you've worked on thus far that you need help with?
 

ewolf20

the aspiring roleplayer
#90
Code:
[nobr]
[class name=puppy]
border-radius: 10px;
border-top-right-radius: 90px;
border-bottom-right-radius: 90px;
background-color: #01C5C4;
padding: 20px
[/class]
[class name=sugar]
border-radius: 10px;
border-top-right-radius: 90px;
border-bottom-right-radius: 90px;
background-color: #F1E189;
padding: 30px; overflow: hidden; padding:30px
[/class]
[class name=spice]
border-radius: 10px;
border-top-right-radius: 90px;
border-bottom-right-radius: 90px;
background-color: #F1E189;
overflow-y: scroll; padding:30px
[/class]
[class=image]
border: #FE547B solid 4px; width:236px; height:236px
[/class]
[/nobr]

[div class=puppy] 
[div class=sugar]
[div class=image]
[IMG]https://www.rpnation.com/media/tumblr_nhk9dwisge1sk1rjvo1_500-jpg.34703/full[/IMG]
[/div]
[div class=spice]
saassjlaslkaskl;asadkskldasdklsadlksaasdl;ads;asdklasdlasdads;asddkaskasdjdasjdsajasddsajhsdalkjdsadsahjdshfhwuwhudwhlwdaluiadwluhawdhuawdawjhkdakhadkjadsjdashjasdjkasdkadsklladjadslasdhdsaldaskjljsdalasdhlhlkjdaslkdjas
[center]?[/center]
saassjlaslkaskl;asadkskldasdklsadlksaasdl;ads;asdklasdlasdads;asddkaskasdjdasjdsajasddsajhsdalkjdsadsahjdshfhwuwhudwhlwdaluiadwluhawdhuawdawjhkdakhadkjadsjdashjasdjkasdkadsklladjadslasdhdsaldaskjljsdalasdhlhlkjdaslkdjas
[center]?[/center]
saassjlaslkaskl;asadkskldasdklsadlksaasdl;ads;asdklasdlasdads;asddkaskasdjdasjdsajasddsajhsdalkjdsadsahjdshfhwuwhudwhlwdaluiadwluhawdhuawdawjhkdakhadkjadsjdashjasdjkasdkadsklladjadslasdhdsaldaskjljsdalasdhlhlkjdaslkdjas
[/div]
[/div]
[/div]
 

Fyuri

積ん読
Administrator
Supporter
#91
@ewolf20
The simple solution; float the image. float:left;

edit: and you have a border around the image, it just isn't flush, is that the issue?
 

ewolf20

the aspiring roleplayer
#93
Code:
[nobr]

[class name=sugar]
border-radius: 70px;
background-color: #F1E189;
overflow: hidden; border: #01C5C4 solid 50px;margin:auto;width:460px
[/class]
[class=image]
border: #FE547B solid 4px; width:236px; height:236px;margin:auto;background-image:url("https://www.rpnation.com/media/tumblr_nhk9dwisge1sk1rjvo1_500-jpg.34703/full");
[/class]
[/nobr]


[div class=sugar]
[div class=image]
.
.
.
[/div]
[div=width: 350px; height: 180px; box-sizing: border-box; overflow: hidden; background-color: #F1E189; padding: 10px;margin:auto][div=border-top: #FE547B solid 4px;width:500px; margin:auto][/div][div=width: 100%; height: 100%; overflow-y: scroll; padding-right: 150px;margin:auto ]A scroll is usually divided up into pages, which are sometimes separate sheets of papyrus or parchment glued together at the edges, or may be marked divisions of a continuous roll of writing material. The scroll is usually unrolled so that one page is exposed at a time, for writing or reading, with the remaining pages rolled up to the left and right of the visible page. It is unrolled from side to side, and the text is written in lines from the top to the bottom of the page. Depending on the language, the letters may be written left to right, right to left, or alternating in direction (boustrophedon).[/div][/div]
[/div]
 

allure

angel eyes ♡
#99
im trying out the tabs function for the first time and copied and pasted directly from what was in the code box in the op post. when i previewed it, though, i was given a "Line 1: Unexpected extra parameter" message that won't go away even after i fiddled around with the tab. i've checked over the whole thing and can't find any issues, could you take a look?

Code:
[nobr][class=tabs] background-color: #8D2419; border-radius:5px; box-shadow: -1px -1px 5px #444; color: #fff; box-sizing: border-box; font-size: 18px; letter-spacing:2px; font-weight: bold; line-height: 1; margin: 20px auto; width: 160px; text-align: center;[/class]

[class=tab]box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 100%;[/class]

[class name=tab state=hover] background-color: #9F6725;[/class]

[script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} WOOOOW) (show tabsContentWOOOOW)[/script]

[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px"][font=Old Standard TT]WOOOOW[/font][/div][/div]

[div class="tabsContent tabsContentWOOOOW"]code content.[/div][/nobr]
 

Alteras

The Sleepy One
Moderator
Supporter
im trying out the tabs function for the first time and copied and pasted directly from what was in the code box in the op post. when i previewed it, though, i was given a "Line 1: Unexpected extra parameter" message that won't go away even after i fiddled around with the tab. i've checked over the whole thing and can't find any issues, could you take a look?

Code:
[nobr][class=tabs] background-color: #8D2419; border-radius:5px; box-shadow: -1px -1px 5px #444; color: #fff; box-sizing: border-box; font-size: 18px; letter-spacing:2px; font-weight: bold; line-height: 1; margin: 20px auto; width: 160px; text-align: center;[/class]

[class=tab]box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 100%;[/class]

[class name=tab state=hover] background-color: #9F6725;[/class]

[script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} WOOOOW) (show tabsContentWOOOOW)[/script]

[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px"][font=Old Standard TT]WOOOOW[/font][/div][/div]

[div class="tabsContent tabsContentWOOOOW"]code content.[/div][/nobr]
You can't make script inline, you have to separate them out across several lines.

Code:
[script class=tab on=click]
hide tabsContent 
set currentTab (getText) 
if (eq ${currentTab} WOOOOW) (show tabsContentWOOOOW)[/script]
 

Users Who Are Viewing This Thread (Users: 2, Guests: 1)

Top