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)

Oryx February 8th, 2013 8:56 AM

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 February 12th, 2013 11:55 AM

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?

Archenoth February 17th, 2013 9:34 AM

Quote:

Originally Posted by quilzel (Post 7526068)
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 February 17th, 2013 9:45 AM

Quote:

Originally Posted by Cosmotone8 (Post 7535296)
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:

[css-div="height:Xpx;width:Ypx;overflow:hidden;"][/css-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 March 2nd, 2013 6:52 PM

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"][/css-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;"]  [/css-div][*css-div="-moz-border-radius-bottomright: 25px;  -moz-border-radius-bottomleft: 25px; width: 400px; height: 50px;  background-color: #000000"][/css-div]


Remove the asterisks.
Any help is appreciated, thanks.

twistedpuppy March 2nd, 2013 6:58 PM

Quote:

Originally Posted by Discordant (Post 7562197)
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"][/css-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;"]  [/css-div][*css-div="-moz-border-radius-bottomright: 25px;  -moz-border-radius-bottomleft: 25px; width: 400px; height: 50px;  background-color: #000000"][/css-div]


Remove the asterisks.
Any help is appreciated, thanks.

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

Code:

[css-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;"][/css-div][css-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;"][/css-div][css-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;"][/css-div]



Demon Days March 2nd, 2013 7:01 PM

Quote:

Originally Posted by twistedpuppy (Post 7562203)
Give this a try and see how it works for you.

Code:

[css-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;"][/css-div][css-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;"][/css-div][css-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;"][/css-div]



Thank you, that worked! What was I missing/doing incorrectly?

twistedpuppy March 2nd, 2013 7:15 PM

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 April 26th, 2013 6:53 PM

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][/css-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 April 26th, 2013 9:52 PM

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:
[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][css-div="width:460px;padding:10px;background-color:#808080;"][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][/css-div]

[img]http://i.imgur.com/3p6nCvc.jpg[/img][/css-div][/CENTER]

Demon Days April 26th, 2013 10:24 PM

Quote:

Originally Posted by Toujours (Post 7641047)
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:
[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][css-div="width:460px;padding:10px;background-color:#808080;"][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][/css-div]

[img]http://i.imgur.com/3p6nCvc.jpg[/img][/css-div][/CENTER]

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!

droomph April 27th, 2013 1:45 PM

I'll also just say right here that it doesn't really…work?…to have so much empty space, so…:P

Oryx April 27th, 2013 1:54 PM

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 April 30th, 2013 6:44 PM

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;
}



IceFyr1928 May 10th, 2013 4:54 PM

Alright, moar css issues posting-wise.

Code:

[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;][css-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
[/css-div]
[css-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.
[/css-div][/cd]


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. :)

Trev August 15th, 2013 10:19 AM

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:

http://i.imgur.com/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:

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


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:
omg a cursor!!!!


Code:

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


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:
omg a contained cursor!!!!


... then simply use this:

Code:

[center][css-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!!!![/css-div][/center]


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!


Omicron October 2nd, 2013 1:51 PM

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:

[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]


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

AluminiumOxide October 24th, 2013 7:52 AM

Hey guys please tell me the hex code of staffadminitstator like [smod] [mod] etc if we add these color change to yellow and blue if [mod] so what is the hex code for Staff add and add ? please tell me the hex codes thank you

Tsutarja October 24th, 2013 10:45 AM

Quote:

Originally Posted by Rhytham (Post 7898622)
Hey guys please tell me the hex code of staffadminitstator like [smod] [mod] etc if we add these color change to yellow and blue if [mod] 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. :)

GreyVirgo October 30th, 2013 9:33 PM

I wonder if this is correct.
Example:

]cd=" background-color: lightgrey; width: 400px; border-color: black; border-style: dotted solid;"]
Sup?
[/cd[

Tsutarja October 31st, 2013 2:48 AM

Sup?

Is that what you're looking for?

GreyVirgo October 31st, 2013 9:54 AM

Quote:

Originally Posted by ZachLMedia (Post 7911408)
Sup?

Is that what you're looking for?

Thank You yes that's it. (Just want someone to test it out because I saw someone with double borders in another forum.)

~Shy November 20th, 2013 8:56 AM

How do you make a playlist is it possible?

donavannj November 21st, 2013 8:50 AM

Quote:

Originally Posted by ~Shy (Post 7945733)
How do you make a playlist is it possible?

I don't think it is possible to create a playlist with any of the BBCodes or CSS options available at PC. The [sound][/sound] tag is BBCode, by the way.

~Shy November 21st, 2013 6:44 PM

Ohh I see thanks
yea I got that part

Meganium November 25th, 2013 7:19 PM

I tried going directly to the link you provided, but I keep getting a "404 - not found" error on every refresh. The actual code is fine, it's the sprite's link you might need to work on. It's possible that you might have to find another Tepig sprite that works.

Ghost Lunis November 25th, 2013 7:40 PM

I was kind of thinking that when I got the same error but I was on my iPhone and those things are wonky. Thank you for looking into this :)

quilzel November 26th, 2013 5:15 AM

Quote:

Originally Posted by lunis (Post 7954292)
I was kind of thinking that when I got the same error but I was on my iPhone and those things are wonky. Thank you for looking into this :)

It looks like that website is experiencing some issues at the moment. your code looks okay, I'd wait until the website comes back up before changing anything.

Also you can use the [noparse] tag, which simply stops code inside of the tag from rendering.

Example:
[URL="http://www.pokecommunity.com/showpost.php?p=7951769&postcount=213"][IMG]http://www.pokemonelite2000.com/sprites/bws/498.png[/IMG][/URL]

