Solved

Reducing Space between Logo & Company title

Posted on 2013-10-30
12
808 Views
Last Modified: 2013-11-08
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
Comment
Question by:shaunwingin
  • 5
  • 2
  • 2
  • +1
12 Comments
 

Author Comment

by:shaunwingin
ID: 39611620
Tx - hopefully i can get good responses.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39612235
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
 
LVL 9

Expert Comment

by:Derek Jensen
ID: 39612805
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
 
LVL 9

Expert Comment

by:Rowby Goren
ID: 39613358

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
 

Author Comment

by:shaunwingin
ID: 39613675
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:shaunwingin
ID: 39613682
Rowby - Thanks
bigdogdman - Will that code work with any template? including mine - its called "the kraken"
0
 

Accepted Solution

by:
shaunwingin earned 0 total points
ID: 39613684
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39614085
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
 
LVL 9

Expert Comment

by:Derek Jensen
ID: 39614252
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
 
LVL 9

Assisted Solution

by:Rowby Goren
Rowby Goren earned 500 total points
ID: 39614293
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
 

Author Closing Comment

by:shaunwingin
ID: 39632979
Thanks Guys - info was helpful
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

In this article, we will look at our content management system as a whole, to get an idea of how we will start to manage these content items.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now