|
|
Post by Ardkinemiel Hyperion on Jun 5, 2014 22:52:26 GMT
First Word goes in the span style. Entire template stretches around your text, this is a little complicated but I thought it looked nice and I'm quite happy with the end result.
WORDS ###
TAGS @name @name
NOTES put your notes here this box it stretches
|
|
|
|
|
Post by Ardkinemiel Hyperion on Jun 12, 2014 16:39:05 GMT
Image fade. [attr="class","stayhidden"] | [attr="class","fadein"] WORDS ###
TAGS Ardkinemiel Hyperion @name @name not loads.
NOTES Keep them short.Keep them short.Keep them short. | First Word goes in the span style. Entire template stretches around your text, this is a little complicated but I thought it looked nice and I'm quite happy with the end result.
|
[newclass=.stayhidden]opacity:1;-webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; width: 400px;[/newclass] [newclass=.stayhidden1:hover]opacity:0;-webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; width: 400px;[/newclass] [newclass=.fadein]margin-top:-116px;opacity:0;width: 400px; font-size:12px;letter-spacing:1px;-webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; [/newclass] [newclass=.fadein:hover]opacity:1;-webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; width: 400px;[/newclass] |
|
|
|
Post by Ardkinemiel Hyperion on Jun 12, 2014 18:03:23 GMT
I made something very similar before. I decided to mess with hover/newclass stuff and sliding stuff around. I've never successfully made a slide posting template. I have done for skinning but never could do it for sliding posting templates so here you go. Have a look at this. If you hover over the icon places? The template slides down to reveal the words/tags/notes box.
RULES OF USAGE 01. Don't remove my credits
02. Do not simply put it in a locked forum for your 'friends' to use so you can get 'likes' on your post. LINK them to THIS thread for the template.
03. You can change colors, background images, obviously icons and the like. Try not to mess with the newclass stuff though and any new creations you make from this? Just post back letting me know it's always nice to see people reverse engineering my stuff and figuring things out for themselves that way.
04. If you get stuck and lost in the code just pm me.
05. The 'FIRST' word span style has swanky and moo moo text, so the forum will need that installed.
06. When putting an icon in you're looking for fpoimg.com/100x100 that to replace with your icon url.
07. Obviously needs newclass stuff on the forum for it to work.
08. Have fun with it![attr="class","slideup"]  WORDS ###
TAGS Ardkinemiel Hyperion @name @name not loads.
NOTES Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short.Keep them short. | First Word goes in the span style. Entire template stretches around your text, this is a little complicated but I thought it looked nice especially with the hover! I'm quite happy with the end result.
|
[newclass=.slideup]border-top:#a66737 10px solid;height:100px;overflow:hidden;width: 400px;-moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; [/newclass] [newclass=.slideup:hover]height:200px;background-color:#875d3e;-webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s;[/newclass] |
|
