Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 928
  • Last Modified:

Reducing Space between Logo & Company title

Hi

I have a website up & running, all is going fine but i want to reduce space between the logo & the company title. I have an idea that i must shuffle the template codes somehow to be able to to this but just to be sure & exactly how to do it in the simplest form. I am using Joomla 3.1.5. (http://a1telecomms.co.za/)

How do i achieve this?? See picture as reference as well.

Thanks
Screenshot-9.png
0
shaunwingin
Asked:
shaunwingin
  • 5
  • 2
  • 2
  • +1
2 Solutions
 
shaunwinginAuthor Commented:
Tx - hopefully i can get good responses.
0
 
Scott Fell, EE MVEDeveloperCommented:
First, it would help to see your code in a pretty format like below. I just did this for your header.  Your header is broken out into
<header id="rt-top-surround">
  <div id="rt-top" >
    <div class="rt-container">
      <div class="rt-grid-2 rt-alpha">
        <div class="rt-block logo-block"> <a href="/" id="rt-logo"></a> </div>
      </div>
      <div class="rt-grid-2">
        <div class="date-block"> <span class="date">Wednesday, October 30, 2013</span> </div>
        <div class="rt-block ">
          <div class="module-surround">
            <div class="module-content">
              <form name="rokajaxsearch" id="rokajaxsearch" class="blue" action="http://a1telecomms.co.za/" method="get">
                <div class="rokajaxsearch ">
                  <div class="roksearch-wrapper">
                    <input id="roksearch_search_str" name="searchword" type="text" class="inputbox" value="Search..." />
                  </div>
                  <input type="hidden" name="searchphrase" value="any"/>
                  <input type="hidden" name="limit" value="20" />
                  <input type="hidden" name="ordering" value="newest" />
                  <input type="hidden" name="view" value="search" />
                  <input type="hidden" name="option" value="com_search" />
                  <div id="roksearch_results"></div>
                </div>
                <div id="rokajaxsearch_tmp" style="visibility:hidden;display:none;"></div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="rt-grid-2">
        <div class="rt-block ">
          <div class="module-surround">
            <div class="module-content">
              <div class="custom"  >
                <p><a href="/downloads/TeamViewerQS-ckq.exe"><strong><span style="font-size: 12pt;">A1 Telecoms Remote Support</span></strong></a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rt-grid-2">
        <div class="rt-block ">
          <div class="module-surround">
            <div class="module-content">
              <div class="custom"  >
                <p><span style="font-size: 12pt;"><strong>Email A1:<span style="text-decoration: underline;"><span style="text-decoration: underline;"> 
                  <script type='text/javascript'>
 <!--
 var prefix = '&#109;a' + 'i&#108;' + '&#116;o';
 var path = 'hr' + 'ef' + '=';
 var addy22679 = '&#97;dm&#105;n' + '&#64;';
 addy22679 = addy22679 + '&#97;1t&#101;l&#101;c&#111;ms' + '&#46;' + 'c&#111;' + '&#46;' + 'z&#97;';
 var addy_text22679 = '&#105;nf&#111;' + '&#64;' + '&#97;1t&#101;l&#101;c&#111;ms' + '&#46;' + 'c&#111;' + '&#46;' + 'z&#97;';
 document.write('<a ' + path + '\'' + prefix + ':' + addy22679 + '\'>');
 document.write(addy_text22679);
 document.write('<\/a>');
 //-->\n </script><script type='text/javascript'>
 <!--
 document.write('<span style=\'display: none;\'>');
 //-->
 </script>This email address is being protected from spambots. You need JavaScript enabled to view it. 
                  <script type='text/javascript'>
 <!--
 document.write('</');
 document.write('span>');
 //-->
 </script>&nbsp;</span></span></strong></span></p>
                <p><span style="font-size: 12pt;"><strong>Telephone: 010 - 590 - 0222</strong></span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rt-grid-2 rt-prefix-2 rt-omega">
        <div class="rt-block ">
          <div class="module-surround">
            <div class="module-title">
              <h2 class="title">User Log In</h2>
            </div>
            <div class="module-content">
              <div id="k2ModuleBox110" class="k2LoginBlock">
                <form action="/index.php" method="post" name="login" id="form-login">
                  <fieldset class="input">
                    <p id="form-login-username">
                      <label for="modlgn_username">Username</label>
                      <input id="modlgn_username" type="text" name="username" class="inputbox" size="18" />
                    </p>
                    <p id="form-login-password">
                      <label for="modlgn_passwd">Password</label>
                      <input id="modlgn_passwd" type="password" name="password" class="inputbox" size="18" />
                    </p>
                    <p id="form-login-remember">
                      <label for="modlgn_remember">Remember me</label>
                      <input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" />
                    </p>
                    <input type="submit" name="Submit" class="button" value="Login" />
                  </fieldset>
                  <ul>
                    <li><a href="/index.php/your-profile?view=reset">Forgot your password?</a></li>
                    <li><a href="/index.php/your-profile?view=remind">Forgot your username?</a></li>
                    <li><a href="/index.php/your-profile?view=registration">Create an account</a></li>
                  </ul>
                  <input type="hidden" name="option" value="com_users" />
                  <input type="hidden" name="task" value="user.login" />
                  <input type="hidden" name="return" value="Lw==" />
                  <input type="hidden" name="3ba7090eb8954a754afbef2419ab50bf" value="1" />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <div id="rt-header">
    <div class="rt-container">
      <div class="rt-grid-5 rt-alpha">
        <div class="rt-block ">
          <div class="module-surround">
            <div class="module-content">
              <div class="custom"  >
                <p><span style="font-size: 36pt;"><strong>A1 Telecoms cc</strong></span></p>
                <p><span style="font-size: 10pt;"><strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent;">Keeping You Connected 4 Less</strong></span></p>
                <p><span style="font-size: 10pt;"><strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent;"><strong style="font-family: Georgia, sans-serif; font-size: 11px; line-height: 18.6875px; margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent;">Voice, Data &amp; IT Consultants</strong></strong></span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rt-grid-7 rt-omega">
        <div class="rt-block menu-block">
          <div class="gf-menu-device-container responsive-type-panel"></div>
          <ul class="gf-menu l1 " >
            <li class="item435 active last" > <a class="item" href="/"  > Home </a> </li>
            <li class="item468" > <a class="item" href="/index.php/about-us"  > About Us </a> </li>
            <li class="item467 parent" > <a class="item" href="/index.php/our-service"  > Our Services <span class="border-fixer"></span> </a>
              <div class="dropdown columns-1 " style="width:180px;">
                <div class="column col1"  style="width:180px;">
                  <ul class="l2">
                    <li class="item547" > <a class="item" href="/index.php/our-service/a1-telecoms-emergency-service"  > A1 Telecoms Emergency  Service </a> </li>
                    <li class="item549" > <a class="item" href="/index.php/our-service/a1-fraud-protection"  > A1 Fraud Protection </a> </li>
                    <li class="item550" > <a class="item" href="/index.php/our-service/a1-lightning-protection"  > A1 Lightning Protection </a> </li>
                    <li class="item551" > <a class="item" href="/index.php/our-service/a1-assistance-moving-premises"  > A1 Assistance Moving Premises </a> </li>
                    <li class="item552" > <a class="item" href="/index.php/our-service/a1-equipment-rental"  > A1 Equipment Rental </a> </li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="item510" > <a class="item" href="/index.php/our-clients"  > Our Clients </a> </li>
            <li class="item466" > <a class="item" href="/index.php/our-team"  > Our Team </a> </li>
            <li class="item508" > <a class="item" href="/index.php/download"  > Support </a> </li>
          </ul>
          <div class="clear"></div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div id="ct-dropshadow"></div>
  </div>
</header>

Open in new window

Your header has the ID rt-top-surround and below that a div with ID rt-top and finally below that are 5 divs each with the class rt-grid-2

Looks like you are on a grid using css that has 10 columns.  The 5 columns in the header are made by using the grid-2.  If you wanted just one column, it would probably be grid-10.  Your logo is in one column, then date, then "remote support, then email and finally user log in is the last column.  

What you will want to do is combine the first two columns.  You essentially have this

<div class="rt-grid-2 rt-alpha">..</div>
<div class="rt-grid-2">..</div>
<div class="rt-grid-2">..</div>
<div class="rt-grid-2">..</div>
<div class="rt-grid-2">..</div>

Open in new window


Now you want this
<div class="rt-grid-4 rt-alpha">..</div>

<div class="rt-grid-2">..</div>
<div class="rt-grid-2">..</div>
<div class="rt-grid-2">..</div>

Open in new window

Notice I removed the 2nd main div and changed the first from grid-2 to grid-4.  Inside of that div you want to split your logo and date into 2 seperate div's.

I am not sure how this grid system works,  you can try

<div class="rt-grid-4 rt-alpha">
   <div class="rt-grid-5">logo here</div>
   <div class="rt-grid-5">date and search box here</div>
</div>

Open in new window

If that does not work
<div class="rt-grid-4 rt-alpha">
   <div class="rt-logo">logo here</div>
   <div class="rt-date">date and search box here</div>
</div>

Open in new window

Then add to your css
rt-logo{float:left;margin-right:10px;}
rt-date{float:left;}
You will probaly need to add a width and hight to those as well.

Please give this a try and post your results.
0
 
Derek JensenCommented:
I just made this small modification, moving your title up by your logo:

<div class="rt-grid-2 rt-alpha">
            <div class="rt-block logo-block">
            <a id="rt-logo" href="/"></a>
<div class="custom" style="float: right; margin-right: -80px; margin-top: 30px;">
	<p><span style="font-size: 36pt;"><strong>A1 Telecoms cc</strong></span></p>
<p><span style="font-size: 10pt;"><strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent;">Keeping You Connected 4 Less</strong></span></p>
<p><span style="font-size: 10pt;"><strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent;"><strong style="font-family: Georgia, sans-serif; font-size: 11px; line-height: 18.6875px; margin: 0px; padding: 0px; border: 0px; outline: 0px; background-color: transparent;">Voice, Data &amp; IT Consultants</strong></strong></span></p></div>
	                	</div>
                	</div>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Rowby GorenCommented:

Open in new window

Hi

If I may interject here, since this is in Joomla 3.1.5 it is possibly set up as a Twitter Bootstrap template.   And ideally the solution would not involve changing the html?????

Especially if he intends to take advantage of the twitter bootstrap responsive tablet/cell options.

I am only offering this comment to make the other Experts aware that this person may not want to touch the html,  

And instead take advantage of twitter bootstrap options and possibly only css to solve his problem.  

Looking just now at the source code I see that it is indeed a twitter-bootstrap-Rocket Theme Gantry joomla template and the solution should consider Gantry as part of the resolution, I would think.....  For example, look at this:  Gantry info -- might not be up to date....   And this documentation  Gantry documentation.  (Gantry version 4)  You can look at Gantry's "Force module positions"in the video in the above link.  It may or may not help with your issue.  But I would think one of the CSS experts, knowing that this is a Gantry template might have a css solution not involving modifying the  html.

If I am incorrect about the solution requiring taking Gantry into consideration,  then you can ignore my comment and continue with your suggestions.  I am not looking for any points here.  Just wanted to make it clear that Gantry probably should be taken into consideration.

Rowby
0
 
shaunwinginAuthor Commented:
Padas: Editing file "css/master-ie9.css" in template "thekraken". Source Code

/**
* @version   $Id$
* @author    RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2012 RocketTheme, LLC
* @license   http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
*/

.readon, .rt-block {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
}

ul.menu li.active.current > a:before, ul.menu li.active.current > .item:before, ul.menu li.active.current > .separator:before,
ul.menu #current.active > a:before, ul.menu #current.active > .item:before, ul.menu #current.active > .separator:before {font-size: 15px;}
0
 
shaunwinginAuthor Commented:
Rowby - Thanks
bigdogdman - Will that code work with any template? including mine - its called "the kraken"
0
 
shaunwinginAuthor Commented:
Here is my actual source code: Its quite long......


<?php
/**
* @version   $Id: index.php 9769 2013-04-26 17:40:14Z kevin $
 * @author RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2013 RocketTheme, LLC
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 *
 * Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
 *
 */
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );

