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)

seeker June 27th, 2012 5:43 AM

Let me know how this goes.


BATTLE LOG





KNOWN ACHIEVEMENTS






PHP Code:

[CENTER][css-div="height:150px;"][css-div="width:300px;height:150px;-webkit-border-radius:25px;border-radius:25px;background-color:#1b1b1b;border-width:4px;border-style:     solid;border-left-color:#0a0a0a;border-right-color:#323232;border-top-color:#232323;border-bottom-color:#232323;display:inline-block;"]
[
SIZE=3][COLOR=White]BATTLE LOG[/COLOR][/SIZE][SIZE=1]

[/
SIZE]   [css-div="width:290px;height:80px;overflow:auto;-webkit-border-radius:      10px;border-radius:10px;border-width:2px;border-style:solid;border-left-color:#323232;border-right-color:#0a0a0a;border-top-color:#232323;border-bottom-color:#232323;text-align:justified;"]

[/
css-div]
[/
css-div]   [css-div="width:300px;height:150px;-webkit-border-radius:25px;border-radius:25px;background-color:#1b1b1b;border-width:4px;border-style:      solid;border-left-color:#0a0a0a;border-right-color:#323232;border-top-color:#232323;border-bottom-color:#232323;display:inline-block;"][SIZE=3][COLOR=White]
KNOWN ACHIEVEMENTS[/COLOR][/SIZE][SIZE=1]

[/
SIZE][css-div="width:290px;height:80px;overflow:auto;-webkit-border-radius:       10px;border-radius:10px;border-width:2px;border-style:solid;border-left-color:#323232;border-right-color:#0a0a0a;border-top-color:#232323;border-bottom-color:#232323;text-align:justified;"]

