Help required with Red Bull code.

Hi,

I have been asked to add the following to my Gamebox template on http://www.knighter.net :

___________________________________________

Please insert the following code-snippet at the beginning of the head tag:

Code: Select all

<!-- START: RED BULL ATHLETE WIDGET ################################# -->
<!-- Please insert the following code-snippet at the beginning of the head tag -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://athletewidget.redbull.com/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://athletewidget.redbull.com/css/overlay.css" />
<link rel="stylesheet" type="text/css" href="http://athletewidget.redbull.com/css/overlaySkins/skin-.css" />
<script type="text/javascript">var jq161 = jQuery.noConflict();</script>
<!-- END: RED BULL ATHLETE WIDGET ################################### -->
   

Please insert the following code-snippet immediately after the body tag:

Code: Select all

<!-- START: RED BULL ATHLETE WIDGET / Part 2 ######################## -->
<!-- Please insert the following code-snippet at the beginning of the body tag -->
<?php echo file_get_contents("http://athletewidget.redbull.com/index/get-html-text/id/106"); ?><!-- END: RED BULL ATHLETE WIDGET #################################### -->
   

_______________________________________________

Can anyone tell me which file to edit to get this to work?

Thanks in advance..

Backup the files before you make any changes!!!!!!!

I haven't used gamebox but I think you will find the file you need to edit is jroot/templates/gk_gamebox/layouts/blocks/head.php for the first part. The easiest place I can think of would be just after the <!--[if IE...]>...<![endif]--> and before the following <script type="text/javascript"> tag. Make sure you don't place the code between a section opening with <?php and closing with ?>.

EDIT: You could place it just after this <jdoc:include type="head" /> which is where the head starts.

Then you need to edit jroot/templates/gk_gamebox/layouts/default.php and paste the second code between the </body> [new code] and </html> tags which are at the very end of the file.

If your not too sure maybe one of the gavick team would paste it in for you.

This might be easier for adding the header/first code EasyHeader.

Hi, and thanks for your reply...

I used easyheader and added the other code to default.php

you can see the results at http://www.knighter.net

It has shunted the site down a little and has added a link on the right hand side at the top. It is meant to display a little Red Bull image here though and on clicking the site is meant to slide down to display the RSS feed etc at the top..

As you can see its not working quite right - any suggestions?

thx

The code you have added with easy header could be added in a module position using this Blank Module it will probably be more flexible for you to insert the code that way.

Disable easy header and try with the Blank Module and see how it goes.

My Bad I gave you the wrong info about placing the second part in the bottom of the default.php the second code needs to be placed at the body open tag. Take it out and see if the blank module will do the job for you. If it does it will save you from editing php files. Paste the second code in the Blank Modules Html section and publish it. You can play with the placement once you get it functional.

Thanks again for your help...

No luck at all using Blank Module

I tried all the possible combinations i could think of but couldnt get anything to show up.

I did a little test here

It basically behaves the same.. no visible tag or button If you hover your mouse over the top right corner you can see the link is there but no image.

who knows?!?

If you go here.....

and log in with:

[email protected]
gavick

you can see what it is meant to look like.

Hi I have tested this on a local J1.5 install using postnote so it should be good for your site.

You need to use the easy header plugin to insert the first code segment.

Then you need to make an edit to the default.php file which is in your templates/layouts folder.

Yours should look much the same as this segment:

original default.php

Code: Select all

* Snip

<head>
   <?php $this->loadBlock('head') ?>
    <?php $this->useCache($this->getParam('css_compress'), $this->getParam('css_cache')); ?>   
</head>

<body id="bd" class="fs<?php echo $this->getParam(GK_TOOL_FONT);?> <?php echo $this->browser();?>">
   <?php if($this->isIE6() && $this->_tpl->params->get('ie6bar') == 1) : ?>
   <div id="infobar"><a href="http://browsehappy.com"><?php echo JText::_('IE6_BAR'); ?></a></div>
   <?php endif; ?>

* Snip


Edited default.php

Code: Select all

* Snip

<head>
   <?php $this->loadBlock('head') ?>
    <?php $this->useCache($this->getParam('css_compress'), $this->getParam('css_cache')); ?>   
</head>

