Go Back   The PokéCommunity Forums > Entertainment & Hobbies > Computers & Technology
Reload this Page CSS Help & Resources

Notices
For all updates, view the main page.

Computers & Technology The place to go for all things tech and internet. Share a funny YouTube video or meme, discover the latest useful apps, or just get some free tech support.



Reply
 
Thread Tools
  #276    
Old October 14th, 2010 (03:19 PM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661
Well, if you find a more specific definition of what you want, I'll do my best to see what code you're referring to. You didn't offer too much clarity in your latter description.
__________________

| | |
Reply With Quote
  #277    
Old October 14th, 2010 (03:21 PM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
Quote originally posted by Abnegation:
Well, if you find a more specific definition of what you want, I'll do my best to see what code you're referring to. You didn't offer too much clarity in your latter description.
Sorry my bad ><

I mean I've seen some CSS with borders around it, the border is a different color from the CSS overall tho.

Sorry once again, not good with explaining things ><
__________________


Reply With Quote
  #278    
Old October 14th, 2010 (04:08 PM).
zappyspiker's Avatar
zappyspiker zappyspiker is offline
p r e c u r s o r l e g a c y ★
Gold Tier
 
Join Date: Jul 2008
Location: Wellington, New Zealand
Gender: Female
Nature: Quiet
Posts: 3,941
Quote originally posted by Charizard★:
I'm still learning how to use it properly, and the shadow is not what I'm talking about. I would have used it to see what code it was, but the person changed their theme so I can't use it now :x
The code I use (If I'm right) is:

border: 3px solid #000000;
__________________
Reply With Quote
  #279    
Old October 14th, 2010 (06:33 PM).
donavannj's Avatar
donavannj donavannj is offline
KYON-KUN, DENWA
ModeratorCS
 
Join Date: Mar 2005
Location: KYON-KUN, DENWA
Age: 24
Posts: 16,568
Quote originally posted by Charizard★:

Sorry my bad ><

I mean I've seen some CSS with borders around it, the border is a different color from the CSS overall tho.

Sorry once again, not good with explaining things ><
You are most certainly looking for the border color property, an example of which is here:

Quote originally posted by zappyspiker:
The code I use (If I'm right) is:

border: 3px solid #000000;
That hex code gives us black. In terms of the color each hex pair is based off of, they are, from left to right (in sets of two), red, green, and blue. So a property of #ff0000; gives us a red border, while #00ff00; gives us a green border, and #0000ff; gives us a blue border.
__________________

KYON-KUN, DENWA
Reply With Quote
  #280    
Old October 14th, 2010 (08:28 PM).
redsaber5859 redsaber5859 is offline
Banned
 
Join Date: Jun 2010
Location: Ever Grande City, Hoenn
Gender: Male
Nature: Naughty
Posts: 768
Hey, I was directed here by Rukario, he said he didn't know where else so...

Can anybody make me a css template for a hack thread? basic, but can you make one please?
Reply With Quote
  #281    
Old October 14th, 2010 (11:00 PM).
Spherical Ice's Avatar
Spherical Ice Spherical Ice is offline
Team Rocket Grunt would like to battle!
ModeratorCS
 
Join Date: Nov 2007
Location: Leicester, UK
Posts: 3,684
Welcome to redsaber's hack!

blah

blah

Code:
[center][css-div="width:90%; background-color: #CC0000; padding: 5px; border: 1px solid #000; text-align: left;"][size="5"]Welcome to redsaber's hack![/size]

[CENTER]blah[/CENTER]

[RIGHT]blah[/RIGHT][/css-div][/center]
background-color: #CC0000; The underlined in this bit of the code can be changed to another hex code for a colour.

Basically, the first part of the code, width:90%;, will make the css 90% wide of the screens width. The background-color: #CC0000; tells the code to make our css have a coloured background, in this case, a red color. Next, we have padding: 5px;, which basically means that all content will be pushed in five pixels from the border. It makes things seem nicer (see spoiler for example).
Spoiler:
Without padding.


With padding.

Next, we have the border, border: 1px solid #000. Basically, it means that we want a border, one pixel thick, solid decoration (so it's not dotted or whatever, it's just a straight line), and is black (or #000 (or even #000000)). The reason why I only wrote #000 and not #000000, even though hexadecimal colour codes are assumingly eight characters long, is because if they contain an equally divided amount of colours, they can be 'compressed'. For example, #CC00FF could become #C0F. Either way though, they always need to start with a hash (#). Finally, we have text-align: left;. This means that the text inside the CSS will be to the left by default. You could change that to the right, or to the center. I did this because the CSS is in the centre of the page, which would then make the text inside it go to the centre, but I didn't want that, so, yeah. Last note, I hope you noticed that after every bit of code, there is a semicolon (;). That tells the code we're finished with the last bit of code and are moving on. Furthermore, the whole code is wrapped within some quotation marks: " ".

So hopefully now you didn't tl;dr that and now understand basic CSS. <:
Reply With Quote
  #282    
Old October 15th, 2010 (06:42 AM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661
Quote originally posted by redsaber5859:
Hey, I was directed here by Rukario, he said he didn't know where else so...

Can anybody make me a css template for a hack thread? basic, but can you make one please?
This thread is not for requests. Says it on the first post. Please abide by it. Regardless of who sends you here.

Quote originally posted by Spherical Ice:
Welcome to redsaber's hack!

blah

blah

Code:
[center][css-div="width:90%; background-color: #CC0000; padding: 5px; border: 1px solid #000; text-align: left;"][size="5"]Welcome to redsaber's hack![/size]

[CENTER]blah[/CENTER]

[RIGHT]blah[/RIGHT][/css-div][/center]
background-color: #CC0000; The underlined in this bit of the code can be changed to another hex code for a colour.

Basically, the first part of the code, width:90%;, will make the css 90% wide of the screens width. The background-color: #CC0000; tells the code to make our css have a coloured background, in this case, a red color. Next, we have padding: 5px;, which basically means that all content will be pushed in five pixels from the border. It makes things seem nicer (see spoiler for example).
Spoiler:
Without padding.


With padding.

Next, we have the border, border: 1px solid #000. Basically, it means that we want a border, one pixel thick, solid decoration (so it's not dotted or whatever, it's just a straight line), and is black (or #000 (or even #000000)). The reason why I only wrote #000 and not #000000, even though hexadecimal colour codes are assumingly eight characters long, is because if they contain an equally divided amount of colours, they can be 'compressed'. For example, #CC00FF could become #C0F. Either way though, they always need to start with a hash (#). Finally, we have text-align: left;. This means that the text inside the CSS will be to the left by default. You could change that to the right, or to the center. I did this because the CSS is in the centre of the page, which would then make the text inside it go to the centre, but I didn't want that, so, yeah. Last note, I hope you noticed that after every bit of code, there is a semicolon (;). That tells the code we're finished with the last bit of code and are moving on. Furthermore, the whole code is wrapped within some quotation marks: " ".

So hopefully now you didn't tl;dr that and now understand basic CSS. <:
Thanks for that SI, though in future don't respond to requests, only to those that stick to the rules. But I'll add that to the first post when I get updating again.
__________________

| | |
Reply With Quote
  #283    
Old October 17th, 2010 (07:07 AM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367

---Signature Here---


I've been tweaking around with that code, but I can't seem to find a way to connect the lower CSS (Black bar) to the bottom of the other css (The picture) so that it will fit together perfectly and looks like it goes together. And I can't get the top right corner to be rounded either :/
Spoiler:
[ css-div="-moz-border-radius:20px; width: 400px; height: 230px; padding: 2px 2px 2px 2px; border: 0; background-image: url(http://i1022.photobucket.com/albums/af347/percentage_/Untitled-34.png?t=1287326502);background-position:center"]The people
[/css-div][css-div="width: 400px; height: 100px;"][css-div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#000000;"]---Signature Here--- [/css-div ][/css-div ]


Any help please?
__________________


Reply With Quote
  #284    
Old October 27th, 2010 (04:44 AM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661
If you make a mock up on MS paint for what you want, someone might help you, because I have no idea what you're asking for I'm afraid, maybe you could explain it a little better?
__________________

| | |
Reply With Quote
  #285    
Old October 27th, 2010 (09:39 AM).
donavannj's Avatar
donavannj donavannj is offline
KYON-KUN, DENWA
ModeratorCS
 
Join Date: Mar 2005
Location: KYON-KUN, DENWA
Age: 24
Posts: 16,568
---Signature Here---
I don't see anything wrong with the code you posted, unless that's not what you're looking for. :\

Unless below is what you're looking for.

---Signature Here---


You also gotta remember to make it so Chrome users can also see your border radius effects. :\
__________________

KYON-KUN, DENWA
Reply With Quote
  #286    
Old October 27th, 2010 (09:52 AM).
Spherical Ice's Avatar
Spherical Ice Spherical Ice is offline
Team Rocket Grunt would like to battle!
ModeratorCS
 
Join Date: Nov 2007
Location: Leicester, UK
Posts: 3,684
I think he wants the black bar to be over the image, but have curved corners only on the bottom two corners.
__________________

"Develop amnesia conveniently and forget everything you've heard!"
spheal clicker | rom hacking | pokémon gaia
staff antagonists collab 2015
Reply With Quote
  #287    
Old November 5th, 2010 (06:29 PM).
Blaziquaza's Avatar
Blaziquaza Blaziquaza is offline
...
 
Join Date: Jun 2009
Location: Whyalla, Australia
Gender: Male
Nature: Jolly
Posts: 781
Two questions:
1. How do you make invisible scrollbars?
2. How do you insert a box around a picture and text?
__________________
Everything you say to me pushes one step closer to the edge



And I'm about to break
I need a little room to breathe...

Steam IGN: Hybrid Theory
Reply With Quote
  #288    
Old November 6th, 2010 (06:59 AM).
Alternative's Avatar
Alternative Alternative is offline
For my next trick...
Crystal Tier
 
Join Date: Jan 2009
Location: Adelaide, Australia
Age: 22
Gender: Male
Nature: Impish
Posts: 4,255
One question. Is there such thing as a code for font gradients, or would one have to colour every letter(s) individually?
__________________
Reply With Quote
  #289    
Old November 6th, 2010 (07:13 AM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
Some people have been telling me that the borders on my CSS box are not rounded when it is? Is it because they aren't using FF or something?
__________________


Reply With Quote
  #290    
Old November 6th, 2010 (07:31 PM).
Alternative's Avatar
Alternative Alternative is offline
For my next trick...
Crystal Tier
 
Join Date: Jan 2009
Location: Adelaide, Australia
Age: 22
Gender: Male
Nature: Impish
Posts: 4,255
Quote originally posted by Charizard★:
Some people have been telling me that the borders on my CSS box are not rounded when it is? Is it because they aren't using FF or something?
The rounded corners as far as I know don't work in IE. I'm not sure if they work on other popular web browsers (Safari, Opera, Chrome etc.)
__________________
Reply With Quote
  #291    
Old November 6th, 2010 (07:50 PM).
donavannj's Avatar
donavannj donavannj is offline
KYON-KUN, DENWA
ModeratorCS
 
Join Date: Mar 2005
Location: KYON-KUN, DENWA
Age: 24
Posts: 16,568
Quote originally posted by Alternative:

The rounded corners as far as I know don't work in IE. I'm not sure if they work on other popular web browsers (Safari, Opera, Chrome etc.)
This. You need to add the -webkit-border-radius element to make it compatible with the webkit based Opera and Chrome (or was that Chrome and Safari?).
__________________

KYON-KUN, DENWA
Reply With Quote
  #292    
Old November 6th, 2010 (08:53 PM).
aSeRo141414's Avatar
aSeRo141414 aSeRo141414 is offline
zZJoennZz inside
 
Join Date: Jun 2009
Location: In your head
Age: 19
Gender: Male
Nature: Jolly
Posts: 379
Send a message via Yahoo to aSeRo141414 Send a message via Skype™ to aSeRo141414
Quote originally posted by donavannj:
This. You need to add the -webkit-border-radius element to make it compatible with the webkit based Opera and Chrome (or was that Chrome and Safari?).
webkit is working well in Chrome so don't worry
__________________
Regards,
aSeRo141414
Reply With Quote
  #293    
Old November 6th, 2010 (08:58 PM).
donavannj's Avatar
donavannj donavannj is offline
KYON-KUN, DENWA
ModeratorCS
 
Join Date: Mar 2005
Location: KYON-KUN, DENWA
Age: 24
Posts: 16,568
Quote originally posted by aSeRo141414:
webkit is working well in Chrome so don't worry
I don't think you get what i meant. I was saying that you need to add the element in order for the rounded borders to show up in those browsers.
__________________

KYON-KUN, DENWA
Reply With Quote
  #294    
Old November 7th, 2010 (04:13 PM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
Quote originally posted by donavannj:
This. You need to add the -webkit-border-radius element to make it compatible with the webkit based Opera and Chrome (or was that Chrome and Safari?).
Thanks! :D

But how do you add it in? I added it in and it gave be a square corner :/
__________________


Reply With Quote
  #295    
Old November 7th, 2010 (04:18 PM).
donavannj's Avatar
donavannj donavannj is offline
KYON-KUN, DENWA
ModeratorCS
 
Join Date: Mar 2005
Location: KYON-KUN, DENWA
Age: 24
Posts: 16,568
Quote originally posted by Charizard★:

Thanks! :D

But how do you add it in? I added it in and it gave be a square corner :/
You use Firefox, right? You have to have both the webkit and the moz one in there with the same value in order for it to appear the same way in both Chrome and Firefox.
__________________

KYON-KUN, DENWA
Reply With Quote
  #296    
Old November 7th, 2010 (04:23 PM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
Quote originally posted by donavannj:
You use Firefox, right? You have to have both the webkit and the moz one in there with the same value in order for it to appear the same way in both Chrome and Firefox.
I tried but it doesn't work :/ How do I put it in the same value order?
__________________


Reply With Quote
  #297    
Old November 7th, 2010 (04:34 PM).
donavannj's Avatar
donavannj donavannj is offline
KYON-KUN, DENWA
ModeratorCS
 
Join Date: Mar 2005
Location: KYON-KUN, DENWA
Age: 24
Posts: 16,568
Quote originally posted by Charizard★:

I tried but it doesn't work :/ How do I put it in the same value order?
If the element moz-border-radius:20px, then you should use -webkit-border-radius:20px for the webkit border radius element so they show up exactly the same in a browser.

Jeez, I swear, sometimes trying to guide people along with these codes is like trying to get a cat to actually do some tricks.
__________________

KYON-KUN, DENWA
Reply With Quote
  #298    
Old November 11th, 2010 (12:59 PM).
Team Fail's Avatar
Team Fail Team Fail is offline
fun in the sun
Platinum Tier
 
Join Date: May 2009
Age: 20
Gender: Male
Nature: Brave
Posts: 10,516
I found a neat little Chrome extension. It's helpful for developing sites and signatures.

https://chrome.google.com/extensions/detail/nnklpgoldelpoigiacfpnpphpkkmbdkb
__________________
Pair 1 Pair 2 Twitter Alt 1 Alt 2 PHO Image Source Avatar Source

"On my business card, I am a corporate president.
In my mind, I am a game developer.
But in my heart, I am a gamer."

- Satoru Iwata, 1959 - 2015
Reply With Quote
  #299    
Old November 12th, 2010 (07:42 PM).
Bolens's Avatar
Bolens Bolens is offline
Soul Hacker
Gold Tier
 
Join Date: Jan 2010
Location: PA
Age: 21
Gender: Male
Nature: Mild
Posts: 359
Thanks man, is pretty awesome, a bit different to use, but awesome!
Reply With Quote
  #300    
Old November 13th, 2010 (05:20 PM). Edited November 14th, 2010 by pspdude.
pspdude's Avatar
pspdude pspdude is offline
:o super shinx?
 
Join Date: Jul 2008
Location: Toronto
Age: 21
Gender: Male
Nature: Calm
Posts: 95
Help when ever I add a CSS signature it always ends up like this even when i use the no-repeat command

Help when ever I add a CSS signature it always ends up like this even when i use the no-repeat command This is my code
Code:
background:url('http://i404.photobucket.com/albums/pp124/pspdude_2008/Background_by_CinnamonGirlMika-2.png');color:white;width:100%;padding:20px:no-repeat;"] Pspdude Ish Amazing :O! Thx Jefelin for the sprites :)
__________________








Pspdude Ish Amazing :O!





Thx Jefelin for the sprites
Reply With Quote
Reply
Quick Reply

Sponsored Links

You may also like.. (Beta)
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are UTC -8. The time now is 12:35 PM.