[/
css-div]
[/
css-div][/css-div][/CENTER


Satan.EXE October 22nd, 2012 12:48 PM

Okay, I need help here.

Is there any way to use CSS to create tabs?

For example, when you're on a PC Profile, and you can click the different tabs to see other information.

Is there any way to do this with the coding for this forum? I want to make a signature with multiple sections, and a row of buttons (tabs) that will reveal different sections of information one at a time.

I would like to know if there's certain codes or a method of using those codes to work in the way I've just explained. That way I can keep my Signature nice and cozy.

Thanks in advance,
WolfOfEve

Hybrid Trainer October 24th, 2012 1:50 AM

totally thought someone else had answered this already

But no, sorry. Tabs and stuff are done using JavaScript and HTML as far as I know so you can't do it using CSS.
Honestly I can't even think of an alternative to tabs in a signature either.

Ralaia November 3rd, 2012 1:26 PM

How would you get this background to "stretch" or not repeat?

Spoiler:

[a id]Top[/a id]







Navigation


AR Codes I Use


You use AR codes?
I'd sure like to know which ones.




White List



People you love for the sake of loving. ♥




Wants



What you want here.




Trades



People you need to handle with love and care. ♥



thread title



Trophy Case


Trainer Information
OT/IDs/Info about you goes here

Rules








Title 9
Text
Text

TextTextText
TextTextTextTextTextText

Text

© miakalina


That's the only problem I'm having so far.
A.nd I know how to do CSS I just really like the style she used.

Satan.EXE November 11th, 2012 1:24 PM

Quote:

Originally Posted by Hybrid Trainer (Post 7383673)
totally thought someone else had answered this already

But no, sorry. Tabs and stuff are done using JavaScript and HTML as far as I know so you can't do it using CSS.
Honestly I can't even think of an alternative to tabs in a signature either.

Okay, so maybe I could start it off a little bit simpler. Is there a code that does something similar to [SPOILER]? Is there a way I could alter the text of the button that reveals what's inside?

I remember being able to do something like that back in Web Design class in High School, but it seems more limited here. Yet I still learn about new and useful codes I didn't even know about.

Hybrid Trainer November 11th, 2012 1:42 PM

Unfortunately you can't use spoiler tags in signatures since its against the rules. What you probably did in your class was HTML since CSS is pretty much just formatting.

Satan.EXE November 26th, 2012 8:35 AM

Okay, I've got an issue here that seems simple enough, though I don't know what to do.

I'm working on a new stylized format for my Roleplaying posts, and I need to keep two css-divs in the same line.

Now, I've tried using float:left; and it does put them in the same line, but then it disregards the size of the divs and my signature ends up behind them.

Now, the question:

Is there a way to use float and still maintain the height of the post, or is there a better way to keep the divs together?

Hybrid Trainer November 26th, 2012 9:05 AM

Make another div tag after everything that has [cd= visibility:hidden; clear:both;].[/cd] in it. This will clear the float and stop things from slipping behind it.

Satan.EXE November 26th, 2012 9:06 AM

Quote:

Originally Posted by Hybrid Trainer (Post 7422888)
Make another div tag after everything that has [cd= visibility:hidden; clear:both;].[/cd] in it. This will clear the float and stop things from slipping behind it.

THANK you. I just tested it, and it worked perfectly.

Freak A December 2nd, 2012 9:35 AM

okay this might be a little dumb so no hate please :S

I'm kind of very fond of using CSS in HTML in dreamweaver, but i kindof find this in forum css a bit complex so if i code out what i want my thread to look like in dreamweaver and post it in a css and html tag on the forum, will it work ?

Oryx December 2nd, 2012 9:38 AM

Nah, you can't use html on the forum unfortunately. You have to deal with the bbcode tags: [css-div] for divs, and [css-span] for spans.

IceFyr1928 December 7th, 2012 3:49 PM

Problems with my code... Post this;
"[css-div= background-color: #CCFFFF; color: #0066CC; font-size: 14px; font-weight: normal; text-decoration: none; text-transform: none; letter-spacing: 1px; word-spacing:4px; line-height: 14px; border-bottom-color: #3300FF; border-top-color: #3300FF; border-left-color: #3300FF; border-right-color: #3300FF; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-right-width: 10px; position: relative; top: 100px; left: 100px; right: 100px; bottom: 100px; margin-top: 20px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px]]post content here[/css-div*]"

V; Which not only interferes with my sig, but also messes with other parts of my post, as shown here. Help?
and get this unsightly block...


Which interferes with not only my sig, but some other elements of my post.

dcjboi December 23rd, 2012 7:39 AM

CSS Knowledge: None
Preffered Teaching Method: VM's
Why you want to learn/how much you wish to know: Because it interests me. I most likely want to learn to the extent the amount i can use on the forums.
Time Zone: Eastern (Atlantic)
Name/Nickname/What we can call you:
Drew
Note: Lessons will work best in 1 on 1 tuitions.

Oryx December 23rd, 2012 9:17 AM

Quote:

Originally Posted by IceFyr1928 (Post 7434650)
Problems with my code... Post this;
"[css-div= background-color: #CCFFFF; color: #0066CC; font-size: 14px; font-weight: normal; text-decoration: none; text-transform: none; letter-spacing: 1px; word-spacing:4px; line-height: 14px; border-bottom-color: #3300FF; border-top-color: #3300FF; border-left-color: #3300FF; border-right-color: #3300FF; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-right-width: 10px; position: relative; top: 100px; left: 100px; right: 100px; bottom: 100px; margin-top: 20px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px]]post content here[/css-div*]"

V; Which not only interferes with my sig, but also messes with other parts of my post, as shown here. Help?


Which interferes with not only my sig, but some other elements of my post.

I KNOW THIS IS DELAYED, BUT:

and get this unsightly block...


Is this your intention? I got rid of the position:relative bits and replaced them with margins. If you use position:relative in your post and in your sig, it'll mess it up, but this way it won't. I also cleaned the code up a tad, because you don't need to do each border side individually unless you intend on changing each side. If you want the entire border to be the same, you just need border-color, border-width, etc. Same with the margin and padding; since it's the same on every side I combined them into "margin: 120px;" and "padding:5px;".

IceFyr1928 December 23rd, 2012 11:01 AM

Ah, thank you for that. I'll go ahead and see what I can do from there.

IceFyr1928 January 5th, 2013 9:49 AM

Okay. Another issue. I try to set a background image, and the forum screws it up by throwing URL tags around it, rendering it null. A little help?

seeker January 5th, 2013 9:56 AM

background-image: url("urlhere");
Notice the bolded code, you're most likely missing that.

IceFyr1928 January 5th, 2013 10:00 AM

Ah, quotation marks. Didn't think it was that.

Well, URL tags stopped showing, but the image still doesn't appear. Here's my code;
[Code][cd="background-image: ("http://fc00.deviantart.net/fs70/f/2013/003/7/4/wooden_toaster_rainbow_factory__resized__by_deathofshadows1928-d5qd0z7.jpg");"]Text and such[/cd][/code]

seeker January 5th, 2013 10:11 AM

HTML Code:

[cd="background-image: url("http://fc00.deviantart.net/fs70/f/2013/003/7/4/wooden_toaster_rainbow_factory__resized__by_deathofshadows1928-d5qd0z7.jpg");"]Text and such[/cd]


You forgot to include "url" before the brackets.

IceFyr1928 January 5th, 2013 10:15 AM

Ugh. Cant believe i missed that. Just goes to show how tired i am. Anywho, it be working now. Thanks.

dcjboi January 17th, 2013 11:25 AM

I'm guessing no one is willing to tutor me? XD I understand some basics such as text effects but with things like Padding or anything involving pictures, I am lost.

quilzel February 6th, 2013 9:23 AM

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">



Cosmotone8 February 8th, 2013 6:32 AM

Quick question: How do I make it so that none of the images in my sig can be copied/highlighted?

Oryx February 8th, 2013 7:40 AM

I'm not sure if this is the most efficient way to do it or the only way, but the only way I know of is using a div where you set the image as the background (code for that is background-image:url('http://yourimagehere.png');) and give it the width/height of the image.

Cosmotone8 February 8th, 2013 8:46 AM

So...How would I do that? Would I set all three of my images in the sig to be backgrounds?


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.