• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.

CSS Help & Resources

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Yeah, each image you would want to be unselectable you would put it inside a div and make the image the background of the div instead of putting the image itself inside of it. The only problem is you'll have to probably do a bit of rearranging to make sure it fits where you want it to.
 

Cosmotone8

silhouette of the past
1,758
Posts
12
Years
Alright, according to some people, I apparently have a scrollbar in my sig, but I can't see it. I'm using Chrome right now and the Atop Mt. Coronet theme, and Aerilyn (who can see a scrollbar) is using Firefox. I tried slimming everything down, getting rid of extra padding and such, but apparently the scrollbar is still there. Can anyone else see a scrollbar, and how would I fix it?
 
Last edited:

Archenoth

(cozy)
467
Posts
12
Years
This is not technically a CSS question, but it deals with calling the CSS file, so I figured this thread should work.

So, when you are in a fold inside of your website root and you call a file in the root (such as the CSS file, in my case) you can use ../style.css
Code:
<link rel="stylesheet" href="../style.css">

Now to my question:

How do you do this two folders (or more) in?

I am trying to call the CSS sheet in the root of the website, but I'm calling it from /folder1/folder2/ and ../ isn't working. (..../ ?)

EDIT: Preferably with out using
Code:
<href="http://www.URLofSite.com/style.css">

To use root, use "/style.css"... "/" will always resolve to the root of your site. And, while I advise not doing this, you can traverse multiple folders up like "../..". (Really ugly)
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Alright, according to some people, I apparently have a scrollbar in my sig, but I can't see it. I'm using Chrome right now and the Atop Mt. Coronet theme, and Aerilyn (who can see a scrollbar) is using Firefox. I tried slimming everything down, getting rid of extra padding and such, but apparently the scrollbar is still there. Can anyone else see a scrollbar, and how would I fix it?

I'm using Chrome and Volcarona style and I can't see it. Regardless, it's an easy fix! Just measure how tall and how wide your entire signature is, and wrap this around it:

[div="height:Xpx;width:Ypx;overflow:hidden;"][/div]

Obviously replace the X and Y with the relevant numbers. This encloses the entire signature in a box and the rest of the stuff outside that may cause a scrollbar is completely hidden. :)
 

Demon Days

Element of Magic
177
Posts
11
Years
Reposting this from my Question thread, because I forgot about this thread.
Gentlemen, I have a problem. After returning for good on a new account, I've been mucking around with CSS to get a nice, good signature like I had on my old, old account. However, for the life of me I cannot get rounded borders. The code:
Code:
[*css-div=";-moz-border-radius-topleft: 25px;  -moz-border-radius-topright: 25px; width: 400px; height: 50px;  background-color: #000000"][/div][*css-div="color: white;cursor:  crosshair;   background-image:url("pootmybackgroundhere,stoopid15postsrule");   width: 400px; height: 137px; font-size: 10px; text-align: center;   -moz-border-radius-topright: 15px;"]   [/div][*css-div="-moz-border-radius-bottomright: 25px;  -moz-border-radius-bottomleft: 25px; width: 400px; height: 50px;  background-color: #000000"][/div]
Remove the asterisks.
Any help is appreciated, thanks.
 

twistedpuppy

Siriusly Twisted
1,354
Posts
15
Years
  • Seen Jul 18, 2015
Reposting this from my Question thread, because I forgot about this thread.
Gentlemen, I have a problem. After returning for good on a new account, I've been mucking around with CSS to get a nice, good signature like I had on my old, old account. However, for the life of me I cannot get rounded borders. The code:
Code:
[*css-div=";-moz-border-radius-topleft: 25px;  -moz-border-radius-topright: 25px; width: 400px; height: 50px;  background-color: #000000"][/div][*css-div="color: white;cursor:  crosshair;   background-image:url("pootmybackgroundhere,stoopid15postsrule");   width: 400px; height: 137px; font-size: 10px; text-align: center;   -moz-border-radius-topright: 15px;"]   [/div][*css-div="-moz-border-radius-bottomright: 25px;  -moz-border-radius-bottomleft: 25px; width: 400px; height: 50px;  background-color: #000000"][/div]
Remove the asterisks.
Any help is appreciated, thanks.

Give this a try and see how it works for you.