<body id="bd" class="fs<?php echo $this->getParam(GK_TOOL_FONT);?> <?php echo $this->browser();?>">
<!-- START: RED BULL ATHLETE WIDGET / Part 2 ######################## -->
<!-- Please insert the following code-snippet at the beginning of the body tag -->
<?php echo file_get_contents("http://athletewidget.redbull.com/index/get-html-text/id/119"); ?><!-- END: RED BULL ATHLETE WIDGET #################################### -->
   <?php if($this->isIE6() && $this->_tpl->params->get('ie6bar') == 1) : ?>
   <div id="infobar"><a href="http://browsehappy.com"><?php echo JText::_('IE6_BAR'); ?></a></div>
   <?php endif; ?>

* Snip


Refresh your browser and there should be a blue bar at the top with the Red Bull logo/drop down trigger to the right.

I couldn't get your code to work so I generated a new one in the Red Bull widget generator. If you go and regenerate the code in the style you would like and paste over the one I used above hopefully you're good to go.

You could override their css file with your own local file by changing the css path in the code or using the override.css provided it loads after the Red Bull style sheet, which it should.

You could ask a mod to edit your post above and get them remove the details provided!

I hope that all makes sense.

I forgot to mention you may need to increase the z-index which you can do by adding this:

File: override.css

Code: Select all

#rbabWidget {
    z-index: 10000;
}


Thank you so much.... I got the same result as before until I added the code to the overide.css file.

If you need any work, let me know

Thanks again.

erm.....any idea how to get the menu items not to be visible over the blue dropdown/

erm.....any idea how to get the menu items not to be visible over the blue dropdown/

Yes, you already have the solution.

Code: Select all

#rbabWidget {
    z-index: 10002; /* anything less and the menu will be displayed on top of the RB drop down panel. */
}


You need to sort out the spurious characters in the top left [ "> ]

Your header in view source:

Code: Select all

* snip

  <style type="text/css">
    <!--
#toTop {width:100px;z-index: 10;border: 1px solid #333; background:#121212; text-align:center; padding:5px; position:fixed; bottom:0px; right:0px; cursor:pointer; display:none; color:#fff;text-transform: lowercase; font-size: 0.9em;}
    -->
  </style>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="http://www.knighter.net/templates/gk_gamebox/js/domready_fix.js"></script>

  <script type="text/javascript" src="/media/plg_jblibrary/jquery/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="/media/system/js/modal.js"></script>
  <script type="text/javascript" src="http://www.knighter.net/components/com_k2/js/k2.js"></script>
  <script type="text/javascript" src="/media/system/js/caption.js"></script>
  <script type="text/javascript" src="/<!-- START: RED BULL ATHLETE WIDGET ################################# -->
<!-- Please insert the following code-snippet at the beginning of the head tag -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://athletewidget.redbull.com/js/jquery.jcarousel.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://athletewidget.redbull.com/css/overlay.css" />
<link rel="stylesheet" type="text/css" href="http://athletewidget.redbull.com/css/overlaySkins/skin-blue.css" />
<script type="text/javascript">var jq161 = jQuery.noConflict();</script>
<!-- END: RED BULL ATHLETE WIDGET ################################### -->
"></script>

* snip


As you an see the the code segment is incorrectly wrapped in a style tag. My suspicion is that you have placed the code in the wrong field in the plugin. You need to paste the code in the big text field for 'Additional Items'. If that's where you have placed the code the issue would require more investigation.

If you want the panel to be black add this:

override.css

Code: Select all

#rbabWidgetContentWrapper {
    background: none repeat-x scroll left bottom #000000;
}

If you want to do that you may need to play with the Red Bull logo position or redo the logo with a black background and add the path to your own image using the override.css.

Example:

Code: Select all

#rbabButtstrap {
    background: url("../../images/redbull-black.png") no-repeat scroll 0 0 transparent;
    top: -4px;
}


You could also try these changes and see what you think.

Removes the black bar at the top:

override.css

Code: Select all

#bg-wrap1 {
    margin-top: -20px;
}


Removes the thin black bar created by the Red Bull code.

Code: Select all

#rbabWidgetContentWrapper {
    min-height: 0px;
}


moves logo to the left.

Code: Select all

#rbabButtstrap {
    float: left;
    right: -65px;
}