• 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.

Help learning bbcode (and struggling so pls help)

cadence

in a quiet garden
Roleplay Availability
Roleplay Type(s)
[class=background] background-color:#D3FAC7; width:50%; height:300px; cursor:url(http://cur.cursors-4u.net/nature/images10/nat990.png),auto; margin:auto; border-top:3px #FFB7C3 solid; border-bottom:3px #FFB7C3 solid; padding:5px; [/class] [class=image] background-image:url(https://jlfarchitects.com/wp-content/uploads/2015/03/img-placeholder.jpg); background-size:contain; width:40%; height:inherit; float:left; border-right:#FFB7C3 3px solid; [/class] [class=text] width:auto; height:95%; overflow:auto; overflow-y:scroll; padding-right:15px; padding-left:5px; text-align:justify; font-size:15px; color:#FFB7C3; [/class] [div class=background][div class=image] [/div] [div class=text]Hey, it's me, your friendly neighborhood alien. My name is actually Peyton and I'm just here trying to get into BBCode because I've pushed it off for long enough. I don't really have a clue what I'm doing, so if you have any tips or can link me to some tutorials, let me know! This thread is mostly going to be a place for me to post stuff I'm working on and trying to learn and a place for you friendly people to give me some advice, haha.

The only thing special about this little code is it's cute little cursor, but that's about it! I would really like to get the hang of tabs and hovering especially, so please help me if you can!! :')

Objectives:
- Learn Tabs
- Learn Hovering
- Learn Hidden Scrollbars
[/div][/div]
 
I can help with hovering.

What you do is define your div element and use the transition property in conjunction with state=hover to define what happens when you hover over the element (e.g. change size, change color, change position, change opacity).

So here, I have a really crappy div box with a simple expanding transition when you hover over it (click on mobile). When you hover, it expands in width from 50px to 250px in three seconds.

[class name="simple_hover_transition"] width: 50px; height: 50px; background: black; color: white; -webkit-transition: width 3s; transition: width 3s; [/class] [class name="simple_hover_transition" state=hover] width: 250px; [/class] [div class="simple_hover_transition"][/div]

Here's the code:
Code:
[nobr]
[class name="simple_hover_transition"]
     width: 50px;
     height: 50px;
     background: black;
     color: white;
     -webkit-transition: width 3s;
     transition: width 3s;
[/class]

[class name="simple_hover_transition" state=hover]
     width: 250px;
[/class]

[div class="simple_hover_transition"][/div]
[/nobr]

As you can see, you have to specify the values of the div element twice: Once in the state when it's not hovered over, then the new values when the div element is hovered over.

More on transitions
 

Users who are viewing this thread

Back
Top