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.

Slide show as forum logo

View previous topic View next topic Go down

Solved Slide show as forum logo

Post by TheShaka on March 28th 2014, 12:09 am

Hi i find nice code for nice slide show, my question is how to make the slide as my forum logo any idea guys?


Code:
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />

<center> <div id="wrapper"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">

<img
 src="http://i48.tinypic.com/35lw9yv.jpg" title="#caption1"
data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img
 src="http://i48.tinypic.com/35lw9yv.jpg" title="#caption2"
data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />

<div id="caption1" class="nivo-html-caption">
This will display the caption #1, just edit this part.
</div>

<div id="caption2" class="nivo-html-caption">
This will display the caption #2, just edit this part.
</div>

</div>
</div>
</div>
</center>

<script type="text/javascript" src="http://static.tumblr.com/hhedat8/gYrmksxtn/jquery-1.9.0.min.js"></script>
<script src="http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).load(function() {
        jQuery('#slider').nivoSlider();
    });
</script>

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by Pizza Boi on March 28th 2014, 12:41 am

Hi Very Happy

Well, honestly, it depends. I implemented mine in ACP < Display < Generalities; however, I made a few edits to the code and declared <div id="sss">in the beginning of it and </div> at the end so I can customize it in the CSS.

Then in my CSS, I implemented this code:

Code:
#sss {
position: absolute !important;
left: 88px;
top: 11px;
}

Oh yeah, if you're going to use the same method I did, make sure that the logo area has a transparent area, preferably 1000 by 300 because I just had the slider overlay the logo.

http://tfpb.forumtl.com/ check this forum out with my experiment.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Slide show as forum logo

Post by TheShaka on March 28th 2014, 12:43 pm

I see but in General message i have chat box  pale

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by Rhino.Freak on March 28th 2014, 12:56 pm

That was nice PizzaBoi, however I guess he asked it as a logo? (banner) (psst, asking coz I wanna know too)

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Slide show as forum logo

Post by Pizza Boi on March 28th 2014, 1:47 pm

@TheShaka wrote:I see but in General message i have chat box  pale

Hi Very Happy

You can just put it in a widget if you have a message Smile ; however, it must NOT be table type so it won't be regarded as a table and then you have to set its position based from the widget Very Happy . Or... you can input the codes in an HTML page and then the link from the HTML page created can be put like this:

Code:
<script src="HTML PAGE LINK" />

And you put that in the general message since it's not that long of a code so I'm pretty sure it will fit and then adjust it again Smile .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Slide show as forum logo

Post by Sir Chivas™ on March 28th 2014, 1:57 pm

Hi,

Which forum version are you using?

Regards,
Sir Chivas.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Slide show as forum logo

Post by TheShaka on March 28th 2014, 2:25 pm

Sir Chivas™ wrote:Hi,

Which forum version are you using?

Regards,
Sir Chivas.
phpbb3

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by Sir Chivas™ on March 28th 2014, 2:26 pm

@TheShaka wrote:
phpbb3

That will be the issue as you don't have access to the templates, without them, the coding won't look as rich; it'll look messy.


Regards,
Sir Chivas.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Slide show as forum logo

Post by Pizza Boi on March 28th 2014, 2:35 pm

Hi Very Happy

You have a test forum, right? Can you give us the link to that and PM me an admin test account please, I'll work on it and then you can implement it in the real forum.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Slide show as forum logo

Post by TheShaka on March 28th 2014, 2:47 pm

@Pizza Boi wrote:Hi Very Happy

You have a test forum, right? Can you give us the link to that and PM me an admin test account please, I'll work on it and then you can implement it in the real forum.

Regards,
Pizza Boi
okay my test forum: http://seiya.forumpl.net/
i send you test account with admin in pm, please give me few minutes.

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by Ange Tuteur on March 28th 2014, 2:49 pm

You could probably do something like this :
Code:
$(function() {
    $('#logo').html('<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />'+
    '<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />'+
    '<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />'+

    '<center> <div id="wrapper"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">'+

    '<img'+
     'src="http://i48.tinypic.com/35lw9yv.jpg" title="#caption1"'+
    'data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />'+
    '<img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />'+
    '<img'+
     'src="http://i48.tinypic.com/35lw9yv.jpg" title="#caption2"'+
    'data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />'+
    '<img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />'+

    '<div id="caption1" class="nivo-html-caption">'+
    'This will display the caption #1, just edit this part.'+
    '</div>'+

    '<div id="caption2" class="nivo-html-caption">'+
    'This will display the caption #2, just edit this part.'+
    '</div>'+

    '</div>'+
    '</div>'+
    '</div>'+
    '</center>');
    $.getScript('http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js');
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
});

Administration panel > modules > javascript codes management > create a new script

Since it will be your logo, remember to tick in all the pages.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by TheShaka on March 28th 2014, 3:03 pm

hey angle it work but here is only 1 image and when i try see next the page refresh
pizza you still need the account?

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by Pizza Boi on March 28th 2014, 3:17 pm

@TheShaka wrote:hey angle it work but here is only 1 image and when i try see next the page refresh
pizza you still need the account?

Hi Very Happy

Sure, it'd be better if you have more options to choose from anyway.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Slide show as forum logo

Post by Ange Tuteur on March 28th 2014, 3:27 pm

