Public Forums 71,145 posts

[shemeam Friend shemeamJoin date: February 2015Posts: 259Downloads:55Uploads:67 Thanks: 106 Thanked: 16 times in 4 posts]

#204894

I am designing a simple site which will have no main menu, only links from a hotspot map.
I want to use the megamenu position as a banner for the site.

This image (http://snag.gy/t8aFA.jpg) shows the banner in the article (the ‘Warwickshire Voluntary Transport’ with green background at the top) but I would like to show this right at the top of the page, centered to the right of the logo using custom html module.

Any suggestions on how I might achieve this?

Happy to change templates if there is one that might be better for this purpose.

Many thanks
Alison

Shemeam

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564071

Hello

you can create a new module position to add your banner .
Here is a documentation to create new module positions .

Note : If you want to do this from an expert You can submit your request at Paid custom services here

1 user says Thank You to Pankaj Sharma for this useful post

1. shemeam

[shemeam Friend shemeamJoin date: February 2015Posts: 259Downloads:55Uploads:67 Thanks: 106 Thanked: 16 times in 4 posts]

#564583

I am using the Purity iii template

I have edited the code to this
[PHP]<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 – 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined(‘_JEXEC’) or die;

// get params
$sitename = $this->params->get(‘sitename’);
$slogan = $this->params->get(‘slogan’, ”);
$logotype = $this->params->get(‘logotype’, ‘text’);
$logoimage = $logotype == ‘image’ ? $this->params->get(‘logoimage’, ‘templates/’ . T3_TEMPLATE . ‘/images/logo.png’) : ”;
$logoimgsm = ($logotype == ‘image’ && $this->params->get(‘enable_logoimage_sm’, 0)) ? $this->params->get(‘logoimage_sm’, ”) : false;

if (!$sitename) {
$sitename = JFactory::getConfig()->get(‘sitename’);
}

?>

<!– MAIN NAVIGATION –>
<header id=”t3-mainnav” class=”wrap navbar navbar-default navbar-fixed-top t3-mainnav”>

<!– OFF-CANVAS –>
<?php if ($this->getParam(‘addon_offcanvas_enable’)) : ?>
<?php $this->loadBlock (‘off-canvas’) ?>
<?php endif ?>
<!– //OFF-CANVAS –>

<div class=”container”>

<!– NAVBAR HEADER –>
<div class=”navbar-header”>

<!– LOGO –>
<div class=”span3 logo-<?php echo $logotype ?>”>
<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>
</div>
</div>
<!– //LOGO –>

<!– Banner –>
<?php if ($this->countModules(‘banner’)) : ?>
<div class=”span6 <?php $this->_c(‘banner’)?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘banner’) ?>” style=”bannerraw” />
</div>
<?php endif ?>
<!–//Banner –>

<?php if ($this->countModules(‘head-search’)) : ?>
<!– HEAD SEARCH –>
<div class=”span3 head-search<?php $this->_c(‘head-search’)?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘head-search’) ?>” style=”raw” />
</div>
<!– //HEAD SEARCH –>
<?php endif ?>

</div>
<!– //NAVBAR HEADER –>

<!– NAVBAR MAIN –>
<?php if ($this->getParam(‘navigation_collapse_enable’)) : ?>
<nav class=”t3-navbar-collapse navbar-collapse collapse”></nav>
<?php endif ?>

<nav class=”t3-navbar navbar-collapse collapse”>
<jdoc:include type=”<?php echo $this->getParam(‘navigation_type’, ‘megamenu’) ?>” name=”<?php echo $this->getParam(‘mm_type’, ‘mainmenu’) ?>” />
</nav>
<!– //NAVBAR MAIN –>

</div>
</header>
<!– //MAIN NAVIGATION –>

<?php $this->loadBlock (‘masthead’) ?>
[/PHP]

it is not quite right and placing the banner below the logo, rather than between the logo and the headsearch.

I have added the custom.css code and added the position to the templateDetails.xml file

Any ideas?

many thanks for your continued support.

---

Attachments:

1. 

Shemeam

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564610

Hi
Share your working site url here , so i can check it on your site.

