Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Where Does The Code Go?!!
Arahila (New Admin) 5/29/2010 7:09 AM EST : RE: Where Does The Code Go?!!
Arahila
Posts: 25
Becoming Adept!

Mottie said:
Hi Arahila!
  1. I'm not sure what you are referring to here... do you mean the Join this guild text that has left and right arrows? or something specific to the welcome box widget?
Sorry, yes that is the text I am referring to. I would like to replace the arrows.

Thanks Again!
TopBottom

Mottie (MVP) 5/29/2010 8:27 AM EST : RE: Where Does The Code Go?!!
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Arahila said:
1. Here I am trying to customize the Welcome User box. Your instructions say we can insert <img> so here is what I tried: var prefix = "Greetings" rightArrow = 'http://i144.photobucket.com...; No dice. Do I need it to be like this: var leftArrow = 'http://i201.photobucket.com... - Or do I need the <img src="....."> in there?


Hi Arahila!

If you want to add arrows around the "Join {guild name}", just add the full image URL (in orange) into the script, but do not include the <img> tag. In the example you provided, there is no "prefix" variable. For this script it is "joinTitle" (text in blue). That is why I was confused. The "prefix" variable, if I remember correctly, is only used in the add user name into the welcome box title script.
 var hideJoinLink = false;
 var leftArrow = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/leftarrow.gif';
 var rightArrow = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/rightarrow.gif';
 var joinTitle = 'Come to the Dark Side';
TopBottom

Arahila (New Admin) 5/30/2010 3:51 PM EST : RE: Where Does The Code Go?!!
Arahila
Posts: 25
Becoming Adept!

There has to be a step or two that I am either missing or don't understand.

The added text and "arrow" in the welcome nav bar don't show.

I got the text bold in the recruitment box but if I put in the custom info, the whole thing vanishes.

The space under the banner showed correctly ONCE then never again. (Should match the top.)

I really need to get this done ASAP.... /headdesk (repeat) I left the code in place, don't remember what all I've changed now. I feel so stoopid.
TopBottom

Mottie (MVP) 5/30/2010 4:29 PM EST : RE: Where Does The Code Go?!!
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Arahila!

I see a bunch of code messed up in your page footer, just replace everything there with the following
<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2, #preview, #screenshot { color:#dddddd; background:#222222; border: 1px solid #333333; padding:5px; display:none; opacity: 0.9; filter: alpha(opacity=90); text-align:left; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
.BannerArea { padding-bottom: 0 }
</style>

<div id="username" style="display:none;"></div>
<script type="text/javascript">
$(document).ready(function(){
 var hideJoinLink = false;
 var leftArrow = 'http://i144.photobucket.com/albums/r175/basteta/Rangers/horde_small.jpg';
 var rightArrow = 'http://i144.photobucket.com/albums/r175/basteta/Rangers/horde_small.jpg';
 var joinTitle = 'Welcome to the Horde';
// don't change anything below
 var newtitle = prefix + $('#username').text() + suffix;
 $('#username').closest('div.ContentBox').find('.ContentBoxTitle,.ContentBoxTitleNoBackground').text(newtitle);

 // Don't change anything below
 // ***************************
 var tm = $('.WfTopmenu');
 var sm = $('.gpWidget-sitenav a[href*=FillApp]');
 if (hideJoinLink) {
  tm.find('.welcomeBullet').parent().after('').hide();
  sm.parent().hide();
 } else if (tm.length) {
  tm.find(".welcomeBullet:eq(0)").html('');
  tm.find(".welcomeBullet:eq(1)").html('');
  tm.find("b:contains('Join')").html(joinTitle);
 } else {
  sm.find("b:contains('Join')").html(joinTitle);
  sm.prev('img').attr('src',leftArrow);
  sm.next('img').attr('src',rightArrow);
 }
})
</script>
TopBottom

