The PokéCommunity Forums

The PokéCommunity Forums (https://www.pokecommunity.com/index.php)
-   Internet & Technology (https://www.pokecommunity.com/forumdisplay.php?f=57)
-   -   CSS Help & Resources (https://www.pokecommunity.com/showthread.php?t=200899)

Hiatus July 11th, 2014 3:00 PM

Quote:

Originally Posted by Poki (Post 8343849)
Logged in on Firefox, and it's still the same. I even tried w/moz only, but neither shows up. There could be something wrong with my browser, I dunno.

You should try adding "border-radius" element alongside (without either moz or webkit). Hopefully, that should do the trick!

Oryx July 11th, 2014 3:02 PM

Quote:

Originally Posted by Poki (Post 8343849)
Logged in on Firefox, and it's still the same. I even tried w/moz only, but neither shows up. There could be something wrong with my browser, I dunno.

Could you post the code for your sig to look at?

Poki July 11th, 2014 3:31 PM

Quote:

Originally Posted by Endless (Post 8343859)
You should try adding "border-radius" element alongside (without either moz or webkit). Hopefully, that should do the trick!

It worked, thank you!

Quote:

Originally Posted by Oryx (Post 8343861)
Could you post the code for your sig to look at?

Endless' method did the trick, but thank you for the suggestion.

Samus Aran July 15th, 2014 10:16 PM

Can someone help me with why the text is on the picture and not to the side of it on the right?


samus

Hiatus July 16th, 2014 2:12 PM

Quote:

Originally Posted by Samus Aran (Post 8352314)
Can someone help me with why the text is on the picture and not to the side of it on the right?


samus

It's because you've placed your text within the picture box; try placing it outside. Hopefully, this should help!

Spoiler:

samus
filler

Elements1 July 27th, 2014 8:19 PM

The banners upgrades with the animations is that Javascript animation or CSS animation? Is its the first, are we now allowed to code javascript into our threads?

Oryx July 27th, 2014 8:29 PM

Quote:

Originally Posted by Elements1 (Post 8372627)
The banners upgrades with the animations is that Javascript animation or CSS animation? Is its the first, are we now allowed to code javascript into our threads?

I don't know offhand what they're written in (but I do remember they're HTML, not BBCode), but I can say for certain that you can't code javascript into a thread.

Elements1 July 27th, 2014 8:35 PM

Quote:

Originally Posted by Oryx (Post 8372651)
I don't know offhand what they're written in (but I do remember they're HTML, not BBCode), but I can say for certain that you can't code javascript into a thread.

Alright that's what I figured, just checking. So HTML is now allowed or is that mod/admin only?

Oryx July 27th, 2014 9:04 PM

Quote:

Originally Posted by Elements1 (Post 8372659)
Alright that's what I figured, just checking. So HTML is now allowed or is that mod/admin only?

Nope, only on those section headers. Mods and admins can't use them in posts either.

Morgnarok September 11th, 2014 1:23 AM

Alright, so I am interested in CSS. I took the time to look over the links and try to learn it on my own but I am completely dumb founded. Orginally I wanted to try to make a CSS Signature but since I am no good a Photoshop and I have no clue how to use CSS still I have gave up on even trying. I would however like to try to do a tiny bit of CSS with my Usertitle. As a Platinum Supporter I have access apparently to use CSS in my Usertitles.

What I want to know is it possible to have say a small pokemon sprite in my usertitle such as two Pokeballs or something like a 2D World Pokemon N sprite. If it is possible to use CSS to enable a image like this into my Usertitle, how would I go about doing it?

Oryx September 11th, 2014 3:57 AM

I'm not 100% sure on this, but maybe try
a


I added an "a" to the image because you can only have a bg image show if you have something in the div. But I made that a completely transparent.

For the record though, I'm not sure but you might want to just try putting an img bbcode in there before going the css route.

Morgnarok September 13th, 2014 9:09 AM

Quote:

Originally Posted by Oryx (Post 8433417)
I'm not 100% sure on this, but maybe try
a


I added an "a" to the image because you can only have a bg image show if you have something in the div. But I made that a completely transparent.

For the record though, I'm not sure but you might want to just try putting an img bbcode in there before going the css route.

The IMG Code Worked For Me.

Tsutarja September 16th, 2014 9:28 AM

Quote:

Originally Posted by Northstar (Post 8438992)
I'm having massive issues with coding my signature. The image just won't show up -




Northstar
gym leader - twitter - last.fm




Code:

[div="height: 200px; width: 400px; border-radius: 20px; box-shadow: 1px  1px 1px #3D3D3D; background-image:url('http://www.pokecommunity.com/signaturepics/sigpic454988_2.gif);"]

[div="height: 100px; width: 125px; float: right; rbga(0,0,0,0); padding: 10px;"]
[SIZE=4][crystaltier][glow=black]Northstar[/glow][/crystaltier][/SIZE]
[SIZE=1]gym leader - twitter - last.fm[/SIZE]

[/div]
[/div]


How can I rectify the issue? Lol if it's really simple or I've ****ed the code up in some way.

You're missing the extra apostrophe behind the ".gif" text in your background-image:url element.

Code:

[div="height: 200px; width: 400px; border-radius: 20px; box-shadow: 1px  1px 1px #3D3D3D; background-image:url('http://www.pokecommunity.com/signaturepics/sigpic454988_2.gif');"]

[div="height: 100px; width: 125px; float: right; rbga(0,0,0,0); padding: 10px;"]
[SIZE=4][crystaltier][glow=black]Northstar[/glow][/crystaltier][/SIZE]
[SIZE=1]gym leader - twitter - last.fm[/SIZE]

[/div]
[/div]





Northstar
gym leader - twitter - last.fm



Kyora September 27th, 2014 9:45 PM

Uh, hi. I searched through this thread and I have no idea what's wrong with this CSS... this is what it looks like:
Spoiler:

Hello hello

Uh hey

Quote to see CSS Code (Like I maybe did to figure out [title])


...And this is the code.
Spoiler:
[cd="background-image:url('http://i1054.photobucket.com/albums/s481/Kyoraneko/OhgreatClouds_zps0195d830.png'); position: relative; height: 1000px; width: 800px; padding: 25px; color: #7D0D33; font-size: 15px; font-family: Carter One; border-style: solid; border-width: 20px; border-color: #392d61;"][cd="background-color: #6e638f; height: 30px; width: 334px; border-style: solid; border-width: 8px; border-color: #392d61; padding: 20px; text-align: center; line-height: 36px; font-size: 30px; color: #640B56;"]Hello hello[/cd]
[CENTER] Uh hey
[LEFT] [cd="background-color: #63758f; height: 400px; width: 200px; padding: 20px; border-style: dotted; border-color: #00083a; border-width: 10px; color: #362f4e; font-size: 18px;"][cd="height: 390px; width: 185px; [S-HIGHLIGHT]overflow: hidden[/S-HIGHLIGHT];"]Hello I need to put some Pokés in here

BULB
[IMG]http://sprites.pokecheck.org/i/001.gif[/IMG]

CHAR
[IMG]http://sprites.pokecheck.org/i/004.gif[/IMG]

SQUIRT
[IMG]http://sprites.pokecheck.org/i/007.gif[/IMG]

CHIKO
[IMG]http://sprites.pokecheck.org/i/152.gif[/IMG]

CYNDA
[IMG]http://sprites.pokecheck.org/i/155.gif[/IMG]

TOTO
[IMG]http://sprites.pokecheck.org/i/158.gif[/IMG]
[/cd][/cd][/LEFT]

Quote to see CSS Code (Like I maybe did to figure out [title=See? Lookie. :P][title][/title])[/CENTER]
[/cd]


For some reason, the overflow: hidden isn't making it scroll. When I switch it to visible the Pokémon keep going out of the box, and when I switch it to auto it has a scrollbar and works.
...This code is probably awful and should probably just be thrown out the window, but it's my first time even attempting CSS so I thought it was okay-ish... :3c

Hiatus September 28th, 2014 1:32 AM

Hm... are you trying to get scroll-bars appear vertically? If so, I'd recommend you to try this.

Code:

overflow-y: scroll; overflow-x: hidden;


It would make sure that scrolling works correctly, while still keeping all Pokémon inside the box.

Kyora September 28th, 2014 8:18 AM

Quote:

Originally Posted by Peitharchia (Post 8451943)
Hm... are you trying to get scroll-bars appear vertically? If so, I'd recommend you to try this.

Code:

overflow-y: scroll; overflow-x: hidden;


It would make sure that scrolling works correctly, while still keeping all Pokémon inside the box.

Actually, I'm trying to get it to scroll without showing a scrollbar. But that actually doesn't look too bad on it, so I might just use that. Thanks! :)

seeker October 12th, 2014 7:20 AM

Quote:

Originally Posted by Team Fail (Post 8453003)
So, I'm working on a style right now, however, not everything is working as it should be. The code below is for the reflected/faded image in the working photo:

Code:

<img src="$post[avatarurl]" $post[avwidth] $post[avheight] style="-webkit-transform: scaleY(-1); pointer-events: none; z-index: -1; -webkit-mask-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.6)), to(rgba(0,0,0,-0.3))); margin-bottom: -30%"/>


When placed into a vBulletin style, in the proper place in the postbit, it should look like so (Note, this is using the latest Chrome):

http://i.imgur.com/xZsws2I.png

However, Firefox is a greedy little child that doesn't use webkit stuff in the way that browsers work:

http://i.imgur.com/pffRVxt.png

How can I rectify this? I can't seem to get it to work at all, and it seems that I can't use webkit masks with webkit gradient in Firefox because it's dumb.

In all honesty, it's a pointless effort. You might be able to get it to work in Firefox, and if you can't you could use media queries to render the CSS3 attributes nulled. However I think your efforts to make such an effect may be a waste of time. CSS3 isn't well supported yet, and getting such a small effect working on all browsers won't really be possible, and is a lot more effort than it's worth. Most browsers support a little over 50% of CSS3, and each of those browsers support different things. Check out what your browser supports, I bet you'll be surprised.

Special CSS3 stuff like this looks cool, but very few people will actually see the efforts you've gone through to make it.

Treecko November 1st, 2014 10:35 PM

Do anyone have any idea how to make css with two or more gifs? Cause I have a few small gifs from a tumblr gifset I'd like to use for a new theme but want to keep the css I have. Thanks for any help!

Hiatus November 1st, 2014 11:48 PM

Quote:

Originally Posted by awolfsquared (Post 8485819)
Do anyone have any idea how to make css with two or more gifs? Cause I have a few small gifs from a tumblr gifset I'd like to use for a new theme but want to keep the css I have. Thanks for any help!

Indeed, nearly anything's possible when it comes to CSS.

Quote:

[css-div="width: 500px; margin: auto;"]
[css-div="background-image: url('http://i.imgur.com/kzeTDAu.jpg'); width: 250px; height: 275px; background-position: left; float: left;"][/css-div][css-div="background-image: url('http://i.imgur.com/kzeTDAu.jpg'); width: 250px; height: 275px; background-position: left; float: right;"][/css-div]
[/css-div]
If this is what we're looking for, I've stacked .gif inside your signature in two layers side-by-side; we're free to edit those elements according to our needs. I hope it works for you!

JesteR November 2nd, 2014 5:37 AM

Since there's no requests here, where could I request CSS layouts?

Tsutarja November 2nd, 2014 6:18 AM

Quote:

Originally Posted by epicassassin1811 (Post 8485995)
Since there's no requests here, where could I request CSS layouts?

You could perhaps ask around our Art & Design section, and look for threads with a [Shop] prefix. If any of those shops offer CSS, you could ask in there.

Yeah, sorry this thread isn't for requesting CSS from scratch ;-; just only getting assistance on already-existing CSS code.

I could also share you this link as well to help get you started on designing CSS: http://www.ppnstudio.com/node/273

You could also read through this entire thread to get ideas, tips, and tricks on CSS. :)

JesteR November 2nd, 2014 6:34 AM

How would I create a tab system similar to the Art & Design main page?

Oryx November 2nd, 2014 6:40 AM

Quote:

Originally Posted by epicassassin1811 (Post 8486030)
How would I create a tab system similar to the Art & Design main page?

The splash was not created in pure CSS; it allows for HTML and I believe JavaScript. In just CSS you can make something that looks like it's a tab but you can't have the tab-switching action.

JesteR November 2nd, 2014 2:16 PM

I'm not quite sure what I'm doing wrong here...

Code:

[FONT=Tahoma][COLOR=Sienna][SIZE=2][FONT=arial][INDENT][css-div=" color: black;cursor: normal; font-size: 14px; text-align: center;"][css-div="padding: 2px 2px 2px 2px; border: #C4BCB6 dashed 1px; font-variant: normal; color: black; background-image: url(" [url]http://www.zingerbug.com/Backgrounds/background_images/green_flame_fractal_background_seamless.jpg[/url] "); overflow: auto; position:relative;"]
[CENTER][div="font: italic 24pt 'Georgia', sans-serif; width: 350px; color: #646262; text-shadow: 1px 1px 2px #9A9A9A; padding: 15px; border: none #000000 0px;"]Sir Pedro's GFX Shop/Gallery[/div][/CENTER]

[COLOR=#fff][LEFT][INDENT][h2][COLOR=#fff][COLOR=#fff][SIZE=4]Introduction[/SIZE][/COLOR][/COLOR][/h2]
[LEFT][/LEFT]

[COLOR=#fff][LEFT][INDENT][h2][COLOR=#fff][COLOR=#fff][SIZE=4]Gallery Area[/SIZE][/COLOR][/COLOR][/h2]
[LEFT][/LEFT]

[h2][COLOR=#fff][COLOR=#fff][SIZE=4]Request Form[/SIZE][/COLOR][/COLOR][/h2]
[LEFT][/LEFT]

[COLOR=#fff][LEFT][INDENT][h2][COLOR=#fff][COLOR=#fff][SIZE=4]Completed Requests[/SIZE][/COLOR][/COLOR][/h2]
[LEFT][/LEFT]

[/INDENT][/LEFT]
[/COLOR][/css-div][/css-div][COLOR=#fff]
[/COLOR][/INDENT][/FONT][/SIZE][/COLOR][/FONT]


Any help, please?

Wobbu November 2nd, 2014 6:52 PM

Spoiler:

Sir Pedro's GFX Shop/Gallery

Introduction



Gallery Area



Request Form



Completed Requests





Is that what you're trying to accomplish? You had a lot of extra [tags] in your code that never [/closed], so that was one of your issues. I removed those extra tags though. You also had background: ("url") instead of background: ('url'), which is why the background image wasn't showing up.

JesteR November 2nd, 2014 6:59 PM

Quote:

Originally Posted by Wobbu (Post 8486716)
Spoiler:

Sir Pedro's GFX Shop/Gallery

Introduction



Gallery Area



Request Form



Completed Requests





Is that what you're trying to accomplish? You had a lot of extra [tags] in your code that never [/closed], so that was one of your issues. I removed those extra tags though. You also had background: ("url") instead of background: ('url'), which is why the background image wasn't showing up.

Thanks so much! :) I'm still new to this whole CSS thing. :3c

How would I go about creating a box that automatically sizes itself horizontally, but scrolls vertically, to put my pictures in the proper areas?

Code:

[FONT=Tahoma][COLOR=Sienna][SIZE=2][FONT=arial][css-div="color: black;cursor: normal; font-size: 14px; text-align: center;"][css-div="padding: 2px 2px 2px 2px; border: #C4BCB6 dashed 1px; font-variant: normal; color: black; background: url('http://www.zingerbug.com/Backgrounds/background_images/green_flame_fractal_background_seamless.jpg'); overflow: auto;"]
[CENTER][div="font: bold 24pt 'Metrophobic', sans-serif; width: 350px; color: #fff; text-shadow: 1px 1px 2px #9A9A9A; padding: 15px; border: none #000000 0px;"]Sir Pedro's GFX Shop/Gallery[/div][/CENTER]

[LEFT][INDENT][h2][COLOR=#fff][COLOR=#fff][SIZE=4]Introduction[/SIZE][/COLOR][/COLOR][/h2]
[COLOR="white"]Hey everybody, Sir Pedro here, with some GFX! I joined PC awhile back, and everyone was extremely helpful. So, I decided to give back and open a shop. Now, I do GFX, such as Signature banners (personal, for custom games, etc.), boxart, YouTube graphics, avatars, and probably other stuff too.[/COLOR]

[h2][COLOR=#fff][COLOR=#fff][SIZE=4]Gallery Area[/SIZE][/COLOR][/COLOR][/h2]
Here is just my personal work, not requests.

[h2][COLOR=#fff][COLOR=#fff][SIZE=4]Request Form[/SIZE][/COLOR][/COLOR][/h2]

[h2][COLOR=#fff][SIZE=4]Completed Requests[/SIZE][/COLOR][/COLOR][/h2]

[/INDENT][/LEFT]
[/css-div][/css-div][/FONT][/SIZE][/FONT]



Nick November 2nd, 2014 8:37 PM

Quote:

Originally Posted by epicassassin1811 (Post 8486734)
How would I go about creating a box that automatically sizes itself horizontally, but scrolls vertically, to put my pictures in the proper areas?

Code:

[FONT=Tahoma][COLOR=Sienna][SIZE=2][FONT=arial][css-div="color: black;cursor: normal; font-size: 14px; text-align: center;"][css-div="padding: 2px 2px 2px 2px; border: #C4BCB6 dashed 1px; font-variant: normal; color: black; background: url('http://www.zingerbug.com/Backgrounds/background_images/green_flame_fractal_background_seamless.jpg'); overflow: auto;"]
[CENTER][div="font: bold 24pt 'Metrophobic', sans-serif; width: 350px; color: #fff; text-shadow: 1px 1px 2px #9A9A9A; padding: 15px; border: none #000000 0px;"]Sir Pedro's GFX Shop/Gallery[/div][/CENTER]

[LEFT][INDENT][h2][COLOR=#fff][COLOR=#fff][SIZE=4]Introduction[/SIZE][/COLOR][/COLOR][/h2]
[COLOR="white"]Hey everybody, Sir Pedro here, with some GFX! I joined PC awhile back, and everyone was extremely helpful. So, I decided to give back and open a shop. Now, I do GFX, such as Signature banners (personal, for custom games, etc.), boxart, YouTube graphics, avatars, and probably other stuff too.[/COLOR]

[h2][COLOR=#fff][COLOR=#fff][SIZE=4]Gallery Area[/SIZE][/COLOR][/COLOR][/h2]
Here is just my personal work, not requests.

[h2][COLOR=#fff][COLOR=#fff][SIZE=4]Request Form[/SIZE][/COLOR][/COLOR][/h2]

[h2][COLOR=#fff][SIZE=4]Completed Requests[/SIZE][/COLOR][/COLOR][/h2]

[/INDENT][/LEFT]
[/css-div][/css-div][/FONT][/SIZE][/FONT]




Add an overflow property (overflow: auto) and specify the height in pixels (height: ###px) of the area where you want to scroll. By default, everything is already 100% vertical and 100% horizontal when positioned and placed on a web page. That means 100% of the page will be filled with the content, if your content is enough to fill that page. You can also specify the height in percentage, but for you it'll be easier to understand and implement if you use pixels, since you're still fairly new and you can play around with it to see where it cuts your content off.

Wrap that in a css-div tag that goes around the content you want to place in the scroll box.

So:

[css-div="overflow: auto; height: 100px;"]content[/css-div]

JesteR November 2nd, 2014 11:13 PM

Thanks for everyone's help! I got my layout complete, and it looks pretty cool. ^^

Treecko November 3rd, 2014 12:09 AM

Quote:

Originally Posted by Peitharchia (Post 8485850)
Indeed, nearly anything's possible when it comes to CSS.



If this is what we're looking for, I've stacked .gif inside your signature in two layers side-by-side; we're free to edit those elements according to our needs. I hope it works for you!

That's a gist of what I was looking for , but with different gifs.

These are the gifs I was gonna use for my first one, placed exactly like this.


But smaller dimensions than the ones on my current signature. 500x 250 preferably or what fits those two gifs best.And maybe just a bit more spaced out of possible, just like the gitsets on tumblr.

Thanks a lot!!

TheKantoKid November 8th, 2014 4:45 PM

I have this enormous scroll bar in my sig, why is that?

Omicron November 8th, 2014 7:54 PM

Quote:

Originally Posted by TheKantoKid (Post 8492365)
I have this enormous scroll bar in my sig, why is that?

That's probably caused due to a problem with the overflow property. Add overflow:hidden to your code, that should take care of it. :)

Gigadweeb November 14th, 2014 1:33 AM

Just a quick question. If I set a signature to a height of, let's say, 150 pixels, and then have an image with a height of 300 pixels, will the image be cut off, or will it go outside of the boundaries of the sig? If it gets cut off, is there a way around it?

Many thanks.

Oryx November 14th, 2014 5:59 AM

Quote:

Originally Posted by Gigadweeb (Post 8497486)
Just a quick question. If I set a signature to a height of, let's say, 150 pixels, and then have an image with a height of 300 pixels, will the image be cut off, or will it go outside of the boundaries of the sig? If it gets cut off, is there a way around it?

Many thanks.

It depends on how you set your overflow tag. By default it's visible, which means it'll go out farther than the box. You can also set it to overflow:hidden, where it's cut off, and overflow:auto, where there's a scroll bar.

Not sure why you'd want to do that, but you can.

Night Watcher November 16th, 2014 3:24 AM

Does anyone know how to round the corners on the signature?

Zeffy November 16th, 2014 4:30 AM

Quote:

Originally Posted by かすみ (Post 8499525)
Does anyone know how to round the corners on the signature?

There's a couple of ways to do it. However, if you just want to round all of the corners of a certain div, then you should just use the following code:
Code:

border-radius: <radius>
-moz-border-radius: <radius>
-webkit-border-radius: <radius>


Radius is a numerical value which can be specified by pixels. The ones with the -moz and -webkit prefixes are generally for older browsers; it's generally a good practice to include them.

Austin November 20th, 2014 12:46 AM

How would I get this to look right? I want it exactly how it looks here, but centered. Everything I try either positions them awkwardly or doesn't work.



Sorry if this is awful, I'm really bad at this and I did it at 2 in the morning.

Wobbu November 20th, 2014 1:23 AM

Get rid of the float: left in the first div and get rid of the float: right in the image. Then add a display: inline-block in the first div. Also get rid of the blank lines between the black div and the large image. Then put everything inside a center tag. Should look right.

Spoiler:
[center][div="display: inline-block; height: 350px; width: 248px; background-color:black; background-size: 400px 210px"]

[div="height: 18px; width: 238px; float: center; border-radius: 25px; background-color: #808080; padding: 5px; box-shadow: 1px 1px 1px #000000"][COLOR="White"][CENTER][B]White Mage[/B][/CENTER][/COLOR][/div]

[div="height: 18px; width: 238px; float: center; border-radius: 25px; background-color: #808080; padding: 5px; box-shadow: 1px 1px 1px #000000"][COLOR="White"][CENTER][B]PM[/B][/CENTER][/COLOR]
[/div]

[div="height: 18px; width: 238px; float: center; border-radius: 25px; background-color: #808080; padding: 5px; box-shadow: 1px 1px 1px #000000"][COLOR="White"][CENTER][B]MAL[/B][/CENTER][/COLOR]
[/div]

[CENTER][img]http://i1282.photobucket.com/albums/a533/austinkun17/43a9b5a9-ae38-4f1e-a9cf-093cc6307cc3_zpsadca819e.jpg[/img][/CENTER][/div][img]http://i1282.photobucket.com/albums/a533/austinkun17/dad19ffd-e7f9-4353-a716-7621045d0897_zps956626fc.jpg[/img][/center]

Joexv November 28th, 2014 8:25 PM

Ok so Im tryin to create a progress bar in one of my threads and cant seem to get it to work.
Heres my css(please note that this is being sampled from a public source. I didnt make it:P)
Spoiler:
Code:

body {
  color: #fff;
  font-family: 'Yanone Kaffeesatz';
  font-size: 16px;
  font-weight: normal;
  background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}

h1 a {
    display: block;
    margin: 0 auto 20px auto;
    font-size: 60px;
    font-family: 'Yanone Kaffeesatz';
    color: rgba(255,255,255,0.2);
    text-decoration: none;
}
h1 a:hover {
    color: rgba(255,255,255,0.3);
}

p {
    margin: 10px 0 0 21px;
    font-family: 'Yanone Kaffeesatz';
    font-size: 14px;
    color: rgba(255,255,255,0.3);
}

a {
    color: #f27011;
    text-decoration: none;
}
a:hover {
    color: #f63a0f;
}

.container {
  margin: 10px auto;
  width: 300px;
  text-align: center;
}

/* ========================================================
  Progress bars
  ===================================================== */
.progress {
  padding: 4px;
  margin-bottom: 25px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  font-family: 'Yanone Kaffeesatz';
  font-size: 14px;
  color: #111;
  text-align: left;
  text-indent: 6px;
  position: relative;
  height: 16px;
  border-radius: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -ms-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
  content: '';
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
}
.progress-bar:before {
  bottom: 0;
  z-index: 2;
  background: url("../img/stripes.png") 0 0 repeat;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  bottom: 45%;
  z-index: 3;
  border-radius: 4px;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.05)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

.ten.progress > .progress-bar {
  width: 10%;
  background-color: #f63a0f;
}

.twenty.progress > .progress-bar {
  width: 20%;
  background-color: #f27011;
}

.thirty.progress > .progress-bar {
  width: 30%;
  background-color: #f2b01e;
}

.fourty.progress > .progress-bar {
  width: 40%;
  background-color: #f2d31b;
}

.fifty.progress > .progress-bar {
  width: 50%;
  background-color: #86e01e;
}

.sixty.progress > .progress-bar {
  width: 60%;
  background-color: #f63a0f;
}

.seventy.progress > .progress-bar {
  width: 70%;
  background-color: #f27011;
}

.eighty.progress > .progress-bar {
  width: 80%;
  background-color: #f2b01e;
}

.ninety.progress > .progress-bar {
  width: 90%;
  background-color: #f2d31b;
}

.hundred.progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}



Hiatus November 28th, 2014 10:46 PM

Unfortunately, the forums don't seem to support sheet-elements at the moment (like the one you've submitted), so whenever working with CSS here, we would have to define everything in the post itself. If we'd like to display progress-bar, here's a quick set of codes I've whipped up:

Spoiler:
[css-div="background-color: lightgrey;"][css-div="margin: 2px; padding: 5px; background-color: red; text-align: center; color: white; width: 80%;"]80%[/css-div][/css-div]


We are free to edit background-color and width (or anything else) according to our needs. When all things are done, our result should look something like this:

80%

#DickBats December 11th, 2014 7:40 AM

How do I post a Picture in the far right of the signature? Separated from the text

Tsutarja December 11th, 2014 7:44 AM

Quote:

Originally Posted by ChrisJavier (Post 8528629)
How do I post a Picture in the far right of the signature? Separated from the text

Do you mean on one line or two lines?

#DickBats December 11th, 2014 8:27 AM

Quote:

Originally Posted by Tsutarja (Post 8528631)
Do you mean on one line or two lines?

Um.. English is not my strong point, so i'll try to explain better..

You know that Haunter I have? Let's say I want it far away to a corner on the right. It automatically puts it in line with the text.

Buoysel December 11th, 2014 12:51 PM

Quote:

Originally Posted by ChrisJavier (Post 8528691)
Um.. English is not my strong point, so i'll try to explain better..

You know that Haunter I have? Let's say I want it far away to a corner on the right. It automatically puts it in line with the text.

You might try using the right tags around the image code.
[RIGHT][img]http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif[/img][/RIGHT]

In HTML for a webpage you would use the style tag and add the float CSS like so:
Code:

<img src="http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif" style="float;right;">



Tsutarja December 11th, 2014 1:00 PM

Quote:

Originally Posted by Buoysel (Post 8528971)
You might try using the right tags around the image code.
[RIGHT][img]http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif[/img][/RIGHT]

In HTML for a webpage you would use the style tag and add the float CSS like so:
Code:

<img src="http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif" style="float;right;">



I think he's asking though for the Haunter gif and the text to be on the same line; which isn't possible with the [right] align tags.

Buoysel December 11th, 2014 1:05 PM

Quote:

Originally Posted by Tsutarja (Post 8528978)
I think he's asking though for the Haunter gif and the text to be on the same line; which isn't possible with the [right] align tags.

Hmm, I didn't notice that at first. It looks like css will work though.


Code:

[css-div=""]FC: 0275-8985-5713| IGN: Javier[css-div="float:right;"][img]http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif[/img][/css-div][/css-div]



Impo December 14th, 2014 5:19 AM


Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
Bullet Punch
Ice Punch


How would I get the text below the image to move to the right? I think it's to do with the inline block but I have no idea about the format :x

thanks for any help!

Tsutarja December 14th, 2014 10:30 AM

Quote:

Originally Posted by Impo (Post 8532290)

Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
Bullet Punch
Ice Punch


How would I get the text below the image to move to the right? I think it's to do with the inline block but I have no idea about the format :x

thanks for any help!

In this instance, you do not need to use the inline block at all. What you're looking for is float.

Here's the code you would use:

Spoiler:
[cd=height:120px;background-image:url('http://fc03.deviantart.net/fs70/i/2011/068/a/c/pokeball_desktop_icon_by_beccerberry-d3b98cf.png');background-size:contain;background-repeat:no-repeat;float: left;][IMG]http://www.pkparaiso.com/imagenes/xy/sprites/animados/machamp.gif[/IMG][IMG]http://cdn.bulbagarden.net/upload/8/87/Bag_Luxury_Ball_Sprite.png[/IMG][/cd][cd=height:120px;][SIZE="1"]Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
[title=Egg Move]Bullet Punch[/title]
[title=Egg Move]Ice Punch[/title][/SIZE][/cd]


And its output:

Spoiler:
Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
Bullet Punch
Ice Punch


If you want the text to be farther-separated from the Pokéball background, then you can do that by setting a left option within the text's CSS properties.

Talon December 14th, 2014 3:20 PM

How could I make the images in my sig change when someone hovers over them, and also display a small text box? If displaying a text box isn't possible, then hover text is ok also.

Impo December 14th, 2014 4:05 PM

Quote:

Originally Posted by Tsutarja (Post 8532557)
In this instance, you do not need to use the inline block at all. What you're looking for is float.

Here's the code you would use:

Spoiler:
[cd=height:120px;background-image:url('http://fc03.deviantart.net/fs70/i/2011/068/a/c/pokeball_desktop_icon_by_beccerberry-d3b98cf.png');background-size:contain;background-repeat:no-repeat;float: left;][IMG]http://www.pkparaiso.com/imagenes/xy/sprites/animados/machamp.gif[/IMG][IMG]http://cdn.bulbagarden.net/upload/8/87/Bag_Luxury_Ball_Sprite.png[/IMG][/cd][cd=height:120px;][SIZE="1"]Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
[title=Egg Move]Bullet Punch[/title]
[title=Egg Move]Ice Punch[/title][/SIZE][/cd]


And its output:

Spoiler:
Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
Bullet Punch
Ice Punch


If you want the text to be farther-separated from the Pokéball background, then you can do that by setting a left option within the text's CSS properties.

Thank you!
But I have one more question :x
I tried it centered but the float remains to the left of the page. I tried again with inline blocks and it seemed to do the trick, but my top padding for the text isn't working as I would it too. Is it possible for the text and the top of the background image to start at the same time? (It's just bringing the text down, but whenever I try to put things in inline blocks it messes up :x

here's what I have:
Spoiler:


Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
Bullet Punch
Ice Punch

and the code:

Code:

[CENTER][cd=height:110px;background-image:url('http://fc03.deviantart.net/fs70/i/2011/068/a/c/pokeball_desktop_icon_by_beccerberry-d3b98cf.png');background-size:contain;background-repeat:no-repeat;display:inline-block;][IMG]http://www.pkparaiso.com/imagenes/xy/sprites/animados/machamp.gif[/IMG][IMG]http://cdn.bulbagarden.net/upload/8/87/Bag_Luxury_Ball_Sprite.png[/IMG][/cd][cd=display:inline-block;text-align:left;padding-left:5px;][SIZE="1"]
Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
[title=Egg Move]Bullet Punch[/title]
[title=Egg Move]Ice Punch[/title][/SIZE][/cd][/CENTER]





Quote:

Originally Posted by Rengar (Post 8532832)
How could I make the images in my sig change when someone hovers over them, and also display a small text box? If displaying a text box isn't possible, then hover text is ok also.

I'm not sure about most of that, but I think I know hover text!
[title="the hover text"]text[/title]

ie: text

Buoysel December 15th, 2014 7:38 AM

Quote:

Originally Posted by Rengar (Post 8532832)
How could I make the images in my sig change when someone hovers over them, and also display a small text box? If displaying a text box isn't possible, then hover text is ok also.

Change how?

CSS has a transform tag that would or might do what you want to do, but I am not sure how it can be implemented into PC's css-div tag that they allow us to use in posts/signatures because the transform tag requires the use of the :hover selector.

Quote:

Originally Posted by Impo (Post 8532877)
Is it possible for the text and the top of the background image to start at the same time? (It's just bringing the text down, but whenever I try to put things in inline blocks it messes up :x

Not sure what you are asking. It looks to be starting on the same line on my screen. Maybe your browser isn't rendering it correctly? Here's what it looks like for me. Is this what you are tying to get? http://i.imgur.com/erVari5.png

Talon December 15th, 2014 2:23 PM

Quote:

Originally Posted by Buoysel (Post 8533494)
Change how?

CSS has a transform tag that would or might do what you want to do, but I am not sure how it can be implemented into PC's css-div tag that they allow us to use in posts/signatures because the transform tag requires the use of the :hover selector.

I mean when they hover over it, it changes to another image.

Impo December 15th, 2014 2:39 PM

Quote:

Originally Posted by Buoysel (Post 8533494)
Not sure what you are asking. It looks to be starting on the same line on my screen. Maybe your browser isn't rendering it correctly? Here's what it looks like for me. Is this what you are tying to get? http://i.imgur.com/erVari5.png

Ah, it was just my browser :x

Thank you!

Oryx December 15th, 2014 2:41 PM

Quote:

Originally Posted by Rengar (Post 8533946)
I mean when they hover over it, it changes to another image.

I don't think that's possible with PC CSS. That would require use of :hover as Buoysel noted.

Talon December 15th, 2014 6:54 PM

Quote:

Originally Posted by Oryx (Post 8533989)
I don't think that's possible with PC CSS. That would require use of :hover as Buoysel noted.

Darn. Well, that sucks. Thanks for the help either way :D

Impo December 15th, 2014 11:02 PM

One more question :x

how would I get the staryu and pokeball to start at the bottom of the background image?
Is it possible?


here's the code:
Spoiler:
[CENTER][cd=height:120px;width:120px;background-image:url('http://i1026.photobucket.com/albums/y321/da_impos/pokeball_desktop_icon_by_beccerberry-d3b98cf1_zps0912dc97.png');background-repeat:no-repeat;][IMG]http://www.pkparaiso.com/imagenes/xy/sprites/animados/staryu.gif[/IMG]
[IMG]http://cdn.bulbagarden.net/upload/9/93/Bag_Pok%C3%A9_Ball_Sprite.png[/IMG][/cd]Staryu lvl 1
Timid. Natural Cure.
31/x/31/31/31/31
Tackle
Harden[/CENTER]

Oryx December 16th, 2014 6:20 AM


All you have to do is add display:table-cell (unlocks the vertical alignment options) and vertical-align:bottom. If it's too low keep in mind that there's a cimg tag in bbcode that lets you put padding on the bottom of the pokeball to bump it up :)

Alfieri January 9th, 2015 5:27 PM

Hey guys, CSS noob here. Is there any way to have the image change each time you refresh a page? I have a lot of pictures I'd like to use in my signature.

Night Watcher January 9th, 2015 6:06 PM

Quote:

Originally Posted by Alfieri (Post 8573524)
Hey guys, CSS noob here. Is there any way to have the image change each time you refresh a page? I have a lot of pictures I'd like to use in my signature.

I don't think you can, you can have a gif with it though.

Tsutarja January 9th, 2015 6:24 PM

Quote:

Originally Posted by Alfieri (Post 8573524)
Hey guys, CSS noob here. Is there any way to have the image change each time you refresh a page? I have a lot of pictures I'd like to use in my signature.

Quote:

Originally Posted by ❤Hitomi❤ (Post 8573562)
I don't think you can, you can have a gif with it though.

^ this. At least within PC's CSS capabilities.

Your only option for rotating images is to use an image-rotating service, or create one using PHP and linking to that.

Alfieri January 9th, 2015 8:41 PM

Quote:

Originally Posted by ❤Hitomi❤ (Post 8573562)
I don't think you can, you can have a gif with it though.

Quote:

Originally Posted by Tsutarja (Post 8573584)
Your only option for rotating images is to use an image-rotating service, or create one using PHP and linking to that.

Thanks guys. I got it working.

JesteR January 9th, 2015 8:46 PM

How would you go about doing what Alfieri did?

Buoysel January 11th, 2015 11:08 AM

Quote:

Originally Posted by epicassassin1811 (Post 8573727)
How would you go about doing what Alfieri did?

Have a random image each page load?

It can't be done with the CSS that Pokécommunity allows us to use in our signatures. You would have to have the image link to a server where the server returned a random image. It could be done, but would take work and your own website and some coding.

GengarsTeeth January 26th, 2015 9:20 AM

anyone know there way around basic HTML? Basically, you see the gengar in my sig!? if I wanted to add a line of say 6 (like a team) what do I use to keep them on the same line? It's been ages since I've done any HTML, I remember that <p> seperates stuff so if I just write it on one continuous line will it just stay as one line please?

thank you, fully noobin' it up this afternoon like, ha ha.

donavannj January 26th, 2015 9:37 AM

Quote:

Originally Posted by GengarsTeeth (Post 8594777)
anyone know there way around basic HTML? Basically, you see the gengar in my sig!? if I wanted to add a line of say 6 (like a team) what do I use to keep them on the same line? It's been ages since I've done any HTML, I remember that <p> seperates stuff so if I just write it on one continuous line will it just stay as one line please?

thank you, fully noobin' it up this afternoon like, ha ha.

Wait, are you talking about using HTML in your signature here on PokeCommunity, or just looking for general HTML help? You can't use HTML in signatures here.

Though for general HTML, keeping something in one continuous line without using tags like <h1>, </ br>, or <p> will end up with those things sharing a line. So a series of <image /> tags placed next to each other will typically net you a continuous row of images.

GengarsTeeth January 26th, 2015 9:59 AM

I meant for images, I have a little animation of a 5th gen gengar. I wanted to know how to add more but a long side each other. it can't be illegal as loads of people have images in their signatures, gifs as well.

I doubt I'm going to add any more just now anyway, was for future reference when i have a competative team so I can add my team to my sig.

donavannj January 26th, 2015 10:05 AM

Quote:

Originally Posted by GengarsTeeth (Post 8594828)
I meant for images, I have a little animation of a 5th gen gengar. I wanted to know how to add more but a long side each other. it can't be illegal as loads of people have images in their signatures, gifs as well.

I doubt I'm going to add any more just now anyway, was for future reference when i have a competative team so I can add my team to my sig.

Just place them side by side. PC uses BBCode, not HTML, though, for formatting it on the user end. The BBCode is converted into HTML by vBulletin after the fact.

So putting images together in the same row basically works like this:

http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif

And the code for the above is this:

Spoiler:
[IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG]


They word-wrap if they reach the end of the display area of a post.

GengarsTeeth January 26th, 2015 10:14 AM

Quote:

Originally Posted by donavannj (Post 8594835)
Just place them side by side. PC uses BBCode, not HTML, though, for formatting it on the user end. The BBCode is converted into HTML by vBulletin after the fact.

So putting images together in the same row basically works like this:

http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gifhttp://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif

And the code for the above is this:

Spoiler:
[IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG][IMG]http://media.pldh.net/pokemon/gen5/blackwhite_animated_front/094.gif[/IMG]


They word-wrap if they reach the end of the display area of a post.


thank you, see I would have actually put the code all in one line, ha ha. now the <p> for paragraph mAKES MORE SENSE TO ME ANYWAY (caps)

Do you know if photobucket is ok with gifs? I have a huge file of of gen 6 gifs but they won't work unless they're hosted somewhere first.

EDIT: When I did that exact code, they stack on top of each other. I did the same thing and just stacked each link. hmm :(

EDIT2: Lol, it's because i actually put the code underneath, putting it side by side actually puts the text on the line bellow. sorted.

GengarsTeeth January 26th, 2015 10:50 AM

Quote:

Originally Posted by Team Fail (Post 8594881)
Imgur is pretty nice with gifs, and they have a fairly generous free account system (Filesize for free members is 5MB, although I think they upped that to 50MB with their GIFV format, but 2MB is the filesize limit for signatures - keep that in mind).

Thanks man, it's mainly because I have the new animations from 6th gen, not just the regular loops (like gengar roaring and stuff like that) I found a dump of them all so thought I may as well download them.

Night Watcher April 6th, 2015 3:09 PM

So my signature looks like this.

Gold Supporter Cousin VM/PM FC Theme










But I want to add two pictures like this and this on the left and right of the signature, but can't seem to get the box in the center. If anyone can help, that'll be great. :P (And i'm going to make the background transparent as soon as someone tells me how to do this.)

Buoysel April 6th, 2015 8:29 PM

Quote:

Originally Posted by Kokoro (Post 8693997)
So my signature looks like this.

Gold Supporter Cousin VM/PM FC Theme






But I want to add two pictures like this and this on the left and right of the signature, but can't seem to get the box in the center. If anyone can help, that'll be great. :P (And i'm going to make the background transparent as soon as someone tells me how to do this.)

Nest div tags, center the outermost div tag.

what do you want to be transparent?

Sefuree April 12th, 2015 9:23 AM

I have a little question!

How do you add audio into your signature?

Thanks!

Tsutarja April 24th, 2015 3:47 PM

Quote:

Originally Posted by Archer99 (Post 8722763)
Okay, how do I create a text box on CSS? (You know, a place to put all the links). I really don't know how, thanks for your help!.

Could you perhaps explain a little farther on what you mean by creating a text box inside CSS?

BahamutZero April 28th, 2015 2:22 AM

I need some CSS help! (not basic or PC related)
 
OK, well I started a website called masamunemanor.com (don't want to get done for for advertisement) and one of the themes Gradiel, is really nice, but there is one big problem:
There should be a drop down menu where you click user cp, inbox, admin cp, etc.
If anyone could help me with this, PM me and tell me what to do.
Thanks.

Tsutarja April 28th, 2015 3:12 AM

Quote:

Originally Posted by ComicFanatic (Post 8726975)
OK, well I started a website called masamunemanor.com (don't want to get done for for advertisement) and one of the themes Gradiel, is really nice, but there is one big problem:
There should be a drop down menu where you click user cp, inbox, admin cp, etc.
If anyone could help me with this, PM me and tell me what to do.
Thanks.

Just a friendly reminder, but no matter the level of CSS involved, if you ask for CSS help, I politely ask you use this thread at all times. :)

BahamutZero April 28th, 2015 3:19 AM

Sorry, I didn't know, if I ever ask for help again i'll post it here. Thanks Tsutarja!

BurningLanguages April 30th, 2015 8:35 AM

I need help with using images as a background for your post. :(

Onto the problem. I copied the CSS code needed to have a background image throughout the entire post, but whenever I use it it just pushes everything down (images, text boxes, etc...) into the space where I type (the space where the thread NEVER enters, the quick-reply area). I see the background image and it is behind the text boxes I made, but it messes everything up. How do I keep it from doing this?

Any help would be appreciated. If my question isn't clear I will do anything to make it more understandable. The code is below, thank you!

[cd="background-color:brown; background-image:url('http://www.my-iguru.com/ipad/assets/images/ipad-wallpapers/abstract/ipad-wallpaper-electric-blue.png'); width: 850px; height: 300px; border:10px solid #000000; padding: 25px;"]Content[/cd

the very last character in the code is a "]" I just didn't include it so you could see the actual code. Here is what it looks like with everything intact:

Content

donavannj April 30th, 2015 10:30 AM

What are you trying to do? I'm having difficulty understanding what exactly it is you're trying to do since the code seems solid if you're just doing what I did here.


Could you take a screenshot of the issue you're experiencing, as well as stating what browser and operating system you are using? Oh, and whether you are using the WYSIWYG editor or not?

BurningLanguages April 30th, 2015 11:19 AM

Quote:

Originally Posted by donavannj (Post 8730558)
What are you trying to do? I'm having difficulty understanding what exactly it is you're trying to do since the code seems solid if you're just doing what I did here.


Could you take a screenshot of the issue you're experiencing, as well as stating what browser and operating system you are using? Oh, and whether you are using the WYSIWYG editor or not?

Sure thing. I am not using the editor you mentioned and I am using Windows 8.1; Here is the post BEFORE the background image code:

http://i1373.photobucket.com/albums/ag381/burninglanguages/45d61539-5630-4504-8a4e-64db9ca820e3_zps5vpgfhf1.png

Now the next 2 shots are AFTER the code has been inserted. Do you see how everything is now not centered and pushed to the left and WAY down? You can see the background image behind everything:

http://i1373.photobucket.com/albums/ag381/burninglanguages/3dffb293-80f0-4d8d-88dc-7b6712c81805_zpsxb9gam97.png

http://i1373.photobucket.com/albums/ag381/burninglanguages/568b4323-ace5-4dc2-959a-02544784c868_zps5i8shnmr.png

donavannj April 30th, 2015 12:23 PM

Quote:

Originally Posted by BurningLanguages (Post 8730622)
Sure thing. I am not using the editor you mentioned and I am using Windows 8.1; Here is the post BEFORE the background image code:

http://i1373.photobucket.com/albums/ag381/burninglanguages/45d61539-5630-4504-8a4e-64db9ca820e3_zps5vpgfhf1.png

Now the next 2 shots are AFTER the code has been inserted. Do you see how everything is now not centered and pushed to the left and WAY down? You can see the background image behind everything:

http://i1373.photobucket.com/albums/ag381/burninglanguages/3dffb293-80f0-4d8d-88dc-7b6712c81805_zpsxb9gam97.png

http://i1373.photobucket.com/albums/ag381/burninglanguages/568b4323-ace5-4dc2-959a-02544784c868_zps5i8shnmr.png

From what I can tell, there's something in this BBCode CSS conflicting with the already existing BBCode CSS in the post you're changing, but I can't tell you what since I don't have the code from that post in front of me. Usually, issues like the one in your screenshot are caused by stating a "fixed" position, but I don't see that anywhere in the editor text from the screenshots you've posted, as well as not being the snippet you posted.

Could you put the code you're trying to use in that post into [noparse][/noparse] tags? Exactly as you have it to cause the issue in the screenshot, please.

BurningLanguages April 30th, 2015 3:48 PM

Yes this is the code down below. The background image is at the very top which is merged with the "Grass Club" title code:

[cd="background-color:brown; background-image:url('http://www.my-iguru.com/ipad/assets/images/ipad-wallpapers/abstract/ipad-wallpaper-electric-blue.png'); width: 850px; height: 300px; border:10px solid #000000; padding: 25px;"][center][SIZE="7"][B]Grass Club[/B][/SIZE]

[IMG]http://fc01.deviantart.net/fs70/i/2014/040/c/9/grass_type_pokemon_trainers_by_saintnaruto-d75tbjt.png[/IMG]
[I][SIZE="1"]Image by SaintNaruto[/SIZE][/I]

[cd="background-color: springgreen; width: 1000px; height: 120px; padding: 5px; border:5px double black;"][B][SIZE="3"]Introduction[/SIZE][/B]
Welcome to the Grass Club! We're excited to have you come and browse around, there are many great things about this club. First of all we work to achieve closeness and familiarity with every member of the club. The Grass Type and it's many beauties is what brings us all together. Any and all visitors are welcome and feel free to chat with us! I believe that the Grass type is able to teach us that there is always sunshine after the darkest (and much needed) storms. Let's grow together.[/cd]

[cd="background-color: springgreen; width: 1000px; height: 140px; padding: 5px; border:5px double black;"][SIZE="3"][B]Grass Club Code of Conduct[/B][/SIZE]
1. Obey all of the forum rules, of course!
2. Remember the Golden Rule! Treat others the way you would want to be treated. If we master this we will have no worries.
3. Do your best to enjoy this club to the fullest, this will also promote activity among us as a whole.
4. Responding to the Topic of the Week is NOT mandatory. It's simply there to promote discussion if you're having trouble with what to say.
5. Is listing "have fun" as a rule kind of counter-intuitive? :P[/cd]

[cd="background-color: springgreen; width: 1000px; height: 120px; padding: 5px; border:5px double black;"][SIZE="3"][B]Club Application[/B][/SIZE]
[B]Username[/B]:
[B]Favorite pokemon (only 1, Grass type or any other)[/B]:
[B]Reason for joining[/B]:
[B]Answer the current topic (optional)[/B]:[/cd]

[cd="background-color: springgreen; width: 1000px; height: 270px; padding: 5px; border:5px double black;"][SIZE="3"][B]Grass Type Pokemon[/B][/SIZE]

[IMG]http://media.tumblr.com/8b8fc87a1c4ab7fb9c7edd32c5a8669b/tumblr_inline_mrxujtLjQe1qz4rgp.png[/IMG][/cd]

[cd="background-color: springgreen; width: 650px; height: 200px; padding: 5px; border:5px solid #463745; overflow:auto"][SIZE="3"][B]Members List[/B][/SIZE]
[B]-[/B] [title=Founder]BurningLanguages[/title] [title=Seamore][IMG]http://www.serebii.net/red_green/sprites/365.gif[/IMG][/title]
[B]-[/B] [title=Co-Founder]Aryca[/title] [title=Bulby][IMG]http://projectpokemon.org/forums/images/bbcode/OverworldSprites/001.png[/IMG][/title][/cd]

[cd="background-color: springgreen; width: 1000px; height: 80px; padding: 5px; border:5px double black;"][SIZE="3"][B]User Bars[/B][/SIZE]
If anyone is capable of making user bars you are more than welcome to make some for us :).[/cd]

[cd="background-color: springgreen; width: 1000px; height: 80px; padding: 5px; border:5px double black;"][SIZE="3"][B]Topic of the Week[/B][/SIZE]
Who is your favorite Grass type Gym Leader and why?[/center][/cd][/cd]

donavannj May 2nd, 2015 7:14 AM

Spoiler:
Grass Club

http://fc01.deviantart.net/fs70/i/2014/040/c/9/grass_type_pokemon_trainers_by_saintnaruto-d75tbjt.png
Image by SaintNaruto

Introduction
Welcome to the Grass Club! We're excited to have you come and browse around, there are many great things about this club. First of all we work to achieve closeness and familiarity with every member of the club. The Grass Type and it's many beauties is what brings us all together. Any and all visitors are welcome and feel free to chat with us! I believe that the Grass type is able to teach us that there is always sunshine after the darkest (and much needed) storms. Let's grow together.


Grass Club Code of Conduct
1. Obey all of the forum rules, of course!
2. Remember the Golden Rule! Treat others the way you would want to be treated. If we master this we will have no worries.
3. Do your best to enjoy this club to the fullest, this will also promote activity among us as a whole.
4. Responding to the Topic of the Week is NOT mandatory. It's simply there to promote discussion if you're having trouble with what to say.
5. Is listing "have fun" as a rule kind of counter-intuitive? :P


Club Application
Username:
Favorite pokemon (only 1, Grass type or any other):
Reason for joining:
Answer the current topic (optional):






User Bars
If anyone is capable of making user bars you are more than welcome to make some for us :).


Topic of the Week
Who is your favorite Grass type Gym Leader and why?


Your issue is that you were specifying width and height in your post background DIV, and the content was spilling out because you weren't telling the DIV what to do with the overflowing content. Spoiler shows what content looks like with the width and height specifications removed from the post background DIV.

If you want the post to fit in the 850x300 area you specified, you need to add "overflow:auto" or "overflow:scroll" (preferably the former) to the DIV's properties.


Clear as mud?

BurningLanguages May 2nd, 2015 1:18 PM

Quote:

Originally Posted by donavannj (Post 8733429)
Spoiler:
Grass Club

http://fc01.deviantart.net/fs70/i/2014/040/c/9/grass_type_pokemon_trainers_by_saintnaruto-d75tbjt.png
Image by SaintNaruto

Introduction
Welcome to the Grass Club! We're excited to have you come and browse around, there are many great things about this club. First of all we work to achieve closeness and familiarity with every member of the club. The Grass Type and it's many beauties is what brings us all together. Any and all visitors are welcome and feel free to chat with us! I believe that the Grass type is able to teach us that there is always sunshine after the darkest (and much needed) storms. Let's grow together.


Grass Club Code of Conduct
1. Obey all of the forum rules, of course!
2. Remember the Golden Rule! Treat others the way you would want to be treated. If we master this we will have no worries.
3. Do your best to enjoy this club to the fullest, this will also promote activity among us as a whole.
4. Responding to the Topic of the Week is NOT mandatory. It's simply there to promote discussion if you're having trouble with what to say.
5. Is listing "have fun" as a rule kind of counter-intuitive? :P


Club Application
Username:
Favorite pokemon (only 1, Grass type or any other):
Reason for joining:
Answer the current topic (optional):






User Bars
If anyone is capable of making user bars you are more than welcome to make some for us :).


Topic of the Week
Who is your favorite Grass type Gym Leader and why?


Your issue is that you were specifying width and height in your post background DIV, and the content was spilling out because you weren't telling the DIV what to do with the overflowing content. Spoiler shows what content looks like with the width and height specifications removed from the post background DIV.

If you want the post to fit in the 850x300 area you specified, you need to add "overflow:auto" or "overflow:scroll" (preferably the former) to the DIV's properties.


Clear as mud?

Thank you! I am currently learning how to code so I am still a little confused as to what exactly you're talking about. However, if I look at ti again and simply substitute the image for something else then I think I'll get it. Thanks a ton :).

donavannj May 2nd, 2015 1:43 PM

Quote:

Originally Posted by BurningLanguages (Post 8733806)
Thank you! I am currently learning how to code so I am still a little confused as to what exactly you're talking about. However, if I look at ti again and simply substitute the image for something else then I think I'll get it. Thanks a ton :).

I'll bold the area that was mucking it up when I get to a pc again, but the image itself was not the problem. It was the fact that you told the portion of the code that contains the background image to only be a certain size. And, on top of that, you didn't tell that portion of the code what to do with content you put inside it that didn't fit inside the tiny little box you told it to be.

That was the issue.

EDIT - Your outer DIV: [cd="background-color:brown; background-image:url('http://www.my-iguru.com/ipad/assets/images/ipad-wallpapers/abstract/ipad-wallpaper-electric-blue.png'); width: 850px; height: 300px;border:10px solid #000000; padding: 25px;"][/cd]

The part that was causing it to spill out from that outer DIV: width: 850px; height: 300px

You were telling the content to fit inside a box that size, and the content you made for the Grass Club was too big for that box and was spilling out, as that's the default behavior for content that doesn't fit inside a box specified by CSS.

Charlie Brown May 7th, 2015 6:52 PM

Hey everyone, would someone be able to help me with setting up CSS so I have four scrolling boxes side-by-side? The code I'm using for the scrolling boxes is below, though I'm not sure how to make it so I have four separate scrolling boxes each with their own text, side-by-side.

Members:
text
text
text
text
text
text
text
text
text


[cd=width: 200px; padding-left: 40px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; background-color: #fef0dd; height: 150px; overflow: auto][SIZE="4"][B]Members:[/B][/SIZE]
text
text
text
text
text
text
text
text
text
[/cd]

Hybrid Trainer May 9th, 2015 4:09 AM

I'm pretty sure there is another way to do this but I've always done it by using the Float tool. You can do it either left or right,but you'll have to use the clear function if you want to put stuff around the boxes or it could mess up a little bit.

Members:
text
text
text
text
text
text
text
text
text
Members:
text
text
text
text
text
text
text
text
text
Members:
text
text
text
text
text
text
text
text
text
Members:
text
text
text
text
text
text
text
text
text

Charlie Brown May 9th, 2015 4:38 AM

Quote:

Originally Posted by Hybrid Trainer (Post 8743047)
I'm pretty sure there is another way to do this but I've always done it by using the Float tool. You can do it either left or right,but you'll have to use the clear function if you want to put stuff around the boxes or it could mess up a little bit.

Thanks heaps, really appreciate it!

Etherion May 12th, 2015 4:55 PM

Spoiler:


Welcome!
Hello PC! And welcome to Mabuhay!
A fan club for Filipinos and Pinoys at heart! This club is founded upon to celebrate and acknowledge the essence of being a true Filipino. I think the importance of being a Filipino is the beautiful traits that the we have, they say we are like bamboos, strong and sturdy. We are survivors and if we were to be put in such places, it´s easy for us to adapt! We may love foreign things and maybe even aspire to be one but it is undeniably true that wherever we go, whatever happens the filipino essence is still in us!
This club is open to all! For true Filipinos and to those who are interested in learning our culture! Remeber, Pinoy ako, pinoy tayo!
The pearl of the Orient


Rules!

  • Respect the opinion of others
  • Be active! (you could win an Emblem)
  • Please stay on topic of current discussion
  • All PC and FC forum rules apply here!
  • Start topics only when activity is low! Or when there is high demand for it
The chosen land


Sign Up!
True Pinoys
Spoiler:
HTML Code:

☀Username:
☀Skype: (optional)
☀Location: (optional)
☀Topic Answer:



Pinoys at Heart
Spoiler:
HTML Code:

☀Username:
☀Skype: (optional)
☀Why do you want to join?:
☀A question for the Pinoys: (as many as you like)


For God, for people


Member List
Members
Gio7sm ☀leader
Sniper ☀leader
For nature, for country


Topic List
Topics
  • Are you proud to be Filipino?
  • Does being a Filipino and talking to foreign people seem difficult?
  • What are your favorite Filipino dishes?
  • What do you the most about the Pilippines?
Pinoy ako! Pinoy tayo!


Tsutarja May 12th, 2015 5:37 PM

Quote:

Originally Posted by gio7sm (Post 8748317)
Spoiler:

Welcome!
Hello PC! And welcome to Mabuhay!
A fan club for Filipinos and Pinoys at heart! This club is founded upon to celebrate and acknowledge the essence of being a true Filipino. I think the importance of being a Filipino is the beautiful traits that the we have, they say we are like bamboos, strong and sturdy. We are survivors and if we were to be put in such places, it´s easy for us to adapt! We may love foreign things and maybe even aspire to be one but it is undeniably true that wherever we go, whatever happens the filipino essence is still in us!
This club is open to all! For true Filipinos and to those who are interested in learning our culture! Remeber, Pinoy ako, pinoy tayo!
Join na! Tara!


Rules!

  • Respect the opinion of others
  • Be active! (you could win an Emblem)
  • Please stay on topic of current discussion
  • All PC and FC forum rules apply here!
  • Start topics only when activity is low! Or when there is high demand for it
Maka-diyos, maka-tao, mamakakalikasan, at makabansa


Sign Up!
True Pinoys
Spoiler:
HTML Code:

☀Username:
☀Skype: (optional)
☀Location: (optional)
☀Topic Answer:



Pinoys at Heart
Spoiler:
HTML Code:

☀Username:
☀Skype: (optional)
☀Why do you want to join?


Ang lupang hinirang


Sign Up!
Members


Ang lupang hinirang
[/center]








I dont know whats wrong! Why are there two boxes?

Are you by chance using the WYSIWYG editor on the forum? Check your User CP options just to make sure.

Etherion May 12th, 2015 6:04 PM

Quote:

Originally Posted by Tsutarja (Post 8748359)
Are you by chance using the WYSIWYG editor on the forum? Check your User CP options just to make sure.

Using the standard editor option

Etherion May 17th, 2015 6:54 PM

still need help ~_~

Gigadweeb June 5th, 2015 1:15 AM

I'm curious as to whether I could add a shadow to my signature or not (the full thing, not just the text)> Would look a bit nicer.

Tsutarja June 5th, 2015 6:16 AM

Quote:

Originally Posted by Gigadweeb (Post 8782938)
I'm curious as to whether I could add a shadow to my signature or not (the full thing, not just the text)> Would look a bit nicer.

It's essentially the same thing as a text shadow, but instead it's called a box shadow. If you take your text-shadow code, and replace it with box-shadow you should be good to go! :)

Ooka June 5th, 2015 6:23 AM

Quote:

Originally Posted by Gigadweeb (Post 8782938)
I'm curious as to whether I could add a shadow to my signature or not (the full thing, not just the text)> Would look a bit nicer.

You can, you'd just have to add this:

Code:

filter: drop-shadow(0 0 12px rgba(0, 0, 0, .3));


Though that overflow: hidden; would need to be removed for the shadow to show entirely. Keep in mind this isn't as well supported as the standard box-shadow:; property but it will let the shadow form to your background image.

If you can't get it working feel free to post the code here. :)

donavannj June 5th, 2015 7:22 AM

Quote:

Originally Posted by gio7sm (Post 8748317)
Spoiler:


Welcome!
Hello PC! And welcome to Mabuhay!
A fan club for Filipinos and Pinoys at heart! This club is founded upon to celebrate and acknowledge the essence of being a true Filipino. I think the importance of being a Filipino is the beautiful traits that the we have, they say we are like bamboos, strong and sturdy. We are survivors and if we were to be put in such places, it´s easy for us to adapt! We may love foreign things and maybe even aspire to be one but it is undeniably true that wherever we go, whatever happens the filipino essence is still in us!
This club is open to all! For true Filipinos and to those who are interested in learning our culture! Remeber, Pinoy ako, pinoy tayo!
The pearl of the Orient


Rules!

  • Respect the opinion of others
  • Be active! (you could win an Emblem)
  • Please stay on topic of current discussion
  • All PC and FC forum rules apply here!
  • Start topics only when activity is low! Or when there is high demand for it
The chosen land


Sign Up!
True Pinoys
Spoiler:
HTML Code:

☀Username:
☀Skype: (optional)
☀Location: (optional)
☀Topic Answer:



Pinoys at Heart
Spoiler:
HTML Code:

☀Username:
☀Skype: (optional)
☀Why do you want to join?:
☀A question for the Pinoys: (as many as you like)


For God, for people


Member List
Members
Gio7sm ☀leader
Sniper ☀leader
For nature, for country


Topic List
Topics
  • Are you proud to be Filipino?
  • Does being a Filipino and talking to foreign people seem difficult?
  • What are your favorite Filipino dishes?
  • What do you the most about the Pilippines?
Pinoy ako! Pinoy tayo!


It's because you've kind of built it so there are two boxes.

Figure out which open and close tags pair with each other to identify the problem.

Etherion June 5th, 2015 7:25 AM

Quote:

Originally Posted by donavannj (Post 8783217)
It's because you've kind of built it so there are two boxes.

Figure out which open and close tags pair with each other to identify the problem.

Someone else fixed it for me, its OK now....

StormGamer25 June 9th, 2015 12:41 AM

I need help figuring out how put text that you can scroll down.

Code:

text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa


How do i make sure the word code doesnt show over the text? Or should i be using a different code altogether?

Tsutarja June 9th, 2015 5:32 AM

Quote:

Originally Posted by StormGamer25 (Post 8789864)
I need help figuring out how put text that you can scroll down.

Code:

text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa


How do i make sure the word code doesnt show over the text? Or should i be using a different code altogether?

Do you perhaps mean like this?

text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa


Then yes, you would need to use CSS if you don't want to use the [code][/code] BB code.

Spoiler:
[css-div="width:300px;height:175px;overflow:scroll;"]text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa[/css-div]

StormGamer25 June 9th, 2015 10:45 AM

Quote:

Originally Posted by Tsutarja (Post 8790072)
Do you perhaps mean like this?

text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa


Then yes, you would need to use CSS if you don't want to use the [code][/code] BB code.

Spoiler:
[css-div="width:300px;height:175px;overflow:scroll;"]text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa[/css-div]

Oh, great! Thanks for the help!

Flannery Lue July 16th, 2015 3:48 PM

Um. I was looking into making a CSS signature, and I was editing, and previewing it to check my results... untill the forums crashed for a bit. Then I went to that 'ww3schools' website, to use their editor thingy, to test my signature whilst the forums were offline.

Now that I have my finished result, I'm a bit confused at how to convert it into the BB Code version of CSS we have here. This is what I have:


HTML Code:

<div align="center">
<div style="background: url('http://i.imgur.com/5Ffpfl8.gif') center no-repeat; width: 480px; height: 272px;">
<div style="padding-top: 210px;">
<div align="center">
<a href="http://flanneryluemoore.imgur.com/"><img src="http://i.imgur.com/tDmjSy0.png"></a>
<a href="http://www.minecraftforum.net/members/Quavelen/"><img src="http://i.imgur.com/UHWqtab.png"></a>
<a href="http://services.runescape.com/m=adventurers-log/profile?searchName=Quavelen"><img src="http://i.imgur.com/ERQRLsc.png"></a>
</div>
</div>
<div style="text-shadow: 0px 0px 8px silver; color: darkred;">
<div align="center">
<font size="4">
<font family="georgia">Love and Understand, Imagine and Believe. It will take you far.</a>
</div>
</font>
</font>
</div>
</div>
</div>
</div>
</div>
</div>



And this is what it would look like, with that HTML: (I recorded a .gif)

http://i.imgur.com/HPtfvKT.gif



Those three little images; the Imgur, MineCraft, and RuneScape icons are clickable, and each of them lead to my profile pages. With the available CSS BB Code that I know of, I'm unaware as to how I can put those icons on top of the animated flames, and make them clickable. Could someone please point me in the right direction? I've fiddled around with it enough in the signature editor, that I'm at a loss.

Tsutarja July 16th, 2015 7:17 PM

Quote:

Originally Posted by Flannery Lue (Post 8849300)
Um. I was looking into making a CSS signature, and I was editing, and previewing it to check my results... untill the forums crashed for a bit. Then I went to that 'ww3schools' website, to use their editor thingy, to test my signature whilst the forums were offline.

Now that I have my finished result, I'm a bit confused at how to convert it into the BB Code version of CSS we have here. This is what I have:


HTML Code:

<div align="center">
<div style="background: url('http://i.imgur.com/5Ffpfl8.gif') center no-repeat; width: 480px; height: 272px;">
<div style="padding-top: 210px;">
<div align="center">
<a href="http://flanneryluemoore.imgur.com/"><img src="http://i.imgur.com/tDmjSy0.png"></a>
<a href="http://www.minecraftforum.net/members/Quavelen/"><img src="http://i.imgur.com/UHWqtab.png"></a>
<a href="http://services.runescape.com/m=adventurers-log/profile?searchName=Quavelen"><img src="http://i.imgur.com/ERQRLsc.png"></a>
</div>
</div>
<div style="text-shadow: 0px 0px 8px silver; color: darkred;">
<div align="center">
<font size="4">
<font family="georgia">Love and Understand, Imagine and Believe. It will take you far.</a>
</div>
</font>
</font>
</div>
</div>
</div>
</div>
</div>
</div>



And this is what it would look like, with that HTML: (I recorded a .gif)

http://i.imgur.com/HPtfvKT.gif



Those three little images; the Imgur, MineCraft, and RuneScape icons are clickable, and each of them lead to my profile pages. With the available CSS BB Code that I know of, I'm unaware as to how I can put those icons on top of the animated flames, and make them clickable. Could someone please point me in the right direction? I've fiddled around with it enough in the signature editor, that I'm at a loss.

I'm gonna attempt to see if I got this right...

Spoiler:
http://i.imgur.com/tDmjSy0.png http://i.imgur.com/UHWqtab.png http://i.imgur.com/ERQRLsc.png
Love and Understand, Imagine and Believe. It will take you far.


Hmm, is that what you needed? Here's the code to that right here:

Spoiler:
Code:

[center][div="background: url('http://i.imgur.com/5Ffpfl8.gif') center no-repeat; width: 480px; height: 272px;padding-top: 210px;text-shadow: 0px 0px 8px silver; color: darkred;font-family:georgia;"][URL="http://flanneryluemoore.imgur.com/"][IMG]http://i.imgur.com/tDmjSy0.png[/IMG][/URL] [URL="http://www.minecraftforum.net/members/Quavelen/"][IMG]http://i.imgur.com/UHWqtab.png[/IMG][/URL] [URL="http://services.runescape.com/m=adventurers-log/profile?searchName=Quavelen"][IMG]http://i.imgur.com/ERQRLsc.png[/IMG][/URL]
[SIZE="3"]Love and Understand, Imagine and Believe. It will take you far.[/SIZE][/div][/center]




Hope this helps! :)


All times are GMT -8. The time now is 11:04 PM.


Like our Facebook Page Follow us on Twitter © 2002 - 2018 The PokéCommunity™, pokecommunity.com.
Pokémon characters and images belong to The Pokémon Company International and Nintendo. This website is in no way affiliated with or endorsed by Nintendo, Creatures, GAMEFREAK, The Pokémon Company or The Pokémon Company International. We just love Pokémon.
All forum styles, their images (unless noted otherwise) and site designs are © 2002 - 2016 The PokéCommunity / PokéCommunity.com.
PokéCommunity™ is a trademark of The PokéCommunity. All rights reserved. Sponsor advertisements do not imply our endorsement of that product or service. User generated content remains the property of its creator.

Acknowledgements
Use of PokéCommunity Assets
vB Optimise by DragonByte Technologies Ltd © 2023.