Joomla Templates Club 406,261 posts

[rikaryo Friend rikaryoJoin date: June 2006Posts: 127Downloads:143Uploads:59 Thanks: 107 Thanked: 10 times in 4 posts]

#189861

Friends how do I add a banner at the top?
Wanted to increase the width and height of the logo and place position languageswitcherload add a banner

1 – Width of top and then
2 – Banner 700px by 80px in place position languageswitcherload

I await your return soon

hugs

—————-

See the attached image simulation:

hugs

---

Attachments:

1. 

Rikáryo Mourão
CEO - HeróiNerd - Inventtive

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#502791

This way will help you to do that

+ Open templates/ja_mero/tpls/blocks/header.php file

From


<!-- LOGO -->
<div class="span8">
<div class="logo logo-<?php echo $logotype ?>">
<h1>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</h1>
</div>
</div>
<!-- //LOGO -->
<?php if ($this->countModules('languageswitcherload')) : ?>
<!-- LANGUAGE SWITCHER -->
<div class="span4 pull-right">
<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
</div>
<!-- //LANGUAGE SWITCHER -->
<?php endif ?>


Change to


<!-- LOGO -->
<div class="span4">
<div class="logo logo-<?php echo $logotype ?>">
<h1>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</h1>
</div>
</div>
<!-- //LOGO -->
<?php if ($this->countModules('languageswitcherload')) : ?>
<!-- LANGUAGE SWITCHER -->
<div class="span8 pull-right">
<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
</div>
<!-- //LANGUAGE SWITCHER -->
<?php endif ?>


+ Open templates/ja_mero/css/custom.css file

Add new script

.ja-header {
height: 80px;
}

Now, you can add a banner into languageswitcherload position.

[rikaryo Friend rikaryoJoin date: June 2006Posts: 127Downloads:143Uploads:59 Thanks: 107 Thanked: 10 times in 4 posts]

#502876

Thanks, worked normal Desktop mode, but when visualized in Tablet and Smartphone got mangled.

I had to remove some parameters of the banner for him to appear without a bar that had on him:

.banneritem {
padding: 10px 0;
border-top: 1px solid #ddd
}
.banneritem:first-child {
margin-top: 10px;
}

for:

.banneritem {
padding: 0px 0;
border-top: 0px solid #ddd
}
.banneritem:first-child {
margin-top: 0px;
}

But the top was mangled.

I put a logo brand at the same time the banner 80px

.logo-image a {
background-image: url("../../../images/themes/abstract/logo.png");
background-repeat: no-repeat;
width: 151px;
height: 41px;
}

for:

.logo-image a {
background-image: url("../../../images/themes/abstract/logo.png");
background-repeat: no-repeat;
width: 240px;
height: 120px;
}

See the attached image:

thank you and await your help

hug

---

Attachments:

1. 

Rikáryo Mourão
CEO - HeróiNerd - Inventtive

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#502903

So that I can take a look and try to assist, please provide the url of the site you’re working on

[rikaryo Friend rikaryoJoin date: June 2006Posts: 127Downloads:143Uploads:59 Thanks: 107 Thanked: 10 times in 4 posts]

#503380

Problems with my site for mobile versions, see the attached image

http://www.joserobertoduarte.com.br

---

Attachments:

1. 

Rikáryo Mourão
CEO - HeróiNerd - Inventtive

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#503443

You can fix it this way

Open templates/ja_mero/css/custom.css file

Add new script

@media (max-width: 767px) {
.logo-image {
margin-left: 0px !important;
}
.ja-header .span4 {
width:100% !important;
}
.ja-header .span8 {
width:100% !important;
}
.ja-mainnav.navbar-collapse-fixed-top {
top: 160px !important;
}
.ja-header {
height: 180px !important;
}
#ja-mainbody {
margin-top: 220px !important;
}
}


Hope this helps

[rikaryo Friend rikaryoJoin date: June 2006Posts: 127Downloads:143Uploads:59 Thanks: 107 Thanked: 10 times in 4 posts]

#503781

The correction greatly improved visualization in my simulator appeared on the banner by cutting two resolutions. But it was very good solution!

see the image

thank you

---

Attachments:

1. 

Rikáryo Mourão
CEO - HeróiNerd - Inventtive

[Author]

Posts