[shemeam Friend shemeamJoin date: February 2015Posts: 259Downloads:55Uploads:67 Thanks: 106 Thanked: 16 times in 4 posts]

#564684

The site is http://wvt.org.uk/
It is currently offline so I will pm a user login to you.
Thank you for your assistance with this.

Shemeam

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564703

Hello You need to add your own style to make it as you needed .
You can take examples from head-search module .
i can provide you an example
apply below css on the top DIV of your custom module span6 that you defined in header.php

position: absolute;
left: 15%;
top: 30px;
float: left;
}


Take a look on example here >>> http://prntscr.com/6llg40
If you want these customization from us You can use Paid services here

1 user says Thank You to Pankaj Sharma for this useful post

1. shemeam

[shemeam Friend shemeamJoin date: February 2015Posts: 259Downloads:55Uploads:67 Thanks: 106 Thanked: 16 times in 4 posts]

#565770

OK

I have nearly got it how I want

This is the image of how it looks

But the banner is too deep vertically – I want it to take up no more space than the megamenu would have taken up.
This is how i would like it to look

This is the code for the header.php
[PHP]
application/x-httpd-php header.php
PHP script text
<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 – 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined(‘_JEXEC’) or die;

// get params
$sitename = $this->params->get(‘sitename’);
$slogan = $this->params->get(‘slogan’, ”);
$logotype = $this->params->get(‘logotype’, ‘text’);
$logoimage = $logotype == ‘image’ ? $this->params->get(‘logoimage’, ‘templates/’ . T3_TEMPLATE . ‘/images/logo.png’) : ”;
$logoimgsm = ($logotype == ‘image’ && $this->params->get(‘enable_logoimage_sm’, 0)) ? $this->params->get(‘logoimage_sm’, ”) : false;

if (!$sitename) {
$sitename = JFactory::getConfig()->get(‘sitename’);
}

?>

<!– MAIN NAVIGATION –>
<header id=”t3-mainnav” class=”wrap navbar navbar-default navbar-fixed-top t3-mainnav”>

<!– OFF-CANVAS –>
<?php if ($this->getParam(‘addon_offcanvas_enable’)) : ?>
<?php $this->loadBlock (‘off-canvas’) ?>
<?php endif ?>
<!– //OFF-CANVAS –>

<div class=”container”>

<!– LOGO –>
<div class=”span3 logo-<?php echo $logotype ?>”>
<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>
</div>
</div>
<!– //LOGO –>

<!– Banner –>
<?php if ($this->countModules(‘banner’)) : ?>
<div class=”span9 banner <?php $this->_c(‘banner’)?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘banner’) ?>” style=”raw” />
</div>
<?php endif ?>
<!–//Banner –>

<?php if ($this->countModules(‘head-search’)) : ?>
<!– HEAD SEARCH –>
<div class=”span3 head-search<?php $this->_c(‘head-search’)?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘head-search’) ?>” style=”raw” />
</div>
<!– //HEAD SEARCH –>
<?php endif ?>

</div>
</header>
<!– //MAIN NAVIGATION –>

<?php $this->loadBlock (‘masthead’) ?>
[/PHP]

this is the code for the custom.css
[PHP]/*Banner css styles*/
.banner {
padding: 0;
background:#BFCDA3;
}

.banner img {
max-height: 0px;
width: 100%;
}

.banner img:hover {
-webkit-transform: scale(1.15) rotate(0.00deg); /*Tiny hover css effect */
}

.article-image-full img {
width: auto !important;
}

.banner {
position: absolute;
left: 35%;
top: 15px;
float: left;
}
}[/PHP]

Any suggestions on how to reduce the vertical size would be appreciated. (I do not want to reduce the size of the logo).

Many thanks

---

Attachments:

1. 
2. 

Shemeam

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#565820

HI
Share your working site url here . Currently the site given in screenshot is offline .

[shemeam Friend shemeamJoin date: February 2015Posts: 259Downloads:55Uploads:67 Thanks: 106 Thanked: 16 times in 4 posts]

#565894

This has now been solved (thanks to Manhnv)

Shemeam

[Author]

Posts