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)

pokewalker June 20th, 2011 10:35 AM

Quote:

Originally Posted by Toujours (Post 6703752)
Can you explain what's annoying? It looks perfectly alright for me (the sprite is animated as well):

http://i56.*.com/r7lmc6.png

Yeah, but I want the "pokewalker" in the box xD And I can't get it on the place I want.

Quote:

Originally Posted by jigglyppuff8 (Post 6703788)
If it's the text being under the box that's the problem, then use [image=left] tags instead of [img] tags for the image.














pokewalker

I would advise against using line breaks for the purpose of positioning since their height can vary from browser to browser. I'd use position:relative;, padding, and margin properties to position things around.

Sure, looks beter, I'll try also getting the pokewalker one enter lower.

EDIT: Nvm. It's fine now, exactly how I wanted it. Thanks!

Oryx June 20th, 2011 1:42 PM

For some reason the links in my signature don't work. I have a link on IRC, one on Talk, and one on Me, and none of them are activating.

PHP Code:

[cd="height:120px;width:500px;overflow:visible;"][cd="background-image:url("http://i53.*.com/2m28kn9.png");  width: 500px; height: 200px; float:left;"]
[cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:160px; overflow:auto; width:500px;  height:280px;letter-spacing:10px;line-height:40px;text-shadow:0px 0px  5px #ffffff;"][title="Catch all non-Unova Pokemon in  Unova"]Goal[/title]
[
cd="font-size: 15px; color:#737373; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:60px; overflow:visible; width:200px;  height:200px;letter-spacing:7px;line-height:40px;text-shadow:0px 0px 5px  #ffffff;"][title="133/174, 76.4%"](Progress)[/title]
[
cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-5px; left:-59px;  overflow:visible;height:100px;letter-spacing:10px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"][title="Sanguinius <3"]Pair[/title]
[
cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:16px; left:0px;  overflow:visible;height:100px;letter-spacing:10px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]★IRC
[cd="font-size: 15px; color:#737373; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:60px; overflow:visible; width:200px;  height:30px;letter-spacing:7px;line-height:40px;text-shadow:0px 0px 5px  #ffffff;"](Talk to me)
[/
cd][/cd][/cd][/cd][/cd][/cd][/cd]
[
cd="font-size: 15px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-10px; left:217px;  overflow:visible;height:50px;width:500px;letter-spacing:5px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]I ask for nothingI can get by
[/cd]
[
cd="font-size: 15px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:10px; left:300px;  overflow:visible;height:50px;width:500px;letter-spacing:5px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]but I know so many less lucky than I[/cd


jigglyppuff8 June 20th, 2011 2:00 PM

Are you sure you put the [URL] tags in? Because I'm not seeing them.

Oryx June 20th, 2011 8:38 PM

They're there, I just forgot to switch out of the dumb rich text mode before I copied it so it copied as if they're not there. the links look like this:

PHP Code:

[url="blahblahblah.com"][color=#123456]IRC[/color][/url] 

I tried putting the url inside so the link color showed up but I still couldn't click it.

jigglyppuff8 June 20th, 2011 9:36 PM

Please forgive me for starting completely over, but I could not follow your code with all of its positioning and height and width shenanigans.

Goal
(Progress)
Pair

★IRC
(Talk to me)
I ask for nothing, I can get by
but I know so many less lucky than I

Spoiler:
[center][cd=height:200px; width:500px; overflow:hidden; background-image:url('http://i53.*.com/2m28kn9.png');][left][cd=line-height:29px; margin-left:160px; margin-top:10px; font-family:Trebuchet MS; text-shadow:0px 0px 5px #ffffff;][span="font-size: 20px; color:#330000; letter-spacing:10px;"]★[title="Catch all non-Unova Pokemon in Unova"]Goal[/title][/span]
[span=font-size: 15px; color:#737373; letter-spacing:7px; position:relative; left:60px; bottom:10px;][title="133/174, 76.4%"](Progress)[/title][/span]
[span=font-size: 20px; color:#330000; letter-spacing:10px;]★[title="Sanguinius <3"]Pair[/title][/span]

[span=font-size: 20px; color:#330000; letter-spacing:10px;]★IRC[/span]
[span=font-size: 15px; color:#737373; letter-spacing:7px; position:relative; left:60px; bottom:10px;](Talk to me)[/span][/cd][/left][/cd][cd=width:500px; color:#330000; text-align: left;decoration:none;font-family:"Trebuchet MS"; font-size: 15px; letter-spacing:5px; text-shadow:0px 0px 5px #ffffff;][left][span=position:relative; right:65px; ]I ask for nothing, I can get by[/span]
but I know so many less lucky than I[/left][/cd][/center]


I wouldn't use so many divs for just simple text. Divs tend to add line breaks whenever a new one is added which is quite pain if your code doesn't require divs. Spans work just as well at getting the job done without having to add a line break or height/width shenanigans.

Now, indepth break down of what I did. Hopefully it won't be too hard to follow.

1. Start with [Center] to make it center align.
2. Declare a [cd] div that will contain the background-image. It will hide anything that spills out of it.
3. Use [Left] to left align anything with this div.
4. Declare another [cd] div that will contain the code used most often so that it doesn't have to be repeated in each new span/div. For example, the margin-left:160px; moves all the text over at least 160px from the left edge.
5. Use [span]s around the text and code that they need individually.
6. Close each [span] after the text they modify. Compare to how you had all of your [/cd]s at the end.
7. Close the second [cd] div.
8. Close the [left].
9. Close the first [cd] div.
10. Make a new [cd] div that will contain the rest of the text.
11. [left] to left align everything again.
12. [span] on the first line to move it over like you had and closed on the first line.
13. Close the [left].
14. Close this [cd] div.
15. Close the [center].

Links should work. I don't know what they are, so you should put them in yourself.

Oryx June 20th, 2011 10:00 PM

I'm not sure I quite understand, but I'll take your word for it because it works. xD Thanks!

jigglyppuff8 June 20th, 2011 10:15 PM

If there's anything in particular that you'd like clarified on why I did it the way I did, feel free to ask.

TheMarkCrafter June 20th, 2011 10:25 PM

How can i make Dark to Lime green text colors?
Like in jigglypuff's?

Alternative June 20th, 2011 11:21 PM

You can do it manually by getting all seperate colours, but that would take a while, or you can use a text gradient generator, such as this one to make it. It shouldn't be too hard to do what you want with it.

pokewalker June 23rd, 2011 4:27 AM


PHP Code:

[RIGHT][title="The best Pokémon ever"][css-div=" width: 450px; height: 210px; background-image:URL('http://img541.imageshack.us/img541/8013/shinyswellowdwz.png'); padding-left: 19px; padding-right: 19px; "][RIGHT][COLOR="#178262"][SIZE="5"][FONT="Slackey"][title="hunting, 765 eggs"]SHINY SWELLOW[/title][/FONT][/SIZE][/COLOR][SIZE="5"][/SIZE][/RIGHT]

[
css-div=" width:10px;"][sound="swellow"]http://veekun.com/dex/media/cries/277.ogg[/sound][/css-div]
[title="Click all links please"]
[
css-div=" width:110px; height:70px; overflow:auto; border-radius: 50px; border-style: solid; background-color: #FFAB40; border-color: #EE6A02"]
[
CENTER][URL="http://www.youtube.com/user/pokedragonmaster"][title="Sub me please"][COLOR="#FFFFFF"][B]My YouTube[/B][/COLOR][/title][COLOR="#FFFFFF"][B][/B][/COLOR]
[
URL="http://www.pokecommunity.com/member.php?u=119663"][B][COLOR="#FFFFFF"][title="Awesome guy, check him out!"]My CSS Teacher[/title][/COLOR][/B][/URL][B][COLOR="#FFFFFF"]
[/
COLOR][/B][COLOR="#FFFFFF"][/COLOR][/URL][/CENTER][/css-div][/title]
[/
css-div][/title][/RIGHT

Basically I want the black/grey thing in the back away, and I want the music bar to be resized which I saw in Roswell's sig and then it'll fit in Swellow's mouth. Anyone have any suggestions?

jigglyppuff8 June 23rd, 2011 5:23 PM

Learn to use height, width, and overflow properties in your favor. No I will not give you the code.

flamz321 July 1st, 2011 10:47 AM

Hey can anyone help me out? I'm looking for a way to make a text box on my thread, but i don't know how T_T. Is it just standard CSS commands? Or do i have to make an image and insert it?

Hybrid Trainer July 1st, 2011 10:54 AM

Well by text box do you mean the scroll one? because to do that all you need to do is create a CSS box and set it to overflow, like this

text
text
text
text
moar text


the code looks like this
[css-div=" width:100px; height:50px; overflow:auto;"]
text
text
text
text
moar text
[/css-div]

flamz321 July 1st, 2011 11:32 AM

Quote:

Originally Posted by Hybrid Trainer (Post 6722336)
Well by text box do you mean the scroll one? because to do that all you need to do is create a CSS box and set it to overflow, like this

text
text
text
text
moar text


the code looks like this
[css-div=" width:100px; height:50px; overflow:auto;"]
text
text
text
text
moar text
[/css-div]

Ah sorry I meant infobox.

Hybrid Trainer July 1st, 2011 11:38 AM

Quote:

Originally Posted by flamz321 (Post 6722401)


Ah sorry I meant infobox.

Infobox? can you give an example of somewhere where its used?

flamz321 July 1st, 2011 11:56 AM

http://www.pokecommunity.com/showthread.php?t=215424&highlight=uranium

The infobox is on the right with the download, team, status, etc.

Hybrid Trainer July 1st, 2011 12:13 PM

text and stuff here
Oh right!
well for that all you needed to do was make it float to the right but using this code float:right;
coding looks a little like this
[css-div=" width:100px; height:50px; float:right; border:solid;"]text and stuff here[/css-div]

flamz321 July 1st, 2011 12:19 PM

Phew thanks you're a lifesaver :D

And how do I make the subsections inside the big box?

Hybrid Trainer July 1st, 2011 12:40 PM

Whatever
Other stuff
well thats just other CSS boxes inside of that, one of them will have a different background colour and stuff.

[css-div=" width:100px; height:50px; float:right; border:solid;"][css-div=" width:100%; height:20px; background-color:black; color:white;"]Whatever[/css-div]Other stuff[/css-div]

Charizard★ July 5th, 2011 2:41 PM

Just wondering, how do you do the 'hover text' with CSS? I've tried following this, yet I still can't do it. Any help please?

seeker July 5th, 2011 2:47 PM

You can't, you need HTML, CSS alone doesn't have the capabilities.

Charizard★ July 5th, 2011 2:55 PM

I've seen some members use it tho (Staff), can staff members use HTML?

donavannj July 5th, 2011 3:18 PM

Quote:

Originally Posted by Charizard★ (Post 6729995)
I've seen some members use it tho (Staff), can staff members use HTML?

Higher staff can use HTML in their signatures, as far as I'm aware.

Xyrin July 23rd, 2011 9:31 AM

1 Attachment(s)
Okay. On my forum I installed a Shoutbox plugin. It's at the bottom of the page when I'd like it to be at the top. I have the CSS template code for the index and I see {myshoutbox} right before board statistics which is correct in the order. Here's the code

Code:

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
        lang.no_new_posts = "{$lang->no_new_posts}";
        lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
{$forums}
{myshoutbox}
{$boardstats}

<dl class="forum_legend smalltext">
        <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
        <dd>{$lang->new_posts}</dd>

        <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
        <dd>{$lang->no_new_posts}</dd>

        <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
        <dd>{$lang->forum_locked}</dd>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>


In the attachments I have a picture of the top of my forum and where the white is is where I want the Shoutbox to be.

Oka July 23rd, 2011 12:16 PM

Try this.
Code:

<html> <head> <title>{$mybb->settings['bbname']}</title> {$headerinclude} <script type="text/javascript"> <!--        lang.no_new_posts = "{$lang->no_new_posts}";        lang.click_mark_read = "{$lang->click_mark_read}"; // --> </script> </head> <body> {$header}
{myshoutbox} {$forums} {$boardstats}  <dl class="forum_legend smalltext">        <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>        <dd>{$lang->new_posts}</dd>          <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>        <dd>{$lang->no_new_posts}</dd>          <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>        <dd>{$lang->forum_locked}</dd> </dl> <br style="clear: both" /> {$footer} </body> </html>



Xyrin July 23rd, 2011 2:10 PM

Quote:

Originally Posted by Oka (Post 6762962)
Try this.
Code:

<html> <head> <title>{$mybb->settings['bbname']}</title> {$headerinclude} <script type="text/javascript"> <!--        lang.no_new_posts = "{$lang->no_new_posts}";        lang.click_mark_read = "{$lang->click_mark_read}"; // --> </script> </head> <body> {$header}
{myshoutbox} {$forums} {$boardstats}  <dl class="forum_legend smalltext">        <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>        <dd>{$lang->new_posts}</dd>          <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>        <dd>{$lang->no_new_posts}</dd>          <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>        <dd>{$lang->forum_locked}</dd> </dl> <br style="clear: both" /> {$footer} </body> </html>



Thanks. :) it's fixed now. :D

TheMarkCrafter July 23rd, 2011 2:58 PM

Do someone knows how to make shadow at donavannj's signature when it says: "HOWEVER IT GOES,
the fate of both worlds
will be decided by this battle!"?

Hybrid Trainer July 23rd, 2011 3:24 PM

Yea you use the text shadow code, its
text-shadow: 5px 5px 5px #ccc
The first two are the x-y coordinates and the last one is the blur radius and then obviously the last one is the shadow colour ^-^

TwilightBlade July 29th, 2011 9:17 AM

My signature image isn't lining up with the css colored boxes. Help?

PHP Code:

[CENTER][cd="width: 440px; font-size: 18px; padding: 5px; height: 30px; background-color: #DAB9AE;"] [FONT="Georgia"][color=#832C46]A[/color][color=#802C45]n[/color][color=#7D2C45]g[/color][color=#7B2C44]e[/color][color=#782C44]l[/color][color=#762C43] [/color] [color=#732C43]o[/color][color=#712C42]f[/color][color=#6E2C42] [/color] [color=#6C2C42]m[/color][color=#692C41]e[/color][color=#662C41]r[/color][color=#642C40]c[/color][color=#612C40]y[/color][color=#5F2C3F],[/color][color=#5C2C3F] [/color] [color=#5A2C3E]h[/color][color=#572C3E]o[/color][color=#552D3E]w[/color][color=#522D3D] [/color] [color=#4F2D3D]d[/color][color=#4D2D3C]i[/color][color=#4A2D3C]d[/color][color=#482D3B] [/color] [color=#452D3B]y[/color][color=#432D3A]o[/color][color=#402D3A]u[/color][color=#3E2D3A] [/color] [color=#3B2D39]f[/color][color=#382D39]i[/color][color=#362D38]n[/color][color=#332D38]d[/color] [color=#312D37] [/color][color=#2E2D37]m[/color][color=#2C2D36]e[/color][color=#292D36]?[/color][/FONT][/cd][IMG]http://img823.imageshack.us/img823/6041/sgz4y.png[/IMG][cd="width: 440px; height: 30px; background-color: #DAB9AE; color: #4D2635; letter-spacing: 2px; padding: 5px; font: georgia;"][size=1][I]bffl ::  [B]vrai[/B] | bro :: [B]derozio[/B] | sis :: [B]kaori [/B] | theme :: [B]moments[/B]   
[color="#F0E6E0"]♥ [/COLOR][URL="http://www.pokecommunity.com/forumdisplay.php?f=161"][COLOR="#2C3336"]Trade[/COLOR][/URL] | [URL="http://www.pokecommunity.com/forumdisplay.php?f=234"][COLOR="#2C3336"]Battle[/color][/URL] | [URL="http://www.pokecommunity.com/showthread.php?t=258285"][color="#2C3336"]Gallery[/COLOR][/URL] | [URL="http://bmgf.bulbagarden.net/members/17428.html"][COLOR="#2C3336"]Bulbagarden[/color][/URL] | [URL="http://twitter.com/xAdrestia"][color="#2C3336"]Twitter[/COLOR][/URL][/I][/size][I][/i][/cd][/CENTER


seeker July 29th, 2011 10:50 AM

Seems to be lining up just fine for me, care to take a screenshot and outline the issue?

TheMarkCrafter July 29th, 2011 1:28 PM

I am just asking, can you make a background for the [css-div=" background-color: ****; border-color: ****; border-style:solid;"] code,
The **** is the color.

seeker July 29th, 2011 1:46 PM

I have no idea what you are saying. Can you possibly show me an example?

TheMarkCrafter July 29th, 2011 2:08 PM

Quote:

Originally Posted by Abnegation (Post 6773645)
I have no idea what you are saying. Can you possibly show me an example?

click here to jump
Click the thing above, and I want to make this CSS code [css-div=" background-color: ****; border-color: ****; border-style:solid;"] have a background, can it? If yes, tell me.

seeker July 29th, 2011 2:17 PM

Yes it can with background-image: url("url");

TwilightBlade July 29th, 2011 2:22 PM

http://i.imgur.com/1TAgu.png
Using vbulletin default skin style and Google Chrome. You can see the bottom right corner of the banner sticking out from the pink css, like 1 pixel off.

Oryx July 29th, 2011 2:29 PM

I'm using Top Dog and Firefox and see it on the post...but in your signature it looks pixel perfect. :x Does it look off in your signature to you as well?

Steven July 29th, 2011 3:21 PM

Quote:

Originally Posted by Toujours (Post 6773728)
I'm using Top Dog and Firefox and see it on the post...but in your signature it looks pixel perfect. :x Does it look off in your signature to you as well?

Here, I put red lines in with the image so you can see the image better (also zoomed it in.) You can see that the image is shifted over one pixel.


seeker July 29th, 2011 3:32 PM

It actually looks fine for me, also, it could be a Chrome issue though. I'll have to do some research, but your code is fine, so I'm not too sure why that is happening.

Hybrid Trainer July 29th, 2011 3:43 PM

Its not a chrome thing, i can see it fine (Im using forever standing btw).
But when i use some of the earlier themes it happens.

Impo August 1st, 2011 4:38 PM

umm... I'm pretty sure this code has been asked before, but does anyone know the code to make rounded borders?

I'm sorry if this question is beginning to sound like a broken record, but I need it (and can't be bothered searching the thread).

maybe if it was added to the first post?

Thanks in advance!

Hybrid Trainer August 1st, 2011 6:06 PM

Code:

border-radius:50px;


or you can use this to do only one corner
Code:

border-top-right-radius:50px;


Changing the top and the right bit accordingly of course x]

Gymnotide August 4th, 2011 11:42 PM

Quote:

Originally Posted by Hybrid Trainer (Post 6779271)
Code:

border-radius:50px;


or you can use this to do only one corner
Code:

border-top-right-radius:50px;


Changing the top and the right bit accordingly of course x]

You'll also want to include moz tags too in case anyone is viewing from Firefox, since they don't have webkit. The tag works exactly the same, though.

border-radius
-moz-border-radius

border-top-left-radius
-moz-border-radius-topleft

border-top-right-radius
-moz-border-radius-topright

border-bottom-right-radius
-moz-border-radius-bottomright

border-bottom-left-radius
-moz-border-radius-bottomleft

seeker August 5th, 2011 3:07 AM

Actually, border radius works for every browser that uses CSS3, so moz has supported it since 3.5. But not everyone is updated. So if you're going to add extra codes, you might as well just stick with -moz-border-radius & web-kit-radius.

However, let me point out that IE9 will support CSS3, meaning it will have rounded corners etc. So I'd advise adding all 3 codes when it does. You're better off covering all angles to ensure the best browser compatibility you can get.

Mew~ August 5th, 2011 6:48 AM

Okay, what I want to do is get two CSS codes to show up on the same line. Since when I try to do two seperate CSS codes and put them next to each other they end up on different lines, if that makes sense.

Hybrid Trainer August 5th, 2011 6:54 AM

This has come up before, it wasn't really solved but if you only want two codes i think you can get away with it.
Previous problem/answer

But if its just two things i tend to use the float:left/right code to make one thing move to the side.

Winneon August 8th, 2011 4:01 PM

How do you change the hyperlink color in BB code?

Hybrid Trainer August 8th, 2011 4:17 PM

You put the colour tag inside of the URL tag. Like this.

[URL="http://www.pokecommunity.com/member.php?u=119663"][COLOR="#B82556"]James[/COLOR][/URL]

Winneon August 8th, 2011 4:34 PM

Quote:

Originally Posted by Hybrid Trainer (Post 6793122)
You put the colour tag inside of the URL tag. Like this.

[URL="http://www.pokecommunity.com/member.php?u=119663"][COLOR="#B82556"]James[/COLOR][/URL]

Thanks! I know CSS but I didn't know how to add that into BB code!:)

Winneon August 11th, 2011 2:13 PM

How do you overlap images like in Rukario's signature?

Spherical Ice August 11th, 2011 2:29 PM

You could either use a background image (background: url('linktoimage.png');) and then put another image ontop (which can then be positioned with position: absolute: and left: pixelpx/right: pixelpx/etc. or padding-top: pixelpx etc.) or you could use the z-index code (z-index: 99; would make everything in that div have priority over anything with a z-index of 98 or lower).

Winneon August 11th, 2011 3:04 PM

I don't really understand. CAn you give me an example with the CSS code?

Hybrid Trainer August 11th, 2011 3:10 PM

If you look here inside the spoiler there is a rattata signature that uses the z-index code on the teeth and as you can see, they are on top of the sprite thats underneath.
As for the background image bit the background-image:URL('urlhere.png') is put inside the css tag next to the other codes like the background-color code. It can be explained in a bit more detail here ^_^

tbh if you want a signature like Rukarios your better off using the background image code ;D

Winneon August 11th, 2011 3:15 PM

Ok. Thank you very much! I'll try that.

Mew~ August 13th, 2011 7:57 AM

Okay, so I'm trying out a format for episode discussions, and I've done this so far.

http://img37.imageshack.us/img37/1488/season14logo.png

Episode 31: "Oshawott's Lost Scalchop"
Air Date: 13/08/2011


What I want to do is get an image in the nested CSS box, but the image goes faded too, any help please?

Alternative August 13th, 2011 8:11 AM

Quote:

Originally Posted by Mew~ (Post 6802136)
Okay, so I'm trying out a format for episode discussions, and I've done this so far.

http://img37.imageshack.us/img37/1488/season14logo.png

Episode 31: "Oshawott's Lost Scalchop"
Air Date: 13/08/2011


What I want to do is get an image in the nested CSS box, but the image goes faded too, any help please?

You're probably using the transparent code. Easy way around that is to use some image editing program (photoshop, gimp etc.), make a blank canvas, fill it up with the colour you want, and lower the opacity down to whatever it is you want. Then the image you want in the nested CSS box should be fine. :D

TheMarkCrafter August 13th, 2011 8:58 AM

How can I make the cursor change? Like at Pokemon Trainer Touko's Lilligant signature? It has a lilligant cursor.

Mew~ August 13th, 2011 9:08 AM

Add this into your CSS:
Edit:

cursor: url('cursor URL here'), crosshair;

TheMarkCrafter August 13th, 2011 9:27 PM

Thanks Mew~!
But I has a problem..
http://cur.cursors-4u.net/toons/images4/too354.gif
The cursor should be like this, but at my sig, it doesn't animate fastly.
HEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEELP!

Kylie-chan August 14th, 2011 12:00 AM

Animated .gifs don't make animated cursors. They have to be converted to .ani files. However, only Internet Explorer will support .ani files right now, I believe (not sure about Chrome). Conversely, Internet Explorer doesn't support .gif cursors. It only supports .cur and .ani.

ETA: As far as I can tell, Chrome does not support .ani files either.

I don't recommend it, but you'll need to find software that converts .gifs to .anis. I doubt you can upload .anis to standard image hosting sites, so you'll need to upload it to your own hosting as well.

You could try:

cursor: url('cursor.ani'), url('cursor.gif'), crosshair;

but I'm not sure if that will work. My theory is Firefox etc. will ignore the .ani and use the .gif, but it's only a theory.

Quote:

Originally Posted by Mew~ (Post 6802136)
Okay, so I'm trying out a format for episode discussions, and I've done this so far.

That's how inheriting from parent elements works. The simplest solution would be to make a 50% transparent pixel and use it as a tiled background of the CSS box, as suggested. It can be done in CSS, but for now images are probably the easiest way to do it. (Remove the opacity tag.)

You might not have access to sufficient image editing software right now, so here's one:

http://i.imgur.com/4MDwa.png

http://i.imgur.com/4MDwa.png


Don't ask about image choice >.> Just picked a random img off the page. It stretches, but I don't know the dimensions of the image you want to put in, so you'll have to adjust that yourself. ;)

Winneon August 24th, 2011 4:24 PM

Ok. I'm not understanding the overlap text concept.

TheMarkCrafter August 30th, 2011 12:02 AM

How can I make that thing under the picture where like Hiiro's sig?

Mew~ August 30th, 2011 12:34 AM

Quote:

Originally Posted by KingSnivy (Post 6826662)
How can I make that thing under the picture where like Hiiro's sig?

Just change the background of your CSS to a soild colour with the same amount of width as your image but just slightly longer height, then just add the image on top, simples.

TheMarkCrafter September 1st, 2011 6:52 AM

@Mew~
I meant the code..

seeker September 1st, 2011 7:14 AM

KingSnivy, it literally doesn't get more basic than this. You should do a little research before asking a question. It's just a plain box, with a few simple codes.

Something along the lines of
HTML Code:

[css-div="background-color: #010103; width: 352px; padding: 4px; border: 1px; cursor: crosshair; padding: 4px;"]{param}[/css-div]



Pokemon Trainer Touko September 2nd, 2011 8:45 PM

Hiiii :D Can someone please tell me how to make a 'floating' box? :D Like the one on the GT8 thread? Please and thank you ^_^

donavannj September 2nd, 2011 9:39 PM

The float: property is your friend. ;)

greg0915 September 4th, 2011 4:26 PM

Ok i tried some of this and now my thread looks like this(Link in sig)
The stuff i entered keeps duplicating and adding [/div] to the end closing it!
I Urgantly need some help! :(

Hybrid Trainer September 4th, 2011 4:34 PM

Well this is more of a forum problem than a css one but what you could do is click the A/A symbol in the top corner and remove all the extra coding and whatnot manually.

Impo September 20th, 2011 6:00 AM

...I just want to bring life to this thread by saying I managed to create my signature using css - all by myself :D .
I'm actually really proud ^^

Hybrid Trainer September 20th, 2011 7:11 AM

That looks pretty good Impo :D
But maybe you want to try adding in these codes so that the border works in all browsers?

Quote:

-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;

Impo September 20th, 2011 2:03 PM

Quote:

Originally Posted by Hybrid Trainer (Post 6856355)
That looks pretty good Impo :D
But maybe you want to try adding in these codes so that the border works in all browsers?


Nice idea :D , thanks.
But every time I add them it automatically wraps url tags around my image locations... I need to experiment more

Hybrid Trainer September 20th, 2011 2:05 PM

Why would it be doing that? o.O
You are putting them into the same css code that the -moz- codes are in right?

Oryx September 20th, 2011 7:15 PM

The problem is that you're editing it in the WYSIWYG editor. Try switching over to plain-text, when you're in the other one it automatically makes every url in the post wrapped with [url][/url] tags. :)

A/A in the corner if you're not sure.

Impo September 20th, 2011 11:13 PM

Quote:

Originally Posted by Toujours (Post 6857207)
The problem is that you're editing it in the WYSIWYG editor. Try switching over to plain-text, when you're in the other one it automatically makes every url in the post wrapped with [url][/url] tags. :)

A/A in the corner if you're not sure.

oh, I forgot about that :s
thanks a bunch :D

..actually, I tried that and it still wraps the tags around it.. oh dear, this is getting frustrating xD

Ooka September 30th, 2011 6:56 AM

If you're doing url(http://linkstuff.com/link) just add in some of these url('http://linkstuff.com/link') and it shouldn't wrap any tags around it.

Impo September 30th, 2011 7:00 AM

I shall try it now, thanks :)

Yay it worked, thanks :D

Uecil October 9th, 2011 1:39 PM

I've never been too sure on this, but I would like to make the width of this:


Smaller. Is there any way of doing that?

Hybrid Trainer October 9th, 2011 1:47 PM

You use the overflow CSS code and set it to hidden so it turns out like this :)


For the sound BB code you need to set the width to 60px if you just want to get the control buttons.

[cd=overflow:hidden; width:60px;][sound=Itsumo No Fuukei]http://www.fileden.com/files/2010/10/22/2999413/Suzumiya%20Haruhi%20OST%20-%20Itsumo%20no%20fuukei_%28new%29.mp3[/sound][/cd]

Uecil October 10th, 2011 9:31 AM

Quote:

Originally Posted by Hybrid Trainer (Post 6882133)
You use the overflow CSS code and set it to hidden so it turns out like this :)


For the sound BB code you need to set the width to 60px if you just want to get the control buttons.

[cd=overflow:hidden; width:60px;][sound=Itsumo No Fuukei]http://www.fileden.com/files/2010/10/22/2999413/Suzumiya%20Haruhi%20OST%20-%20Itsumo%20no%20fuukei_%28new%29.mp3[/sound][/cd]

That's perfect! thank you :D
I shall try that now.

Moltres Rider October 11th, 2011 4:44 PM

I know nothing about CSS, but I want my signature to cycle through different texts one at a time similar to the userbars this member has http://www.pokecommunity.com/member.php?u=255550

I want each of my links to cycle through one at a time like the user bars gameplayer56 has (in the signature of this member)

Hybrid Trainer October 11th, 2011 11:16 PM

Sorry to say Justin but the way that person does it is by turned the userbars into a gif.

The closest thing you can do to get it like that with CSS is to create a box and have people manually scroll it.
It can be done like this:
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll


You set the box's width and height and then the overflor code makes it scroll when the text hits the box's limit.

Quote:

[cd=width:300px; height:30px; overflow:auto;]Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll[/cd]

Impo October 15th, 2011 2:16 AM

does anyone here know how to make css appear side by side? All I've got is this:


RADIANT YELLOW BUILDING


The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP




SERENE BLUE
BUILDING



The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP




NETTLE RED
BUILDING



The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP



And I want it to be side by side, so I can add another css box under all three. Any help is appreciated, thanks.

Mew~ October 15th, 2011 3:49 AM

I had a similar problem before. Just add this to each css coding 'display:inline-block;' if your too lazy then just quote this post and steal the code. xD;


RADIANT YELLOW BUILDING


The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP


SERENE BLUE
BUILDING



The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP


NETTLE RED
BUILDING



The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP



Impo October 15th, 2011 3:51 AM

...wow, thank you so much :D !

...is there a way to put spaces inbetween? I'll mess with the code anyway, thank you :) !

Quote:

Originally Posted by Mew~ (Post 6889664)
I had a similar problem before. Just add this to each css coding 'display:inline-block;' if your too lazy then just quote this post and steal the code. xD;

RADIANT YELLOW BUILDING


The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

SERENE BLUE
BUILDING



The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

NETTLE RED
BUILDING



The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP




wow, thanks so much

but now the boxes are all next to each other, and not spaced like they were before.
Do you know how to fix that :s ?

Wait, I fixed that. But now, how do I give them spaces inbetween :/ ?

Purple Materia November 28th, 2011 12:59 PM

Centering three divs?
 
I'm trying to have a three-column website, where the columns are completely center.

It's driving me crazy trying to center them! I know I'm doing something wrong, obviously, but I can't figure it out. I am a little new to coding websites, though, so keep that in mind.

Spoiler:
Code:

    body {
    background: url('img/bg.png') repeat #FFFFFF;
    color:#000000;
    font: 10px Verdana, Tahoma, Arial;
    line-height: 18px;
    margin:0;
    padding:0;
    text-align:center;}

/* CSS for DIVs and the like */

    #container{
    margin:0 auto;
    width:1024px;}

    #t-left-blogs{
    font: 11px Verdana, Tahoma, Arial;
    float:left;
    text-align:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:5px;
    background:#FFFFFF;}

    #t-middle-aboutme{
    font: 11px Verdana, Tahoma, Arial;
    text-align:left;
    float:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:5px;
    background:#FFFFFF;}

    #t-right-twitter{
    font: 11px Verdana, Tahoma, Arial;
    float:left;
    text-align:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:3%;
    background:#FFFFFF;}

    #banner{
    font: 11px Verdana, Tahoma, Arial;
    text-align:left;}

/* CSS for Images */

    img.floatRightClear {
    float: right;
    margin: 3px;}

/* Links and text */

    h1{font: 18px Verdana, Tahoma, Arial;}

    a  img{
    outline:none;
    border:none;}

    a:visited {
    color: #00697c;
    text-decoration: none;}

    a:link{
    color: #00697c;
    text-decoration: none;}

    a:active{
    color: #00697c;
    text-decoration: none;}

    a:hover {
    color: #003741;}




HTML
Spoiler:
Code:

<!--

    DIV PREFEXES:
    t - The tables that hold content
    b - The bottom of the page that holds
        the games and music stuff
-->
<body>
<div id="container">
<div id="top-navbar">Projects / About Me / Contact Me</div>
<div id="banner"><center><img src="img/banner.png"/></center><br><br></div>
  <div>
      <div id="t-left-blogs"><font size="5">Recent posts.</font><br><br>
                                Blog entries go here.</div></div>

      <div id="t-middle-aboutme"><font size="5">Hello. I'm a nerd.</font><br><br>
                                This is an introduction.</div>

      </div>
      <div id="t-right-twitter"><font size="5">Recent tweets.</font><br><br>
                                These are tweets.
      </div>
    </div>
</div>
</body>
</html>




Thanks in advance!

@Impo - Try using "margin-left" and "margin-right".

donavannj December 11th, 2011 5:49 PM

Quote:

Originally Posted by Purple Materia (Post 6946070)
I'm trying to have a three-column website, where the columns are completely center.

It's driving me crazy trying to center them! I know I'm doing something wrong, obviously, but I can't figure it out. I am a little new to coding websites, though, so keep that in mind.

Spoiler:
Code:

    body {
    background: url('img/bg.png') repeat #FFFFFF;
    color:#000000;
    font: 10px Verdana, Tahoma, Arial;
    line-height: 18px;
    margin:0;
    padding:0;
    text-align:center;}

/* CSS for DIVs and the like */

    #container{
    margin:0 auto;
    width:1024px;}

    #t-left-blogs{
    font: 11px Verdana, Tahoma, Arial;
    float:left;
    text-align:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:5px;
    background:#FFFFFF;}

    #t-middle-aboutme{
    font: 11px Verdana, Tahoma, Arial;
    text-align:left;
    float:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:5px;
    background:#FFFFFF;}

    #t-right-twitter{
    font: 11px Verdana, Tahoma, Arial;
    float:left;
    text-align:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:3%;
    background:#FFFFFF;}

    #banner{
    font: 11px Verdana, Tahoma, Arial;
    text-align:left;}

/* CSS for Images */

    img.floatRightClear {
    float: right;
    margin: 3px;}

/* Links and text */

    h1{font: 18px Verdana, Tahoma, Arial;}

    a  img{
    outline:none;
    border:none;}

    a:visited {
    color: #00697c;
    text-decoration: none;}

    a:link{
    color: #00697c;
    text-decoration: none;}

    a:active{
    color: #00697c;
    text-decoration: none;}

    a:hover {
    color: #003741;}




HTML
Spoiler:
Code:

<!--

    DIV PREFEXES:
    t - The tables that hold content
    b - The bottom of the page that holds
        the games and music stuff
-->
<body>
<div id="container">
<div id="top-navbar">Projects / About Me / Contact Me</div>
<div id="banner"><center><img src="img/banner.png"/></center><br><br></div>
  <div>
      <div id="t-left-blogs"><font size="5">Recent posts.</font><br><br>
                                Blog entries go here.</div></div>

      <div id="t-middle-aboutme"><font size="5">Hello. I'm a nerd.</font><br><br>
                                This is an introduction.</div>

      </div>
      <div id="t-right-twitter"><font size="5">Recent tweets.</font><br><br>
                                These are tweets.
      </div>
    </div>
</div>
</body>
</html>




Thanks in advance!

@Impo - Try using "margin-left" and "margin-right".



I see at least two excess closing </div> tags without opening pairs, causing at least one of your divs to close early.

Legendary Silke December 29th, 2011 3:16 AM

Hmm...

OK, here's the deal:

My signature appears correctly in IE7/8/9, Chrome, and the Android browser. However, when rendered in Firefox, it somehow appends extra padding to the bottom, causing the signature area to have a vertical scrollbar.

How should I fix it? Or is the issue on the forum side? (No extra padding appears in the signature preview or in this post)

Code:

[center][css-div="position: relative; top: 0px; left: 0px; font: 10pt "Trebuchet MS", Helvetica, sans-serif; border-style: solid; border-width: 4px; border-color: black; background-image:url("http://i1096.photobucket.com/albums/g329/Jarooda/Signatures/twiggysigback2.jpg"); width: 592px; height: 342px;"][css-div="position: relative; top: 0px; left: 0px"][img]http://i1096.photobucket.com/albums/g329/Jarooda/Signatures/sigshadowinset.png[/img][/css-div][css-div="position: relative; top: -342px; letter-spacing: 1px; color: #ffffff; width: 592px; height: 24px; background-color: #7e9a3b; opacity: 0.85; filter:alpha(opacity=85);"][center][size=3][URL=http://www.pokecommunity.com/blog.php?u=243899][color=#ffffff]diaries of a quadruped[/color][/URL] :: [URL=http://www.pokecommunity.com/member.php?u=73941][color=#ffffff]paired with kip[/color][/URL] :: [URL=https://twitter.com/#!/AxAxAxew][color=#ffffff]twitter[/color][/URL][/size][/center][/css-div] [css-div="letter-spacing: 1px; position: relative; top: -62px; color: #ffffff; width: 592px; height: 24px; background-color: #7e9a3b; opacity: 0.85; filter:alpha(opacity=85);"][center][size=3][url=http://www.pokecommunity.com/showthread.php?t=269655][color=#ffffff]starters[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=264197][color=#ffffff]cute[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=268621][color=#ffffff]dragons[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=269280][color=#ffffff]water[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=266169][color=#ffffff]snivy[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=270023][color=#ffffff]egg swap iv[/color][/url][/size][/center][/css-div][css-div="letter-spacing: 1px; position: relative; top: -62px; color: #ffffff; width: 592px; height: 14px; background-color: #3F4C1D; opacity: 0.85; filter:alpha(opacity=85);"][center][size=1]signature art by kip[/size][/center][/css-div][/css-div][/center]



Hybrid Trainer December 29th, 2011 5:24 AM

It seems to be a forum problem twiggy. I can see what you mean on firefox it adds quite a bit of margin to the bottom causing it to scroll but after I changed from the default delibird theme to Flames of Simplicity the scroll bar was gone.
Looks like there isn't much you can do about it :x

Legendary Silke December 29th, 2011 5:42 AM

Quote:

Originally Posted by Hybrid Trainer (Post 6986919)
It seems to be a forum problem twiggy. I can see what you mean on firefox it adds quite a bit of margin to the bottom causing it to scroll but after I changed from the default delibird theme to Flames of Simplicity the scroll bar was gone.
Looks like there isn't much you can do about it :x

The problem seems to also appear with The Stand Nexus, so I have a feeling that the scrollbar implementation is problematic or something.

So what to do if a signature moderator sees the signature using Firefox?

Hybrid Trainer December 29th, 2011 6:01 AM

Quote:

Originally Posted by ♪Twiggy♪ (Post 6986931)

So what to do if a signature moderator sees the signature using Firefox?

Technically you aren't breaking any rules so if it were me who was judging it I would let it slide but really it depends on who's judging it. Some will let it be because it's a problem on the forum styles side, some will make you change it because it's a problem on the forum styles side.
I think if you are forced to change it then you could remove the credit part at the bottom and maybe add it in as a title over kips name?

Petie December 29th, 2011 6:10 AM

While not the most elegant solution, you could force the scrollbar to be hidden by adding overflow: hidden; to your CSS. It should have no effect on any of the working browsers and since the scrollable content is white space in Firefox, you won't be missing anything there either.

Legendary Silke December 29th, 2011 7:22 AM

Quote:

Originally Posted by Petie (Post 6986990)
While not the most elegant solution, you could force the scrollbar to be hidden by adding overflow: hidden; to your CSS. It should have no effect on any of the working browsers and since the scrollable content is white space in Firefox, you won't be missing anything there either.

That seems to be the best solution to work around the FF issue - the extra padding is now invisible and inaccessible, the scrollbar disappeared, and FF users are now none the wiser.

Tsutarja December 31st, 2011 6:05 PM

Question of curiosity, but how do I get a transparent rectangle overlayed on top of a background with a scroll box inside the transparent rectangle? I'm not too experienced with CSS as a whole.

Hybrid Trainer December 31st, 2011 6:19 PM

Well as for the transparent bit Zach you can either set the background image as a semi-transparent colour . The other way is to make the box transparent using this code:
Code:

opacity:0.4

Or

filter:alpha(opacity=40)
(for IE8 or earlier)


The transparency code also makes everything inside the box transparent too though so personally I'd go with the background image.

As for the scroll box bit you just set the height/width to how big you want to be and then use this code
Code:

overflow: auto;



Impo January 6th, 2012 6:11 AM

I'm in a little bit of trouble. What I want to do is have some rotating text on the outside of my signature, but even time I do it the text goes far far away.

This is what I mean:


Does anyone know how to fix this?

Hybrid Trainer January 6th, 2012 6:51 AM

I've had this problem quite a lot Impo "/
So far from what I've seen the only way to fix it is to use positioning codes such as "left:0px;", "right:0px;", "top:0px;" and "bottom:0px;" to position it in the correct place like so.



I'm assuming that's what you were trying to do but idk :x

I don't use rotation that much though so if there's another, easier way of doing this please do share :3

Impo January 6th, 2012 7:31 AM


Wow, that's amazing! Thank you so much :D !
But I kinda edited my signature a small touch, and I tried subtly adding it in to the equasion, but then I messed up again /facepalm

I want it all to be on the right side of the page, with everything in the Toad thing centered. Would it be too much to ask if you could help with that :x ?

Legendary Silke January 6th, 2012 7:39 AM

Quote:

Originally Posted by Impo (Post 6998719)
Wow, that's amazing! Thank you so much :D !
But I kinda edited my signature a small touch, and I tried subtly adding it in to the equasion, but then I messed up again /facepalm

I want it all to be on the right side of the page, with everything in the Toad thing centered. Would it be too much to ask if you could help with that :x ?

You might want to remove a couple of extra returns/enters at the bottom of the sig, by the way. That should remove the scroll - if not, insert "overflow: hidden;" to the first div block.

Maybe we can do a reboot of the thread at this point... should we? I think a bit of extra information about all the fancier stuff should be in there. XD

Impo January 6th, 2012 7:52 AM

.. I don't currently have any visible scroll on my screen. The line spacing for the enters is 4px, I think that's why.

Hybrid Trainer January 6th, 2012 8:11 AM

Ok I think that's done it. What I've done is created a box and set it to relative using the position: code. I've also added on a bit of a margin to the right so that the text isn't poking out the side :3


.


Quote:

Originally Posted by ♪Twiggy♪ (Post 6998730)
Maybe we can do a reboot of the thread at this point... should we? I think a bit of extra information about all the fancier stuff should be in there. XD

Or failing that we could just get a mod/the original poster to add stuff in? xD


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.