inherit
259774
0
May 12, 2020 16:24:24 GMT -8
BJ McConnell
26
November 2019
bjmcconnell
|
Post by BJ McConnell on Nov 21, 2019 17:53:30 GMT -8
I apologize if this is in the incorrect board. Before anyone suggests the plugin that adds social media buttons on the left side, that is not what I am looking for aesthetically. Is there a way to add social media buttons using icons as clickable hyperlinks that float over my banner image? I can manage to work with some simple coding using examples, but that's as far as I can go on my own. Grateful in advance Here's my site
|
|
inherit
252032
0
Sept 18, 2023 9:07:51 GMT -8
Retread
Tribbial Pursuit.
5,014
January 2018
retread
|
Post by Retread on Nov 22, 2019 13:04:27 GMT -8
Hi BJ McConnellThe HMML below is intended to result in this: If that's not the sort of thing you're looking for, let me know. <div style="position:relative; top:-223px; text-align:center; opacity:0.75;">
<a href="https://www.facebook.com/ProBoardsFreeForums"> <img style="padding:0px 10px;" src="http://storage.proboards.com/6994517/images/BYZOejrfxWurMPweXbri.png" alt="Facebook"> </a>
<a href="https://twitter.com/proboards"> <img style="padding:0px 10px;;" src="http://storage.proboards.com/6994517/images/TMQYhgGABuxLlQAH0QiA.png" alt="Twitter"> </a>
</div> This is only meant as a proof of concept, NOT the final coding you'll need. If placed in the top your Global Header, the -223px will shift the position from the normal location below the Navigation Tree to near the top of your banner. I'm not sure where the Announcement you have is placed, so it may be necessary to make an adjustment. The alignment is such that regardless of how many links with Social Media images you add, they will remain centered on the banner. The opacity:0.75; isn't necessary if you want the images to be fully opaque. The images I created are 32px x 32px but you can use whatever size images you desire. the padding is intended to prevent the images from being butted against one another. The URLs (href) for the links are to ProBoards facebook and twitter pages, so obviously you'll want to link to your own pages. Let me know if you have enough information or if you need more help.
|
|
inherit
259774
0
May 12, 2020 16:24:24 GMT -8
BJ McConnell
26
November 2019
bjmcconnell
|
Post by BJ McConnell on Nov 22, 2019 17:25:27 GMT -8
Retread Thank you!! I think I have everything I need. If I run into any problems I'll tag you, but I think I should be fine. Thanks again, I really appreciate it!
|
|
inherit
259774
0
May 12, 2020 16:24:24 GMT -8
BJ McConnell
26
November 2019
bjmcconnell
|
Post by BJ McConnell on Nov 22, 2019 19:05:11 GMT -8
Retread The buttons turned out exactly how I wanted them, thank you again. Now all I have to do is find the announcement container location to fix the gap that was created.
|
|
inherit
252032
0
Sept 18, 2023 9:07:51 GMT -8
Retread
Tribbial Pursuit.
5,014
January 2018
retread
|
Post by Retread on Nov 22, 2019 21:50:25 GMT -8
Now all I have to do is find the announcement container location to fix the gap that was created. I looked more closely at this. The gap was actually created by the HTML I gave you. I don't fully understand this but apparently the space on the page (in the original location) is being reserved for the height of the div and its contents (32px square images), even though we've defined the starting position to be in a different location.
There might be a more correct way of doing this, but by defining the bottom margin of the div as -32px, we can eliminate the gap.
<div style="position:relative; top:-223px; text-align:right; opacity:1.00; margin-bottom: -32px;">
<a href="https://www.facebook.com/bereanstudygroup" target="_blank"> <img style="padding:0px 3px;" src="http://storage.proboards.com/7090909/images/EdRxIHPdgOIZhZEKaEWG.png" alt="Facebook"> </a>
<a href="https://twitter.com/bereanforums" target="_blank"> <img style="padding:0px 3px;;" src="http://storage.proboards.com/7090909/images/EkAHoaYhouhmvNATxWoT.png" alt="Twitter"> </a> <a href="https://bereanforums.blogspot.com" target="_blank"> <img style="padding:0px 3px;;" src="http://storage.proboards.com/7090909/images/gOzWrokBxEwhGB00FJqM.png" alt="Berean Study Group Blog"> </a>
<a href="https://www.instagram.com/bereanstudygroupforums" target="_blank"> <img style="padding:0px 3px;;" src="http://storage.proboards.com/7090909/images/bfYPpZaLbbjvvvDZUMoT.png" alt="Instagram"> </a> </div>
|
|
inherit
259774
0
May 12, 2020 16:24:24 GMT -8
BJ McConnell
26
November 2019
bjmcconnell
|
Post by BJ McConnell on Nov 23, 2019 0:00:49 GMT -8
Retread Nice! Worked like a charm, much gratitude kind sir I wasn't expecting it, but I'm glad you decided to look it over because I never would have figured that out.
|
|
inherit
252032
0
Sept 18, 2023 9:07:51 GMT -8
Retread
Tribbial Pursuit.
5,014
January 2018
retread
|
Post by Retread on Nov 23, 2019 7:44:20 GMT -8
Retread Nice! Worked like a charm, much gratitude kind sir I wasn't expecting it, but I'm glad you decided to look it over because I never would have figured that out. You're welcome. 🙂 For what it's worth, the reason I was able to figure it out was because I didn't think the gap was that large before we started this. When I see a problem, I tend to suspect it's related to the last change made. So I tried removing the entire HTML modification and the gap returned to normal. Then it was just a question of determining why this modification was causing the gap and correcting for it. There's probably a more elegant way of doing it, but this works.
|
|