CSS Help & Resources

Tsutarja · Nov 2, 2014

epicassassin1811 said:
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 · Nov 2, 2014

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

Oryx · Nov 2, 2014

epicassassin1811 said:
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 · Nov 2, 2014

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

Code:

[PLAIN][FONT=Tahoma][COLOR=Sienna][SIZE=2][FONT=arial][INDENT][div=" color: black;cursor: normal; font-size: 14px; text-align: center;"][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][/div][/div][COLOR=#fff]
[/COLOR][/INDENT][/FONT][/SIZE][/COLOR][/FONT][/PLAIN]

Any help, please?

Wobbu · Nov 2, 2014

Spoiler:

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 · Nov 2, 2014

Wobbu said:
Spoiler:

Sir Pedro's GFX Shop/Gallery

Introduction

Gallery Area

Request Form

Completed Requests

[h2][/h2]

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:

[PLAIN][FONT=Tahoma][COLOR=Sienna][SIZE=2][FONT=arial][div="color: black;cursor: normal; font-size: 14px; text-align: center;"][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]
[/div][/div][/FONT][/SIZE][/FONT][/PLAIN]

Nick · Nov 2, 2014

epicassassin1811 said:

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:

[PLAIN][FONT=Tahoma][COLOR=Sienna][SIZE=2][FONT=arial][div="color: black;cursor: normal; font-size: 14px; text-align: center;"][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]
[/div][/div][/FONT][/SIZE][/FONT][/PLAIN]

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:

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

JesteR · Nov 3, 2014

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

Treecko · Nov 3, 2014

Peitharchia said:
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.

Spoiler:

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 · Nov 8, 2014

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

Omicron · Nov 8, 2014

TheKantoKid said:
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 · Nov 14, 2014

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 · Nov 14, 2014

Gigadweeb said:
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 · Nov 16, 2014

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

Zeffy · Nov 16, 2014

かすみ said:
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 · Nov 20, 2014

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.

Spoiler:

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

Wobbu · Nov 20, 2014

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:

Joexv · Nov 28, 2014

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:

[div=position: center;]
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;
}
[/div]

Hiatus · Nov 29, 2014

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:

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 · Dec 11, 2014

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

CSS Help & Resources

CoquettishCat

bunger bunger bunger bunger

Introduction

Gallery Area

Request Form

Completed Requests

Introduction

Gallery Area

Request Form

Completed Requests

the princess without voice

Let's go, Pikachu!

the day was mine

[b][i]The Black Swordsman[/i][/b]

CoquettishCat

Hotdog MAn

g'day

bunger bunger bunger bunger

ManMadeOfGouda joexv.github.io

Oliver Queen