Fotki.com Related Stuff

Sunday, December 4, 2005

Custom Tab Menu for Co-Branded Pages

Wanna know how to create a menu like this:

for your co-branded pages? Below is the bare-bones code that gets the job done. Copy and paste it in your co-branding settings. I recommend you back up the old contents as a text file some where on your computer just to be on the safe side.

A few things to note:
  • The code is dependent on fotki.com's CSS stylesheets. If fotki.com decides to change them, this code may need to be updated.
  • This code will produce a single-row menu, not the double-row menu that you see on my website. The double-row menu requires more customization which is beyond the scope that I want to cover here.
  • Don't forget to change username to your fotki user name in the menu structure definition.
  • The code references an external JavaScript file stored on my website: http://raphaelpungin.com/tab_menu.js. In order not to depend on my website I recommend to upload the file to your own webserver and reference it there.
Click here for the code

Comments:
  •  >>>www.GaryGS1.com>>> Travels & TimesUnited States wrote: Monday, December 5, 2005 8:05 PM

    Hi Raphael!!! Thanks for taking the time to write all this out, sending me the link and most of all for sharing... That's great and most appreciated!!! As soon as I get a chance without interuptions I'm gonna play around with it!!! Thankyou very much!!! Gary
    Reply

  •  >>>www.GaryGS1.com>>> Travels & TimesUnited States wrote: Monday, December 5, 2005 9:17 PM

    Message 2!!! Thanks also for the code to force viewers to the co-branded pages... I changed the GaryGS1 like you said and it worked... Cool!!!

    However, for the time being I went back to the way it was cause my co-branded page needs alot of work and I am not ready to direct people there from standard Fotki pages... Your co-branded is awesome... Thanks for all you help... I saved the info for future use when I'm ready... Gary
    Reply

    •  Raphael PunginUnited States wrote: Monday, December 5, 2005 9:32 PM

      No problem, take your time :)
      Reply

      •  >>>www.GaryGS1.com>>> Travels & TimesUnited States wrote: Monday, December 5, 2005 9:49 PM

        Hi Raphael!!! I was just doing some testing on one of my other sites (I have several / business and family) I installed the tabs here: http://welcome.crawlspacecorrections.fotki.com/

        to play around with it. I uploaded the tab menu to my www.GaryGS1.com like you said and I am feeding off of that not yours. I customized the tabs to CrawlSpace Corrections, LLC and added the tab Journals... I understand how it works now... Thankyou very much...

        PS I tried to add a mailto:GaryGS1@yahoo.com">GaryGS1@yahoo.com tab but it doesn't work, in fact it screws everyting up '-) so I took the html out for now...

        My other site is http://public.fotki.com/SchemppFamily/ but I am not there too much,,, I started it for my family around the world but seems like they are not interested and it's alot of work to maintain.
        My sons site (I gave it to him for a Christmas present last year is: http://www.garygschemppphotography.com/ and we set it up to be linked to his Fotki account (which was part of the present) He is a photographer in Philadelphia.

        Well, I just had some leftovers and two glasses of my homemade Merlot (I made 100 gallons this year) and so I am ready to hit the hay!!!
        Thanks Raphael for your friendship, support and guidence!!! Gary
        Reply

        •  Raphael PunginUnited States wrote: Monday, December 5, 2005 10:29 PM

          Ok, good job Gary. I noticed that the tabs are not highlighting on your page. That's because you're mixing upper case and lower case letters in your URLs. I changed my copy of tab_menu.js to ignore case, so get a new copy and the tabs will highlight. But a rule of thumb is that URLs should be always in lower case.

          Raphael
          Reply

          •  >>>www.GaryGS1.com>>> Travels & TimesUnited States wrote: Monday, December 5, 2005 10:45 PM

            Thanks Raphael!!! Now I am working on my site
            http://garygs1.fotki.com/ so I gotta fix that too!!! Thanks for looking after me!!! Gary
            Reply

          •  >>>www.GaryGS1.com>>> Travels & TimesUnited States wrote: Monday, December 5, 2005 10:58 PM

            Great!!! I just uploaded the "new" tab menu to my www.GaryGS1.com and now the tabs "highlight"!!!

            WOW!!! This is Cooooooooooooool!!! Thanks Again!!! Gary

            How difficult is it to get the second row of tabs '-) I am out of space already '-( Gary
            PS,,, if you would rather not get into it for now that's fine... I can manage!!! '-) Ur awesome!!!
            Reply

            •  Raphael PunginUnited States wrote: Monday, December 5, 2005 11:22 PM

              The difficulty is that it is not just a second row of tabs. The second row of tabs is determined by which tab is selected in the first row. I don't have an easy way for you to customize it. So try to stick with one row for now. You don't have to put every single link on the tab. You can just have a links page which links to other pags.
              Reply

        •  Raphael PunginUnited States wrote: Monday, December 5, 2005 10:36 PM

          Adding mailto: link to a tab is not probably a good idea since the tabs are ment to display a page, not launch a mail client. Just have a "Contact Us" page and put the mailto: link as part of the page body. Or you may want to put it in the Welcome page....

          Raphael
          Reply

  •  Raphael PunginUnited States wrote: Monday, December 5, 2005 11:15 PM

    By the way, if you want black theme, put this on the next line after the line that has ...styles4.css... in it (leave the original line as it is):

    <link rel=stylesheet type=text/css href=http://images.fotki.com/css/cobranding/classic_black.css >

    Raphael

    Reply

  •  >>>www.GaryGS1.com>>> Travels & TimesUnited States wrote: Tuesday, December 6, 2005 12:11 AM

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    Ya, saw that!!! Good idea!!! We don't need clutter '-) Gary

    U can delete this one too!!! '-) Just for fun... Latr,,, Gary
    Reply

  •  Gold9erUnited States wrote: Wednesday, April 12, 2006 11:57 AM

    copy and paste the code? paste it where? how did you get videos on fotki. i thought they only hosted pictures
    Reply