|
|
Post by Tiashe on Nov 16, 2015 11:33:46 GMT -8
So I've been working on this template all day and I want to add a tags/note box. Unfortunately, long story short, there's no room for it inside of the template's main body itself, so I wanted to put it as a hover in the center of the 360x200 image. ...Unfortunately, my knowledge of hovers is pretty dismal and after several hours of trying to see how much hair I can lose from frustration, I'm still at square one. The code for the template itself is pretty messy and adding the hover just makes it even -worse-. What do I do!?
The main template.
[div align="center"][div style="width:400px;height:535px;background-image:url(http://i.imgur.com/uPcIVhe.png);border:10px solid #000000;padding:10px;"][div style="margin-top:5px;width:390px;height:125px;background-color:#79455d;"][/div][div style="width:390px;height:100px;background-color:#985775;"][/div][div style="width:390px;height:100px;background-color:#CE7179;"][/div][div style="width:390px;height:75px;background-color:#d27f86;"][/div][div style="width:390px;height:60px;background-color:#e58b5e;"][/div][div style="width:390px;height:40px;background-color:#FF9B69;"][/div][div style="width:390px;height:25px;background-color:#FAD77D;"][/div][div style="width:360px;height:200px;background-image:url(http://placehold.it/360x200);border-right:5px solid #c2badb;border-left:5px solid #c2badb;border-top:5px solid #c2badb;margin-top:-515px;"][/div][div style="width:360px;height:295px;background-color:#dbd3f4;overflow:auto;border-bottom:5px solid #c2badb;border-right:5px solid #c2badb;border-left:5px solid #c2badb;"][div style="font-family:calibri;text-align:justify;font-size:12px;line-height:10px;color:#34313b;padding:5px;"][span style="font-family:verdana;text-transform:uppercase;color:#3d3640;letter-spacing:1px;"]Lorem[/span] words.[/div][/div][/div]
[/div][/div]
What I want to add as a hover.
[div align="center"][div style="width:360px;height:120px;background-image:url(http://i.imgur.com/qaTPS7Q.png);padding:5px;"][div style="width:350px;height:110px;background-color:#FAD77D;border:5px solid #FF9B69;"][div style="width:100px;height:100px;background-color:#CE7179;float:left;margin-top:5px;margin-left:5px;"][div style="width:100px;height:5px;"][/div][div style="width:90px;height:90px;background-image:url(http://placehold.it/90x90px;"][/div][/div][div style="width:225px;height:90px;background-color:#985775;margin-right:5px;margin-top:5px;padding:5px;overflow:auto;float:right;"][div style="font-family:CALIBRI;text-align:JUSTIFY;color:#5C3A48;line-height:10px;font-size:13px;"][b]♡TAGS:[/b] [span style="letter-spacing:3px;text-transform:uppercase;"]@username[/span]
[b]♡NOTES:[/b] Put as many words as you need here, it scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat velit eu feugiat consequat. In porttitor facilisis cursus.
[/div][/div][/div][/div][/div]
Pls halp. ;v;
|
|
|
|
Post by Hunter on Nov 16, 2015 13:31:08 GMT -8
So I've been working on this template all day and I want to add a tags/note box. Unfortunately, long story short, there's no room for it inside of the template's main body itself, so I wanted to put it as a hover in the center of the 360x200 image. ...Unfortunately, my knowledge of hovers is pretty dismal and after several hours of trying to see how much hair I can lose from frustration, I'm still at square one. The code for the template itself is pretty messy and adding the hover just makes it even -worse-. What do I do!? The main template. [div align="center"][div style="width:400px;height:535px;background-image:url(http://i.imgur.com/uPcIVhe.png);border:10px solid #000000;padding:10px;"][div style="margin-top:5px;width:390px;height:125px;background-color:#79455d;"][/div][div style="width:390px;height:100px;background-color:#985775;"][/div][div style="width:390px;height:100px;background-color:#CE7179;"][/div][div style="width:390px;height:75px;background-color:#d27f86;"][/div][div style="width:390px;height:60px;background-color:#e58b5e;"][/div][div style="width:390px;height:40px;background-color:#FF9B69;"][/div][div style="width:390px;height:25px;background-color:#FAD77D;"][/div][div style="width:360px;height:200px;background-image:url(http://placehold.it/360x200);border-right:5px solid #c2badb;border-left:5px solid #c2badb;border-top:5px solid #c2badb;margin-top:-515px;"][/div][div style="width:360px;height:295px;background-color:#dbd3f4;overflow:auto;border-bottom:5px solid #c2badb;border-right:5px solid #c2badb;border-left:5px solid #c2badb;"][div style="font-family:calibri;text-align:justify;font-size:12px;line-height:10px;color:#34313b;padding:5px;"][span style="font-family:verdana;text-transform:uppercase;color:#3d3640;letter-spacing:1px;"]Lorem[/span] words.[/div][/div][/div]
[/div][/div]What I want to add as a hover. [div align="center"][div style="width:360px;height:120px;background-image:url(http://i.imgur.com/qaTPS7Q.png);padding:5px;"][div style="width:350px;height:110px;background-color:#FAD77D;border:5px solid #FF9B69;"][div style="width:100px;height:100px;background-color:#CE7179;float:left;margin-top:5px;margin-left:5px;"][div style="width:100px;height:5px;"][/div][div style="width:90px;height:90px;background-image:url(http://placehold.it/90x90px;"][/div][/div][div style="width:225px;height:90px;background-color:#985775;margin-right:5px;margin-top:5px;padding:5px;overflow:auto;float:right;"][div style="font-family:CALIBRI;text-align:JUSTIFY;color:#5C3A48;line-height:10px;font-size:13px;"][b]♡TAGS:[/b] [span style="letter-spacing:3px;text-transform:uppercase;"]@username[/span]
[b]♡NOTES:[/b] Put as many words as you need here, it scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat velit eu feugiat consequat. In porttitor facilisis cursus.
[/div][/div][/div][/div][/div]Pls halp. ;v; Is this template intended for use on a Proboards forum? If so, do you know if either the Presto Box or Style Tags plugins have been installed on the forum you want to use it on? Unfortunately just based on a preliminary look at your current code I can't think of a way to implement the hover you want directly into the template without the Style Tags. Additionally, if this is for use on a non-proboards forum I'm afraid I can't offer more than basic coding advice on things to try to fix your problem. |
|
|
|
Post by Tiashe on Nov 16, 2015 13:41:25 GMT -8
Oh yes I did forget to mention, we do have iPokemon's style tag installed, and it is indeed a Proboards forum!
|
|
|
|
Post by Hunter on Nov 17, 2015 12:50:37 GMT -8
Oh yes I did forget to mention, we do have iPokemon's style tag installed, and it is indeed a Proboards forum! Because your tags/notes box has so much coding I'm having difficulty getting the whole thing to appear when you hover using style tags. It'll probably take me a couple of days to figure this out, so I'll keep you posted while I fiddle with it. Also, I think that to get this to work I might have to rewrite the entire code for your tags/notes box and change it into a table as opposed to multiple boxes inside of one another. If you do not want me making such drastic modifications to your code please let me know and I'll see if I can't come up with a way to make it work as is. In the meantime, if anyone knows how to get it to work or has an idea that doesn't involve Style Tags please let me know as well. I usually only use hover for minimal elements like changing text so getting this transformation right is giving me some trouble. No promises I can get it to work but I'll keep playing with it until I'm convinced that I personally can't do it. |
|
|
|
Post by Deleted on Nov 19, 2015 15:47:36 GMT -8
So nothing Fancy but your life needs Newclass so bad, anyways simple basic coding for Newclass which gives you a hover however you have to save your work in order to see what your doing with new class because it does not work in the preview section like div coding
[*div][*attr="class","class1"]- this is the lines that apply your coding, must have a div call next is a simple attr with the "class" followed by the coding which you have named.
below you see that the newclass=.class1 ..which is called on in our above coding , here you inter in all the coding like you would with div class, transitions are what give you a hover effect ! in the :hover section is where you define the type of hover you want ! HOPE THIS HELPS
[*newclass=.class1]width: 10px; height: 150px; border-radius: 11px; transition: .6s; overflow: hidden;[*/newclass]
[*newclass=.class1:hover]width: 300px; transition: .6s; overflow: visible;[*/newclass]
Lorem words. [attr="class","class1"] ♡TAGS: username♡NOTES: Put as many words as you need here, it scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat velit eu feugiat consequat. In porttitor facilisis cursus. [newclass=.class1]width: 10px; height: 150px; border-radius: 11px; transition: .6s; overflow: hidden;[/newclass] [newclass=.class1:hover]width: 300px; transition: .6s; overflow: visible;[/newclass] |
|
|
|
Post by Hunter on Nov 25, 2015 17:01:53 GMT -8
Tiashe Sorry for the delayed response. I'm afraid that I can't figure out a way to get your tags/notes box to act as a hover for the picture. I can't think of any alternatives either. I hope you can find someone who can sort this out for you!
|
|
Five years ago, the Pokemon League formed Lux to create a new world order of peace and harmony. A rebellion formed, under the name of Nox, cries tyranny at Lux's new microcosmic control. Their civil war now tears the Pokemon world apart. The world hangs in the balance of predormitum. Which side will you choose?
is a high stakes RP set in a dystopian Russian society recovering from an apocalyptic war between the armies of Heaven and Hell. Greater Russia now stands free from the influence of God and the Devil, and all non-humans run the risk of execution. Outside the safe zones lies the contained wasteland of Moscow, where demons and mutated shadowbeasts continue to terrorize the remaining human survivors who have been penned in with them. As of late, increasing evangelic disturbances threaten the peace that has ruthlessly maintained by the secret police.
