Help with placing positional links/buttons inside banner

[M³]

Is there a way to put links inside the banner? Like a positional thing where I can place them wherever I would like? Also, can I place some buttons there as well? I'm really not sure how ... but hopefully, this can be done. I didn't see any codes for this anywhere.  My original request of this was posted here.

I was pointed to image mapping here, however, when I use the code below in my headers, I cannot move the image into the banner via coordinates.  I really don't have much experience with this sort of thing and was hoping to seek some help here.


<img src="http://filesmelt.com/dl/flickr_circle_color-128.png" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
</map>

Test Forum

Thanks for any help up front!

Todge, Wormopolis, Peter or Brian

[Tumbleweed]

Mar 21, 2014 11:55:57 GMT -8 M³ said:

Is there a way to put links inside the banner? Like a positional thing where I can place them wherever I would like? Also, can I place some buttons there as well? I'm really not sure how ... but hopefully, this can be done. I didn't see any codes for this anywhere.  My original request of this was posted here.

I was pointed to image mapping here, however, when I use the code below in my headers, I cannot move the image into the banner via coordinates.  I really don't have much experience with this sort of thing and was hoping to seek some help here.


<img src="http://filesmelt.com/dl/flickr_circle_color-128.png" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
</map>

Test Forum

Thanks for any help up front!

Todge, Wormopolis, Peter or Brian

Just to be clear, you actually don't want visible text links on your banner but rather clicking on parts of the image will take you to a certain page or url, correct? Because that latter is why someone would use image mapping. I haven't tried image mapping on V5 but did on V4 so I'm sure it can be done. Do you have a program you can do this on? If not I'm sure I can do it for you provide you either tell me specifically where you want your image sectioned off. You could do that by throwing your image in a simple paint program and do a rough drawing.


To add objects, buttons or whatever on your banner you can go to your wrapper template and add a div like this (in blue):

<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
<div id="my_image1"></div>
</h2>
</div>


And then use css to position it like so: (You could put this at the top of the template wrapper while you are positioning everything and later move it to the bottom of your style sheet (without the style tags).

<style>
#my_image1{background-image:url(http://i657./uu300/EliteList/Icons/ic5.gif);
background-repeat:no-repeat;
width:31px;
height:32px;
position:relative;
top:100px;
left:30px;
}
</style>

I left an image in there so you can try it out. Let me know about the image mapping. Actually you could mimic image mapping by just positioning transparent images over the top of your banner, provided the areas are square or a rectangle. If they are any other odd shape, you'd need official image mapping.
 

[M³]

Hey Tumbleweed, thanks for the assistance. Basically, I'm looking for something like the image below. In particular, the 'Wall of Champions' ... then to the right of it, links to those particular pages in the forum. However, I would like to have the links be images. I'll make the buttons. I'm currently checking out what you posted .. but wanted to give you a quick image of what I'm looking for.

Again, thanks for your help and I'm quite confident that we can do this!

[Tumbleweed]

Mar 22, 2014 15:10:32 GMT -8 M³ said:

Hey Tumbleweed, thanks for the assistance. Basically, I'm looking for something like the image below. In particular, the 'Wall of Champions' ... then to the right of it, links to those particular pages in the forum. However, I would like to have the links be images. I'll make the buttons. I'm currently checking out what you posted .. but wanted to give you a quick image of what I'm looking for.

Again, thanks for your help and I'm quite confident that we can do this!

You can basically do what I posted except put your images in the div. So the blue would go in your wrapper template here: (I have it on this test site if you want to take a look:  putteraround5.proboards.com/ (Ignore the other mess I have going on there)
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]

<div id="my_linkies">
<span>Wall of Champions:</span>
<a href="http://linktopage.com"><img src="http://i657./uu300/EliteList/Icons/ic5.gif">
<a href="http://linktopage.com"><img src="http://i657./uu300/EliteList/Icons/ic5.gif">
<a href="http://linktopage.com"><img src="http://i657./uu300/EliteList/Icons/ic5.gif">
</div>


</h2>
</div>

And this should get you started on the css part:

<style>
   #my_linkies{
       position:relative;
       top:-90px;
       left:500px;
       height:32px;
       font-size:14px;
       text-align:top;
       color:#ff0000
       display:block;
   }
   #my_linkies img{
       vertical-align:middle;
       opacity: 1;
