👍 0

Posted 12/Apr/2020 14:55:58 (4 years ago)

Hi Katt! "I don't really know anything about coding" - I had a look at your code, and you already know a great deal! You're already using all three of html, css, and javascript, even using functions and event handlers. I can tell you're excited to learn because you're already doing great work, keep it up!!!

Now to your question, so in your code you used

html, to create elements on the page. like the headline, or a <div> that contains other elements.
css, to style the way elements look, with different backgrounds and colors
javascript, to react to user interaction. when a user clicks your tab, open the appropriate page and change the colours of the active tab.

On Pokefarm, you can use BBCode and CSS only. Instead of HTML, you have BBCode. With BBCode, you take a pre-built element like the hide box

Title

I'm a hide box.

or the tabbed interface.

One
Two
Three
Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat tempor felis vitae consequat. Donec at sapien sapien. Nulla lectus ipsum, ultricies id maximus eget, luctus id tellus.

Donec pellentesque ligula sit amet purus efficitur suscipit. Nunc nisi arcu, vulputate vel tortor et, volutpat malesuada lorem.

Etiam fermentum erat ac ultrices elementum. Ut at nibh justo. Vestibulum odio orci, sodales eu sapien et, consequat viverra risus.

Duis posuere sem enim, sit amet iaculis purus accumsan finibus. Proin ante arcu, ullamcorper a neque in, tempor ultricies metus. Donec at ipsum interdum, elementum mauris quis, efficitur dolor.

Then you use CSS to change the colours, the layout, and anything else that CSS allows. You cannot write custom Javascript for your posts or about mes.

So for your example, you would start with a tabbed_interface in BBCode. Then add [style][/style] tags to change the look. Pokefarm's own Javascript already takes care of the actions like 'when someone clicks "About Me", show the appropriate page. Here's an example:

One
Two
Three
Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat tempor felis vitae consequat. Donec at sapien sapien. Nulla lectus ipsum, ultricies id maximus eget, luctus id tellus.

Donec pellentesque ligula sit amet purus efficitur suscipit. Nunc nisi arcu, vulputate vel tortor et, volutpat malesuada lorem.

Etiam fermentum erat ac ultrices elementum. Ut at nibh justo. Vestibulum odio orci, sodales eu sapien et, consequat viverra risus.

Duis posuere sem enim, sit amet iaculis purus accumsan finibus. Proin ante arcu, ullamcorper a neque in, tempor ultricies metus. Donec at ipsum interdum, elementum mauris quis, efficitur dolor.

Avatar by Kaelwolfur. Sent from my PokéNav

Kosmos

👍 0

Posted 20/May/2020 04:14:05 (3 years ago)

Hello! I've been playing around with css lately and I've made a template with it for my journal. c: I wanted to change the text that has the tooltip to be underlined with a thick white line when I hover over it, so I tried adding a:hover { position: relative; border-bottom: 3px solid white; } but it doesn't want to show up. I'm not sure if it's because I changed the dotted line from the tooltip to not be visible when you're not hovering over it or if there's something else that I might have messed up. Any help would be greatly appreciated!

code

