Social Media Icon Links

[Mr. Undecided]

Forum: www.gunjackcollective.boards.net

Hello, another plugin request. 

I would like to have several social media icons somewhere in the banner or top/header section of the forum that would show up on every page.  I just want to have a little icon that links to our page on various websites.  Is this possible to have? Is there anywhere it will not work? 

Ideas for the plugin:

Able to change how many links to have
Able to change the image of such links
When cursor hovers over icon, description pops up saying custom message 


Thanks...

[Mr. Undecided]

Buuummmmppp.

[Brian]

Not sure why you'd need a plugin just to add links to your forum. A layout template modification or simply placing the links in your headers or footers gets the job done and reduces the page load a plugin would have otherwise added by needing to run Javascript to place the icons in a specific location.

You don't get the novelty of adding, removing, or reorganizing them with a dynamic interface this way, but links are some of the simplest HTML out there and aren't especially hard to sort out.

Just tell me where you want them to be precisely and give me some images and links to work with and I can tell you exactly what to add and where.

[Mr. Undecided]

I was going to attach an image to show you but proboards is showing a bear. :/ I'd like it on the top menu bare between the users name and the tabs.

[Brian]

Find this line in Themes > Layout Templates > Forum Wrapper.

<p id="welcome">

For every social media icon you want to place there add a new line after that line and add this to it.

<a href="URL TO SOCIAL MEDIA PAGE" target="_blank"><img src="URL TO ICON"></a>

Repeat this process until they're all there.

[Mr. Undecided]

AAAHHHHGGG. This, I know the image is sized properly....

Brian

Attachments:

[Mr. Undecided]

Brian, I never did get it working. I can't seem to get the image to fill the whole bar without screwing it up like posted above.

[Brian]

I was unaware that you wanted them to fill the bar.

On line 46 of that same template you should a closing </p> tag. Add a new line after it and add this to the new line.

<div id="social">
    <a href="URL TO SOCIAL MEDIA PAGE" target="_blank"><img src="URL TO ICON"></a>
</div>

This will use the same process as before. Just keep repeating the line from my previous post whenever you want to add a new icon.

Add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet on that same theme.

#social { float: right; margin-right: 5px; }

[Mr. Undecided]

Brian, so I addition to the link before?

Nevermind, that creates two. So with the new one and putting the text where you said it does this. :/

 

Attachments:

[Brian]

It looks like you've since moved the HTML I provided to the correct place, as your if statement is no longer broken like in that screenshot.

Is it working fine for you now?

[Mr. Undecided]

Yes, as I said I saw where I messed it up and corrected. Thanks. I had accidentally switched the CSS around the welcome bar.