Ghost Lunis November 26th, 2013 5:49 AM

Quote:

Originally Posted by quilzel (Post 7954927)
It looks like that website is experiencing some issues at the moment. your code looks okay, I'd wait until the website comes back up before changing anything.

Also you can use the [noparse] tag, which simply stops code inside of the tag from rendering.

Example:
[URL="http://www.pokecommunity.com/showpost.php?p=7951769&postcount=213"][IMG]http://www.pokemonelite2000.com/sprites/bws/498.png[/IMG][/URL]

Thank you very much :)
I didn't know about the [noparse] thing. That is a good bit of info.

White Raven November 30th, 2013 10:56 AM

I am trying to make a sig CSS. Can anyone do an example? I won't copy the CSS I just want to see how the coding works. Besides, I like doing stuff my way.

Tsutarja November 30th, 2013 11:02 AM

Quote:

Originally Posted by Jeannes.Thinkin (Post 7962791)
I am trying to make a sig CSS. Can anyone do an example? I won't copy the CSS I just want to see how the coding works. Besides, I like doing stuff my way.

CSS can work in many several different ways. Are you looking for something specific?

Here's some examples:

text here


text here

GreyVirgo December 13th, 2013 10:00 PM

I have a problem with my signature.
I really can't see a border on it.
Even tho I already did make it right.
Did I do somthin' wrong?

donavannj December 13th, 2013 10:11 PM

http://i337.photobucket.com/albums/n398/donavannj/border_zps39497483.png

That image is what I see in both Firefox and Chrome for your signature, and I do see a border there. Is the border where you wanted it to be?

GreyVirgo December 13th, 2013 10:43 PM

Quote:

Originally Posted by donavannj (Post 7986992)
http://i337.photobucket.com/albums/n398/donavannj/border_zps39497483.png

That image is what I see in both Firefox and Chrome for your signature, and I do see a border there. Is the border where you wanted it to be?

That's not what I meant.
I was not referring to the CSS inside the image which is the background.
The border of the image I used is supposed to be there but I can't see it.

Hiatus December 13th, 2013 11:56 PM

Quote:

Originally Posted by GreyVirgo (Post 7987030)
That's not what I meant.
I was not referring to the CSS inside the image which is the background.
The border of the image I used is supposed to be there but I can't see it.

Code:

border-color: black;
border-width: 2px;
border-style:
solid;


This is your current CSS, right? There seems to be a line-break between "border-style:" and "solid;", so try removing that and see if it helps. (: If it doesn't, then add "border: 2px solid black!important;" at the end of your code.

GreyVirgo December 14th, 2013 12:06 AM

Thank you Nymphadora it worked!

GreyVirgo December 21st, 2013 5:39 AM

Question:
How does the text decoration "blink" work?

Problem:
I have been thinking to put an image in my signature which has CSS and this box which has it's opacity which is 0.6 or what was that.... can't be moved to the left.... I'm trying to put this-----> "background-position: left" command but it doesn't work feel free to use inspect element on my signature and figure the problem out please.... or check the CSS I used.

CSS coding I used:
Code:

[center][cd=" background-color: lightgrey; border-color: black; border-width: 2px; border-style: solid; border-top-right-radius: 2em; border-bottom-right-radius: 2em; width: 365px; height: 208px;"][cd=" background-color: black; background-position: left; width: 155px; height: 20; opacity: 0.6"][COLOR="LightGreen"]Pair: Saturnus

Other Forums Im In:

EGC Account: Grey
PHO Account: XLR8
LV Account: Grey

Contact: PM or VM

"I love making out with lamps!" - Nigahiga]/COLOR]]/cd]]/cd]]/center]



donavannj December 21st, 2013 5:58 PM

It's probably the center BBCode tag you've got wrapped around it that's breaking things.

With the center tag:
Pair: Saturnus

Other Forums Im In:

EGC Account: Grey
PHO Account: XLR8
LV Account: Grey

Contact: PM or VM

"I love making out with lamps!" - Nigahiga


Without:
Pair: Saturnus

Other Forums Im In:

EGC Account: Grey
PHO Account: XLR8
LV Account: Grey

Contact: PM or VM

"I love making out with lamps!" - Nigahiga


As for your question, "blink" works basically by making the text "animated" and alternating between having the text being invisible and visible. It's considered a very annoying thing and poor web design and the 5 mainstream browsers do not support it anymore.

CrimsonFlames December 22nd, 2013 6:13 AM

Just wonderin' how I can make my text with out opacity.... it looks really weird....

donavannj December 22nd, 2013 9:12 AM

Quote:

Originally Posted by ♣Spades♣ (Post 7999351)
Just wonderin' how I can make my text with out opacity.... it looks really weird....

Create a [cd] for the text that is separate from the one that applies the background's opacity and define the opacity of that text using that DIV.

Wobbu December 22nd, 2013 3:32 PM

Quote:

Originally Posted by ♣Spades♣ (Post 7999351)
Just wonderin' how I can make my text with out opacity.... it looks really weird....

Additionally, you can use the command rgba (0, 0, 0, 0.6) for the color of your box. The a determines the opacity of the background rather than the text and the rgb determines the color of your box.

acatfrommars December 25th, 2013 9:55 PM

Is tutoring still a thing? Because I've always wanted to learn CSS, and to eventually make a skin for VB CS3 an CS4

seeker December 30th, 2013 7:57 PM

Quote:

Originally Posted by Bruce Banner (Post 8004839)
Is tutoring still a thing? Because I've always wanted to learn CSS, and to eventually make a skin for VB CS3 an CS4

It died down some time ago since it was quite hard to keep a track of, not sure if anyone set it up again, or wants to. Though if you ever run into any problems or want to ask ant questions (no matter how silly they sound), you should feel free to post here in this thread. You have nothing to be afraid of. CSS isn't easy in the beginning, I know that all too well!

Tsutarja January 5th, 2014 7:01 PM

Quote:

Originally Posted by Team Fail (Post 8024982)
Does anyone remember the alt code that makes usertitles disappear like I have mine right now? I set it a long time back and I can't find it anymore.

If anyone finds this, let me know as well please.

Tsutarja January 10th, 2014 5:12 PM

Quote:

Originally Posted by Shadow Sneak Sableye (Post 8033039)
Can anyone help me with why my signature doubled up like that?

What exactly do you mean by "doubled up"?

donavannj January 12th, 2014 8:32 PM

http://www.pokecommunity.com/showthread.php?t=316697

Anyone got time to work with me on making the colossal box I made at the top right corner into a collapsible box that'll work in all browsers? So far, the only means I'm seeing is to make it into another CSS-DIV and using some elements and properties that apparently don't render properly in Chrome or Safari. Anyone got any ideas?

Code of the box for reference:

Code:

[css-div="width: 180px;height: 310px;overflow: hidden;position: fixed;top: 11px;right: 11px;"][css-div="font: bold 15px arial, sans-serif;color: #6495ED;text-align: center;position: relative; padding: 7px 0; left: 1px;top: 23px;width: 170px; background-color: #F8F8FF;border:3px solid #6495ED;"][h3]Quick Links[/h3]
[aurl="top"]Back to Top[/aurl]

[aurl="terms"]Glossary of Terms[/aurl]

[aurl="start"]Getting Started[/aurl]*

[aurl="spotfakes"]How to Spot Fakes[/aurl]

[aurl="earn"]Learn to Play[/aurl]

*Coming soon!
[/css-div][/css-div]



Wobbu January 16th, 2014 9:49 PM

Quote:

Originally Posted by donavannj (Post 8036912)
http://www.pokecommunity.com/showthread.php?t=316697

Anyone got time to work with me on making the colossal box I made at the top right corner into a collapsible box that'll work in all browsers? So far, the only means I'm seeing is to make it into another CSS-DIV and using some elements and properties that apparently don't render properly in Chrome or Safari. Anyone got any ideas?

Do you mean something like this?



Code:

[css-div="width: 180px;height: 100%;overflow: hidden;position: fixed;top: 11px;right: 11px;"][css-div="font: bold 15px arial, sans-serif;color: #6495ED;text-align: center; width: 170px; background-color: #F8F8FF;border:3px solid #6495ED;"][h3]Quick Links[/h3]
[aurl="top"]Back to Top[/aurl]

[textcollapse="Click to expand"][aurl="terms"]Glossary of Terms[/aurl]

[aurl="start"]Getting Started[/aurl]*

[aurl="spotfakes"]How to Spot Fakes[/aurl]

[aurl="earn"]Learn to Play[/aurl]

*Coming soon![/textcollapse]
[/css-div][/css-div]


If it's not in the spoiler tags then my signature is moved directly under the division...

donavannj January 16th, 2014 10:25 PM

Quote:

Originally Posted by Wobbu (Post 8043337)
Do you mean something like this?



Code:

[css-div="width: 180px;height: 100%;overflow: hidden;position: fixed;top: 11px;right: 11px;"][css-div="font: bold 15px arial, sans-serif;color: #6495ED;text-align: center; width: 170px; background-color: #F8F8FF;border:3px solid #6495ED;"][h3]Quick Links[/h3]
[aurl="top"]Back to Top[/aurl]

[textcollapse="Click to expand"][aurl="terms"]Glossary of Terms[/aurl]

[aurl="start"]Getting Started[/aurl]*

[aurl="spotfakes"]How to Spot Fakes[/aurl]

[aurl="earn"]Learn to Play[/aurl]

*Coming soon![/textcollapse]
[/css-div][/css-div]


If it's not in the spoiler tags then my signature is moved directly under the division...

Sort of, but not quite. What I'm looking to do is beyond the capabilities of the text-collapse tag.

Maybe it'd be simpler if I just made a drop down menu from it... I'll probably look into it some tomorrow.

droomph January 17th, 2014 8:46 PM

Quote:

Originally Posted by Team Fail (Post 8024982)
Does anyone remember the alt code that makes usertitles disappear like I have mine right now? I set it a long time back and I can't find it anymore.

It was &32; or something but i furgot :(

donavannj January 17th, 2014 8:51 PM

Its usage has been blocked for reasons unrelated to usertitles.

Tsutarja January 17th, 2014 8:54 PM

Quote:

Originally Posted by donavannj (Post 8045049)
Its usage has been blocked for reasons unrelated to usertitles.

Indeed. The "&32;" usage trick stopped working though when PC was upgraded to vBulletin 3.8.8 some time ago, though. So I wonder if that has anything to do with it.

TheMarkCrafter January 19th, 2014 12:06 AM

Anyone knows how to make Gradient text?

If anybody knows the thing I mean.

I want it to be like

Snivy

But the color scheme thing links between the other colors.

Just like when you gradient in Photoshop, but horizontal.

Thank you ;)

Tsutarja January 19th, 2014 6:58 AM

Quote:

Originally Posted by TheMarkCrafter (Post 8047118)
Anyone knows how to make Gradient text?

If anybody knows the thing I mean.

I want it to be like

Snivy

But the color scheme thing links between the other colors.

Just like when you gradient in Photoshop, but horizontal.

Thank you ;)

Here's something I found:

Snivy

Code:

[css-div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/css-div]


You may or may not be able to see it, but if you have Chrome, it should appear fine. Also, you may need to adjust the percentage of the gradient as well depending on where you're putting it.

Hope this helps! :)

TheMarkCrafter January 19th, 2014 10:16 AM

Quote:

Originally Posted by Zach (Post 8047535)
Here's something I found:

Snivy

Code:

[css-div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/css-div]


You may or may not be able to see it, but if you have Chrome, it should appear fine. Also, you may need to adjust the percentage of the gradient as well depending on where you're putting it.

Hope this helps! :)



Thanks :) But when I add it to the center and give it the size 5, that's how it shows.

Snivy

And for the code, here:

Spoiler:
Code:

[S IZE="5"][css-d iv="background-image: -webkit-gradien t(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/c ss-div][/S IZE]



And I meant to add the spaces, because the code won't show.

And thank you for helping :)

Tsutarja January 19th, 2014 10:42 AM

Quote:

Originally Posted by TheMarkCrafter (Post 8047837)
Thanks :) But when I add it to the center and give it the size 5, that's how it shows.

Snivy

And for the code, here:

Spoiler:
Code:

[S IZE="5"][css-d iv="background-image: -webkit-gradien t(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/c ss-div][/S IZE]



And I meant to add the spaces, because the code won't show.

And thank you for helping :)

You'll have to play around with the percentage there. Here's the code again, with the updated text:

Code:

