Public Forums 71,145 posts

[marinolab Friend marinolabJoin date: June 2010Posts: 147Downloads:45Uploads:34 Thanks: 33 Thanked: 7 times in 2 posts]

#200725

I need to put a banner above the header and the top…
What’s the best way?
Thanks

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#546950

Hi,

You can create new module position and place your banner there. For more detail about how to add new module position, please see Define blocks in layout and Add new module position.

1 user says Thank You to Adam M for this useful post

1. marinolab

[marinolab Friend marinolabJoin date: June 2010Posts: 147Downloads:45Uploads:34 Thanks: 33 Thanked: 7 times in 2 posts]

#546967

Ok. But the banner that I need is the company logo and it must be visible for ever, fixed…so, is it possible to insert in index.php, and if yes, which sintax?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547095

Hi,

No, it’s not possible to do that. You can create new module position and place a Custom HTML module with your logo there, then choose to display it in all pages via Module Assignment instead.

[marinolab Friend marinolabJoin date: June 2010Posts: 147Downloads:45Uploads:34 Thanks: 33 Thanked: 7 times in 2 posts]

#547149

Ok, i done it.
But I get two problems (http://www.aslromag.info/purity_iii)
1. The banner-logo is so big (required by law) that I have a big problem for responsive layout…
There is a system to reduce the image for …smartphone display?
2. If I open off-canvas, as soon I close it, I get a strange effect: the banner disappears partially when we step on it with the mouse…

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547271

Hi,

Could you please provide a temporary back-end account so I can take a closer look at the problem ?

[marinolab Friend marinolabJoin date: June 2010Posts: 147Downloads:45Uploads:34 Thanks: 33 Thanked: 7 times in 2 posts]

#547274

You can find the account in this other problem…
http://www.joomlart.com/forums/topic/errore-500-jhtmlbehaviormootools-not-found/,
or tell me how can I send it to you

[marinolab Friend marinolabJoin date: June 2010Posts: 147Downloads:45Uploads:34 Thanks: 33 Thanked: 7 times in 2 posts]

#547409

Any solution?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547420

Hi,

Sorry for the delay. The way you implement header part is not a good idea and it broke the mobile layout.

1. First, you should navigate to Admin >>> Extensions >>> Template Manager >>> choose your template >>> then insert logo the normal way.

2. Copy the code for 6 social icons >>> create a Custom HTML module >>> paste your HTML code there >>> then place the module in position ‘head-search’

If you see any problem with the layout, don’t worry, just leave it there then let me know, we will adjust CSS for it later.

[marinolab Friend marinolabJoin date: June 2010Posts: 147Downloads:45Uploads:34 Thanks: 33 Thanked: 7 times in 2 posts]

#547495

I have done every change, even abilitate the small logo.
I modify also the px of logo in custom.css but it appears anyway 182 x 50 …

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547508

Hi,

First, please open root_folder/templates/purity_iii/css/custom.css (if you don’t have this file, just create a new one) then add this code :


.logo-image > a {
max-width: none;
max-height: none;
}

Next, please clarify a little bit about how you want to display the social icons and search module so I can provide you the right CSS code.

1 user says Thank You to Adam M for this useful post

1. marinolab

[marinolab Friend marinolabJoin date: June 2010Posts: 147Downloads:45Uploads:34 Thanks: 33 Thanked: 7 times in 2 posts]

#547677

Now the logo is Ok and for social icons I proceeded to another location.
But in Mobile screen, even if I have set the little logo, when you click on icon that open the navbar with Megamenu, the menu items have a so big padding…

(I swear it’s my last request)

[thatoo Friend thatooJoin date: August 2014Posts: 19Downloads:0Uploads:4 Thanks: 3]

#547993

Hello, I’m trying to do the same.

First, I put a Custom Code in the template :
“
<p style=”text-align: center;”>
<a title=”Ecole, World y Camino” href=/>
<img class=”logo-img” alt=”Ecole, World y Camino” src=/images/headers/banniere.jpg>
</a>
</p>
“

but, it doesn’t work for small screen, the image is too big.
Then, I did what you said, I create a new Module Position, that I called “banner” in the block header. I assigned a module with html code to it, with the same code given above. But the result is the same. And, Purity 3 don’t allow me to hide the Module Position “banner” when I click on responsive layout. It could be a solution to not have banner on small screen, not the perfect one but one at least.
Do you have any idea about that?

Otherwise, suddenly, you are talking of something completely different and I don’t understand :

<em>@Adam M 443114 wrote:</em><blockquote>Hi,

Sorry for the delay. The way you implement header part is not a good idea and it broke the mobile layout.

1. First, you should navigate to Admin >>> Extensions >>> Template Manager >>> choose your template >>> then insert logo the normal way.

2. Copy the code for 6 social icons >>> create a Custom HTML module >>> paste your HTML code there >>> then place the module in position ‘head-search’

If you see any problem with the layout, don’t worry, just leave it there then let me know, we will adjust CSS for it later.</blockquote>

If I put my banner in the logo, it will be small inside the menu bar (Mega menu) and I don’t want that, I want it on the top. Then, what is “code for 6 social icons”?

Now, I’m a bit lost. I know how to put my banner on the top, by two ways now, but still it’s not a responsive manner.
Can you help me?

[thatoo Friend thatooJoin date: August 2014Posts: 19Downloads:0Uploads:4 Thanks: 3]

#548066

Ok, I progress, I created two new module position, big-banner and small banner in header.php :
<div class=”col-xs-12 col-sm-3 big-banner<?php $this->_c(‘big-banner’)?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘big-banner’) ?>” style=”raw” />
</div>
<div class=”col-xs-12 col-sm-3 small-banner<?php $this->_c(‘small-banner’)?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘small-banner’) ?>” style=”raw” />
</div>
And I attach to each of it, a big banner and a small one, and in the template parameter, I could activate only the big-banner module position for big screen and only the small banner position for the small screen, So yeah, I have my banner, on top of the menu, and responsive. Unfortunately, it’s not centred anymore (why?). My hteml code for the module is still the same :
<p style=”text-align: center;”>
<a title=”Ecole, World y Camino” href=/>
<img class=”logo-img” alt=”Ecole, World y Camino” src=/images/headers/banniere.jpg>
</a>
</p>
Is it because of this line that I didn’t put before <div class=”col-xs-12 col-sm-3 big-banner<?php $this->_c(‘big-banner’)?>”> ?
If yes, what can I change to centre my banner again?
Thanks in advance.

[marinolab Friend marinolabJoin date: June 2010Posts: 147Downloads:45Uploads:34 Thanks: 33 Thanked: 7 times in 2 posts]

#548099

Let’s hope Adam will stand up soon this morning!:):)

[Author]

Posts