transition: opacity .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out;
       margin-right:2px;
   }
   #my_linkies img:hover{
       opacity: 0.5;
       margin-right:2px;
   }
    #my_linkies span{
       font-size:20px;
       vertical-align:middle;
       color:#ff0000;
       padding-top:0px;
       margin-right:4px;
   }
</style>

The first id (my_linkies) is where you do your positioning (top and left) and the last id (my_linkies span)is for the style of Wall of Champions. The middle two just gives the images a fade and positions them a bit. If the Wall of Champions is also going to be an image, just remove that span bit and replace with an image or just put the image in that span instead of the text.

Let me know if you need further help.

[M³]

Very nice, I love it! I will give this a shot once I get home from work tomorrow and that is exactly what I'm looking for. ... Very detailed post that should help someone like me, lol. I need all the help I can get for some things here. Can't wait to check this out!

Edit:  The CSS part, that goes where ... at the bottom of the style sheet and without the style tags or with the style tags in like global headers or ...?

[Tumbleweed]

Mar 22, 2014 17:29:55 GMT -8 M³ said:

Very nice, I love it! I will give this a shot once I get home from work tomorrow and that is exactly what I'm looking for. ... Very detailed post that should help someone like me, lol. I need all the help I can get for some things here. Can't wait to check this out!

Edit:  The CSS part, that goes where ... at the bottom of the style sheet and without the style tags or with the style tags in like global headers or ...?

You can put it at the very top of the template wrapper while you get things exactly how you want them (just easier to have it there) and you can actually leave it there if you want but if you want things tidy with all your css in one spot then just remove the opening <style> tag and closing </style> tag and paste that at the bottom of your style sheet. 

[M³]

It's weird but, when I place the css at the top of the forum wrapper, it makes the text (wall of champions) and links, disappear. Btw, I just threw what you had (links and such), into the wrapper just until I get it in there right .. then I'll switch out to mine immediately. When I remove the css, it makes the links and such, reappear.





<style>
#my_linkies{
position:relative;
top:-90px;
left:500px;
height:32px;
font-size:14px;
text-align:top;
color:#ff0000
display:block;
}
#my_linkies img{
vertical-align:middle;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
margin-right:2px;
}
#my_linkies img:hover{
opacity: 0.5;
margin-right:2px;
}
#my_linkies span{
font-size:20px;
vertical-align:middle;
color:#ff0000;
padding-top:0px;
margin-right:4px;
}
</style>
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
<div id="my_linkies">
<span>Wall of Champions:</span>
<a href="http://linktopage.com"><img src="http://i657./uu300/EliteList/Icons/ic5.gif">
<a href="http://linktopage.com"><img src="http://i657./uu300/EliteList/Icons/ic5.gif">
<a href="http://linktopage.com"><img src="http://i657./uu300/EliteList/Icons/ic5.gif">
</div>
</h2>
</div>

[Tumbleweed]

It's there, just off the page. Try changing the positioning. I have the ads above my forum and totally have things changed on my test site so I have a negative number in there. Try it with like 10 (positive) px and see if it shows up. Keep increasing the top positioning until you see it.

<style>
#my_linkies{
position:relative;
top:-90px;
left:500px;

so to start with:

top:10px;

[M³]

Hey Tumbleweed, I think I've got it in the right place now. However, when I tried viewing the test forum from my iphone, I just realized that it doesn't adjust to the size of the phone - in fact, it doesn't show at all. *Taps fingers* ... I wonder if there's a way to adjust accordingly regardless of screen size? m3test.freeforums.net/

[Tumbleweed]

Mar 23, 2014 12:32:53 GMT -8 M³ said:

Hey Tumbleweed, I think I've got it in the right place now. However, when I tried viewing the test forum from my iphone, I just realized that it doesn't adjust to the size of the phone - in fact, it doesn't show at all. *Taps fingers* ... I wonder if there's a way to adjust accordingly regardless of screen size? m3test.freeforums.net/

I don't have an iphone to test it on but whenever it comes to images that aren't part of a background, it is best to have your forum set to a pixel width rather than percentages. Doing that will keep it in the exact spot on your banner area. Here, I change my test site to a pixel width. putteraround5.proboards.com/ I realize that some people want their site to expand to their massive screen widths some people have and then down to small screen resolutions but at the moment, I can't think of a way to get it to this for you.