by Erik Youngren » May 7th 2011, 12:41 pm I apologize up front though if my code is really bad. I'd consider myself to be intermediate at HTML, basic at CSS and a clueless noob with PHP.
Anyway, here is what I did.
I installed the Floating Yellow Infobar first, weeks before I did this. So I would start there, following the install directions.
Here is where I changed things though. In the install file it says this for the overall_header.html file:
- Code: Select all
Open: styles/prosilver/template/overall_header.html Find Tip: This may be a partial find and not the whole line. CODE:SELECT ALL </head> Add before Tip: Add these lines on a new blank line before the preceding line(s) to find. CODE:SELECT ALL <script type="text/javascript" src="./styles/floating.js"></script> << Hide Find Tip: This may be a partial find and not the whole line. CODE:SELECT ALL <body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}"> Add after Tip: Add these lines on a new blank line after the preceding line(s) to find. CODE:SELECT ALL <!-- IF not S_USER_LOGGED_IN and not S_IS_BOT--> <div id="topbar"> <table width="100%" cellpadding="3"> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="./ucp.php?mode=register"> <p>{L_INFORMATION_BAR_W} {SITENAME} {L_INFORMATION_BAR_G}</p> </a> </td> </table> </div> <!-- ENDIF -->
I changed the last add after to this:
- Code: Select all
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT--> <div id="topbar"> <table width="100%" cellpadding="0"> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><b>Welcome to the Wandering Monk Rolemaster Forums. </b><a href="./ucp.php?mode=register"><b>Click here to register with us.</b></a></td></table> <table width="100%" cellpadding="0"> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><!-- <a href="./ucp.php?mode=register"> --> <!-- INCLUDE prime_quick_login.html --> <!-- </a> --> </td> </table> </div>
What this did is place all the info bar content into the prime_quick_login.html file. So now we go to that MOD. I ignored the Prime Quick Login's instruction in the overal_header.html file and placed the <!-- INCLUDE prime_quick_login.html --> inside the area that the Floating Yellow Infobar called for it's overall_header.html edits. You can see it in my code above.
Upload the files the Prime Quick Login MOD requires.
The last couple of changes are modifying the prime_quick_login.html file and the CSS file the Floating Yellow Infobar modifys. Here is the original code for the prime_quick_login.html file:
- Code: Select all
<!-- IF S_PRIME_QUICK_LOGIN and not AUTO_REFRESH and not S_USER_LOGGED_IN and not S_IS_BOT --> <form method="post" action="{S_PRIME_QUICK_LOGIN}" style="float:left;width:60%;overflow:visible;"> <fieldset class="quick-login" style="float:left;white-space:nowrap;"> <label for="prime_login_username">{L_PRIME_QUICK_LOGIN_USERNAME}:</label> <input tabindex="100" type="text" name="username" id="prime_login_username" size="10" class="inputbox" style="min-width:100px" title="{L_PRIME_QUICK_LOGIN_USERNAME}" /> <label for="prime_login_password">{L_PRIME_QUICK_LOGIN_PASSWORD}:</label> <input tabindex="101" type="password" name="password" id="prime_login_password" size="10" class="inputbox" style="min-width:100px" title="{L_PRIME_QUICK_LOGIN_PASSWORD}" /> <!-- IF S_PRIME_QUICK_LOGIN_AUTO --><label for="prime_login_auto"><input tabindex="102" type="checkbox" name="autologin" id="prime_login_auto" /> {L_PRIME_QUICK_LOGIN_REMEMBER}</label><!-- ENDIF --> <!-- IF S_PRIME_QUICK_LOGIN_HIDE --><label for="prime_login_hide"<!-- IF S_PRIME_QUICK_LOGIN_AUTO --> style="margin-left:0.7em;"<!-- ENDIF -->><input tabindex="103" type="checkbox" name="viewonline" id="prime_login_hide" /> {L_PRIME_QUICK_LOGIN_HIDE}</label><!-- ENDIF --> <input tabindex="104" type="submit" name="login" value="{L_LOGIN}" class="button2" /> </fieldset> </form> <!-- ENDIF -->
THIS is the CHANGES I made to the file so that it would work with my forums.
- Code: Select all
<!-- IF S_PRIME_QUICK_LOGIN and not AUTO_REFRESH and not S_USER_LOGGED_IN and not S_IS_BOT --> <form method="post" action="{S_PRIME_QUICK_LOGIN}" style="overflow:visible;"> <fieldset class="quick-login" style="white-space:nowrap;"> <label for="prime_login_username">{L_PRIME_QUICK_LOGIN_USERNAME}:</label> <input tabindex="100" type="text" name="username" id="prime_login_username" size="10" class="inputbox" style="min-width:100px" title="{L_PRIME_QUICK_LOGIN_USERNAME}" /> <label for="prime_login_password">{L_PRIME_QUICK_LOGIN_PASSWORD}:</label> <input tabindex="101" type="password" name="password" id="prime_login_password" size="10" class="inputbox" style="min-width:100px" title="{L_PRIME_QUICK_LOGIN_PASSWORD}" /> <!-- IF S_PRIME_QUICK_LOGIN_AUTO --><label for="prime_login_auto"><input tabindex="102" type="checkbox" name="autologin" id="prime_login_auto" /> {L_PRIME_QUICK_LOGIN_REMEMBER}</label><!-- ENDIF --> <!-- IF S_PRIME_QUICK_LOGIN_HIDE --><label for="prime_login_hide"<!-- IF S_PRIME_QUICK_LOGIN_AUTO --> style="margin-left:0.7em;"<!-- ENDIF -->><input tabindex="103" type="checkbox" name="viewonline" id="prime_login_hide" /> {L_PRIME_QUICK_LOGIN_HIDE}</label><!-- ENDIF --> <input tabindex="104" type="submit" name="login" value="{L_LOGIN}" class="button2" /> </fieldset> </form> <!-- ENDIF -->
Here are the edits that the Floating Yellow Infobar makes to common.css:
- Code: Select all
Open: styles/prosilver/theme/common.css Find Tip: This may be a partial find and not the whole line. CODE:SELECT ALL .clear { display: block; clear: both; font-size: 1px; line-height: 1px; background: transparent; } Add after Tip: Add these lines on a new blank line after the preceding line(s) to find. CODE:SELECT ALL /* Floating Yellow Info Bar */ #topbar { align: center; visibility: hidden; z-index: 100; position: absolute; color: #000; width:100%; background: #FFFFE1 ; border-top: 1px outset; border-bottom: 1px outset; text-decoration: none; cursor: default; text-align: center; font-family: "Tahoma", Verdana, Helvetica, sans-serif; font-size: 11px; } #topbar a:hover { color: #FFF; text-decoration: none; } .rtl td.off { background: #FFFFE1 url('./images/warning.gif') no-repeat scroll 98% 50%; } .rtl td.on { background: #3169B6 url('./images/warning2.gif') no-repeat scroll 98% 50%; } td.off { background: #FFFFE1 url('./images/warning.gif') no-repeat scroll 2% 50%; } td.on { background: #3169B6 url('./images/warning2.gif') no-repeat scroll 2% 50%; } #topbar p{ margin:0px; padding: .45em 22px .45em 22px; font-size:11px; text-align: center; white-space: nowrap; }
Here are the edits I made to make it work with my colors and NOT the yellow and illegible type color the Floating Yellow Infobar uses.
- Code: Select all
/* Floating Yellow Info Bar */ #topbar { align: center; visibility: hidden; z-index: 100; position: absolute; color: #FFFFFF; width:100%; background: #535352 ; border-top: 1px outset; border-bottom: 1px outset; text-decoration: none; cursor: default; text-align: center; font-family: "Tahoma", Verdana, Helvetica, sans-serif; font-size: 11px; } #topbar a:hover { color: #535352; text-decoration: none; } .rtl td.off { background: #535352 /*url('./images/warning.gif') no-repeat scroll 98% 50%*/; } .rtl td.on { background: #000000 /*url('./images/warning2.gif') no-repeat scroll 98% 50%*/; } td.off { background: #535352 /*url('./images/warning.gif') no-repeat scroll 2% 50%*/; } td.on { background: #000000 /*url('./images/warning2.gif') no-repeat scroll 2% 50%*/; } #topbar p{ margin:0px; padding: .45em 22px .45em 22px; font-size:11px; text-align: center; white-space: nowrap; }
That's pretty much it. Of course, you need to update styles and themes and probably refresh the cache, but there you go.
If there is anything I missed or anyone is unclear on, please let me know.
Much appreciated.
