We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. FuzMic
  2. General Discussion
  3. Saturday, 15 August 2015
  4.  Subscribe via email
Hi friends

Among the various free template available in the web, i finally decided to use T3 template to do a project. I use t3_bs3_blank-Default template and is facing some width issues with layout. Here is my first issue.

I use a header block (header.php) which comes with <div class="col-xs-12 <?php echo $logosize ?> logo">.

This block will extend to far left if in the Custom.css i place the codes
.t3-header { width: 100%; }

If i use width: 80% it will be in line with the .t3-mainnav block.

What i want is to move the logo to be in line with mainnav but keep the gradient image shading to far left and right. The attachment header1.jpg hope to show what i mean.

If in custom.css i use .col-xs-12 {margin-left: 20px;} while using 100% width, it is still not what i want, see header3.jpg

How can i do this in Custom.css in a smart way.
Attachments (2)
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

You can change the width of the positions in header in specific responsive layouts. In this case, I will change the header.php file to:


<!-- HEADER -->
<header id="t3-header" class="container t3-header">
<div class="row">

<!-- LOGO -->
<div class="col-xs-6 col-sm-6 <?php echo $logosize ?> logo">
<div class="logo-<?php echo $logotype, ($logoimgsm ? ' logo-control' : '') ?>">
<a href="/<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image'): ?>
<img class="logo-img" src="/<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<?php if($logoimgsm) : ?>
<img class="logo-img-sm" src="/<?php echo JURI::base(true) . '/' . $logoimgsm ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan"><?php echo $slogan ?></small>
</div>
</div>
<!-- //LOGO -->

<?php if ($headright): ?>
<div class="col-xs-6 col-sm-6">
<?php if ($this->countModules('head-search')) : ?>
<!-- HEAD SEARCH -->
<div class="head-search <?php $this->_c('head-search') ?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
<!-- //HEAD SEARCH -->
<?php endif ?>

<?php if ($this->countModules('languageswitcherload')) : ?>
<!-- LANGUAGE SWITCHER -->
<div class="languageswitcherload">
<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
</div>
<!-- //LANGUAGE SWITCHER -->
<?php endif ?>
</div>
<?php endif ?>

</div>
</header>
<!-- //HEADER -->


And here how it looks like in tablet.

http://easycaptures.com/fs/uploaded/928/3157958660.png

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Gardner had looked forward to your reply and sure enough you pop up. Will play with it and revert. You know your reply always open new doors to many possibilities. Sincere Thanks as always.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for your kind words. It's my pleasure to help you guys to solve any problem.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Gardner

Still unable to resolve my need. What i really want is to have the gradient extend over to the side while keeping the company name alignment as defined by header.php. (Now.jpg the red box area). As i said before, if the header width is set 100%, the company name also move to the far left.

In the Helix template the gradient or color of the div extend to the far left but not the company name. In this case the width of the whole page is set to 970px. (Helix.jgp)

Really hope you can understand what i mean & give me a lead in my comparision. Thanks.
Attachments (2)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.