Code:
[PLAIN][div="-moz-border-top-left-radius: 25px; border-top-left-radius: 25px; -moz-border-top-right-radius: 25px; border-top-right-radius: 25px; width: 400px; height: 50px;  background-color: #000000;"][/div][div="color: white; cursor:  crosshair;  background-image: url('backgroundgoes here'); width: 400px; height: 137px; font-size: 10px; text-align: center;  -moz-border-top-right-radius: 15px;"][/div][div="-moz-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px; -moz-border-bottom-right-radius: 25px; border-bottom-right-radius: 25px; width: 400px; height: 50px; background-color: #000000;"][/div][/PLAIN]
 

Demon Days

Element of Magic
177
Posts
11
Years
Give this a try and see how it works for you.

Code:
[PLAIN][div="-moz-border-top-left-radius: 25px; border-top-left-radius: 25px; -moz-border-top-right-radius: 25px; border-top-right-radius: 25px; width: 400px; height: 50px;  background-color: #000000;"][/div][div="color: white; cursor:  crosshair;  background-image: url('backgroundgoes here'); width: 400px; height: 137px; font-size: 10px; text-align: center;  -moz-border-top-right-radius: 15px;"][/div][div="-moz-border-bottom-left-radius: 25px; border-bottom-left-radius: 25px; -moz-border-bottom-right-radius: 25px; border-bottom-right-radius: 25px; width: 400px; height: 50px; background-color: #000000;"][/div][/PLAIN]
Thank you, that worked! What was I missing/doing incorrectly?
 

twistedpuppy

Siriusly Twisted
1,354
Posts
15
Years
  • Seen Jul 18, 2015
The original code you had (-moz-border-radius-topleft) was missing radius (-moz-border-top-left-radius). I also included -border-top/bottom-left/right-radius because some browsers don't support -moz-.
 

Demon Days

Element of Magic
177
Posts
11
Years
Hello guys, I have a problem here. Look at this code (remove the *s):

