Lyro
Errant Chronicler
No, that's creating an instance of both "csginput" and "csgage".
-
When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!
Remember to credit artists when using work not your own.
Tutorial RpNation - BBCode+ Guide
- Thread starter Lyro
- Start date
- Status
Lexielai
Cal Bear
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?
Lyro
Errant Chronicler
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
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
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
Ohhh ok, Thank you!
Necessity4Fun
I'll keep trying, even if I'm not good enough...
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
, 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
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.Hey
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 ^^'
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:
[div class=myClass]Hover over me[/div]
[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]
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
I'll keep trying, even if I'm not good enough...
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
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
Lyro
Is it possible to toggle on click? Like I want this to switch back and forth between the colors when its clicked[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;"] Hello[/div]
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
[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;"] Hello[/div]
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.
[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;"] Hello[/div]
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
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.
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
Can you post the code you've worked on thus far that you need help with?
ewolf20
the aspiring roleplayer
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]
ewolf20
the aspiring roleplayer
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]ewolf20
the aspiring roleplayer
i do
Lexielai
Cal Bear
Is it possible to set a div box as a link to another page?
Lyro
Errant Chronicler
Alteras
The Sleepy Prisoner
If you surround the div with the [url=][/url] tag, then it'll work. As for making it an anchor like in HTML, no.
edit: lol, Lyro responded too fast.
allure
angel eyes ♡
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 Prisoner
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]- Status