Here, I've updated the code with customization for you :
Code:
$(function() {
    
    _slideData = {
       image1 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption1 : 'This is slide 1 of 6',
        
       image2 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption2 : 'This is slide 2 of 6',
      
      image3 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption3 : 'This is slide 3 of 6',
        
       image4 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption4 : 'This is slide 4 of 6',
      
      image5 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption5 : 'This is slide 5 of 6',
        
       image6 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption6 : 'This is slide 6 of 6'
    };
    
    $('#logo-desc').html('<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />'+
    '<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />'+
    '<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />'+

    '<center><div id="wrapper"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">'+

    '<img src="'+_slideData.image1+'" title="#caption1" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image2+'" title="#caption2" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image3+'" title="#caption3" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image4+'" title="#caption4" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image5+'" title="#caption5" data-transition="slideInLeft" />'+
   '<img src="'+_slideData.image6+'" title="#caption6" data-transition="slideInLeft" />'+
                         
    '</div>'+
                
   '<div id="caption1" class="nivo-html-caption">'+_slideData.caption1+'</div>'+
    '<div id="caption2" class="nivo-html-caption">'+_slideData.caption2+'</div>'+
    '<div id="caption3" class="nivo-html-caption">'+_slideData.caption3+'</div>'+
    '<div id="caption4" class="nivo-html-caption">'+_slideData.caption4+'</div>'+  
    '<div id="caption5" class="nivo-html-caption">'+_slideData.caption5+'</div>'+
    '<div id="caption6" class="nivo-html-caption">'+_slideData.caption6+'</div>'+  
    '</div></div></center>');
    $.getScript('http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js');
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
});

It is no longer a link either. At the beginning you should see some variables like :
Code:
      image1 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption1 : 'This is slide 1 of 6',

That is where you can change the image and caption for that slide. In total there are 6

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by Rhino.Freak on March 28th 2014, 3:37 pm

wow Ange, you have a solution to everything don't you? Thanks so much from my side, you are doing a great job and I respect that a lot! +1

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Slide show as forum logo

Post by Pizza Boi on March 28th 2014, 3:44 pm

Hi Very Happy

Well, I implemented on the ACP Widgets so the left should be 180 px and due to my VERY slow internet, I managed to just edit it from my console without saving it in my ACP.

Anyway, in the widget in the test forum, I declared: <div id="thisnthat"> in the beginning of the code and </div> at the end of it and then placed it in the left area of the forum.

Now, when you refresh the page, technically it appears near the chat box and this is where we adjust the CSS:

Code:
#thisnthat {
position: absolute;
bottom: 127px !important;
left: 370px !important;
}
#content-container div#left {
width: 0px !important;
}

You can change the #px value to % value instead and even if the content-container should be 0, it still would make the Widget appear. Sorry I didn't save this in the CSS but my internet is beyond slow at the moment e.e"...

Also, just use pictures that is the size appropriate for the logo because it makes it go more above than normal due to the bird size.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Slide show as forum logo

Post by Ange Tuteur on March 28th 2014, 6:48 pm

I forgot to mention if you want to add more Images/Captions, just copy and paste the currently existing elements and increment their variables, title, id..

ex :
Code:
   '<img src="'+_slideData.image1+'" title="#caption1" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image2+'" title="#caption2" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image3+'" title="#caption3" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image4+'" title="#caption4" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image5+'" title="#caption5" data-transition="slideInLeft" />'+
   '<img src="'+_slideData.image6+'" title="#caption6" data-transition="slideInLeft" />'+
    '<img src="'+_slideData.image7+'" title="#caption7" data-transition="slideInLeft" />'+
   '<img src="'+_slideData.image8+'" title="#caption8" data-transition="slideInLeft" />'+
                        
   '</div>'+
                
   '<div id="caption1" class="nivo-html-caption">'+_slideData.caption1+'</div>'+
    '<div id="caption2" class="nivo-html-caption">'+_slideData.caption2+'</div>'+
    '<div id="caption3" class="nivo-html-caption">'+_slideData.caption3+'</div>'+
    '<div id="caption4" class="nivo-html-caption">'+_slideData.caption4+'</div>'+  
    '<div id="caption5" class="nivo-html-caption">'+_slideData.caption5+'</div>'+
    '<div id="caption6" class="nivo-html-caption">'+_slideData.caption6+'</div>'+
    '<div id="caption7" class="nivo-html-caption">'+_slideData.caption7+'</div>'+
    '<div id="caption8" class="nivo-html-caption">'+_slideData.caption8+'</div>'+  

then add more variables :
Code:
   _slideData = {
       image1 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption1 : 'This is slide 1 of 8',
        
       image2 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption2 : 'This is slide 2 of 8',
      
      image3 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption3 : 'This is slide 3 of 8',
        
       image4 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption4 : 'This is slide 4 of 8',
      
      image5 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption5 : 'This is slide 5 of 8',
        
       image6 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption6 : 'This is slide 6 of 8'

      image7 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption7 : 'This is slide 7 of 8',
        
       image8 : 'http://i48.tinypic.com/35lw9yv.jpg',
       caption8 : 'This is slide 8 of 8'
    };

@Rhino.Freak wrote:wow Ange, you have a solution to everything don't you? Thanks so much from my side, you are doing a great job and I respect that a lot! +1
My magic hat is full of solutions hehehe..  Lol

You're welcome and thanks you. I wouldn't know what I know now if it wasn't for you guys <3

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by TheShaka on March 28th 2014, 7:28 pm

Okay topic is sloved, thanks again Ange some times i think you are a girl  What the fuck ?!?

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Slide show as forum logo

Post by Ange Tuteur on March 28th 2014, 7:30 pm

You're welcome :rose:

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
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