The PokéCommunity Forums

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

Hiatus July 11th, 2014 3:00 PM

Quote:

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

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

Oryx July 11th, 2014 3:02 PM

Quote:

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

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

Poki July 11th, 2014 3:31 PM

Quote:

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

It worked, thank you!

Quote:

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

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

Samus Aran July 15th, 2014 10:16 PM

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


samus

Hiatus July 16th, 2014 2:12 PM

Quote:

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


samus

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

Spoiler:

samus
filler

Elements1 July 27th, 2014 8:19 PM

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

Oryx July 27th, 2014 8:29 PM

Quote:

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

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

Elements1 July 27th, 2014 8:35 PM

Quote:

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

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

Oryx July 27th, 2014 9:04 PM

Quote:

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

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

Morgnarok September 11th, 2014 1:23 AM

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

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

Oryx September 11th, 2014 3:57 AM

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


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

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

Morgnarok September 13th, 2014 9:09 AM

Quote:

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


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

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

The IMG Code Worked For Me.

Tsutarja September 16th, 2014 9:28 AM

Quote:

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




Northstar
gym leader - twitter - last.fm




Code:

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

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

[/div]
[/div]


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

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

Code:

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

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

[/div]
[/div]





Northstar
gym leader - twitter - last.fm



Kyora September 27th, 2014 9:45 PM

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

Hello hello

Uh hey

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


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

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

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

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

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

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

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

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


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

Hiatus September 28th, 2014 1:32 AM

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

Code:

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


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

Kyora September 28th, 2014 8:18 AM

Quote:

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

Code:

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


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

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

seeker October 12th, 2014 7:20 AM

Quote:

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

Code:

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


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

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

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

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

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

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

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

Treecko November 1st, 2014 10:35 PM

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

Hiatus November 1st, 2014 11:48 PM

Quote:

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

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

Quote:

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

JesteR November 2nd, 2014 5:37 AM

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

Tsutarja November 2nd, 2014 6:18 AM

Quote:

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

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

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

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

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

JesteR November 2nd, 2014 6:34 AM

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

Oryx November 2nd, 2014 6:40 AM

Quote:

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

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

JesteR November 2nd, 2014 2:16 PM

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

Code:

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

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

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

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

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

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


Any help, please?

Wobbu November 2nd, 2014 6:52 PM

Spoiler:

Sir Pedro's GFX Shop/Gallery

Introduction



Gallery Area



Request Form



Completed Requests





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


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.