[CENTER][SIZE="5"][css-div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(80%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/css-div][/SIZE][/CENTER]


And here's the part where you would need to play around with (using a number between 1 and 100), as highlighted below:

-webkit-gradient(linear, left center, right center, from(#006400), color-stop(60%, #98FB98))

TheMarkCrafter January 19th, 2014 10:48 AM

Quote:

Originally Posted by Zach (Post 8047871)
You'll have to play around with the percentage there. Here's the code again, with the updated text:

Code:

[CENTER][SIZE="5"][css-div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(80%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/css-div][/SIZE][/CENTER]


And here's the part where you would need to play around with (using a number between 1 and 100), as highlighted below:

-webkit-gradient(linear, left center, right center, from(#006400), color-stop(60%, #98FB98))

Oh well, I thought there would be some percentage playing but no.

I must thank the body part called brain for ignoring it..

Anyways thank you!

Legendary Silke January 19th, 2014 11:00 AM

I wonder whether this place can be used for a "rate my CSS-based signature" post. If yes, what do you think of my signature? I'm also thinking of going from hard-coded background colours to a base background colour, gradients, and the text background colours to be actually semi-transparent. (no need to show me the code since I know what I need to do already - just chime in on the idea)

Either way, sometimes, don't you wish everyone supported everything equally well? Pretty much every major browser engine have their strengths (think Webkit/Blink and effects in general, Trident and text and just rendering things as fast and as correctly as possible, off the top of my head in my actual use) that makes it a bit hard to target something specific. I prefer to just... well, seeing as my siggy looks fine in IE8 of all things...

I just make sure that nothing looks obviously wrong in kind-of-old browsers.

acatfrommars January 21st, 2014 10:15 AM

Could someone show me how to get my sound bar and text at the bottom of my tag?
#nubstatus

Ghost Lunis January 21st, 2014 12:29 PM

Hello I'm back again with another question.
I tried posting an image in a thread but the image wouldn't show up. Here is how I wrote it.
[IMG]https://www.dropbox.com/s/g7jl5hnzg0dhgsq/20140120_203141.jpg[/IMG]
I haven't used dropbox really before and I tried doing this on my phone. I don't have a clue what could be going wrong. Any help would be greatly appreciated as I would like to post more pictures in the future as well . Thanks a bunch:)

Tsutarja January 21st, 2014 2:27 PM

Quote:

Originally Posted by lunis (Post 8051321)
Hello I'm back again with another question.
I tried posting an image in a thread but the image wouldn't show up. Here is how I wrote it.
[IMG]https://www.dropbox.com/s/g7jl5hnzg0dhgsq/20140120_203141.jpg[/IMG]
I haven't used dropbox really before and I tried doing this on my phone. I don't have a clue what could be going wrong. Any help would be greatly appreciated as I would like to post more pictures in the future as well . Thanks a bunch:)

The reason that your link isn't coming out as an image is because it's not a direct link to the image. AFAIK, with Dropbox, only images in the public folder can be directly linked, so you may want to move it over there.

Ghost Lunis January 21st, 2014 2:29 PM

Quote:

Originally Posted by Zach (Post 8051475)
The reason that your link isn't coming out as an image is because it's not a direct link to the image. AFAIK, with Dropbox, only images in the public folder can be directly linked, so you may want to move it over there.

You are amazing! Thank you so much.
I will do that and see if it helps :)

Ghost Lunis January 21st, 2014 2:45 PM

Quote:

Originally Posted by Team Fail (Post 8051483)
If that fails, just try uploading it to Imgur. It's free and easy to use.

That was going to be my next question of that didn't work. Thank you very much as well.

After doing some research, my dropbox won't have a public folder. Anything after October 4 doesn't need the file supposedly.
Here is what I've come up with...

Can anyone see that?

Edit: that's still the exact same problem. Stupid dropbox. I'm going to imgur.

Ghost Lunis January 21st, 2014 4:04 PM

Quote:

Originally Posted by Team Fail (Post 8051609)
I had no idea the Public folder was removed. Seems, though, they made a workaround:

https://www.dropbox.com/help/167/en

That was what I did:) it still came out messed up. I took your advice and used imgur. I have another problem now though,XD. The picture is freakin gigantic! Know how to fix that by chance?

Elements1 March 23rd, 2014 9:30 PM

Sticky threads can be posted in if it's been longer than a month right? Sorry if I'm breaking a rule :/

Ok so I'm trying to make my scroll bar disappear in this code:

Code:

[c=background-color: #808080; height: 500px; width: 250px; color: white; position: absolute; right: 1000px; left: 100px; bottom: 10px; opacity: 0.95; overflow: auto;][CENTER]
blah
blah
blah
blah
blah
blah
blah
blah[/cd]


Any help how to do that?

Hiatus March 23rd, 2014 9:38 PM

Just change "overflow: auto" to "overflow: hidden," and it should remove all scrollbars for you. :] Also, sticky threads are revive-able, so don't worry.

Tsutarja March 23rd, 2014 11:43 PM

Moderator note: sticky threads are permissible to be revived at all times.

I would also change the position from absolute to relative since setting it to absolute causes it to appear anywhere on screen instead of being confined to your signature/post.

Also, just so you know, there's the BB code as well if you need to c/p CSS code. You're better off using that instead of omitting parts haha

Elements1 March 24th, 2014 6:52 AM

Quote:

Originally Posted by Peitharchia (Post 8162843)
Just change "overflow: auto" to "overflow: hidden," and it should remove all scrollbars for you. :] Also, sticky threads are revive-able, so don't worry.

That worked, thanks! Though I would like it to scroll without showing the scroll bar similar to the example trade CSS templates. Does that make sense? I know the code in below the template but I'm still a noob and can't tell what exactly does what :P

Here:
[cd= height: 400px; width: 200px; background-color: #808080; position: absolute; top: 900px; bottom: 100px; right: 100px; left: 100px; overflow: hidden; border-style: double; border-color:#C0C0C0; border-width: 5px; color:#C0C0C0; font-size: 30px;]Pokemon[div= height: 350px; width: 200px; overflow: auto; font-size: 12px;]
[IMG]http://www.serebii.net/xy/pokemon/401.png[/IMG]
Krickot
[IMG]http://www.serebii.net/xy/pokemon/389.png[/IMG]
Normal Torterra
[IMG]http://www.serebii.net/Shiny/XY/389.png[/IMG]
Shiny Torterra
[IMG]http://www.serebii.net/xy/pokemon/387.png[/IMG]
Turtwig
[/cd][/div]

Quote:

Originally Posted by Terabyte (Post 8162945)

I would also change the position from absolute to relative since setting it to absolute causes it to appear anywhere on screen instead of being confined to your signature/post.

Also, just so you know, there's the BB code as well if you need to c/p CSS code. You're better off using that instead of omitting parts haha

xD thanks so much!!!! That is helpful :)

Satan.EXE April 3rd, 2014 6:05 PM

I have a CSS dilemma that I can't figure out, though I get the feeling that a solution is relatively simple and I just don't know/see it yet. I'm making a cool format for my Roleplay posts, with a bunch of DIVs using position:absolute; but it's clipping over things below it. I tried adding a visibility:hidden; clear:both; DIV below it, but to no effect. Is there an easy solution to this problem so I won't have to start from scratch and I can keep my DIVs exactly where I've set them?

Tsutarja April 3rd, 2014 6:52 PM

Does changing your position to postion:relative change anything at all?

Satan.EXE April 3rd, 2014 7:00 PM

It messes up the positioning, but still it clips. I have one DIV just to set the width (it is also position absolute, centered with auto margins and pushed to the right slightly from the center), and four differently positioned DIVs inside of it.

Tsutarja April 3rd, 2014 7:26 PM

Could you perhaps paste your CSS code here inside of the [noparse][/noparse] BB Code tags so that I (and others who wish to chime in) could have a look at it then?

Satan.EXE April 3rd, 2014 7:30 PM

[cd=width:800px; position:absolute; left:200px; margin-left:auto; margin-right:auto;][cd=width:200px; height:200px; position:absolute; background-image:url('http://i.imgur.com/L5PyNGI.png'); background-size:cover; font-size:0px; border:2px groove #4965FF; border-radius:100px 2px;]x[/cd][cd=width:570px; height:60px; position:absolute; top:0px; right:0px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;][RIGHT]N - N[/RIGHT][CENTER][SIZE="5"][B]コオリヤン[/B][/SIZE][/CENTER]Ice Kingdom[/cd][cd=width:10px; position:absolute; top:220px; left:180px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;][CENTER]X[/CENTER][/cd][cd=width:570px; position:absolute; top:80px; right:0px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;]x[/cd][/cd][cd=visibility:hidden; clear:both;].[/cd]

Of course, the last DIV before the visibility/clear DIV (excluding my outside width DIV) has to have a bunch of text in it to break past, but still

Tsutarja April 6th, 2014 6:24 AM

Couple of things to note with your CSS: you want to have the first element of your CSS to always be set to position:relative, because not everybody on PC uses a fluid-width style, in which the position:absoulte tag would absolutely work with. I, on the other hand, use a fixed-width style, and that would mean that having the CSS set to position:absolute, would cause the post to appear outside the margins. Here's your CSS below, and I fixed it to the best of my knowledge.

X
N - N
コオリヤン
Ice Kingdom
X
x
.


Spoiler:
[cd="width:800px; position:relative; left:000px; margin-left:auto; margin-right:auto;"][cd="width:200px; height:200px; position:relative; background-image:url('http://i.imgur.com/L5PyNGI.png'); background-size:cover; font-size:0px; border:2px groove #4965FF; border-radius:100px 2px;"]X[/cd][cd="width:570px; height:60px; position:absolute; top:0px; right:0px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;"][RIGHT]N - N[/RIGHT][CENTER][SIZE="5"][B]コオリヤン[/B][/SIZE][/CENTER]Ice Kingdom[/cd][cd="width:10px; position:relative; top:0px; left:180px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;"][CENTER]X[/CENTER][/cd][cd="width:570px; position:absolute; top:80px; right:0px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;"]x[/cd][/cd][cd="visibility:hidden; clear:both;"].[/cd]

Starry Windy April 16th, 2014 12:27 AM

I'm wondering how to implement the Marquee thing in CSS, like the ones in the Trade Corner's header, if that's possible.

Tsutarja April 16th, 2014 12:46 AM

The marquee on the Trade Corner splashes is generated by HTML code, I'm afraid.. and HTML code is disabled in signatures.

Noire April 30th, 2014 8:17 PM

Can someone help me with this? The image won't show up all


Noire.
Lady Black Heart.
Goddess of Lastation
Playstation 3 Personification
[img*]http://ps3trophies.com/images/games/NPWR01663/trophies/42L059ce8.png[/img]

Tsutarja April 30th, 2014 9:04 PM

Quote:

Originally Posted by Noire (Post 8225561)
Can someone help me with this? The image won't show up all


Noire.
Lady Black Heart.
Goddess of Lastation
Playstation 3 Personification
[img*]http://ps3trophies.com/images/games/NPWR01663/trophies/42L059ce8.png[/img]

Why are you inserting an asterisk into the [IMG] code? That's why it won't show up :P


Noire.
Lady Black Heart.
Goddess of Lastation
Playstation 3 Personification
http://ps3trophies.com/images/games/NPWR01663/trophies/42L059ce8.png


Code:

[div=*"height: 100px; width: 320px; border-radius: 5px; display: inline-block; overflow: hidden;"]
[div="*height: 100%; width: 140px; background: #444; padding: 10px; text-align: left; font: 12px arial, sans-serif; color: #fff; float: left;"]Noire.
Lady Black Heart.
Goddess of Lastation
Playstation 3 Personification[/div][img]http://ps3trophies.com/images/games/NPWR01663/trophies/42L059ce8.png[/img][/div]



Noire April 30th, 2014 9:20 PM

what is this magic?
I swear when I went to put it in my signature without the symbol, it never showed up ;////; jeeze...just my luck XD

Dter ic May 8th, 2014 8:54 AM

Anyone know of a neater method to specify a colour for a hyperlink within a signature? I use the color BBcode wrapped around the text for the link which seems to work fine but I wonder if there's a more efficient method of doing it.

Oryx May 8th, 2014 8:57 AM

As far as I know that's the only way we can do it with the mini-CSS we have here. In full CSS we would be able to specify the colors of links but that's not the case in what we have.

Ninja Paladin May 10th, 2014 1:24 PM

So before I kill my brain cells, how much of coding like this could I salvage to use on here? (FYI I'm Telraen)

HTML Code:

[center]<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][atrb=border,0,true][atrb=cellspacing,0,true][atrb=cellpadding,0,true][div class=""color1""][img]http://i.imgur.com/ZMwj0.png[/img][/div]</td><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][div style=""font-family: sylfaen; text-align: right; font-size: 20px; color: 808080 margin-bottom: 3px; width: 270px; opacity: 0.6;""][b][url=PROFILE]USERNAME[/url][/b][/div][div class=""header""]FIRST L.[/div][div class=""header""]GENDER: _______[/div][div class=""header""]AGE: _______[/div][div class=""header""]SEXUALITY: _______[/div][div class=""header""]ALIGNMENT: _______[/div]</td></tr></table>

[div style=""clear: both""][/div][div class=""roster""][div class=""color""]Tracker[/div]<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][atrb=border,0,true][atrb=cellspacing,0,true][atrb=cellpadding,0,true][div style=""width: 130px; margin-right: 10px;""][div class=""seekerH""][b]SEEKING[/b][/div][div class=""seeker""]SOCIALS[/div][div class=""seeker""]GROUP QUESTS[/div][div class=""seeker""]GATHERING[/div][div class=""seeker""]HUNTS[/div]</td><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][div class=""tracker""][b]ACTIVE THREADS[/b][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div]
[div style=div class=""tracker""][b]COMPLETED THREADS[/b][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div]
[div class=""tracker""][b]INACTIVE THREADS[/b][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div][div class=""thread""][url=LINK]This is a Thread[/url][/div]</td></tr></table>[/div]

