I've been linking to tutorials on youtube about how to use firebug for some time now:
VIDEO
Have a look -> then inspect the site and you'll find out which line in which file takes care of the styling. (it is in media/com_hotspots/css ...)
2. there are few changes that one need to make in the new version
the file: components/com_hotspots/views/hotspot/tmpl/default.php
line 73 change the code from this
$domready .= "
hotspots.addSandbox( 'map_canvas', hotspots.DefaultOptions) ;
hotspots.addModule( 'map',hotspots.DefaultOptions) ;
hotspots.addModule( 'hotspot', hotspot, hotspots.DefaultOptions) ;
hotspots.addModule( 'menu',hotspots.DefaultOptions) ;
hotspots.startAll( ) ;
var tabs = new compojoom.hotspots.tab( 'tab-details',{
tabSelector: '.tab-details-tab',
contentSelector: '.tab-details-tab-content'
} ) ;;
";
to this:
$domready .= "
var tabs = new compojoom.hotspots.tab( 'tab-details',{
tabSelector: '.tab-details-tab',
contentSelector: '.tab-details-tab-content'
} ) ;;
var initialized = false;
tabs.addEvent( 'change', function( el) {
if( el == 'map') {
if( initialized == false) {
hotspots.addSandbox( 'map_canvas', hotspots.DefaultOptions) ;
hotspots.addModule( 'map',hotspots.DefaultOptions) ;
hotspots.addModule( 'hotspot', hotspot, hotspots.DefaultOptions) ;
hotspots.addModule( 'menu',hotspots.DefaultOptions) ;
hotspots.startAll( ) ;
initialized = true;
}
}
} ) ;
";
then later in the code you'll have to change the positions of the tabs.
<ul class="tab-details-tabs">
<?php if ( $this->hotspot->picture) : ?>
<li class="tab-details-tab" data-id="photo"><span><?php echo JText::_( 'COM_HOTSPOTS_PHOTO') ; ?></span>
</li><?php endif; ?>
<li class="tab-details-tab" data-id="map">
<span><?php echo JText::_( 'COM_HOTSPOTS_MAP_SINGLE_VIEW_TAB') ; ?></span>
</li>
</ul>
and
<div id="hotspots-navigation" style="display:none"></div>
<?php if ( $this->hotspot->picture) : ?>
<div class="tab-details-tab-content" data-id="photo">
<div class="hotspots-image">
<?php
echo "<img src=\"" . $this->hotspot->picture . "\" title=\"" . $this->hotspot->name . "\" alt=\"" . $this->hotspot->name . "\" />";
?>
</div>
<div class="clear-both"></div>
</div>
<?php endif; ?>
<div class="tab-details-tab-content" data-id="map">
<?php echo $this->loadTemplate( 'one_line_address') ; ?>
<div id="map_cont" class="single-view" style="width: 100 %; height: 400px;position: relative;">
<?php echo $this->loadTemplate( 'menu') ; ?>
<div id="map_canvas" class="map_canvas"
style="height: <?php echo HotspotsHelper::getSettings( 'map_height', 600 ) ; ?>px;"></div>
</div>
</div>
That is all you need to do.
Regards,
Daniel