Arahila (New Admin) 5/31/2010 2:03 PM EST : RE: Where Does The Code Go?!!
Arahila
Posts: 25
Becoming Adept!

Mottie said: I see a bunch of code messed up in your page footer, just replace everything there with the following


That doesn't surprise me at all. I coped the text, pasted into WordPad and then put it in the footer but still no change. There are 3 possible problems:

1. I have bad CSS on the Custom CSS page, banner area or a HTML content box.

2. Even though I am saving after making changes, nothing is updated.

3. Something funky with the browser cache. (I use Firefox and it is set to clear the cache at shut down.) Once in a while, I see a "real time" change when I reload the page.

I am going to look at the CSS in the areas I mentioned and see if there is a conflict there. If you would please also take a look, I would appreciate it.

Where I take out the customized tooltip code here is what happens:

The text is bold but the tooltips... I guess I don't understand what you mean when you say to insert the code below in the function:

deathknight : "x,x,x",
druid       : "x,x,x",
hunter      : "x,x,x",
mage        : "x,x,x",
paladin     : "x,x,x",
priest      : "x,x,x",
rogue       : "x,x,x",
shaman      : "x,x,x",
warlock     : "x,x,x",
warrior     : "x,x,x"

/headwall (repeat and then) /headdesk

Many thanks for all your help so far, tell the boss you should get a raise.
TopBottom

Mottie (MVP) 5/31/2010 6:18 PM EST : RE: Where Does The Code Go?!!
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Arahila!
  • Well, first off, don't use Wordpad (it's a rich text editor and not really compatible with working with raw code). Use Notepad or just paste the code directly into the site editor.
  • You are missing the modified tooltip script, add this into your footer HTML

     <script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>

  • The script you are using to replace the content box title (or welcome widget title, I'm guessing) will not work in the page footer. It is designed to be added INSIDE of a Free Form Text/HTML or Welcome widget. And I'm not sure why you have it twice in the footer.
  • I'm not sure where the script I posted above when to, so you may have to make sure the editor is in Raw/Script mode (link in the upper right corner of the editor) before pasting/saving the content.
  • You Recruitment widget works perfectly after I added the tooltip script.
TopBottom

Arahila (New Admin) 5/31/2010 7:09 PM EST : RE: Where Does The Code Go?!!
Arahila
Posts: 25
Becoming Adept!

When I finally get through with this, I will have a Dummies Guide to GuildPortal....But some success!! The Recruitment Box works now! That was until I stuck in the hide the free-form text box code and not the hide the edit button code. And of course, I can't reproduce it, no matter what.



Here is the shout box, I love the way it works but what do I change to get rid of the space above and below the input box and the shouts themselves? This was weird but while trying to get the recruitment box fixed, the shout box fixed itself. The image is larger than shown here (good.) I'd like the scrollable "area" to be longer...



I still have the space below the banner and the welcome bar changes still don't show.
TopBottom

Mottie (MVP) 6/1/2010 1:13 PM EST : RE: Where Does The Code Go?!!
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Arahila!

Ok, I think it's all done.

Summary:
  • Full Custom CSS:
    • Set BannerArea padding and added a BannerArea table definition
    • Added Tooltip CSS here. Set a width to 250px and increased the padding to 8px
    • Increased Shout box widget height to 200px
  • Footer Area, now contains
    • Tooltip script
    • Welcome message icon script
  • Custom Javascript/jQuery
    • Moved hide edit button script here
    • Added script to remove space under the banner (can't get to it with CSS easily)
    • Added script to move shout box input to the top
  • Home Page Recruitment Box
    • Changed colorBackground to true
    • added useClassColors and set it to false
    • Removed space between the "deathknight" definition... no spaces allowed!
    • Added missing brackets/parentheis
  • Home Page Code Box
    • Adjusted shout box image script to limit max image height to 40px
    • Adding missing brackets/parenthesis
    • Added code to hide the code box
Whew... I hope that covers everything.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%