Joomla Templates Club 406,261 posts

[gray Friend grayJoin date: October 2009Posts: 957Downloads:0Uploads:17 Thanks: 28 Thanked: 292 times in 230 posts]

#147616

I’d like to have search field being placed in line with the Breadcrumbs module (it would be great to have it as new module position, not hard-coded hack). Have anybody done this?

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#329184

Hello gray,

You could move code for search-module-position to file mainnav.php, and adapt template.css, in this way:

Cut following code from header.php:

<?php if($this->countModules('search')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="search" />
</div>
<?php endif; ?>


In mainnav.php paste it beneath code for breadcrumb:

<div class="ja-breadcrums" style="">
<strong><?php echo JText::_('You are here')?></strong> <jdoc:include type="module" name="breadcrumbs" />
</div>
<!-- paste search module position here -->
<?php if($this->countModules('search')) : ?>
<div id="ja-search" style="">
<jdoc:include type="modules" name="search" />
</div>
<?php endif; ?>
<!-- end paste -->
<ul class="no-display">
<li><a href="<?php echo $this->getCurrentURL();?>#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
</ul>


In template.css change rules for #ja-search and .ja-breadcrums:

#ja-search {
width:39%;
float: right;
margin-top: 0;
}

.ja-breadcrums {
float: left;
width: 58%;
margin-left: 10px;
margin-top: 2px;
text-transform: uppercase;
}

Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. gray

[gray Friend grayJoin date: October 2009Posts: 957Downloads:0Uploads:17 Thanks: 28 Thanked: 292 times in 230 posts]

#329275

Thanks a lot!

I have to completely remove the width from ja-search and ja-breadcrums + to put right margin 5px to ja-search for aligning the search box to the right margin of the site body.


#ja-search {
float: right;
margin-top: 0px;
margin-right: 5px;
}



.ja-breadcrums {
float: left;
margin-left: 10px;
margin-top: 2px;
text-transform: uppercase;
}


[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#329285

OK Gray, your result looks very good.

Good luck,
Micrantha

[Author]

Posts