inherit
whatconquersall@hotmail.com
198170
0
Mar 25, 2016 22:00:26 GMT -8
CthuLulu
10
August 2013
cthululu
|
Post by CthuLulu on Dec 9, 2013 17:32:39 GMT -8
Hello! I'm having a bit of difficulty with the sidebar plugin. It works great to display my images/text/etc. but I want to include an effect like this (see third image, second from top on left) where a caption slides over the image when hovering, but while I've a smidgeon of experience with HTML, jquery is all Greek to me. Site is broken-secrecy.proboards.com/ and I want the text under my "Getting Started" image to appear on hovering on the image. Brian, any help please? Thanks in advance! |
|
#eb7100
33409
0
1
May 3, 2024 16:38:41 GMT -8
Brian
48,129
November 2004
smashmaster3
|
Post by Brian on Dec 10, 2013 10:30:24 GMT -8
Hi, CthuLulu. Go into the sidebar's header/footer tab and place this in its header. Now go to the left sidebar tab and find your image. Replace it with this. Replace the height and width in red with the dimensions of your image. Replace the URL TO IMAGE text with the link to your image. Replace the green text with the text that you would like to show when hovering over the image. You can use the second code I provided as many times as you want on the forum and they should all work.  |
|
inherit
whatconquersall@hotmail.com
198170
0
Mar 25, 2016 22:00:26 GMT -8
CthuLulu
10
August 2013
cthululu
|
Post by CthuLulu on Dec 10, 2013 18:22:29 GMT -8
You, sir, are a gentleman and a genius. Thank you so much!  I'm so sorry to be a pest, but could I ask for one more bit of help? How do I make this code work with the sidebar? It keeps spazzing out when I use it! It worked before the upgrade, but it doesn't seem to want to cooperate with V5. <!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('http://i81./j224/TheBeastWhatSqueaks/Malfoy%20Mansion/ST_sonorus_BG.png');
background-color:#080808;
}
</style>
</head>
<body>
<center>
<div style="width: 150px; padding-right: 3px; padding-left: 5px; opacity: 0.5; line-height: 90%; height: 100px; overflow: auto; text-align: justify; font-family: verdana; color: grey; font-size: 9px;">
<INSTRUCTIONS: ADD UPDATES BELOW. PLEASE DO NOT TYPE OVER EXISTING UPDATES, ADD A NEW ONE BY C&Ping THE PREVIOUS ONE (INC THE BR TAGS). USE FIREFOX FOR THIS. WHEN THERE GETS TO MORE THAN 8 UPDATES HERE PLEASE REMOVE THE OLDEST 2, OR UPDATES THAT ARE MORE THAN 6 WEEKS OLD. THANKS>
<b>14th March</b><br>CALL FOR CANONS! If you don't have any canons and would like one, please see our <a href="http://puremalfoymanor.proboards.com/index.cgi?board=generalchat&action=display&thread=8183&page=1">Spare Canons </a> list and apply for who you fancy (not literally)! <br><br>
<b>26th Feb</b><br> Want to wave the flag for our not so humble home (we are Malfoys after all - we don't do humble...) please clicky on the VOTE FOR US buttons further down on this pretty side table. We want to be in the top 10, hell, the top 5, in all of them! Thanking you for your continued support and luuuurrrve! <br><br>
<b>30th Jan</b><br> Welcome to Part III Of Wand & Web! Please read <a href="/index.cgi?action=display&board=plots&thread=7628&page=1">the new plot!</a> </div>
</div>
</center>
</body>
</html>
}
|
|
#eb7100
33409
0
1
May 3, 2024 16:38:41 GMT -8
Brian
48,129
November 2004
smashmaster3
|
Post by Brian on Dec 11, 2013 9:53:05 GMT -8
HTML, head, and body tags shouldn't be anywhere in the middle of your page. Those are strictly for the beginning and end of the web document.
Try this.
|
|
inherit
whatconquersall@hotmail.com
198170
0
Mar 25, 2016 22:00:26 GMT -8
CthuLulu
10
August 2013
cthululu
|
Post by CthuLulu on Dec 12, 2013 4:34:33 GMT -8
Oh right! Okay, that's grand, that works, but how do I get a background image for the individual side bar boxes? Sorry to be a pest!
|
|
#eb7100
33409
0
1
May 3, 2024 16:38:41 GMT -8
Brian
48,129
November 2004
smashmaster3
|
Post by Brian on Dec 12, 2013 9:33:35 GMT -8
If you've given them an ID in the sidebar plugin's settings, all you have to do is add this to its header/footer component.
Replace sidebarid with the ID you've given your sidebar container.
|
|
inherit
whatconquersall@hotmail.com
198170
0
Mar 25, 2016 22:00:26 GMT -8
CthuLulu
10
August 2013
cthululu
|
Post by CthuLulu on Dec 12, 2013 12:01:12 GMT -8
Ah brilliant! Thanks so much, you're a legend. |
|
Former Member
inherit
guest@proboards.com
131621
0
May 5, 2024 12:54:59 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Dec 22, 2013 11:27:02 GMT -8
Brian, would adapting this to fade instead of slide and go from text to image instead of image to text be easy or difficult?
|
|
#eb7100
33409
0
1
May 3, 2024 16:38:41 GMT -8
Brian
48,129
November 2004
smashmaster3
|
Post by Brian on Dec 22, 2013 11:30:17 GMT -8
Easy.
|
|
Former Member
inherit
guest@proboards.com
131621
0
May 5, 2024 12:54:59 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Dec 22, 2013 11:50:25 GMT -8
Thank you magnificently  |
|
inherit
193210
0
Nov 23, 2016 9:19:15 GMT -8
pixiebell2
938
April 2013
pixiebell2
|
Post by pixiebell2 on Nov 26, 2014 13:19:58 GMT -8
Brian I have added this to my side bar it all works great except the text is getting cut off in the side bar Can i change this thank you. pixiebell2
|
|
#eb7100
33409
0
1
May 3, 2024 16:38:41 GMT -8
Brian
48,129
November 2004
smashmaster3
|
Post by Brian on Nov 26, 2014 14:06:32 GMT -8
Brian I have added this to my side bar it all works great except the text is getting cut off in the side bar Can i change this thank you. pixiebell2 Change the width on the first line of the code you added to your sidebar box. 400px is much, much wider than your sidebar's width which is causing it to cut off at the end. Use a lower number. |
|
inherit
193210
0
Nov 23, 2016 9:19:15 GMT -8
pixiebell2
938
April 2013
pixiebell2
|
Post by pixiebell2 on Nov 26, 2014 14:58:10 GMT -8
Thank you so much Brian it looks great. |
|
inherit
209686
0
Sept 2, 2022 15:15:33 GMT -8
djcoston
12
May 2014
djcoston
|
Post by djcoston on Nov 4, 2015 3:18:58 GMT -8
Hello BrianIs there a way to use this code and put two or more sliding boxes on the same line?? I tried to use it here three times: jrpgheroes.boards.net/page/slidingboxBut they break the line and goes one below the other... |
|
#eb7100
33409
0
1
May 3, 2024 16:38:41 GMT -8
Brian
48,129
November 2004
smashmaster3
|
Post by Brian on Nov 4, 2015 10:33:47 GMT -8
Hello BrianIs there a way to use this code and put two or more sliding boxes on the same line?? I tried to use it here three times: jrpgheroes.boards.net/page/slidingboxBut they break the line and goes one below the other... You'll need to add float: left; to the inline styles of your mosaic divs in order to make them show next to one another. Once that's done if you want to add anything on a new line after them you'll need to add this after the last one. Otherwise anything you add after them will show beside them since they're still floating. |
|
