In Post Hover [cont.]

[Welshling]

Sorry for interupting here, but I have requested a plugin for transitions in posts which is the term for what you guys are looking for. Hoverable images, when scrolled over to reveal another layer beneath it.

Anyways, my question to you Wormopolis is the download above, its a simple import to the forum yes? then what, is there any editing options for the coding? and finally, can you edit the styling for the image rollover effects in posts, so that each post is differently styled and unique?

Here is a piece of dohtml coding, where i created a transition able area over an image to include text. And is what I'd be looking for in posts. a customization transition. [DOHTML]<CENTER><LINK HREF='HTTP://FONTS.GOOGLEAPIS.COM/CSS?FAMILY=GRAND+HOTEL' REL='STYLESHEET' TYPE='TEXT/CSS'>
<STYLE TYPE="TEXT/CSS">

.BG { OPACITY:0; WIDTH: 225PX; HEIGHT: 290PX; PADDING:  10PX; BACKGROUND-COLOR:#F9D5D5; -WEBKIT-TRANSITION: OPACITY .6S LINEAR; -MOZ-TRANSITION: OPACITY .9S LINEAR; -O-TRANSITION: OPACITY .9S LINEAR;  Z-INDEX: 1; }
.BG:HOVER { OPACITY: .85; }
.FLUFF::-WEBKIT-SCROLLBAR { WIDTH: 5PX; HEIGHT: 5PX; }
.FLUFF::-WEBKIT-SCROLLBAR-TRACK { BACKGROUND-COLOR: #EEE; }
.FLUFF::-WEBKIT-SCROLLBAR-THUMB { BACKGROUND-COLOR: #D0D2D1; }
</DIV></STYLE><DIV STYLE="WIDTH:400PX;  PADDING: 0PX; ">

<DIV STYLE="WIDTH:400PX; HEIGHT:398PX; BACKGROUND-COLOR:#330000; BORDER-RADIUS:15PX; BACKGROUND-POSITION: CENTER; PADDING-TOP: 72PX; ">
<DIV STYLE='WIDTH: 245PX; HEIGHT: 310PX; BACKGROUND-IMAGE:URL(HTTP://I1054./S494/ZOLA242424/ALEXANDERSKARSGARDGIFS4ME/TUMBLR_MELVSYSZIW1R0UW3OO2_250_ZPSF6760AD3.GIF); BORDER: 8PX SOLID #080000;'><CENTER><DIV CLASS="BG">


<DIV STYLE="BACKGROUND-COLOR: #FFF; PADDING: 10PX;"><DIV STYLE="HEIGHT: 270PX; FONT-FAMILY: CALIBRI;  FONT-SIZE: 10PX; COLOR: #555555; TEXT-ALIGN: JUSTIFY; LINE-HEIGHT: 90%;  OVERFLOW: AUTO; PADDING-RIGHT:  3PX;" CLASS="FLUFF"> [font size="8"][font face="GRAND"]FIRST. M. LAST[/font][/font][/spoiler][/FONT]<BR><BR>
BRIEF HISTORY.<BR><BR>[ul]
[*] PERSONALITY.<BR><BR>

[*] <B>FRIENDS:</B>FRIENDS.<BR><BR>

[*] <B>ENEMIES:</B> ENEMIES.<BR><BR>

[*] <B>LOVERS:</B> LOVERS.
[/ul]</DIV></DIV></DIV>

</CENTER></DIV>
</DIV></DIV><CENTER>[font]MADE BY DEBBIE PELT, THE BITCH THAT BITES THIEVES IN THE REAR!!!.[/font]</CENTER>[/DOHTML]

So how would this work by simply using [presto] would styles work if added to [presto style="width:##"] for example?

delusional.freeforums.net/thread/1030/testing-presto-plugin link to a thread where i am testing the plugin.

[Alanna 🥀🖤]

Sept 8, 2013 0:53:34 GMT -8 Wormopolis said:

try this:

DOWNLOAD

Hmm, I don't think I'm entering it in right or what. Edit: OH! Wait, it didn't work when I was actually looking at it in the thread but when I linked to JUST that post it worked.

In thread: novamterram.boards.net/post/314/thread
In post: novamterram.boards.net/post/314

Question: Would it be able to be customized?

[Welshling]

@khristian at least its working for you lol, my example isn't working at all. so i am definitely adding it in wrong.

edit: I have tried every which way i can think of to get it to work with a div, making a div float over an image isn't working at all for me.
[div align="center"] [div style="width:400px;height:398px;background-color:#330000;border-radius:15px;background-position:center;padding-top:72px;"][div style="width:245px;height:310px;background-image:url('http://i1054./s494/Zola242424/alexanderskarsgardgifs4me/tumblr_melvsysZiW1r0uw3oo2_250_zpsf6760ad3.gif');"][presto]
[div style="background-image:url('http://i1052./s445/welshling/opac.png');font-family:calibri;font-size:10px;color:#555555;text-align:justify;line-height:90%;overflow:auto;"] [font size="4"][font face="georgia"]FIRST. M. LAST[/font][/font]
BRIEF HISTORY.

[ul type="disc"]
[li] PERSONALITY. [/li]

[li] FRIENDS: FRIENDS.[/li]

[li] ENEMIES: ENEMIES.[/li]

[li] LOVERS: LOVERS.[/li]
[/ul][/presto]

[/div][/div]
Made by [a href="http://delusional.freeforums.net"]Delusional[/a].[/div]
[/div]

[Wormopolis]

the height and width is set to be the same as the image, otherwise if the content was smaller, you would see the image below it because its pushed to be a background image of the div.

Im completely baffled why it works linking to just the post and not the thread...

[Wormopolis]

look at the syntax. the first thing after the [presto] tag MUST be an image. then whatever content you want in there. then a closing tag

[Wormopolis]

Sept 8, 2013 7:21:54 GMT -8 @khristian said:

Sept 8, 2013 0:53:34 GMT -8 Wormopolis said:

try this:

DOWNLOAD

Hmm, I don't think I'm entering it in right or what. Edit: OH! Wait, it didn't work when I was actually looking at it in the thread but when I linked to JUST that post it worked.

In thread: novamterram.boards.net/post/314/thread
In post: novamterram.boards.net/post/314

Question: Would it be able to be customized?

ok, redownload from the dropbox again.  I think I figured out the thread vs post weirdness.


and it depends on what you mean by "customized".  the image controls the dimensions of the whole thing.  if you want a smaller area, use a smaller image.  if the content you place inside is bigger, then that is fine, but the underlying div has to cover the image or it shows through.  anything else you put into the content will be on that div itself so you can style that all you want

[Alanna 🥀🖤]

Sept 8, 2013 8:30:32 GMT -8 Wormopolis said:

Sept 8, 2013 7:21:54 GMT -8 @khristian said:

Hmm, I don't think I'm entering it in right or what. Edit: OH! Wait, it didn't work when I was actually looking at it in the thread but when I linked to JUST that post it worked.

In thread: novamterram.boards.net/post/314/thread
In post: novamterram.boards.net/post/314

Question: Would it be able to be customized?

ok, redownload from the dropbox again.  I think I figured out the thread vs post weirdness.


and it depends on what you mean by "customized".  the image controls the dimensions of the whole thing.  if you want a smaller area, use a smaller image.  if the content you place inside is bigger, then that is fine, but the underlying div has to cover the image or it shows through.  anything else you put into the content will be on that div itself so you can style that all you want

Still doesn't work in thread.

What I mean by customized is can I ever change the color of the hover? And can I add padding so the text isn't always at the very top? Can I change the font size or font?

[Welshling]

Wormopolis also just noticed that when wrapped in the code tags, the preto tag changes to html <div class="prestobox">

delusional.freeforums.net/thread/1030/testing-presto-plugin i will be back later, to continue testing the plugin and thanks again

[Wormopolis]

the content you put after the image literally gets moved into the hover div. you can set a generic CSS for all the divs though using

td.content div.message div.prestobox div.hiddenstuff { stuff }

but it affects all of them. if you wanted something specific, you should use divs inside the content itself to setup additional styling


dropbox has revision, so try that one out now. cant figure out why it keeps halting your thread.




as for code tags, yes that is going to happen because the code doesnt know what content is inside code tags versus anything else. the only way to prevent it, it to not have the code run on any post with a code tag.

[Welshling]

Wormopolis; i still can't figure it out. I'm using divs before and after the hover content and getting the hover to line up where i want it (over Alexander Skarsgard) just isn't working, i've tried margins and negative margins within the div directly after the hover image but it only moves the text and not the hover image itself.

[Wormopolis]

the image you are using is a 100x100 white square...

[Alanna 🥀🖤]

Sept 8, 2013 9:49:13 GMT -8 Wormopolis said:

the content you put after the image literally gets moved into the hover div. you can set a generic CSS for all the divs though using

td.content div.message div.prestobox div.hiddenstuff { stuff }

but it affects all of them. if you wanted something specific, you should use divs inside the content itself to setup additional styling


dropbox has revision, so try that one out now. cant figure out why it keeps halting your thread.




as for code tags, yes that is going to happen because the code doesnt know what content is inside code tags versus anything else. the only way to prevent it, it to not have the code run on any post with a code tag.

It works in the thread now!

However, along with the in code box issue, I noticed that after making an action on that thread (like deleting a post below it) the code flips out and doesn't work but goes back to normal after you refresh. It also don't work in the preview.

[Welshling]

Sept 8, 2013 10:25:15 GMT -8 Wormopolis said:

the image you are using is a 100x100 white square...

yes but as i have mentioned the divs are set as the same size, so again. it cannot be customized?

EDIT: Actually wouldn't it be easier to code something, from a basic css point of view. So a background color, that could then be edited to suit the individuals needs? (points to my plugin request)

[Alanna 🥀🖤]

Sept 8, 2013 10:30:25 GMT -8 Welshling said:

Sept 8, 2013 10:25:15 GMT -8 Wormopolis said:

the image you are using is a 100x100 white square...

yes but as i have mentioned the divs are set as the same size, so again. it cannot be customized?

Use this: (I put stars in the Presto code)
[div align="center"][div style="width:345px;height:310px;background-color:#330000;border:20px solid #080000;border-radius:25px;"][presto*][img src="http://i1054./s494/Zola242424/alexanderskarsgardgifs4me/tumblr_melvsysZiW1r0uw3oo2_250_zpsf6760ad3.gif"][font size="4"][font face="georgia"]FIRST. M. LAST
BRIEF HISTORY.

[ul type="disc"]
[li] PERSONALITY. [/li]

[li] FRIENDS: FRIENDS.[/li]

[li] ENEMIES: ENEMIES.[/li]

[li] LOVERS: LOVERS.[/li]
[/ul][/font][/font][*/presto]


Made by [a href="http://delusional.freeforums.net"]Delusional[/a].[/div][/div]

You can customize it using div styles INSIDE the pesto code.
[div align="center"][div style="width:345px;height:310px;background-color:#330000;border:20px solid #080000;border-radius:25px;"][presto*][img src="http://i1054./s494/Zola242424/alexanderskarsgardgifs4me/tumblr_melvsysZiW1r0uw3oo2_250_zpsf6760ad3.gif"][div style="font-size:4;font-family:georgia;background-color:red;"]FIRST. M. LAST
BRIEF HISTORY.

[ul type="disc"]
[li] PERSONALITY. [/li]

[li] FRIENDS: FRIENDS.[/li]

[li] ENEMIES: ENEMIES.[/li]

[li] LOVERS: LOVERS.[/li]
[/ul][/div][*/presto]


Made by [a href="http://delusional.freeforums.net"]Delusional[/a].[/div][/div]

[Welshling]

Thanks Trinity, I finally edited to my liking and now I need to keep an eye on this thread, for updates with the thread issue and code wrapper tags.