$jquery = '';
jimport('joomla.version');
$version = new JVersion();
if(version_compare($version->getShortVersion(), '3.0', '>=')){
    JHtml::_('jquery.framework');
} else {
    JHTML::_('behavior.mootools');
    JFactory::getDocument()->addScript($this->baseurl.'/templates/'.$this->template.'/js/jq.min.js');
}
        
// load and inititialize gantry class
require_once(dirname(__FILE__) . '/lib/gantry/gantry.php');
$gantry->init();

// get the current preset
$gpreset = str_replace(' ','',strtolower($gantry->get('name')));
?>
<!doctype html>
<html xml:lang="<?php echo $gantry->language; ?>" lang="<?php echo $gantry->language;?>" >
<head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <?php if ($gantry->get('layout-mode') == '960fixed') : ?>
  <meta name="viewport" content="width=960px">
  <?php elseif ($gantry->get('layout-mode') == '1200fixed') : ?>
  <meta name="viewport" content="width=1200px">
  <?php else : ?>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="HandheldFriendly" content="true" />
  <?php endif; ?>
    <?php
        
        $gantry->displayHead();
        
        // Family weight H1,H2
        $gantry->addInlineStyle("\nh1,h2 { font-weight: " . $gantry->get('font-weight') . "; }\n");
        
        // Family2 is for the body
    
        $font_family = $gantry->get('font2-family2');
        
        if (strpos($font_family, ':')) {
                $explode = explode(':', $font_family);

                $delimiter = $explode[0];
                $name      = $explode[1];
                $variant   = isset($explode[2]) ? $explode[2] : null;
        } else {
                $delimiter = false;
                $name      = $font_family;
                $variant   = null;
        }

        if (isset($variant) && $variant) $variant = ':' . $variant;

        switch ($delimiter) {
                // google fonts
                case 'g':
                        $variant = $variant ? $variant : '';
                        $gantry->addStyle('//fonts.googleapis.com/css?family=' . str_replace(" ", "+", $name) . $variant);
                        break;
                default:
                        break;
        }
        
        $gantry->addInlineStyle("\nbody { font-weight: ".$gantry->get('font2-weight2')."; font-family: '" . $name . "', 'Helvetica', arial, serif; }\n");
        
        // Family2 Body End
        
        // Family3 is for the menu
    
        $font_family = $gantry->get('font3-family3');
        
        if (strpos($font_family, ':')) {
                $explode = explode(':', $font_family);

                $delimiter = $explode[0];
                $name      = $explode[1];
                $variant   = isset($explode[2]) ? $explode[2] : null;
        } else {
                $delimiter = false;
                $name      = $font_family;
                $variant   = null;
        }

        if (isset($variant) && $variant) $variant = ':' . $variant;
        
        switch ($delimiter) {
                // google fonts
                case 'g':
                        $variant = $variant ? $variant : '';
                        $gantry->addStyle('//fonts.googleapis.com/css?family=' . str_replace(" ", "+", $name) . $variant);
                        break;
                default:
                        break;
        }
        
        $gantry->addInlineStyle("\n.gf-menu, .gf-menu .item { font-weight: ".$gantry->get('font3-weight3')."; font-family: '" . $name . "', 'Helvetica', arial, serif; }\n");
        
        // Family3 Menu End
        
        $gantry->addStyle('grid-responsive.css', 5);
        $gantry->addLess('bootstrap.less', 'bootstrap.css', 6);

        if ($gantry->browser->name == 'ie'){
          if ($gantry->browser->shortversion == 9){
            $gantry->addInlineScript("if (typeof RokMediaQueries !== 'undefined') window.addEvent('domready', function(){ RokMediaQueries._fireEvent(RokMediaQueries.getQuery()); });");
          }
      if ($gantry->browser->shortversion == 8){
        $gantry->addScript('html5shim.js');
      }
    }
    if ($gantry->get('layout-mode', 'responsive') == 'responsive') $gantry->addScript('rokmediaqueries.js');
    if ($gantry->get('loadtransition')) {
    $gantry->addScript('load-transition.js');
    $hidden = ' class="rt-hidden"';}

    ?>
        <script type="text/javascript" src="<?php echo $this->baseurl.'/templates/'.$this->template.'/js/easing.js'?>"></script>
        <script type="text/javascript" src="<?php echo $this->baseurl.'/templates/'.$this->template.'/js/bubbles.js'?>"></script>
        <script type="text/javascript">
        <!--
            // windows phone IE10 snap mode fix
            (function() {
                    if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
                            var msViewportStyle = document.createElement("style");
                            msViewportStyle.appendChild(
                                    document.createTextNode("@-ms-viewport{width:auto!important}")
                            );
                            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
                    }
            })();
            
            ct_isMobile = false;
            (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))ct_isMobile=true})(navigator.userAgent||navigator.vendor||window.opera);
            
            jQuery(document).ready(function(){
                <?php
                if($gantry->get('fixedheader')){
                ?>
                var is_iOS = navigator.userAgent.match(/iPhone/i) != null || navigator.userAgent.match(/iPod/i) != null || navigator.userAgent.match(/iPad/i) != null;

                var menu = jQuery('#rt-top-surround'),
                pos = menu.offset();

                jQuery(window).scroll(function(){
                    if(jQuery(this).scrollTop() > 1 && !menu.hasClass('ct-fixed')){
                            menu.addClass('ct-fixed');
                    } else if(jQuery(this).scrollTop() <= 1 && menu.hasClass('ct-fixed')){
                            menu.removeClass('ct-fixed');
                    }
                });
                
                if(is_iOS){
                    jQuery(window).bind('touchmove',function(){
                        if(jQuery(this).scrollTop() > 1 && !menu.hasClass('ct-fixed')){
                                menu.addClass('ct-fixed');
                        } else if(jQuery(this).scrollTop() <= 1 && menu.hasClass('ct-fixed')){
                                menu.removeClass('ct-fixed');
                        }
                    });
                    jQuery(window).bind('touchend',function(){
                        if(jQuery(this).scrollTop() <= 1 && menu.hasClass('ct-fixed')){
                                menu.removeClass('ct-fixed');
                        }
                    });
                }
                <?php
                }
                ?>
                if(!ct_isMobile){
                    // give the client's cpu some more rest
                    var jQueryTmpInterval = jQuery.fx.interval = 100;
                    jQuery.fx.interval = 100;
                    var SoapBubbleMachineNumber1 = null;
                    jQuery('.rt-block.makeModuleBubbles').each(function(){
                         SoapBubbleMachineNumber1 = jQuery('fn').BubbleEngine({
                         particleSizeMin:            0,
                         particleSizeMax:            16,
                         particleSourceX:            20,
                         particleSourceY:            0,
                         particleDirection:          'right',
                         particleAnimationDuration:  7000,
                         particleAnimationVariance:  2000,
                         particleScatteringX:        100,
                         particleScatteringY:        15,
                         gravity:                    -5,
                         appender:                   jQuery(this),
                         imgSource:                  '<?php echo $this->baseurl.'/templates/'.$this->template.'/images/bubbles/'; ?>'
                       });
                       SoapBubbleMachineNumber1.addBubbles(12);

                   });
                   var SoapBubbleMachineNumber2 = null;
                    jQuery('.makeBubbles').each(function(){
                         SoapBubbleMachineNumber2 = jQuery('fn').BubbleEngine({
                         particleSizeMin:            0,
                         particleSizeMax:            16,
                         particleSourceX:            10,
                         particleSourceY:            0,
                         particleDirection:          'right',
                         particleAnimationDuration:  7000,
                         particleAnimationVariance:  2000,
                         particleScatteringX:        100,
                         particleScatteringY:        15,
                         gravity:                    -5,
                         appender:                   jQuery(this),
                         imgSource:                  '<?php echo $this->baseurl.'/templates/'.$this->template.'/images/bubbles/'; ?>'
                       });
                       SoapBubbleMachineNumber2.addBubbles(12);
                   });
                   
                   SoapBubbleMachineNumber2 = null;
                    jQuery('.makeBubbles150').each(function(){
                         SoapBubbleMachineNumber2 = jQuery('fn').BubbleEngine({
                         particleSizeMin:            0,
                         particleSizeMax:            16,
                         particleSourceX:            150,
                         particleSourceY:            0,
                         particleDirection:          'right',
                         particleAnimationDuration:  7000,
                         particleAnimationVariance:  2000,
                         particleScatteringX:        100,
                         particleScatteringY:        15,
                         gravity:                    -5,
                         appender:                   jQuery(this),
                         imgSource:                  '<?php echo $this->baseurl.'/templates/'.$this->template.'/images/bubbles/'; ?>'
                       });
                       SoapBubbleMachineNumber2.addBubbles(12);
                   });
                   <?php
                    if($gantry->get('logobubbles',1)){
                    ?>
                   var SoapBubbleMachineNumber3 = null;
                    jQuery('#rt-logo').each(function(){
                         SoapBubbleMachineNumber3 = jQuery('fn').BubbleEngine({
                         particleSizeMin:            0,
                         particleSizeMax:            16,
                         particleSourceX:            jQuery(this).width()+10,
                         particleSourceY:            Math.floor(jQuery(this).height()/2),
                         particleDirection:          'right',
                         particleAnimationDuration:  7000,
                         particleAnimationVariance:  2000,
                         particleScatteringX:        100,
                         particleScatteringY:        15,
                         gravity:                    -5,
                         appender:                   jQuery(this),
                         imgSource:                  '<?php echo $this->baseurl.'/templates/'.$this->template.'/images/bubbles/'; ?>'
                       });
                       SoapBubbleMachineNumber3.addBubbles(12);
                   });
                   <?php
                    }
                   ?>
                   // re-assign the original fx interval rate
                   jQuery.fx.interval = jQueryTmpInterval;
               }
        });
        //-->
        </script>
        <?php
        if($gantry->get('totupbutton')){
        ?>
        <script type="text/javascript">
        <!--
        jQuery(document).ready(function(){
            jQuery('body').append('<div id="toTop"><li class="icon-chevron-up"></li></div>');
            jQuery(window).scroll(function () {
                    if (jQuery(this).scrollTop() != 0) {
                            jQuery('#toTop').fadeIn();
                    } else {
                            jQuery('#toTop').fadeOut();
                    }
            });
            window.addEvent("domready",function(){var b=document.id("toTop");if(b){var a=new Fx.Scroll(window);b.setStyle("outline","none").addEvent("click",function(c){c.stop(); a.toTop();});}});
        });
        //-->
        </script>
        <?php
        }
        if($gantry->get('krakencolor')){
        ?>
        <style type="text/css">
            .ct-tentacle{
                border-right-color: <?php echo $gantry->get('linkcolor','#fe8a00')?> !important;
            }
            .ct-tentacle-end{
                background-color: <?php echo $gantry->get('linkcolor','#fe8a00')?> !important;
            }
            .ct-kraken-arm-content-wrap{
                background-color: <?php echo $gantry->get('topbackground','#05272d')?> !important;
            }
            .ct-kraken-arm-content-wrap a, .ct-kraken-arm-content-wrap a:active, .ct-kraken-arm-content-wrap a:visited{
                color: <?php echo $gantry->get('krakenlinkcolor','#fe8a00')?> !important;
            }
            .ct-kraken-arm-content-wrap a:hover{
                color: <?php echo $gantry->get('krakenlinkcolorhover','#db7903')?> !important;
            }
            @media all and (max-width: 767px) {
                .ct-tentacle-end{
                    padding: 1px;
                }
                .ct-kraken-arm-content-wrap{
                    -moz-border-radius: 0;
                    -webkit-border-radius: 0;
                    -o-border-radius: 0;
                    -ms-border-radius: 0;
                    border-radius: 0;
                }
            }
            .ct-kraken-arm-content{
                color: <?php echo $gantry->get('toptext','#adadad')?> !important;
                font-family: inherit !important;
            }
            .ct-kraken-arm-content a, .ct-kraken-arm-content a:active, .ct-kraken-arm-content a:visited{
                color: <?php echo $gantry->get('krakenlinkcolor','#adadad')?> !important;
            }
            .ct-kraken-arm-content a:hover{
                color: <?php echo $gantry->get('krakenlinkcolorhover','#db7903')?> !important;
            }
            .ct-kraken-content{
                background-color: <?php echo $gantry->get('krakencontentbackground','transparent')?> !important;
                font-family: inherit !important;
            }
            .ct-kraken-nav div button{
                background-color: <?php echo $gantry->get('linkcolor','#fe8a00')?> !important;
            }
            .ct-kraken-nav div button:focus, .ct-kraken-nav div button:active, .ct-kraken-nav div button:hover{
                background-color: <?php echo $gantry->get('linkcolorhover','#db7903')?> !important;
            }
        </style>
        <?php
        }
        ?>
