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)

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


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.