Welcome, Guest
Username Password: Remember me

Modify a template - logo positioning, background adjustment
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Modify a template - logo positioning, background adjustment

Modify a template - logo positioning, background adjustment 11 years, 8 months ago #169

  • bradh
  • OFFLINE
  • Junior Boarder
  • Posts: 38
  • Karma: 0
I'm attempting to replace the stock logo that came with a template with the logo of my client's company. The issue is that the stock logo is short and wide and my client's logo is nearly square.

Shrinking the logo enough to fit into the allotted space provided by the template makes the logo too small and hard to read.

I've adjusted the client's logo to be about 100 px tall compared to the template's 35 px tall logo resulting in the big gap shown below.

[attachment=0:65z7sfkm]<!-- ia0 -->kitchen.jpg<!-- ia0 -->[/attachment:65z7sfkm]

What do you recommend? Adjust the position of the logo? Change the background of the big blue bar across to white? Combo of both? And how do I do either?

Here is the HTML for the template. Look for logo.gif.

<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

defined('_JEXEC') or die('Restricted access');
$url = clone(JURI::getInstance());
$path = $this->baseurl.'/templates/'.$this->template;
$showRightColumn = ($this->countModules('right'));?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<?php $isIE6 = strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6');
/* --- This removes any default Scripts from the Header Buffer --- */
$header = $this->getHeadData(); // Get the current HEAD buffer
$header['scripts'] = array(); // Clear all current 'scripts' entries
$this->setHeadData($header); // Update the HEAD buffer
/* --- We add the MooTools Framework manually, see below --- */ ?>
<script type="text/javascript" src="<?php echo $path ?>/scripts/mootools-1.2.1.js"></script>
<script type="text/javascript" src="<?php echo $path ?>/scripts/interface.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl."/media/system/js/caption.js"?>"></script>
<link rel="stylesheet" href="<?php echo $path ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $path ?>/css/menu.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $path ?>/css/constant.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $path ?>/css/tabs.css" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="<?php echo $path ?>/scripts/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png');
</script>
<style type="text/css">
.TabItemsGroup li.Tab span{display:inline-block;}
#topmenu .menu-nav li .ulwrapper {filter:alpha(opacity=80);}
#topmenu .menu-nav li .ulwrapper {behavior: url(<?php echo $path ?>/scripts/iepngfix.htc);}
</style>
<![endif]-->
<?php if($isIE6): ?>
<link rel="stylesheet" href="<?php echo $path ?>/css/menu-ie6.php?path=<?php echo $path ?>" type="text/css">
<?php endif; ?>
<script type="text/javascript">
new TmDropDown('#topmenu', {durationUp:380, durationDown:480, transitionDown:Fx.Transitions.Pow.easeOut});
</script>
</head>
<body id="body" class="body">
<div id="color1">
<div id="top-gradient"></div>
<div class="main">
<div id="top">
<div id="top-left">
<div id="top-right">
<div id="logo" title="Kitchen and Bath Ideas of Little Rock">
<div class="space">
?>]<img src="<?php echo $path ?>/images/logo.gif" alt="Kitchen and Bath Ideas of Little Rock" />
</div>
</div>
<div class="h-cont">

<div id="func">
<jdoc:include type="modules" name="func" style="xhtml" />
</div>
</div>
</div>
</div>
</div>
<div id="shadow-left">
<div id="shadow-right">
<div class="width bg">
<div id="mid">
<div id="search">
<jdoc:include type="modules" name="user4" style="search" />
</div>
<div id="topmenu">
<jdoc:include type="modules" name="user3" style="topmenu" />
</div>
<div class="clr"></div>
</div>
<div id="content">
<div class="width">
<?php if ($showRightColumn) : ?>
<div id="right">
<jdoc:include type="modules" name="right" style="user" />
</div>
<?php endif;?>
<div id="container">
<div class="width">
<jdoc:include type="modules" name="user5" style="xhtml" />
<jdoc:include type="modules" name="user2" style="xhtml" />
<jdoc:include type="modules" name="user7" style="user2" />
<div class="width ind">
<?php if ($this->getBuffer('message')) : ?>
<div class="error err-space">
<h2><?php echo JText::_('Message'); ?></h2>
<jdoc:include type="message" />
</div>
<?php endif; ?>
<jdoc:include type="component" />
</div>
</div>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="png">
<div class="footer-right png">
<div class="footer-bg png">
<div class="space">
<span>© 2009 Kitchen & Bath Ideas. All rights reserved. Privacy policy.
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
if ($('TabbedPanel1') != null ) {
new PrepareTabs($('TabbedPanel1'), $$('#TabbedPanel1 .TabContent'), $$('#TabbedPanel1 .TabContent h3'), {
blockWidth: 589,
onDone: function(){
new Tabs($$('#TabbedPanel1 .TabContent'), $$('.TabItemsGroup li'), {blockWidth: 591});
}
});
}
var scheme = Cookie.read('color_scheme');
setColor(scheme);

</script>
</body>
</html>

Thanks for the help!
Attachments:
Sincerely,

Rob McBryde
Web Developer
http://www.ivmwebsolutions.com
The topic has been locked.

Modify a template - logo positioning, background adjustment 11 years, 8 months ago #170

  • bradh
  • OFFLINE
  • Junior Boarder
  • Posts: 38
  • Karma: 0
As soon as I posted in the forum, I looked again and the CSS code jumped out at me.

So I was able to find the positioning (27, 0, 0, 26) which I changed to 10, 0, 0, 10.

Now it is positioned well, but still needs a little more height so I can use a slightly larger sized version of the logo.

[attachment=0:1ihf3uaj]<!-- ia0 -->kitchen2.jpg<!-- ia0 -->[/attachment:1ihf3uaj]

Any suggestions on the background above the tabbed menu?

Thanks!
Attachments:
Sincerely,

Rob McBryde
Web Developer
http://www.ivmwebsolutions.com
The topic has been locked.

Modify a template - logo positioning, background adjustment 11 years, 8 months ago #171

  • bradh
  • OFFLINE
  • Junior Boarder
  • Posts: 38
  • Karma: 0
FYI...the logo.gif positioning was in the template.css file.
Sincerely,

Rob McBryde
Web Developer
http://www.ivmwebsolutions.com
The topic has been locked.

Modify a template - logo positioning, background adjustment 11 years, 8 months ago #172

  • joomtorial
Hi Rob,

Nice template!

I would personally choose for a little enlargement of the logo and making the logo area higher.

I have added a very rough sample of what I mean.
Attachments:
The topic has been locked.
  • Page:
  • 1
Time to create page: 0.18 seconds

Joomla Video Tutorials by Joomtorial