</head>
<body <?php echo $gantry->displayBodyTag(); ?>>
    <?php /** Begin Top Surround **/ if ($gantry->countModules('top') or $gantry->countModules('header')) : ?>
    <header id="rt-top-surround">
    <?php /** Begin Top **/ if ($gantry->countModules('top')) : ?>
    <div id="rt-top" <?php echo $gantry->displayClassesByTag('rt-top'); ?>>
      <div class="rt-container">
        <?php echo $gantry->displayModules('top','standard','standard'); ?>
        <div class="clear"></div>
      </div>
    </div>
    <?php /** End Top **/ endif; ?>
    <?php /** Begin Header **/ if ($gantry->countModules('header')) : ?>
    <div id="rt-header">
      <div class="rt-container">
        <?php echo $gantry->displayModules('header','standard','standard'); ?>
        <div class="clear"></div>
      </div>
                        <div id="ct-dropshadow"></div>
    </div>
    <?php /** End Header **/ endif; ?>
  </header>
  <?php /** End Top Surround **/ endif; ?>
        <?php /** Begin Drawer **/ if ($gantry->countModules('drawer')) : ?>
    <div id="rt-drawer">
        <div class="rt-container">
            <?php echo $gantry->displayModules('drawer','standard','standard'); ?>
            <div class="clear"></div>
        </div>
    </div>
    <?php /** End Drawer **/ endif; ?>
  <?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?>
  <div id="rt-showcase">
    <div class="rt-showcase-pattern">
      <div class="rt-container">
        <?php echo $gantry->displayModules('showcase','standard','standard'); ?>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <?php /** End Showcase **/ endif; ?>
  <div id="rt-transition"<?php if ($gantry->get('loadtransition')) echo $hidden; ?>>
    <div id="rt-mainbody-surround">
      <?php /** Begin Feature **/ if ($gantry->countModules('feature')) : ?>
      <div id="rt-feature">
        <div class="rt-container">
          <?php echo $gantry->displayModules('feature','standard','standard'); ?>
          <div class="clear"></div>
        </div>
      </div>
      <?php /** End Feature **/ endif; ?>
      <?php /** Begin Utility **/ if ($gantry->countModules('utility')) : ?>
      <div id="rt-utility">
        <div class="rt-container">
          <?php echo $gantry->displayModules('utility','standard','standard'); ?>
          <div class="clear"></div>
        </div>
      </div>
      <?php /** End Utility **/ endif; ?>
      <?php /** Begin Breadcrumbs **/ if ($gantry->countModules('breadcrumb')) : ?>
      <div id="rt-breadcrumbs">
        <div class="rt-container">
          <?php echo $gantry->displayModules('breadcrumb','standard','standard'); ?>
          <div class="clear"></div>
        </div>
      </div>
      <?php /** End Breadcrumbs **/ endif; ?>
      <?php /** Begin Main Top **/ if ($gantry->countModules('maintop')) : ?>
      <div id="rt-maintop">
        <div class="rt-container">
          <?php echo $gantry->displayModules('maintop','standard','standard'); ?>
          <div class="clear"></div>
        </div>
      </div>
      <?php /** End Main Top **/ endif; ?>
      <?php /** Begin Full Width**/ if ($gantry->countModules('fullwidth')) : ?>
      <div id="rt-fullwidth">
        <?php echo $gantry->displayModules('fullwidth','basic','basic'); ?>
          <div class="clear"></div>
        </div>
      <?php /** End Full Width **/ endif; ?>
      <?php /** Begin Main Body **/ ?>
      <div class="rt-container">
            <?php echo $gantry->displayMainbody('mainbody','sidebar','standard','standard','standard','standard','standard'); ?>
          </div>
      <?php /** End Main Body **/ ?>
      <?php /** Begin Main Bottom **/ if ($gantry->countModules('mainbottom')) : ?>
      <div id="rt-mainbottom">
        <div class="rt-container">
          <?php echo $gantry->displayModules('mainbottom','standard','standard'); ?>
          <div class="clear"></div>
        </div>
      </div>
      <?php /** End Main Bottom **/ endif; ?>
      <?php /** Begin Extension **/ if ($gantry->countModules('extension')) : ?>
      <div id="rt-extension">
        <div class="rt-container">
          <?php echo $gantry->displayModules('extension','standard','standard'); ?>
          <div class="clear"></div>
        </div>
      </div>
      <?php /** End Extension **/ endif; ?>
    </div>
  </div>
  <?php /** Begin Bottom **/ if ($gantry->countModules('bottom')) : ?>
  <div id="rt-bottom">
    <div class="rt-container">
      <?php echo $gantry->displayModules('bottom','standard','standard'); ?>
      <div class="clear"></div>
    </div>
  </div>
  <?php /** End Bottom **/ endif; ?>
  <?php /** Begin Footer Section **/ if ($gantry->countModules('footer') or $gantry->countModules('copyright')) : ?>
  <footer id="rt-footer-surround">
    <?php /** Begin Footer **/ if ($gantry->countModules('footer')) : ?>
    <div id="rt-footer">
      <div class="rt-container">
        <?php echo $gantry->displayModules('footer','standard','standard'); ?>
        <div class="clear"></div>
      </div>
    </div>
    <?php /** End Footer **/ endif; ?>
    <?php /** Begin Copyright **/ if ($gantry->countModules('copyright')) : ?>
    <div id="rt-copyright">
      <div class="rt-container">
        <?php echo $gantry->displayModules('copyright','standard','standard'); ?>
        <div class="clear"></div>
      </div>
    </div>
    <?php /** End Copyright **/ endif; ?>
  </footer>
  <?php /** End Footer Surround **/ endif; ?>
  <?php /** Begin Debug **/ if ($gantry->countModules('debug')) : ?>
  <div id="rt-debug">
    <div class="rt-container">
      <?php echo $gantry->displayModules('debug','standard','standard'); ?>
      <div class="clear"></div>
    </div>
  </div>
  <?php /** End Debug **/ endif; ?>
  <?php /** Begin Analytics **/ if ($gantry->countModules('analytics')) : ?>
  <?php echo $gantry->displayModules('analytics','basic','basic'); ?>
  <?php /** End Analytics **/ endif; ?>
  </body>
