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>




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.