[style] .background{ background:pink; border: 0.25px solid white; padding: 3px; text-align: center; color: white; } .backgroundsmall{ background:white; border: 0.25px solid white; padding: 3px; width: 554px; height: 20px; margin: 0 auto; color: pink; text-align: center; font-size:20px; } .panel > h3 { text-align: center; } .sbs{display:flex;padding:5px;} .sbs>.panel{flex:1;margin-right:10px;margin-left:10px;margin-bottom:-10px;} .panel { background: pink; margin: auto; text-align: center; box-shadow:none; border: 0.25px solid white; border-radius: 0px; background-color: pink; &>h3 { border-bottom: 1.5px solid white; color: pink; background-color: white; border-radius: 0px; padding: 3px; &>div { color: white; background-color: solid pink; border: 0.5px solid white; border-radius: 2px; padding: 3px; } } } table{width:100%;border:none;} tr,td{border:none;padding:3px;text-align:center;font-size:14px;height:10px;} li{margin-bottom:10px;} .box { height: 60px; width: 80px; padding: 3px; border: 0.25px solid white; border-radius: 0px; background: pink; display: inline-block; text-align: center; color: white; font-size: 14px; } .fieldbox { background: pink; border: 2px solid white; margin: auto; padding: 10px; text-align: center; width: 275px; height: 205px; line-height: 30px; a:hover { position: relative; border-bottom: 3px solid white; } span.bbcode_tooltip { border-bottom: 0px solid white; } .tooltip_content { background-color: pink; height:205px; width: 275px; color: white; border: 2px solid white; border-radius: 0px; left: 4px; top: 251px; }} .sidebox{ background: pink; color: white; border: 2px solid white; margin: auto; padding: 10px; text-align: center; text-decoration: none; width: 275px; height: 205px; line-height: 30px; } [/style][font=courier new][ ][sc=background] [center][img]https://piskel-imgstore-b.appspot.com/img/d1454b8a-9758-11ea-8034-f3c324534d8d.gif[/img][/center] [sc=backgroundsmall][b]POKEMON CATALOG :: WIP[/b][/sc] This entire thing was just a hot mess [sc=fieldbox][ ][tip=info1][pkmn=shaymin][/tip][ ][tip=info2][pkmn=shaymin][/tip][ ][tip=info3][pkmn=shaymin][/tip][ ][tip=info4][pkmn=shaymin][/tip][ ][tip=info5][pkmn=shaymin][/tip][ ][tip=info6][pkmn=shaymin][/tip][ ][tip=info7][pkmn=shaymin][/tip][ ][tip=info8][pkmn=shaymin][/tip][ ][tip=info9][pkmn=shaymin][/tip][ ][tip=info10][pkmn=shaymin][/tip][ ][tip=info11][pkmn=shaymin][/tip][ ][tip=info12][pkmn=shaymin][/tip][ ][tip=info13][pkmn=shaymin][/tip][ ][tip=info14][pkmn=shaymin][/tip][ ][tip=info15][pkmn=shaymin][/tip][ ][tip=info16][pkmn=shaymin][/tip][ ][tip=info17][pkmn=shaymin][/tip][ ][tip=info18][pkmn=shaymin][/tip][ ][tip=info19][pkmn=shaymin][/tip][ ][tip=info20][pkmn=shaymin][/tip][ ][tip=info21][pkmn=shaymin][/tip][ ][tip=info22][pkmn=shaymin][/tip][ ][tip=info23][pkmn=shaymin][/tip][ ][tip=info24][pkmn=shaymin][/tip][ ][tip=info25][pkmn=shaymin][/tip][ ][tip=info26][pkmn=shaymin][/tip][ ][tip=info27][pkmn=shaymin][/tip][ ][tip=info28][pkmn=shaymin][/tip][ ][tip=info29][pkmn=shaymin][/tip][ ][tip=info30][pkmn=shaymin][/tip][ ][tip=info31][pkmn=shaymin][/tip][ ][tip=info32][pkmn=shaymin][/tip][ ][tip=info33][pkmn=shaymin][/tip][ ][tip=info34][pkmn=shaymin][/tip][ ][tip=info35][pkmn=shaymin][/tip][ ][tip=info36][pkmn=shaymin][/tip][ ][tip=info37][pkmn=shaymin][/tip][ ][tip=info38][pkmn=shaymin][/tip][ ][tip=info39][pkmn=shaymin][/tip][ ][tip=info40][pkmn=shaymin][/tip][ ][/sc] [sc=sidebox]Hover Over Mons For Info[/sc] [sc=backgroundsmall][/sc] [center][img]https://piskel-imgstore-b.appspot.com/img/d1454b8a-9758-11ea-8034-f3c324534d8d.gif[/img][/center] [/sc][/font]

what it looks like

x

KOSMOS

CREDIT

SHOP

ART SHOP

pkspsapphire

👍 0

Posted 07/Jun/2020 05:03:31 (3 years ago)

hi! i'm having a couple issues with the table borders that i can't quite figure out. i'm not sure how to have the tabbed containers and the tabs themselves hav a full border instead of it just extending above and below the boxes and leaving the sides blank. here is a screenshot of what im talking about. i'm just not sure what i'm doing wrong! i apologize if the answer is clear, i tend to have issues with comprehension and i jsut want to make sure i felt secure about everything before posting ^^;