</html>
<?php
$gantry->finalize();
?>

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
I put your code in a code box.  When you type out your question, you will see "Code" 3rd from the right,  You can use that to create the code box.


I don't know joomla.  This looks like the actual code the page uses.  You would need to find the template file that controls the header.  Maybe Rowby can help.
0
 
Derek JensenCommented:
Usually it'll be a css file in the theme/default or /template directory. I don't recall what it's called, but if you see a default.css or kraken.css or something, it's probably that.
0
 
Rowby GorenCommented:
Hi  shaunwingin,

Rockettheme's Gantry system can handle some of your styling.  It's been awhile since I used Gantry so I can't be as helpful as other who are actively using gantry.

You will find the gantry template and its associated special Gantry panel in your standard Joomla template area via your joomla administrator section.  It should be under
Extensions > Template Manager .   You will see your template listed there.  I am not 100 percent sure what to do after that, other than to click on, as I recall, Temlplate.  Or it might be Style.

But even when you are in that area, you will need to know more about how Gantry works.  YOu should at least look a the various documentatiion links I put in my previous comment.  And I bet there a lots of videos on Youtube re Gantry.

Ideally the best place to find help for Gantry is on the Rockettheme forums.  However they are not free. You need a subscription.   You could also go to the Joomla forums, and perhaps you can get some free help there.

Other than that, a combination of knowledge about Joomla, Gantry and styles would get you through this.   I know that you should not have to change your html to do this, when you are using gantry and joomla -- especially because Gantry uses the HTML (and css, java etc) to make the Gantry system work.  Changing the HTML might cause problems with gantry's functionality.

While you might only want to fix the spacing between your logo now, and a quick HTML fix could do that - I would think you would want to take advantage of Gantry's features to make other changes.  And changing html might get in the way for Gantry's doing its job.

Another approach, if all you want to do is build a simple Joomla site is to get another, simpler template that does NOT use Gantry.   All of RocketTheme's templates use Gantry and that adds a layer of having to learn Gantry on top of learning Joomla.  

So Gantry might be overkill and you might be better off just switching to a non-Gantry template.   And still do your styling mainly via css.    And you could still get your css help here on Experts Exchange.  Or on the forum where you buy the template that would offer free support. It kind of bugs me that RocketTheme requires an ongoing subscription to use their forums.  But that's their business decision.

Rowby
0
 
shaunwinginAuthor Commented:
Thanks Guys - info was helpful
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now