The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Punbb banner chooser

View previous topic View next topic Go down

Solved Punbb banner chooser

Post by Guest on July 8th 2015, 11:19 am

Hello again!

I would like to create a banner chooser for my punbb forum. It would be like a theme changer, but I'd like only the banner to be changed. I hope it's possible?

Below down I posted a picture how I imagined it.Mr. GreenAt the bottom right corner of the background there would be little boxes. If you click on them new banners come up and your profile settings will remember the banner you picked, so from that on your chosen banner would be displayed for you.




Thanks for any help!Mr. Green


Last edited by Diana on July 8th 2015, 4:41 pm; edited 1 time in total

Guest
Guest


Back to top Go down

Solved Re: Punbb banner chooser

Post by Ange Tuteur on July 8th 2015, 12:36 pm

Hi @Diana,

Yes, it's possible. You can make use of cookies to save the choice as well. Smile

Firstly, add the following rules to your stylesheet for the base style :
( Display > Colors > CSS )
Code:
#selectBanner {
  min-width:200px;
  position:absolute;
  bottom:0;
  right:0;
}

#banner-text {
  font-size:12px;
  font-weight:bold;
  font-style:italic;
}

.banner-option {
  display:inline-block;
  height:25px;
  width:25px;
  background:#FFF;
  margin:3px;
}

Next go to Modules > JS codes management and create a new script.

Placement : In all the pages
Code:
$(function() {
  var banners = {
    'default' : 'http://i61.tinypic.com/2rzyq2e.png',
    'fdf' : 'http://illiweb.com/fa/fdf/banner-summer15.png',
    'esf' : 'http://i1370.photobucket.com/albums/ag257/AppleDrink/socialize_zpsy18zm3gt.png'
  },
 
  header = document.getElementsByTagName('HEADER')[0],
  block = document.createElement('DIV'),
  cookie = my_getcookie('faBanner'),
  a, i;
 
  block.id = 'selectBanner';
  block.innerHTML = '<div id="banner-text">Choose a banner :</div>';
  if (cookie) header.style.backgroundImage = 'url(' + banners[cookie] + ')';
  for (i in banners) {
    a = document.createElement('A');
    a.href = '#' + banners[i];
    a.title = i;
    a.className = 'banner-option banner-' + i.replace(/\s|\.|\?|,|#|'|"/g, '-');
   
    a.onclick = function() {
      document.getElementsByTagName('HEADER')[0].style.backgroundImage = 'url(' + $(this).attr('href').slice(1) + ')';
      my_setcookie('faBanner', $(this).attr('title'));
      return false;
    };
   
    block.appendChild(a);
  }
 
  header.appendChild(block);
});

At the top of the script, you'll only need to focus on changing the following object, banners :
Code:
  var banners = {
    'default' : 'http://i61.tinypic.com/2rzyq2e.png',
    'fdf' : 'http://illiweb.com/fa/fdf/banner-summer15.png',
    'esf' : 'http://i1370.photobucket.com/albums/ag257/AppleDrink/socialize_zpsy18zm3gt.png'
  },

To the left of each colon is the title of the banner choice, this is used both as a tooltip and key. To the right of the colon is the URL of the image affiliated with the aforementioned "key." More simply : Title:URL pairs, with each pair separated by a comma.

To add a new pair, simply add a comma to the end of the most recent pair, and then proceed to creating another either by writing or pasting a previous pair.

If you want to change the text, you can edit it in this part :
Code:
block.innerHTML = '<div id="banner-text">Choose a banner :</div>';

Lastly, if you want to add unique colors, maybe an image to the choice, you can use CSS. The title or "key" is used in the CSS as well. An example using the previous object :
Code:
.banner-default { background:#717171 }
.banner-fdf { background:#981AA6 }
.banner-esf { background:#FFCE0D }

It's simply .banner-banner title, except spaces are replaced by a dash.

After everything is done, this should be the result :

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Punbb banner chooser

Post by Guest on July 8th 2015, 4:40 pm

WOOW!
Thank you so much, it's great! cheers

Guest
Guest


Back to top Go down

Solved Re: Punbb banner chooser

Post by Ange Tuteur on July 8th 2015, 4:51 pm

You're welcome, I love what you did with it ! Very Happy

Topic archived

If there are any problems with it, feel free to open a new topic. Have a nice day. ^^

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum