A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides >
What is the item code for Gold Poke? I'm struggling to put it in my updated forum signature.
Avatar by me for my use only
Starter
Money
UFT
Type Race
Zap Plate
Plate
(
: 0)
卵より唯一絶対のもの生ず。
Sells for 
10,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Bitter food
MAXCareful nature
- 
22346
- 
979
- 
100
- 
1
22346
- 
979
- 
100
- 1
Price in about me
: 0 points this month!
Wokadee,
I believe you are looking for [item=gold]. ()
)Avatar is official Pokémon TCG artwork illustrated by TOKIYA.
QUOTE originally posted by Sakaki
Wokadee,
I believe you are looking for [item=gold]. ()
) Thank you 
i'm already back aha-
i've seen people make custom clickable icons for their about me and i wanted to do the same. i made some to use but i don't know how to apply them - so basically, how do i make things appear when the icons are clicked?
these are the lil icons i made, if anyone can give a little example i'd very much appreciate it (i'm a visual learner, rereading lines over and over is how i've learned bbcodes so far :p)
I'm also back lol! I'm at my desktop now, so I've got you some sizes as well:
The about's size is 310px wide, with a maximum height of 1000px.
Posts have a maximum width of 592px (600 before padding) on desktop and most tablets, but get more in the 300-500 range on small phones, or mobile devices with their zoom level increased. (400 seems typical, but it's hard to tell since I don't have as good dev tools for mobile)
About your buttons: If you want them to be the "tabs" of your tabbed interface, you would just set the image as the tab text, and then use CSS to change or remove the background/border of the tab, and position it wherever you want it. Let me know if you need help on positioning, but a basic layout with those images might look like:
Star tab
Heart tab
Circle tab
Pokeball tab
Code
[sc=tabbed_interface horizontal][
][ul][
][li][img]/upload/:J9t-/star.png[/img][/li][
][li][img]/upload/:J9t-/heart.png[/img][/li][
][li][img]/upload/:J9t-/circle.png[/img][/li][
][li][img]/upload/:J9t-/pokeball.png[/img][/li][
][/ul][
][sc=tab-active]Star tab[/sc][
][sc=tab]Heart tab[/sc][
][sc=tab]Circle tab[/sc][
][sc=tab]Pokeball tab[/sc][
][/sc]
[style]
/* the empty []s across line breaks above lets each
tab block be on its own line without creating weird
new line spacing in your layouts */
.tabbed_interface {
/* > ul is the container for the clickable tabs,
the > is to make sure it doesn't affect lists
inside the tab contents. > li is the individual
tabs. &.tab-active is the individual tab that's
currently active - only set things that actually
change when the tab is active. */
> ul {
background: transparent;
> li {
background: black;
border: 1px solid white;
flex-grow: unset; /*by default, these stretch*/
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
margin: 10px;
width: 19px;
height: 19px;
display: inline-block;
padding: 6px;
border-radius: 25px;
cursor: pointer; /*obviously clickable*/
&.tab-active {
background: white;
border: 1px solid black;
}
}
}
> .tab, > .tab-active {
/* unlike the menu tabs, the only the active
contents show, so you don't need separate code */
box-shadow: none;
background: black;
border: 1px white;
color: white;
padding: 15px;
border-radius: 8px;
a { color: white; }
}
}
[/style]
QUOTE originally posted by Mirzam
...
@rottingivy: If you want to get fancy with CSS, one of the best things you can do for yourself is learn how to inspect element with browser dev tools. You can use this to find the classes of various elements, see what CSS is already applied, and test new values in real time.
I found this guide after a very quick Google search, but I'm sure there's more info out there, and if you have any specific questions feel free to ask me :)
https://developer.chrome.com/docs/devtools/css/
so, I'm not entirely sure if this is a BBCode question or another type of code, but I'd really like to have images next to progress bars, for example, moving this diancie image to the left of this progress bar:
I made a mockup type thing to show what I mean more, not actually real, just what I'd like to do with code somehow.
does anyone know how I can achieve this?
I made a mockup type thing to show what I mean more, not actually real, just what I'd like to do with code somehow.
mockup
There's a lot of ways to do this tbh. Flex is, as the name might imply, one of the most flexible ways to do it, but float might be good here even if it's not always my favorite just for its simplicity. (you can see one of float's downsides here, in the way it overlaps my code box, I'm leaving that there on purpose)
Flex:
Float:
Code
Flex:
[sc=custom-progress-flex][img]https://pfq-static.com/img/pkmn/q/z/9.png[/img][progress=5/40]5/40[/progress][/sc]
Float:
[sc=custom-progress-float][img]https://pfq-static.com/img/pkmn/q/z/9.png[/img][progress=5/40]5/40[/progress][/sc]
[style]
.custom-progress-flex {
display: flex;
column-gap: 15px;
align-items: center;
.expbar {
margin: 0;
/* fill rest of line */
flex-grow: 1;
/* match default text height */
height: 12pt;
}
}
.custom-progress-float img {
float: left;
margin-right: 15px;
}
[/style]
Thank you so much! I appreciate the help :D
Cannot post: Please log in to post