[*CENTER][*COLOR=#000000][*css-div="width:500px; height:1000px; color:#FFFFF2; background-color:#000000; font-size:10px; text-shadow:1px 1px #8B8B83;"][*FONT=Cambria][*SIZE=3][*I]
[*SIZE=4]Land of the Refresher
[/SIZE][/I][/SIZE][/FONT][/COLOR][*COLOR=#000000][*COLOR=#000000][*FONT=Cambria][*B]1.[/B] Nearly every Pokémon I have up will be [*B]cloned[/B]. If you don't like this, please leave. There's literally no difference.
[*B]2.[/B] Please don't be rude and/or impatient. I will have to get around to everyone.[/FONT][/COLOR][/COLOR][/div][/CENTER]

Now, I want to have a few boxes in there to seperate it a bit. I also want to have a picture. However, whenever I put the picture or a seperate css-div code in there, it breaks the whole thing. :/ Do any of you guys know why this is happening, and how to fix it and/or tell me how to place a css-div box inside there (if you do the code yourself, tell me the solution as well, so this doesn't happen again). Thanks!
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
In the future, you can use the [noparse][/noparse] code to post something like that on the forums without having to put *s in it or anything. Makes it much easier to read/edit that way.

That being said, I'm not sure what problem you're having with the codes. I just put in a box around your text and had no problem, and then added a picture and similarly had zero problem. Maybe you can tell us what you did and screenshot the problem? Either way, in spoilers I have the code that I used that worked just fine.

Spoiler:
 

Demon Days

Element of Magic
177
Posts
11
Years
In the future, you can use the [noparse][/noparse] code to post something like that on the forums without having to put *s in it or anything. Makes it much easier to read/edit that way.

That being said, I'm not sure what problem you're having with the codes. I just put in a box around your text and had no problem, and then added a picture and similarly had zero problem. Maybe you can tell us what you did and screenshot the problem? Either way, in spoilers I have the code that I used that worked just fine.

Spoiler:
Oh, don't worry about it. I was afraid someone would answer. Apparently the problem was that some pesky BBCode had generated itself in. >:C Thanks anyway!
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
It looks like he's doing a trade shop, which would be a certain height and then have a scrollbar. Either that or he just put in a fixed height to test his code; I put in fixed sizes to test code all the time when my actual code will be variable.
 

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
I absolutely love css, I wish all browsers were up to date on all the css attributes but that may never happen. Here is some CSS i wrote just now to test out some things.


Code:
body{
background-color: #262626;
background-image: url("cross-pattern.png");
}
.logo-header{
margin-left: auto;
margin-right: auto;
margin-top: 25px;
width: 900px;
height: 100px;
background: rgb(165,165,165); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(165,165,165,1) 0%, rgba(89,89,89,1) 56%, rgba(89,89,89,1) 80%, rgba(51,51,51,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(165,165,165,1)), color-stop(56%,rgba(89,89,89,1)), color-stop(80%,rgba(89,89,89,1)), color-stop(100%,rgba(51,51,51,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(165,165,165,1) 0%,rgba(89,89,89,1) 56%,rgba(89,89,89,1) 80%,rgba(51,51,51,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(165,165,165,1) 0%,rgba(89,89,89,1) 56%,rgba(89,89,89,1) 80%,rgba(51,51,51,1) 100%); /* Opera 11.10+ */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: solid;
border-width: 2px;

}
.logo{
background-image: url("Logo.png");
position: absolute;
width: 269px;
height: 60px;
margin-top: 25px;

}
.login input[type="text"]{
position: absolute;
width: 100px;
left: 775px;
top: 35px;
border: solid 1px #ccc; 
box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 

}
.login input[type="password"]{
position: absolute;
width: 100px;
left: 885px;
top: 35px;
border: solid 1px #ccc; 
box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 

}
.login input[type="submit"]{
position: absolute;
background-color: #dcdcdc;
text-decoration:none;
border: 1px solid #666;
width:60px;
left: 1000px;
top: 35px;
box-shadow: 1px 2px 4px rgba(0,0,0,0.2); 

}
.content
{
margin-left: auto;
margin-right: auto;
width: 900px;
height:900px;
background-color: #b1b1b1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #1a1a1a;
background: rgb(161,161,161); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(161,161,161,1) 0%, rgba(161,161,161,1) 50%, rgba(114,114,114,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(161,161,161,1)), color-stop(50%,rgba(161,161,161,1)), color-stop(100%,rgba(114,114,114,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(161,161,161,1) 0%,rgba(161,161,161,1) 50%,rgba(114,114,114,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(161,161,161,1) 0%,rgba(161,161,161,1) 50%,rgba(114,114,114,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(161,161,161,1) 0%,rgba(161,161,161,1) 50%,rgba(114,114,114,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1a1a1', endColorstr='#727272',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}
.navigation{
position: absolute;
left: 192px;
top: 140px;
width: 225px;
height: 320px;
background-color: #262626;
background-image: url("cross-pattern.png");
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

}
.navigation ul{
position:absolute;
left: -32px;
margin-top: 10px;
width: 225px;
height: 230px;
font-family: Arial;
font-size:18px;
list-style:none;
overflow: auto;
text-align:center;
}
.navigation li a, a:active, a:hover, a:visited{
text-decoration: none;
color: #000;
height: 30px;
width: 165px;
display: block;
background:#a1a1a1;
padding:5px 20px;
border:2px solid #1a1a1a;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

}
.navigation li  a:hover{
background:#b9b9b9;
font-weight: bold; 
border:2px solid #b1b1b1;

}
.search input[type="text"]{
width: 180px;
margin-left: 18px;
margin-top: 250px;

}
.search input[type="submit"]{
border:2px solid #1a1a1a;
background:#a1a1a1;
background-image: url("search.png");
width: 40px;
height: 40px;
margin-top: 2px;
margin-left: 90px;

}
.search input[type="submit"]:hover{
border:2px solid #b1b1b1;
background:#b9b9b9;
background-image: url("search.png");

}
.video-bg{
position: absolute;
left: 430px;
top: 140px;
width: 640px;
height: 400px;
background-color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 1px 2px 4px rgba(0,0,0,0.2); 


}
.video{
position: absolute;
left: 15px;
top: 12px;
box-shadow: 2px 4px 5px rgba(0,0,0,0.6); 

}
.news-bg{
position: absolute;
left: 430px;
top: 555px;
width: 640px;
height: 400px;
background-color: #ffffff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #ccc;
box-shadow: 1px 2px 4px rgba(0,0,0,0.2); 

}
.news-header{
margin-left: auto;
margin-right: auto;
margin-top: 5px;
width: 630px;
height: 30px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border: 1px solid #a1a1a1;
background: rgb(161,161,161); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(161,161,161,1) 0%, rgba(161,161,161,1) 18%, rgba(114,114,114,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(161,161,161,1)), color-stop(18%,rgba(161,161,161,1)), color-stop(100%,rgba(114,114,114,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(161,161,161,1) 0%,rgba(161,161,161,1) 18%,rgba(114,114,114,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(161,161,161,1) 0%,rgba(161,161,161,1) 18%,rgba(114,114,114,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(161,161,161,1) 0%,rgba(161,161,161,1) 18%,rgba(114,114,114,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1a1a1', endColorstr='#727272',GradientType=1 ); /* IE6-9 */

}
.news-header p {
position: absolute;
font-family: arial;
font-weight: bold;
letter-spacing: 1px;
color: #1a1a1a;
top: -5px;
left: 15px;
}
 
Last edited:

IceFyr1928

Is now DeathofShadows
758
Posts
11
Years
Alright, moar css issues posting-wise.

Code:
[PLAIN][cd=background color: black; color: white; border-radius: 10px;][center][size=6][glow=red][b]Kalek Noire - Chapter Two[/b][/glow][/size][/center][/cd]
[cd=float: left;][div=background-color: black; color: white; height: 200px; width: 200px;][size=4][center][b][u]CHAPTER INFO:[/u][/b][/center][/size]
[b]Teammates:[/b]
•Destiny (Nakuzumi)

[b]Missions:[/b]
•Find source of abnormal magic levels
•Neutralize the source
•Return to Limbo safely
[/div]
[div=border-radius: 10px; background-color: black; color: white; width: 300px;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget ligula lacinia mi pellentesque elementum ac nec mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in enim ante. Morbi tempor, risus et ultrices pretium, dolor enim mattis purus, in consectetur ante neque non velit. Integer semper pharetra quam et tristique. Ut iaculis sem elit. Cras malesuada, ante vel adipiscing ornare, dolor neque malesuada eros, vitae lacinia est leo sit amet nisl. Mauris vel quam sed urna luctus semper ut non sem. Quisque molestie, libero a mollis egestas, elit metus semper nisl, eu pellentesque tortor neque nec velit. Aliquam vitae libero magna. Curabitur mi elit, lacinia sit amet euismod eu, rutrum ut mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum neque ac lacus pulvinar a elementum massa mattis. Proin euismod congue pellentesque.

Etiam ullamcorper est eu sem iaculis at sodales nisl placerat. Cras quis lorem est, sit amet laoreet ante. Fusce quis lorem est, at viverra tortor. Integer facilisis commodo magna non viverra. Ut eget dignissim leo. Vivamus odio nibh, scelerisque sed accumsan sed, auctor non nibh. Nullam quis est at turpis sollicitudin suscipit. Pellentesque ut erat vel metus pharetra luctus. Cras urna nisl, lobortis non congue vel, imperdiet id orci.
[/div][/cd][/PLAIN]

Something's off with it's placement in the post area (it overlaps my sig), and despite my best efforts, the two text boxes won't go next to eachother. Any help?


EDIT: Never mind, figured it out. :)
 
Last edited:

Trev

[span="font-size: 8px; color: white;"][font="Monts
1,505
Posts
11
Years
  • Age 27
  • Seen Nov 15, 2023
It looks like this thread has somewhat died, but I'm here to make a contribution, I guess. I haven't really found any tutorials on how to do this on PC so either I'm the first one or I really need to do more searching :P

The Super-Short Tutorial on Custom Mouse Cursors on Your PC Posts and Sigs

Yep, you heard it here first. For all those dynamos who don't like the crosshair cursor offered by standard CSS but don't want a simple, plain mouse hovering over their posts or sigs, there's now a way for you to have your own custom mouse cursor!

Step 1: Pick a cursor!​

Obviously, this is the easiest step. Simply pick what mouse cursor you want to utilize. A good site for some creative, flashy ones would be Cursors-4U.com, which is the one I used to get my cake cursor in my signature. There are other websites available to get cursors from, but I prefer this one because of the next step.

Step 2: Get the .cur file!​

"Wait, what's that?" The .cur file is the file that makes the cursor, well, a cursor. It's hard to explain, really, but you need it to make this code work. In order to find this using Cursors-4U, click on the one you want to use and go to the box labelled CSS-Style Sheet Only Code. Locate this:

jM9d655.png


That's the link to the .cur file, which we will be utilize. Copy it and paste it down somewhere. I don't know where this would be on any other websites, sorry, so if you can't find it you might wanna look elsewhere. I'm sure most websites will have it, however. If you seriously can't find it, the .png file of the cursor works as well. Simply right click on the image and select "Copy Image URL".

Step 3: Creating the code!​

Okay, this step is probably the simplest, since all I really have to do is give you the code. Well, yep, here it be:

Code:
[PLAIN][div="cursor: url("*url to the .cur or .png file you picked*"), progress !important;"][/div][/PLAIN]

Now, what does "progress !important" mean? I have no clue. I'm guessing that it's there to supersede the regular cursor and display the custom one, but that's just my guess. Either way, you gotta have it for this to work. With that, the code is ready to be inserted!

Step 4: Adding it to your post and/or signature!​

Here we go, the main reason everyone looks at this post. Now that your custom code is ready, how do you add it to your post? Very simple! Simply take the code and wrap it around the post, and your cursor will show up on it, like so:

Spoiler:

Code:
[PLAIN][center][div="cursor: url("http://ani.cursors-4u.net/food/foo-7/foo656.cur"), progress !important;"][div="width: 400px; height: 400px; background-color: grey;"]omg a cursor!!!![/div][/div][/center][/PLAIN]

Okay, so before we go on, I must ask you: what did you notice about that cursor, other than the fact that it's a Starbucks Tazo Green Tea? The main issue is that this doesn't stay primarily on the CSS we generated - it also goes to the outside of it. If you so please to do this, then go ahead, as it won't show the cursor on any other post except for the one the code is on. However, if you want it contained inside like this:

Spoiler:

... then simply use this:

Code:
[PLAIN][center][div="width: 400px; height: 400px; background-color: grey; cursor: url("http://ani.cursors-4u.net/food/foo-7/foo656.cur"), progress !important;"]omg a contained cursor!!!![/div][/center][/PLAIN]

What's the difference between the two? The second has the code for the cursor directly within the code that creates the box, meaning that the custom cursor will return to normal outside of the box, as it does above. I recommend the second method for signatures, as it looks so much cooler. The first method, I would recommend for posts like tutorials, guides, etc. because it just works better, I would think.

Okay, that's it. Good luck with all your cursor needs!​
 
Last edited:

Omicron

the day was mine
4,430
Posts
14
Years
Hello everybody! I need some help with CSS.

I was doing the CSS for my trade shop and everything seemed to be ok until I tried to put the information of the pokemon in the boxes. The text goes all over the template and doesn't stay in the boxes. Also, the scroll bar won't appear. I'm not sure what might be wrong, so any help will be highly appreciated.


Here's the code:

Code:
[PLAIN][span=font-size: 160%; color: #C51C30; font-family: cambria; font-style: italic;][a id]gs_Johto[/a id]Johto[/span][cd=background-color: #CAE1FF; border: 1px #c9c9c7 solid; width: 370px; height: 400px; font: calibri; text-align: left; font-size: 11px; overflow: visible;][cd=margin-left: 6px; margin-top: 6px; margin-bottom: 6px;]
[/cd][/cd][/PLAIN]

And here's a link to my shop so you can see the problem for yourselves: http://www.pokecommunity.com/showthread.php?t=309307
 
Last edited:

AluminiumOxide

Aka Ansirent
867
Posts
10
Years
Hey guys please tell me the hex code of staffadminitstator like etc if we add these color change to yellow and blue if so what is the hex code for Staff add and add ? please tell me the hex codes thank you
 
27,739
Posts
14
Years
Hey guys please tell me the hex code of staffadminitstator like etc if we add these color change to yellow and blue if so what is the hex code for Staff add and add ? please tell me the hex codes thank you
[supporter]Supporter[/supporter] = #5B9F36
Mod = #4282B5
Smod = #FF9900
Assistant Admin = #308D5E
Staff Admin = #CF0505
Admin = #663399

And for the record, please keep questions like this to perhaps the Quick Questions & Answers thread since this question doesn't really pertain to CSS at all. Thanks. :)
 
Back
Top