[div style=""clear: both""][/div][div class=""roster""][div class=""color""]Friends[/div]<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][atrb=border,0,true][atrb=cellspacing,0,true][atrb=cellpadding,0,true][div style=""width: 130px; margin-right: 10px;""][div style=""width: 130px; margin-right: 10px;""][div class=""seekerH""][b]WANTED[/b][/div][div class=""seeker""]LOVE INTERESTS[/div][div class=""seeker""]BEST FRIENDS[/div][div class=""seeker""]FRIENDS[/div][div class=""seeker""]ACQUAINTANCES[/div]</td><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][div class=""tracker""][b]LOVE INTERESTS[/b][/div][div class=""thread""][url=LINK]The One[/url][/div][div class=""thread""][url=LINK]The Other One[/url][/div]
[div class=""tracker""][b]BEST FRIENDS[/b][/div][div class=""thread""][url=LINK]Lifesaver[/url][/div][div class=""thread""][url=LINK]That Guy[/url][/div]
[div class=""tracker""][b]FRIENDS[/b][/div][div class=""thread""][url=LINK]Guildie[/url][/div][div class=""thread""][url=LINK]Personal Crafter[/url][/div]
[div class=""tracker""][b]ACQUAINTANCES[/b][/div][div class=""thread""][url=LINK]Appraisal Guy[/url][/div][div class=""thread""][url=LINK]Cheap Heals[/url][/div]</td></tr></table>[/div]

