asked on

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

Shaun Wingrin

ASKER

Tx - hopefully i can get good responses.

Scott Fell

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.

Derek Jensen

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

Rowby Goren

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

Shaun Wingrin

ASKER

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;}

Shaun Wingrin

ASKER

Rowby - Thanks
bigdogdman - Will that code work with any template? including mine - its called "the kraken"

ASKER CERTIFIED SOLUTION

Shaun Wingrin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

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.

Derek Jensen

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.

SOLUTION

Rowby Goren

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaun Wingrin

ASKER

Thanks Guys - info was helpful

Reducing Space between Logo &amp; Company title

Reducing Space between Logo & Company title