HTML/CSS/JS Help Answering Questions, Making Pages
ABOUT
I like doing coding and so far I've been selfish and used my time to only make pages for me. So to rid myself of some guilt I'd like to help others for free any way I can. Gotta fight artificial scarcity per my personal philosophies, too.
I'm no expert in these things, but I am pretty getting pretty decent.
I want everyone to have access to the look they want for their page. Some people like it plain and that is awesome, but if you don't know what to do and want something fancier, I can help.
I HAVE A QUESTION / HOW DO YOU DO X?
Hopefully I have an answer. Try me. If I don't know I apologize in advance and will try to do some research and figure out the answer. If I do know, I'll try my best to explain and toss you some links maybe. W3Schools is a very good site to help you learn HTML/CSS/JS.
If you have problem code that you want me to look through, drop it off at pastebin and send me a link to it. I will play with it and try to get it to behave. If you don't have a pastebin link I'll just comb your source code.
WILL YOU MAKE ME A THING?
I would love to. It's fun for me. There's also a template in the completed projects section you can use if you like.
What I will need from you:
Tell me what you want as clearly as possible. It's best if you can draw me a picture of the page layout you want. It is just fine if you use MS-Paint and draw some boxes. Sometimes it is helpful if you can link me to non-TEF websites and tell me things you like about them (ex "I like the text arrangement") but I don't want to take more than minor inspiration from any one source and I don't like to do it from other pages on this site. The website colourlovers is helpful if you want to register and make yourself a color palette for me to work from.
Host any files you would like me to use and link me to them so that I can work with them when I am designing the page. If you don't have images yet, you can tell me the exact dimensions that you want them to be and I can doodle little mockups for them that will hold their place until you replace them. If you don't care about dimensions, I will make the decision. Dropbox and Photobucket are both good sites for hosting files.
What I can do in return:
Do my best to make a page that looks like what you had in mind. I may not be able to do everything you wanted if you had something complicated in mind, but we can work something out.
I can give you your code via pastebin in one chunk or with heavy, organized comments. I recommend the latter because if you are new to coding you will be able to see which part affects what, and ultimately I think that will make it easier for you to learn in the future. The more you learn, the less you will need me. I'll always leave credits commented in the code where they are appropriate.
But please do note:
I work at my own pace
I'm not gonna help you if you are mean
If you vanish from the site and I don't see you for a while I'll put your project on hold and move on to someone else, but if you come back I'll get back to it eventually
I won't make a design that uses tiny text I cannot read. I bad terrible eyesight and a vendetta against small text and low contrast. I make sure all my text complies with the WGAC 2.0 contrast ratio formula. This is the only part of the page code that I really ask that you do not modify yourself because it really hurts that people still use small text in their posts and blogs. Contrary to popular belief it doesn't make pages look better, just less legible.
I won't make a design that a colorblind person cannot read. I check against several varieties of colorblindness using a helpful website.
I will not make a page that cannot be viewed on common monitor sizes, because some people can't afford big monitors.
PROJECTS QUEUED UP
These will happen in an unorderly fashion of my choosing, possibly working on some simultaneously.
Bela for NikaGika (But I need some files first before I can start)
Arachneae for Sentinal
Callielujah's twig-antlered fawn when I know more about her
After that, open open open
Here's the test blog. When I work on these I host CSS/JS externally so that makes it MUCH easier for me to switch between projects without worrying about them affecting each other. Don't worry if you see one vanish and another one come up, I have stuff saved and just like to bounce between things.
PROJECTS FINISHED
Click the thumbnail to see the page as my 1920x1080 desktop sees them. It's a common monitor size for TEFc users, but it's important to remember in page design that some people have teensy tiny screens so I try to limit the size of the designs.
Vaq for Skittlezrawr. I ended up doing all the pictures and everything because he wheedled me into it and we live together. So I let him get away with it. He had almost no involvement outside of the character design, haha.
Jezara for Chromai <3. She did the great background pattern herself on Colourlovers and also came up with the layout, so it wasn't too much work on my part.
Template, free for anyone to use. Click the thumbnail to see what it looks like, and there's also some info written on it about the template too. Here is the code! There is also a version that does not have the javascript tabs here if you prefer. Have fun with it!
For 7x. They provided the ideas but I changed a few things here and there about the spacing. The background image is fixed, so stays put when scrolling but in the screen capture that doesn't show. Background image is from NASA and is in the public domain, edited by me.
Do you think you could help me with a few questions, and fixing errors in my CSS? I understand the basics of it but there's some things I'm having a really hard time getting around.
No problema. I'll answer whatever I can and if you've got errors I you can drop your code in a pastebin and I'll poke through it to see if I can find what's up.
Okay. Here it is. I scrapped the CSS I had last night because it was a total mess, so now I'm focusing on making the CSS bit by bit. I'm trying to add your Javascript to the code but with the box I have, it keeps messing up the alignment. I've also been having trouble with the text in one node "flooding" into all of the other nodes.
It's probably best if you put the CSS into a blog and see it for yourself. I have some other questions but I wanna get this figured out first.
Also, sorry if I used any incorrect terms or if some things I say didn't make sense. I'm still fairly new to complicated CSS like this. Thank you so much for your help ;;
I'll take a look and start playing with it to see if I can get it to work
EDIT: Alrighty, I took a look and here's the fix. You had most of it perfect, unfortunately all it takes is one little thing to mess it up. So here are the changes I made, not all of them are problem fixes and just happened while I was testing:
-I added a closing </span> tag to the "one" span tag. The lack of the closing tag was what was making the Javascript act weird
-I moved the Lorem Ipsum inside of the "two" tab and added little notes saying "tab one" and "tab two" etc. inside the tabs. Wasn't necessary, just did that to make sure it was working.
-I moved the tab span tags inside of the big div that was holding the "one" span tag. Before they were outside of it and for the look you wanted, inside was best for them.
-I removed one of the div tags entirely because you said it was messing with your alignment and I wasn't quite sure what you meant. It was <div align=right> and that was what was making your code go over to the right. In what I gave back I left it aligned to the left, but if you want it in the middle you can add <div align=center> to the very beginning of my edit and add </div> to the very end. You can change the center part back to right if you prefer that and I just screwed up.
I hope I got everything solved there but if I still messed it up let me know and I'll fix it again.
The < div align=right > was intentional, because I was hoping to have something like this (minus the pictogram button) with a drawing as a background, and I wanted it to fade into the comments like this, which brings me into my next question.
I was using Unplugged's plain white template with some of my own changes, and I wanted to insert a background image into just the blog strip, but I couldn't find which part of the page to address to get something to this effect.
And back to the alignment, I was talking about the alignment of the text in the second box with no scroll bars. I removed two paragraphs of the Lorem Ipsum in the first box and then it was too far to the right, and that's about where I decided to give up for the night.
I'll take a look at your code and see if some things are still off. Thank you so so so much for the help. I was getting to the point where I was just about ready to give up.
Oh, and another thing: do you have any idea how to get pictograms to show up in your page and glow when you highlight them? I've seen people do it with things other than pictograms, and I think Unplugged has a code for it but how do you insert a pictogram? This has been driving me absolutely crazy XD
Thank you again!!
[Edit]
Found the issue with the alignment in the box. It has to do with the padding for the invisible scroll bar code, and how the widths and heights in that code correspond to the width and height of the box itself. Getting it just right will be a matter of tweaking both of those codes pixel by pixel, and I really don't want to do have to do that so I'll probably just leave it. Plus, it looks fine when there's enough text to be able to scroll, so I'll just use a larger font I suppose.
Also, the Lorem Ipsum will eventually cut off if there's not any spacing after the text, so I added more space after it, since that's the easiest way to fix it, lol
Getting images into the backgrounds of divs can be accomplished with this thing: background-image:url("YOURURLHERE"); and you can use other CSS to determine whether or not the image will repeat itself (so if you want an illustration in the background, you wouldn't want it to repeat and you'd use background-repeat:no-repeat; ) and where it will appear in the div such as at the top or the bottom or left or right or whatever. This page explains it better than I can.
I think that the scroll bar can be set to be always visible with overflow:scroll; in the div's style so you shouldn't have to worry about putting in extra spaces in order to keep it going perfectly. Invisible scrollbars are hard for everyone. :\
Images appearing on the hover is usually accomplished by creating a div, and setting its background to the image that shows when you don't hover over it. Then inside of the div you put another div tag or span tag, set its opacity to 0 with CSS, and put the glow effects in there.
So at its most simple you'd have something like this on your bio: <div id=glowdiv><span></span></div>
And something like this in your style tag: #glowdiv {background-image:url('YOURBACKGROUNDIMAGEHERE'); background-repeat:no-repeat;} #glowdiv span {opacity:0; background-image:url('YOURHOVERIMAGEHERE');-webkit-transition:opacity 1s;-moz-transition: opacity 1s;-o-transition: opacity 1s;} #glowdiv span:hover {opacity:1;}
You'd have to change around the size of the div, and also maybe the placement of the span inside of the div, but I've got the important things here (I think). #glowdiv is the div with that ID and everything inside of it. #glowdiv span is every span tag inside the div with the ID of glowdiv. And #glowdiv span:hover is every span tag inside the div with the ID of glowdiv when there is a mouse hovering over it. These are called selectors, here's a page explaining them.
The -webkit-, -o- and -moz- stuff is necessary for the transition to be smoothe. W3 has a page on CSS transitions here that may explain it better than me.
I know the code for inserting background images, but I have no idea which part of the page to address. I tried out a bunch of different stuff in the blue section of Unplugged's CSS Help blog, and I couldn't find anything that changed it.
Okay, I'll try that. I'm probably just going to add a lot of information to all of my javascript tabs and hope for the best. I feel so achieved that I actually got those stupid scroll bars to work with the rounded boxes and I don't want to give it all up now.
That was a lot to take in! lol
I'll check it out and see what I can do with that. I'm still not sure what to tag for the background image to show up though. It's probably pretty obvious but I tried all that I could think of and couldn't get anything to work.
I'll send you a pastebin with the CSS and the basic layout that I want, rather than just a couple of boxes.
As for which part of the page to address when you want to put an image in the background, it honestly depends on where you want it to show up in the background. If I was doing it I would probably create a brand new div. When you create a div element, it becomes a new thing in addition to the parts of the blog that are already there. You will have to give the div an ID or a class, and then refer to it by that in the style tag when you put the image into it. For instance, when you want to change the background of the entire blog you go to the "body" part of the blog and edit in there. The "body" is the name of the tag that every single thing we see on the page appears inside of. If you have a div like this <div id=numberone>infohere</div> you refer to it in the style tag as #numberone {stylestuffhere} in order to change it.
You could probably also put it inside of the #wrapper #container #center .right-corner .left-corner part and make the node background transparent if you want a background image that will be behind text but above the main back background.
And yeah, if you pass me your entire page code I'll be happy to take a looksee.
oooh neato, so nice you're doin this 'w'
i'm makin some css now, but it feels off for some reason maybe you can give me some design suggestions here
I'm not sure what to do with the top bar, it looks out of place but it needs to be there with the disclaimer. hmm
Thank you very much! I would like to make the frame in my bio, that would be in the frame was the text and frame for "Dates", so you can scroll through and watch them. This will reduce the page that I want) And, if possible, you could correct the errors? the first time I am dealing with CSS .-.
It would be great if you were made in my bio a little "magic CSS" (movement, shadows, or something like that)) but it is not very important, but if you want and if you have time to think about something for him c:
I have a question concerning the mp3 players. The ones that are just a small box, how does one code that in on a thread/bio? How do you have music play on it? I have tried numerous times to have success in this task, I fail every time.
I would love it if you could help with Arachneae's bio. I have an idea of the colors I want for Arachneae's For her I don't need anything fancy and would be glad to do some rough sketches of layout and/or link you to other bios I've loved. If you are too busy that's fine but if not I'd love it if you could help out!
I can do that I'm in the middle of another one right now so you might have to wait a bit but I'd be happy to do one for you. And yeah, it is easiest if you can draw to give me an idea of what you want, otherwise what I come up with may be simpler than what you had in mind.
Ok, I may need sometime to think about it so it's perfect that you are working on something else. I signed up for the color lovers site and was able to make a palette I like a bit better as well.
Ok, I may need sometime to think about it so it's perfect that you are working on something else. I signed up for the color lovers site and was able to make a palette I like a bit better as well.
Hello !
At first, I would like to say that it's very nice from you to do CSS requests like that, and to help others.
I was just wondering... I saw on several biographies that, inside the <*div>, there were tabs (when you click, for example, on "Ties" or "Art", the text inside the <*div> changes, without changing the link though). I don't know if I explained it well... I think it's a bit like you did in one of your finished projects, with the green CSS layout, where we can read "One - Two - Three", etc...
Do you think it would be possible to share the code you used, please..? If yes, thank you very much. And if not, well, thank you anyway, aha ! (:
I'm sorry to bother you again, but I have some problem with a code... On this layout, when I put my mouth on "Hearth", as you can see, two <*div> open. I found out it was because of the tag. When I don't write it, then there isn't any problem. Here is the code for the 'hover' stuff : <a class="info">Heart<span> <span style="color:#80BFFF">oo</span>oooooooo </a>
And here is the a.info one : a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info:hover { z-index:25;} a.info span { display: none; } a.info:hover span { display:block; position:absolute; top:2em; left:-12em; width:250px; background:#050505; text-align: center; padding: 2px; }
I don't know where it comes from... Thank you in advance !
Thanks stalkers~
And oqu that's super sweet of you to say I appreciate it.
Laiia, took me longer than I'm proud of but I figured it out. There are two tags after Heart, and you only want one. Since there are two spans, it makes two hover windows. If you take one out you should just have one little window again.
So you mean I should remove one of the <*span> tags ? Because I've tried but well, it still doesn't work... I tried to put the color by using [*color=#] instead of <*span style=..>, but the problem is still the same... <a class="info">Heart <span> [c*olor=#1D1D1D]oo[/color]oooooooo </a>
I'm really sorry to bother you with that T.T
7x, sure. Can you draw me a picture of what you want?
Laiia, I don't think it will work to use the color tags because the page will turn them from the BBCode color tags into HTML span tags later, so I think you're stuck with only one color per pop-up window. I think there's a way around this but I'm not sure. I'll play with it and see if I can get it to work so you can have two different colors.
Edit: I was able to get multiple colors in a box. Try this CSS replacing the a.info stuff on your page already (but save the original in notepad first... just to be safe in case I screwed something up). I made some changes to the a.info stuff in how it chooses to display the spans. So now it will only make the first span into a window and the second span will display inline like normal. It MIGHT fuss with your other windows and if that happens I'll take another look at it, but for now try this. <style>a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info:hover { z-index:25;} a.info > span { display: none;} a.info:hover span {display:inline;} a.info:hover >span {position:absolute; top:2em; left:-12em; width:250px; background:#050505; text-align: center; padding: 2px; } a.info { position:relative; z-index:24; text-decoration:none; border-bottom: 0px solid #000000;</style>
Yep, I can do that
If you know the name of the font you used I can look it up and embed it on the page if it is free to use.
If you have a picture of your character already, can you tell me how big it is? If you don't have one, I'll just leave a space of a reasonable size with a placeholder doodle in it.
EDIT: Right now the page looks like this. I've allowed 250px by 400px for the portrait (but it could easily be whatever size you like), and the pictogram images can be 150px in diameter (but I can change that too). There's also probably room for a fancy title with a name if you want that up there too. Let me know how it looks on the page so far and I can fuss with it and change it up.
The names of the fonts is Flavors. I do not know for I found it there but you can also put different font. I have no idea how much it has být.Ale otherwise it's quite a nice background could be darker. But I like it.
I'm glad that worked for you Laiia! The page looks really cool btw and I dig what you did with the health bars and the gradient colors.
7x, gotcha. I found the font so it can go on your page and I can change the background
EDIT: I worked on it some more, added the javascript, added the font you had, moved some stuff around, and put in placeholder pictures. I'm gonna be away for the weekend and while there's a small chance I'll have internet to work on it I probably won't be able to, but you should take a look and tell me what you think.
I was thinking about making the updates window wider and pushing the pictogram and music right, or leaving a bigger space on the right side for the character portrait, but it's up to you.
Bumping during slightly more
Do you think you could help
No problema. I'll answer
Okay. Here it is. I scrapped
It's probably best if you put the CSS into a blog and see it for yourself. I have some other questions but I wanna get this figured out first.
Also, sorry if I used any incorrect terms or if some things I say didn't make sense. I'm still fairly new to complicated CSS like this. Thank you so much for your help ;;
I'll take a look and start
EDIT: Alrighty, I took a look and here's the fix. You had most of it perfect, unfortunately all it takes is one little thing to mess it up. So here are the changes I made, not all of them are problem fixes and just happened while I was testing:
-I added a closing
</span>tag to the "one" span tag. The lack of the closing tag was what was making the Javascript act weird-I moved the Lorem Ipsum inside of the "two" tab and added little notes saying "tab one" and "tab two" etc. inside the tabs. Wasn't necessary, just did that to make sure it was working.
-I moved the tab span tags inside of the big div that was holding the "one" span tag. Before they were outside of it and for the look you wanted, inside was best for them.
-I removed one of the div tags entirely because you said it was messing with your alignment and I wasn't quite sure what you meant. It was
<div align=right>and that was what was making your code go over to the right. In what I gave back I left it aligned to the left, but if you want it in the middle you can add<div align=center>to the very beginning of my edit and add</div>to the very end. You can change the center part back to right if you prefer that and I just screwed up.I hope I got everything solved there but if I still messed it up let me know and I'll fix it again.
The < div align=right > was
I was using Unplugged's plain white template with some of my own changes, and I wanted to insert a background image into just the blog strip, but I couldn't find which part of the page to address to get something to this effect.
And back to the alignment, I was talking about the alignment of the text in the second box with no scroll bars. I removed two paragraphs of the Lorem Ipsum in the first box and then it was too far to the right, and that's about where I decided to give up for the night.
I'll take a look at your code and see if some things are still off. Thank you so so so much for the help. I was getting to the point where I was just about ready to give up.
Oh, and another thing: do you have any idea how to get pictograms to show up in your page and glow when you highlight them? I've seen people do it with things other than pictograms, and I think Unplugged has a code for it but how do you insert a pictogram? This has been driving me absolutely crazy XD
Thank you again!!
[Edit]
Found the issue with the alignment in the box. It has to do with the padding for the invisible scroll bar code, and how the widths and heights in that code correspond to the width and height of the box itself. Getting it just right will be a matter of tweaking both of those codes pixel by pixel, and I really don't want to do have to do that so I'll probably just leave it. Plus, it looks fine when there's enough text to be able to scroll, so I'll just use a larger font I suppose.
Also, the Lorem Ipsum will eventually cut off if there's not any spacing after the text, so I added more space after it, since that's the easiest way to fix it, lol
[Edit 2]
Here's the new one. I didn't change much.
Getting images into the
background-image:url("YOURURLHERE");and you can use other CSS to determine whether or not the image will repeat itself (so if you want an illustration in the background, you wouldn't want it to repeat and you'd usebackground-repeat:no-repeat;) and where it will appear in the div such as at the top or the bottom or left or right or whatever. This page explains it better than I can.I think that the scroll bar can be set to be always visible with
overflow:scroll;in the div's style so you shouldn't have to worry about putting in extra spaces in order to keep it going perfectly. Invisible scrollbars are hard for everyone. :\Images appearing on the hover is usually accomplished by creating a div, and setting its background to the image that shows when you don't hover over it. Then inside of the div you put another div tag or span tag, set its opacity to 0 with CSS, and put the glow effects in there.
So at its most simple you'd have something like this on your bio:
<div id=glowdiv><span></span></div>And something like this in your style tag:
#glowdiv {background-image:url('YOURBACKGROUNDIMAGEHERE'); background-repeat:no-repeat;} #glowdiv span {opacity:0; background-image:url('YOURHOVERIMAGEHERE');-webkit-transition:opacity 1s;-moz-transition: opacity 1s;-o-transition: opacity 1s;} #glowdiv span:hover {opacity:1;}You'd have to change around the size of the div, and also maybe the placement of the span inside of the div, but I've got the important things here (I think). #glowdiv is the div with that ID and everything inside of it. #glowdiv span is every span tag inside the div with the ID of glowdiv. And #glowdiv span:hover is every span tag inside the div with the ID of glowdiv when there is a mouse hovering over it. These are called selectors, here's a page explaining them.
The -webkit-, -o- and -moz- stuff is necessary for the transition to be smoothe. W3 has a page on CSS transitions here that may explain it better than me.
I know the code for inserting
Okay, I'll try that. I'm probably just going to add a lot of information to all of my javascript tabs and hope for the best. I feel so achieved that I actually got those stupid scroll bars to work with the rounded boxes and I don't want to give it all up now.
That was a lot to take in! lol
I'll check it out and see what I can do with that. I'm still not sure what to tag for the background image to show up though. It's probably pretty obvious but I tried all that I could think of and couldn't get anything to work.
I'll send you a pastebin with the CSS and the basic layout that I want, rather than just a couple of boxes.
As for which part of the page
<div id=numberone>infohere</div>you refer to it in the style tag as#numberone {stylestuffhere}in order to change it.You could probably also put it inside of the
#wrapper #container #center .right-corner .left-cornerpart and make the node background transparent if you want a background image that will be behind text but above the main back background.And yeah, if you pass me your entire page code I'll be happy to take a looksee.
I'm sorry, went a second time
Hello, I would like you to
Sure! Do you know how you
oooh neato, so nice you're
i'm makin some css now, but it feels off for some reason maybe you can give me some design suggestions here
I'm not sure what to do with the top bar, it looks out of place but it needs to be there with the disclaimer. hmm
Thank you very much! I would
It would be great if you were
@Hadou - Left my notes on
@LuhanST
Like these things?
I can make things like that
Oh yeah! it is) thanks^^ Only
I'm not sure what you mean.
If you make a picture to show me, I can make it with CSS.
Oh yeah, that's it! Ideally
http://s019.radikal.ru/i643/1408/66/3f089152817d.png
http://s41.radikal.ru/i091/1408/53/8e6bb0a70146.png
but they do not appear in my bio, or they do not exist .-. You can make these frames, or the ones that you suggested))
Oh, if they don't appear but
If you edit the bio, can you click "Input Format"? Then change it to BBCode. Like this? Sometimes it makes CSS not work.
Thank you very much!!! Yes,
I have a question concerning
@LuhanST Yay! @Kujance Do
@Kujance Do you mean like this?
Unplugged has the code and instructions here, it's the second box with code.
Yes! It did work. I need to
I like this eUe /nests
I would love it if you could
I can do that I'm in the
Ok, I may need sometime to
Ok, I may need sometime to
Oh I like those colors I'm
I'm sure whatever you come up with will rock, take time.
Hi! The code you gave me.
It works. Great. But when I add italics tags... It goes weird. I posted a link in one of my blog posts.
Oop, didn't see the comment
Hello ! At first, I would
At first, I would like to say that it's very nice from you to do CSS requests like that, and to help others.
I was just wondering... I saw on several biographies that, inside the <*div>, there were tabs (when you click, for example, on "Ties" or "Art", the text inside the <*div> changes, without changing the link though). I don't know if I explained it well... I think it's a bit like you did in one of your finished projects, with the green CSS layout, where we can read "One - Two - Three", etc...
Do you think it would be possible to share the code you used, please..? If yes, thank you very much. And if not, well, thank you anyway, aha ! (:
Avatar & signature by Shimmyshimmy. ♥
Most definitely, I have a
Hnnnn.
Character Hub
Oh my God. Thank you SO much
Avatar & signature by Shimmyshimmy. ♥
Always happy to see your
Track and stalk this anyway ~
I'm sorry to bother you
<a class="info">Heart<span> <span style="color:#80BFFF">oo</span>oooooooo </a>And here is the a.info one :
a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info:hover { z-index:25;} a.info span { display: none; } a.info:hover span { display:block; position:absolute; top:2em; left:-12em; width:250px; background:#050505; text-align: center; padding: 2px; }I don't know where it comes from... Thank you in advance !
Avatar & signature by Shimmyshimmy. ♥
Thanks stalkers~ And oqu
And oqu that's super sweet of you to say
Laiia, took me longer than I'm proud of but I figured it out. There are two tags after Heart, and you only want one. Since there are two spans, it makes two hover windows. If you take one out you should just have one little window again.
I'll be back with info and a
Uh hello can you do CSS for
I already have an idea how it would look. but I do not know if you would like to help me.
Art by Arres
So you mean I should remove
<a class="info">Heart <span> [c*olor=#1D1D1D]oo[/color]oooooooo </a>I'm really sorry to bother you with that T.T
Avatar & signature by Shimmyshimmy. ♥
7x, sure. Can you draw me a
Laiia, I don't think it will work to use the color tags because the page will turn them from the BBCode color tags into HTML span tags later, so I think you're stuck with only one color per pop-up window. I think there's a way around this but I'm not sure. I'll play with it and see if I can get it to work so you can have two different colors.
Edit: I was able to get multiple colors in a box.
<style>a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info:hover { z-index:25;} a.info > span { display: none;} a.info:hover span {display:inline;} a.info:hover >span {position:absolute; top:2em; left:-12em; width:250px; background:#050505; text-align: center; padding: 2px; } a.info { position:relative; z-index:24; text-decoration:none; border-bottom: 0px solid #000000;</style>I like this
Art by Arres
Yep, I can do that If you
If you know the name of the font you used I can look it up and embed it on the page if it is free to use.
If you have a picture of your character already, can you tell me how big it is? If you don't have one, I'll just leave a space of a reasonable size with a placeholder doodle in it.
EDIT: Right now the page looks like this. I've allowed 250px by 400px for the portrait (but it could easily be whatever size you like), and the pictogram images can be 150px in diameter (but I can change that too). There's also probably room for a fancy title with a name if you want that up there too. Let me know how it looks on the page so far and I can fuss with it and change it up.
The names of the fonts is
Art by Arres
It works ! Thank you very
Avatar & signature by Shimmyshimmy. ♥
I'm glad that worked for you
7x, gotcha. I found the font so it can go on your page and I can change the background
EDIT: I worked on it some more, added the javascript, added the font you had, moved some stuff around, and put in placeholder pictures. I'm gonna be away for the weekend and while there's a small chance I'll have internet to work on it I probably won't be able to, but you should take a look and tell me what you think.
I was thinking about making the updates window wider and pushing the pictogram and music right, or leaving a bigger space on the right side for the character portrait, but it's up to you.
Ooh, your template may be
...Well, at least now we're a step closer, ha-ha.
Thinking about doing