[div style=""clear: both""][/div][div class=""roster""][div class=""color""]Foes[/div]<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][atrb=border,0,true][atrb=cellspacing,0,true][atrb=cellpadding,0,true][div style=""width: 130px; margin-right: 10px;""][div style=""width: 130px; margin-right: 10px;""][div class=""seekerH""][b]WANTED[/b][/div][div class=""seeker""]MUTUAL[/div][div class=""seeker""]HUNTED[/div][div class=""seeker""]FRENEMIES[/div][div class=""seeker""]RIVALS[/div]</td><td style='text-align: center; vertical-align: top; padding: 6px'>[atrb=valign,top][div class=""tracker""][b]MUTUAL[/b][/div][div style=""width: 260px;""][div class=""thread""][url=LINK]Loot Stealer[/url][/div][div class=""thread""][url=LINK]PKer[/url][/div]
[div class=""tracker""][b]HUNTED[/b][/div][div class=""thread""][url=LINK]Friend Killer[/url][/div][div class=""thread""][url=LINK]Thief[/url][/div]
[div class=""tracker""][b]FRENEMIES[/b][/div][div class=""thread""][url=LINK]Risk Taker[/url][/div][div class=""thread""][url=LINK]Beater[/url][/div]
[div class=""tracker""][b]RIVALS[/b][/div][div class=""thread""][url=LINK]Love Rival[/url][/div][div class=""thread""][url=LINK]Frontliner[/url][/div]</td></tr></table>[/div]

[div style=""font-size: 9px; opacity: 0.3;""]made by [url=http://www.back-to-neverland.proboards.com/index.cgi?action=viewprofile&user=minnie]minnie[/url] of [url=http://back-to-neverland.proboards.com/]neverland[/url], enhanced by [url=http://back-to-neverland.proboards.com/index.cgi?action=viewprofile&user=telraen]telraen[/url][/div]

[newclass=.header]width: 265px; -moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; background-color: f1f1f1; color: #808080; font-family: helvetica; text-align: right; font-size: 11px; margin-bottom: 3px; padding-right: 5px; padding-top: 2px; opacity: 0.6;[/newclass][newclass=.header:hover]-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; background-color: F3A204; color: #f1f1f1; opacity: 0.8;[/newclass]
[newclass=.roster]transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s; height: 53px; overflow: hidden; opacity: 0.6;[/newclass][newclass=.roster:hover]height: 400px; transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; -o-transition: 0.7s; opacity: 0.8;[/newclass]
[newclass=.seekerH]border-bottom: 2px solid #F3A204; font-family: helvetica; text-align: right; font-size: 12px; margin-bottom: 3px;[/newclass]
[newclass=.seeker]background-color: #F3A204; color: f1f1f1; font-family: ms gothic; font-size: 11px; padding-top: 2px; margin-bottom: 3px; padding-right: 5px; text-align: right;[/newclass]
[newclass=.tracker]border-bottom: 2px solid #F3A204; font-family: helvetica; text-align: right; font-size: 12px; margin-bottom: 3px;[/newclass]
[newclass=.color]-moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; width: 400px; background-color: f1f1f1; color: #808080; text-align: center; font-family: kartika; padding: 16px 0px; font-size: 13px;[/newclass][newclass=.color:hover]-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; width: 400px; background-color: F3A204; color: #f1f1f1; text-align: center; font-family: kartika; padding: 16px 0px; font-size: 13px;[/newclass]
[newclass=.color1]width: 100px; -moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; border: 5px solid f1f1f1; margin-right: 5px; opacity: 0.6;[/newclass][newclass=.color1:hover]width: 100px; -moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; border: 5px solid #F3A204; opacity: 0.8;[/newclass]
[newclass=.thread]width: 260px; -moz-box-shadow: 0 0 3px 1px #d5d5d5; -webkit-box-shadow: 0 0 3px 1px #d5d5d5; box-shadow: 0 0 3px 1px #d5d5d5; background-color: f1f1f1; color: #808080; font-family: helvetica; text-align: right; font-size: 11px; line-height: 12px; margin-bottom: 3px; opacity: 0.8;[/newclass][newclass=.thread:hover]-moz-box-shadow: 0 0 3px #F3A204; -webkit-box-shadow: 0 0 3px #F3A204; box-shadow: 0 0 3px #F3A204; background-color: F3A204; color: #f1f1f1; opacity: 1.0;[/newclass][/center]


EDIT: Oh and no the multiple transparency codes and etc aren't redundant, you need to have all the different variants active in your code so it shows up right in each of the mainstream browsers.

Oryx May 10th, 2014 2:05 PM

Some of this can be reused with tweaks:

1. The tag for divs on PC isn't [div style="whatever;"], it's [css-div="whatever;"].
2. I don't believe PC CSS supports names of classes, so instead of putting the names you'd have to just add in the properties the names describe for each one; annoying, but doable.

But there is no table code on PC so I'm not sure how useful that will be to you since you can't really put it in your underlying table structure.

Ninja Paladin May 10th, 2014 3:34 PM

I'm guessing I can't salvage the hover code either then, as for the underlaying table structure that's not needed here as the bbcode for the divs doesn't do weird things with the layout and when it tries to I can correct it manually.

EDIT: Experimental bitty

Spoiler:

RAWR



never hesitate and always travel forwards
trust in your fate
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ♥♥♥ sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.

the left handed avenger

Word Count:
0000

Quest Tracker:
----

Notes:
made by bubbles of btn, tweaked by telraen

Samuraipizzacats May 14th, 2014 1:02 AM

Hi!

So I've made a html post with embedded CSS, but I can't seem to figure out how I can use it to make a thread. I never was an active forums poster before so I don't quite know how I can transform it into the correct way.

Is there a tutorial or someone who wants to help me?

Hiatus May 14th, 2014 1:38 AM

Quote:

Originally Posted by Samuraipizzacats (Post 8249887)
Hi!

So I've made a html post with embedded CSS, but I can't seem to figure out how I can use it to make a thread. I never was an active forums poster before so I don't quite know how I can transform it into the correct way.

Is there a tutorial or someone who wants to help me?

Oh, that should be pretty easy; just copy off your CSS, and place them inside either [cd] or [css-div]. They work exactly like <div style> tag, so if you know how that goes, you should be all set. :] Don't put any HTML, though, or else, it won't function properly.

