1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.



Affiliate Table [in Jcink's Webpage Maker]

Discussion in 'IPB 1.3' started by multiplicity!, Nov 7, 2012.

  1. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    Creating an Affiliate Table
    [in JCink's Webpage Maker]
    For marquee and static affiliates!


    Jcink Forums have become a number one in the role-playing world. People still use Proboards and Invisionfree, even Zetaboards to create their forums. Customizing the look of your forum, even to focus on the most mundane, really does say a lot about your forums. Trying to make affiliates tables fit in at the same time can be really tough, and most of us just toss them into the description of our advertising forums and call it a day.

    I'm here to provide a way to create a table that changes not only with the skin of your board, but also to organize based on static and affiliate buttons!

    The most important thing to remember is to have fun with this coding. It doesn't need to be complicated nor does it need to be overly done to make the perfect table. Most of the codes I've already set up for you; all you have to do is change the colors and the font of the affiliates title!


    Creating the CSS Elements
    The first step has to do with the CSS, in which you should copy and paste this code below into your style sheet:

    Code: Select
    .afftitle { margin-right: auto; margin-left: auto; background-color: #211c23; width: 95%; color:#888888; padding: 1px; font-family: 'Open Sans Condensed', sans-serif; letter-spacing: 1px; font-size: 18px; text-transform: uppercase; display:block; font-weight: lighter; font-style: italic; }
    .affiliates { margin-right: auto; margin-left: auto; background-color: #070707; width: 95%; padding-right: 2px; padding-left: 2px; padding-bottom: 4px; display: block;}


    The separate parts of this code are all used to build the affiliates table and to maintain the look of the actual background behind the buttons. The table and the title are both set at width: 95%;, in which if you want to change the width of the table BOTH of these elements must match in order for the table to match the title bar at all times.

    The code above has the settings for my own affiliate table colors and text, and you can change them as much as you want as long as the width remains identical in both instances.

    Once you have your CSS in place, possibly copied and pasted somewhere towards the bottom of the style sheet for easy location/editing, we move on to the webpage itself!


    Turning On the Webpage Maker in Jcink
    The second thing you should do is enable the Webpage Maker in Jcink. You do this by opening your Admin CP and scrolling down the sidebar to where it says "Skins & Templates". Next you will click on "Webpage Maker". Ensure the settings at the bottom of the newly opened frame are both "Yes" and click "Save Settings". Go back to the main frame of the Webpage Maker and click on "Create new webpage".


    Setting the Page Title & Wrapper Code
    To make it easier on us (and because the <% AFFS %> button is already taken by the Jcink mod itself), we are going to use the following settings for the second part of the affiliates page.

    First, where it says "Page Title", put in something along the lines of "Affiliate Buttons". This will help you remember which key is what page when you go to edit (if you have multiple webpages in the future). The second text box should have the following: "BUTTONS". This is what you are going to use in the form of <% BUTTONS %> later on in this tutorial.

    Once you have those settings make sure to set "All key use in Board Wrappers?" to YES.


    Setting Up The Basic Codes
    Step four has a bit of work to it, but we can break it down in parts. I'm going to paste the parts of the code to show you what does what, and then I'm going to post the entirety of the code in a basic skeleton so you can edit it if you want to.

    Code: Select
    <div class="afftitle">OUR AFFILIATES</div>

    That is the affiliates title bar, in which you only need to post that as the first thing in your webpage maker in order to effectively use the first element you put into your CSS not too long ago. You can change the words "OUR AFFILIATES" to something else, such as "PORTKEYS" or even "DOORS TO EVERYWHERE". My personal favorite is the simple yet professional "OUR AFFILIATES".

    Code: Select
    <div class="affiliates">Affiliates here.</div>

    The affiliates code I've just posted maintains the overall table of affiliates just underneath the title bar. Everything is set up to have the code work fluidly, and there is no need to leave out this code. Just make sure you have the closing </div> tag when posting it up or the table won't work and will go all over the place.


    Creating The Table
    Once you have the basic div codes in place within your webpage you will have to decide if you want to have a static affiliate bar or a marquee affiliates bar. What is a marquee? Well that is a scrolling set of information that people commonly use for information blurbs or affiliate buttons to move rapidly across the screen. It prevents the clutter of buttons and makes it easier to have more than just a few of them.

    Because RPG-Directory requires a static button for advertising on their board, I will go ahead and mix in the static buttons with the marquee buttons so everyone can see how it's done.


    To Create A Static & Marquee Combination
    This won't take a lot of work and mostly it's a series of copying and pasting a button into the codes I've given you above. The most important thing to remember is how you have the marquee settings, and just how many static affiliates you want. Stacking them on top of one another is not recommended with this code, but if you find a way to make it work I'm all ears.

    The first bit of code we use for the static is this:

    Code: Select
    <table><tr><td><a href="http://www.rpg-directory.com/" target="_blank"><img src="http://i.imgur.com/RprlN.png" alt="RPG-D"></a></td>


    That will be the first thing to go into the <div> tags I have given you above. The second bit of code that goes after the </td> tag is this:

    Code: Select
    <td width="100%">
    <marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="7" width="100%" height="31px">Affiliate button links here!</marquee></td></tr></table>


    For the marquee I have chosen the scroll amount at 7, which is pretty fast. The lower the number the slower it goes, so keep that in mind when you have a lot of affiliates and want to give equal exposure time. I have the height set at 31px because the standard dimensions for buttons nowadays are 88px wide and 31px tall. The width is set at 100% to allow the buttons to get the most of their exposure in the whole table, so no need to change that if you want a simple affiliates bar look.


    Putting the Code Together
    So after all this hard work we have one more thing to do: put the code completely together!

    When you are done assembling all the pieces as I have told you the code should look a little like this:

    Code: Select
    <div class="afftitle">OUR AFFILIATES</div>
    <div class="affiliates">
    <table><tr>
    <td>
    <a href="http://www.rpg-directory.com/" target="_blank"><img src="http://i.imgur.com/RprlN.png" alt="RPG-D"></a>
    </td>
    <td>
     
    <a href="http://www.rpg-directory.com/" target="_blank"><img src="http://i.imgur.com/RprlN.png" alt="RPG-D"></a>
     
    </td>
    <td width="100%">
    <marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="7" width="100%" height="31px">Affiliate buttons.</marquee>
    </td>
    </tr>
    </table>
    </div>

    As you can see I added an extra static button to show that two can be put next to each other.



    Finishing Touches
    Once you have successfully entered the code click "Edit Webpage". Once you've seen the little confirmation above the button you just pushed you can navigate to your wrappers, in which you will insert the <% BUTTONS %> tag wherever you want the affiliates to appear. My recommendation is to put them just under the <% COPYRIGHT %> key as you will want the affiliates to be on the main page but don't want them to get in the way of the rest of the board, right? As soon as you've found a place to put the key confirm your changes and take a look!


    Updating Affiliates
    Now instead of having to go into every skin, or to work your skin around affiliate buttons in the forum description you can do so just from the Webpage. Simply go back to editing the webpage coding and add in your affiliates before hitting "Edit Webpage". It's a simple and effective way to update your affiliates bar across all skins without the hassle of individual editing or the inability to re-order, as seen in the Jcink Affiliates Mod.


    Closing Notes
    And there you have it folks! You have successfully created an affiliate marquee bar in the Webpage Maker that is compatible with all of your skins, regardless of the colors you have overall because you can always change the CSS elements per skin. Add as many buttons as you want to the marquee, but RPG-D's button can remain the same! Or any other static you choose! It may be possible to create more static affiliates through use of more TD and TR tags but for today this table in the Webpage Maker is more than enough.

    To keep the look of the affiliates bar uniform on all skins you create, you have to do two things:

    1) Make sure you put the <% BUTTONS %> key within the new wrappers for the new skin or it's not going to show up.

    2) Make sure to copy and paste the CSS elements I've given you above to the new style sheet of the new skin before changing colors and text or it's not going to appear uniform to the new skin.

    If you follow those two simple steps you can easily give yourself a working affiliate bar that is similar to the look of Jcink's mod, but you only have to edit in one screen instead of all skins.

    If there are any questions or any help is needed don't hesitate to post here or to ask me elsewhere. I'm always usually available to assist if it is needed!


    Tutorial written by Will Graham of RPG-Directory!
  2. Offline

    Carlos the Scientist GOLDEN THE PONY BOY

    Member Since:
    Nov 8, 2010
    Total Posts:
    964
    Likes Received:
    1,521
    Location:
    Night Vale
    • Awards
    Sorry if I'm being a turd about this, but I was wondering if you could grace us with a demo, of any type? I'm a bit of a mouse about using codes that I can't see in live action. Also I'm lazy, and I understand stuff better by looking at it, than reading it, if that makes any sense at all - which I'm sure it does not.

    Anyway - this was lovely, and thank you so much for sharing it!
  3. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    No problem!

    I've added a link to my test board, which should provide a good demo for use. ^^
  4. Offline

    Hiccup Haddock. the heart of a guardian & the soul of a dragon

    • Community Challenger
    • Community Devoted
    Member Since:
    Jan 22, 2011
    Total Posts:
    2,643
    Likes Received:
    1,321
    Location:
    Australia
    • Awards
    I did some editing to simplify it, e.g. didn't put in a fancy title and such, but because Dae no do code, I basically used this doc as a guide for setting up my affiliates areas here and here. Never would have thought of using the webpage maker, it's really nifty. ^^
  5. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    Oh, those are wonderful! I like what you did with the marquee going up instead of to the left!

    You reminded me I had an idea for a new affiliates table I wanted to post in the Codex. I should get that together as soon as I can. Maybe that one might work for you too. ^^

    I can see about making it without a title and with a title as well.
  6. Offline

    aPoppyBird Ninja

    Member Since:
    Feb 12, 2007
    Total Posts:
    115
    Likes Received:
    138
    Gender:
    Female
    You are a life saver! Thank you so much for this!
    Will Graham likes this.
  7. Online

    Raskolnikov's Axe Formerly "Robotronic"

    Member Since:
    Mar 18, 2013
    Total Posts:
    623
    Likes Received:
    604
    Gender:
    Male
    At first glance I wasn't sure I could actually install this but I did and with some finagling it looks gorgeous. All the snaps to you for the guide and design. I credited you for it in the site credits thread of my forum, so thanks for taking the time to come up with this @Will Graham
    Will Graham likes this.
  8. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    @Robotronic

    No problem at all! I'm glad you're using it and enjoying it! I did make it for all of you. ^^
    Robotronic likes this.
  9. Online

    Raskolnikov's Axe Formerly "Robotronic"

    Member Since:
    Mar 18, 2013
    Total Posts:
    623
    Likes Received:
    604
    Gender:
    Male
    @Will Graham
    I just added a 9th scrolling button next to the 2 static ones I have but making that addition caused the 2 static buttons to stack and messed with the spacing of the table. Any experience with how to possibly fix it?
  10. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    @Robotronic

    Replace the code in your buttons page with the following:

    Code: Select
    <div class="afftitle">Affiliates</div>
    <div class="afftitlemedium"><a href="http://amatterofperspective.b1.jcink.com/index.php?act=ST&f=12&t=28">To affiliate with us, please visit this thread</a></div>
    <div class="affiliates">
    <table>
    <tr>
    <td>
    <a href="http://www.rpg-directory.com/" target="_blank"><img src="http://i.imgur.com/RprlN.png" alt="RPG-D"></a>
    </td>
    <td>
    <a href="http://www.ultimatetopsites.com/bin/topsite.cgi?MarvelVerse&cat=games&ID=202">
    <img src="http://www.ultimatetopsites.com/bin/votepicture.art?MarvelVerse&cat=games&ID=202" border=0></a>
    </td>
    <td>
     
    <marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="5" width="100%" height="31px">
     
    <a href="http://ataleoftwocities.b1.jcink.com/" target="_blank"><img src="http://i4.photobucket.com/albums/y138/Valyredusk/AToTC-Button-New.gif"  alt="A Tale of Two Cities: an oWoD RP set in present day Minneapolis-Saint Paul, Minnesota" title="A Tale of Two Cities: an oWoD RP set in present day Minneapolis-Saint Paul, Minnesota" height="31" width="88" border="0" /></a> <a href="http://z13.invisionfree.com/Flawed_Genetics/index.php?" target="_blank"><img src="http://i1213.photobucket.com/albums/cc479/cerigraphx/fg/fgbutton.gif" alt="FLAWED GENETICS" /></a> <a href="http://z4.invisionfree.com/Xrevolution" Target="_blank"><img src="http://i9.photobucket.com/albums/a75/amayademorte/xmen/X-Button.jpg" width=100 height=33 border=0 alt="XMen"></a> <a href="http://z15.invisionfree.com/AnOptionForPeace/index.php?act=idx"><img src="http://i49.tinypic.com/5v2h79.png"></a> <a href="http://aswefall.b1.jcink.com/index.php?act=idx"><img src="http://i.imgur.com/I6RbJ02.png"></a> <a href="http://darkestreign.wootflakes.com"><img src="http://i1132.photobucket.com/albums/m570/wyghtspydr/Aff_zps86b5d4ff.png" /></a> <a href="http://bmfrp.b1.jcink.com/index.php?act=idx"><img src="http://i.imgur.com/y6o39BQ.png" target="_blank" alt="BMF" title="Break My Fall"></a> <a href="http://rpg.paraisnormal.com/" target="_blank"><img src="http://drift.paraisnormal.com/88x31.png"></a> <a href=http://cbeautiful.b1.jcink.com><img src=http://i37.photobucket.com/albums/e57/kuronuekourmie/circus%20rpg/Untitled2.jpg></a>
     
    </marquee>
     
    </td></tr></table>
    </div>
    I added missing TD tags and I helped the formatting a little to make it easier to navigate. I intend on going through this guide later and fixing it up, but if you still have issues can you open a topic in Help Me! so I can debug if it's something to do with your skin or something to do with the table? I just tested it on my test board and used the default skin to look, and it works fine on there.
  11. Offline

    Felix Interactive Literaturist

    • Community Devoted
    Member Since:
    Jul 23, 2011
    Total Posts:
    4,464
    Likes Received:
    6,399
    Location:
    USA, Baby!
    • Awards
    >.> I followed the steps, I failed. Why does this not surprize me. Did it surprize you?
  12. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    Make sure you have these settings:

    Under Admin CP --> Skins & Templates --> Webpage Maker, under the section at the bottom called Extra Settings, make sure you have the following:

    Turn webpages online? --> Yes
    Enable Include Keys for Board Wrappers? --> Yes

    Save those settings.

    Then under each new webpage you create, make sure the following setting is set to yes: Allow key use in Board Wrappers?
  13. Offline

    Felix Interactive Literaturist

    • Community Devoted
    Member Since:
    Jul 23, 2011
    Total Posts:
    4,464
    Likes Received:
    6,399
    Location:
    USA, Baby!
    • Awards
    I had done all that as per your most excellent instructions, and just double checked to be sure.
  14. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    If you wanna PM me with a link to the site so I can look, that would be awesome. ^^
  15. Offline

    Felix Interactive Literaturist

    • Community Devoted
    Member Since:
    Jul 23, 2011
    Total Posts:
    4,464
    Likes Received:
    6,399
    Location:
    USA, Baby!
    • Awards
    I think I got it, it had to be above the credits bar for some reason on this skin. Go figure. :p
  16. Online

    Raskolnikov's Axe Formerly "Robotronic"

    Member Since:
    Mar 18, 2013
    Total Posts:
    623
    Likes Received:
    604
    Gender:
    Male
    Will Graham likes this.
  17. Offline

    Kurojaki I'm not a Cannibal, I swear!

    Member Since:
    Sep 22, 2013
    Total Posts:
    36
    Likes Received:
    48
    Gender:
    Female
    So I'm a coding noob, who is failing miserably with this. I am trying to do what you have made look so easily, but am failing at it.

    I have everything enabled, and have placed the code where you said, but it's still not popping up. Any suggestions as why that might be?
  18. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    Did you make sure you put the key (i.e. <% BUTTONS %>) in the wrappers where you want it to go?
  19. Offline

    Kurojaki I'm not a Cannibal, I swear!

    Member Since:
    Sep 22, 2013
    Total Posts:
    36
    Likes Received:
    48
    Gender:
    Female
    Okay, I got it functioning. But it's not appearing on the home page. Could that be due to my positioning of it on the Style Sheet?
  20. Offline

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,305
    Likes Received:
    6,065
    Gender:
    Female
    Location:
    USA
    • Awards
    Can you PM me a link to your board? That way I can better provide support without clogging up this topic. ^^

Share This Page