here is the code:

[style].tabbed_interface > ul > li.tab-active{ color: #FFEEB3; background: #D01B3E; font-family:lucida console; text-align: center; transition: all 0.5s; border-radius: 2px; border-color: #2E2E45; box-shadow: none; } .tabbed_interface > ul > li{ color: #FFEEB3; background-color: none; background: #4D3C53; font-family:lucida console; text-align: center; padding: 4px 4px 4px 4px; border-color: #2E2E45; border-radius: 1px; box-shadow: none; } .tabbed_interface > div.tab-active{ background: #FFF8DB; color: #762C13; font-family:lucida console; border-radius: 2px; border-color: #4D3C53; box-shadow: none; font-size: 16px; text-align: center; margin: 2px; }[/style]

🪪
📋
🔗

sapphire/they/23

Chamo

Lv. 100 — +4,330,924

Likes:

Dry food

MAX

Quiet nature

Score: 2079

jrnl shop️ bait

KishanHaru

👍 1

Posted 07/Jun/2020 05:18:25 (3 years ago)

Tab 1
Tab 2
Tab 3

CODE

[style].tabbed_interface > ul > li.tab-active{ color: #FFEEB3; background: #D01B3E; font-family:lucida console; text-align: center; transition: all 0.5s; border-radius: 2px; border: 1px solid #2E2E45; box-shadow: none; } .tabbed_interface > ul > li{ color: #FFEEB3; background-color: none; background: #4D3C53; font-family:lucida console; text-align: center; padding: 4px 4px 4px 4px; border: 1px solid #2E2E45; border-radius: 1px; box-shadow: none; } .tabbed_interface > div.tab-active{ background: #FFF8DB; color: #762C13; font-family:lucida console; border-radius: 2px; border: 1px solid #4D3C53; box-shadow: none; font-size: 16px; text-align: center; margin: 2px; }[/style]

I changed the border-color to just border and added the type of border and its size. That should help. What issues do you seem to be having with the tables?

Hallo am tab

Hallo am tab too

♪ SCA ♪ 🌸 Wiki Help 🌸 Specials ♥ PM Me ♥ My Shoppe~ Current Hunt: Mudkip

B> Lunar Wings for 45 ZC ea.

pkspsapphire

👍 0

Posted 07/Jun/2020 05:23:31 (3 years ago)

oh the tables are fine thats just what i happened to have in that tab at the time! thank you immensely for the help, it worked perfectly!! ;0;;

ALKALi

👍 0

Posted 30/Aug/2020 21:28:02 (3 years ago)

Alright, so I'm having a bit of trouble with panels. It looks like by default, PFQ adds a slight glow/shadow around hide boxes (and other types of panels/boxes). How can I get rid of that shadow? I know I could just add a thick border around the panel to hide the shadow, but I'd rather not resort to that yet. For reference, a screenshot of what I'm seeing.

My code

[styleclass=background_main][styleclass=body_text] [display=A display box] Text in the [url=https://google.com]display[/url] box. Also accordions, hide boxes, etc. [/display] [/styleclass][/styleclass] [style] // for the background colour .background_main { background-color: #ed7a00; } .body_text { color: #ffe793; font-size: 14px; font-family: "trebuchet ms", "times new roman"; padding: 5%;} // for links a:link { text-decoration: none; color: #bf5c00; } a:visited { text-decoration: none; color: #d36000; } a:hover { text-decoration: none; letter-spacing: 1px; transition: all 0.6s; } // for boxes: display, hide, accordion, etc. .panel { border: none; &>h3 { border-bottom: none; background-color: #d36000; color: #9e4900; a { color: #9e4900; } } &>div { background-color: #ffe793; color: #d36000; padding-bottom: 1%; a:link { color: #ffad21; } a:visited { color: #d8911e;} } } [/style]

Formerly DuskAurora. Avatar by Kaenith (Tumblr). Permission. Originally posted here.

Shay

👍 0

Posted 30/Aug/2020 22:14:17 (3 years ago)
Edited 30/Aug/2020 22:18:17 (3 years ago)

Hi there, under the .panel section in your code, you can add box-shadow: none; to get rid of the drop shadow (glow) here's what it looks like:

code

[styleclass=background_main][styleclass=body_text] [display=A display box] Text in the [url=https://google.com]display[/url] box. Also accordions, hide boxes, etc. [/display] [/styleclass][/styleclass] [style] // for the background colour .background_main { background-color: #ed7a00; } .body_text { color: #ffe793; font-size: 14px; font-family: "trebuchet ms", "times new roman"; padding: 5%;} // for links a:link { text-decoration: none; color: #bf5c00; } a:visited { text-decoration: none; color: #d36000; } a:hover { text-decoration: none; letter-spacing: 1px; transition: all 0.6s; } // for boxes: display, hide, accordion, etc. .panel { box-shadow:none; border: none; &>h3 { border-bottom: none; background-color: #d36000; color: #9e4900; a { color: #9e4900; } } &>div { background-color: #ffe793; color: #d36000; padding-bottom: 1%; a:link { color: #ffad21; } a:visited { color: #d8911e;} } } [/style]

A display box

Text in the display box. Also accordions, hide boxes, etc.

journal / ♥ / free-to-use templates

Clow

👍 0

Posted 07/Sep/2020 18:04:03 (3 years ago)

Hey guys, need a little bit of coding expertise: Is it possible to change the colour of certain a-sections in an accordion? You can't add a styleclass around just the a-sections because it confuses the accordion, and I can't figure out how to apply an nth-child either. Assistance appreciated!

Example

I stay pink

I wanna be blue

I stay pink

code

[sc=basic][accordion] [a-section=I stay pink][/a-section] [a-section=I wanna be blue][/a-section] [a-section=I stay pink][/a-section][/accordion][/sc] [style] .basic{ //blue .panel{ &>h3 { background-color:#46D9E9; color: #0A1C46;} &>div { } } } .basic{ //pink .panel { &>h3 { background-color:#E795DA; color: #260B22;} &>div { } } } [/style]

I know the div part of the code is empty, I just left it there for now

Avatar by Yukirona

Rose Garden Art Shop

Custom Art to Suit Your Taste

Chibis, Reference Sheets, Complete Pieces Visit The Shop

Shay

👍 2

Posted 07/Sep/2020 19:03:14 (3 years ago)
Edited 07/Sep/2020 19:05:33 (3 years ago)

Hi there Clow! So, I looked at your post, and I saw that I actually wasn't too sure how to implement that element myself, so I took to the task of figuring it out for you. I may be wrong, and there may be a better way of doing it, but this worked and so I will share what I've found with you. So, the nth-child element did not work, but I found that nth-of-type element did, in this case

code and example

[style]
.panel { 

    &>h3 {
        background-color:#46D9E9;
        color: #0A1C46; }
    &>div {
        background:black;
        color:white; }
    
        &>h3:nth-of-type(odd) {
            background-color:#E795DA;
            color: #260B22;}
        &>div:nth-of-type(odd) {
            background:black;
            color:white;}
}[/style]

[accordion]
    [a-section=pink]text[/a-section]
    [a-section=blue]text[/a-section]
    [a-section=pink]text[/a-section]
    [a-section=blue]text[/a-section]
[/accordion]

this code will give you this:

pink

text

blue

text

pink

text

blue

text

the code above states that every odd numbered a-section will follow the parameters that you list under the nth-of-type element, and the others (the evens, in this case) will follow the original parameters. you can use whatever number you want in the parentheses. You can find a more in-depth explanation of that [here], since I'm not sure if you just wanted every other a-section to display a different color, or if it was just a specific one

I hope this helps a bit. Hopefully it works for you, I tried my best :)

Clow

👍 0

Posted 07/Sep/2020 19:05:07 (3 years ago)

Awesome, thank you! Been too long since I did my coding classes, appreciated

Loading...

Styleclass and You: An Introduction

Title

code

what it looks like

here is the code:

sapphire/they/23

Tournament Token (Ruby)

credits

CODE

My code

code

A display box

Example

I stay pink

I wanna be blue

I stay pink

code

Rose Garden Art Shop

Custom Art to Suit Your Taste

code and example

pink

blue

pink

blue