Samuraipizzacats May 14th, 2014 4:12 AM

Quote:

Originally Posted by Peitharchia (Post 8249904)
Oh, that should be pretty easy; just copy off your CSS, and place them inside either [cd] or [css-div]. They work exactly like <div style> tag, so if you know how that goes, you should be all set. :] Don't put any HTML, though, or else, it won't function properly.

Thanks, will try that!

There isn't a possibility where I can just copy and pasty my HTML+CSS like a would have made a webpage?

Tsutarja May 14th, 2014 4:24 AM

Quote:

Originally Posted by Samuraipizzacats (Post 8249979)
Thanks, will try that!

There isn't a possibility where I can just copy and pasty my HTML+CSS like a would have made a webpage?

Unfortunately, HTML is not permitted fire use here on PC, so you would heave to use the BB code provided by PC to do CSS.

Poki June 7th, 2014 11:23 AM

Yo. I've been looking for the BB code for the CSS you can make a shadow behind your text with, but not the transparent kind. Like a solid-coloured shadow. There was a 4th value, iirc, but I only have the regular kind's BB code in my possession.

Thanks in advance.

Tsutarja June 7th, 2014 1:01 PM

Quote:

Originally Posted by Poki (Post 8289649)
Yo. I've been looking for the BB code for the CSS you can make a shadow behind your text with, but not the transparent kind. Like a solid-coloured shadow. There was a 4th value, iirc, but I only have the regular kind's BB code in my possession.

Thanks in advance.

Do you mean like this?

test


For a full drop shadow like that, you want to make sure your third px value in the text shadow CSS code is set to 0px. The raw code of the above is this for reference:

Code:

[css-div="color:red;text-shadow: 2px 2px 0px #000000;font-size:36px;"]test[/css-div]



Poki June 7th, 2014 1:09 PM

Quote:

Originally Posted by Zach (Post 8289778)
Do you mean like this?

test


For a full drop shadow like that, you want to make sure your third px value in the text shadow CSS code is set to 0px. The raw code of the above is this for reference:

Code:

[css-div="color:red;text-shadow: 2px 2px 0px #000000;font-size:36px;"]test[/css-div]



Oh, so that's how it goes. Thanks, that's what I was looking for.

Leviathan June 11th, 2014 8:16 AM

This has been a very helpful thread. I'm familiar with CSS design and after figuring it out how to adapt it for BBCode I've been having fun playing around with it. It's a pity that I'm just a bit barren ideas for what way I'd like my signature to look, haha.

Ultraviolence June 23rd, 2014 6:23 PM

I wasn't sure if this had already been touched upon, but is there anyway to remove the default hyperlink colour whilst using CSS?

Down on the West Coast
they got a sayin'


I really want the links to be plain black, so I'm showing you now what they look like.

Oryx June 23rd, 2014 6:40 PM

The bbcode goes on an outside-to-inside pattern - so if you want to make a link a certain color you have to put the url bbcode, then the color bbcode, then the word, then close both.

Ultraviolence June 23rd, 2014 6:43 PM

Quote:

Originally Posted by Oryx (Post 8314738)
The bbcode goes on an outside-to-inside pattern - so if you want to make a link a certain color you have to put the url bbcode, then the color bbcode, then the word, then close both.

thank you, I've clearly been over thinking it!

Juno July 7th, 2014 9:12 PM

How do I change the text-decoration and color of links when I hover over them? Like right now, in some forum styles, when I hover over the links in my signature it underlines it by default - how can I get rid of that?

Tsutarja July 8th, 2014 12:27 AM

Quote:

Originally Posted by Juno (Post 8336442)
How do I change the text-decoration and color of links when I hover over them? Like right now, in some forum styles, when I hover over the links in my signature it underlines it by default - how can I get rid of that?

I may be wrong on this, but I don't think it's possible to bypass the style's coding by default like that. The only thing I can recommend for now is using a style that doesn't underline hyperlinks of any kind.

Juno July 8th, 2014 4:47 PM

Quote:

Originally Posted by Zach (Post 8336673)
I may be wrong on this, but I don't think it's possible to bypass the style's coding by default like that. The only thing I can recommend for now is using a style that doesn't underline hyperlinks of any kind.

Aw, that's too bad. Thanks anyway!

Poki July 11th, 2014 2:18 PM

Me again.

I made my signature on Chrome, and the rounded corners do not show up on Firefox, because I used -webkit-border-blahblah, not the -moz-border- one. Is there a solution to make them seeable on both browsers? I'm obviously missing something here, so I'm asking you guys.

Oryx July 11th, 2014 2:27 PM

Just add moz as well. With both of them it'll work on both browsers. :)

Poki July 11th, 2014 2:51 PM

Quote:

Originally Posted by Oryx (Post 8343815)
Just add moz as well. With both of them it'll work on both browsers. :)

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.


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.