Joomla Templates Club 406,261 posts

[theprofessor Friend theprofessorJoin date: March 2009Posts: 365Downloads:0Uploads:0 Thanks: 47 Thanked: 64 times in 18 posts]

#139149

Hello,

I am using the new Opal template. I require to have a 728×90 leaderboard ad to the right side of our logo.

I have seen many discussions regarding this, but nothing very clear as how to make this work.

Any help would be greatly appreciated. 🙂

[we2solutions Friend we2solutionsJoin date: September 2014Posts: 526Downloads:0Uploads:21 Thanks: 136 Thanked: 100 times in 1 posts]

#296046

<em>@theprofessor 117826 wrote:</em><blockquote>Hello,

I am using the new Opal template. I require to have a 728×90 leaderboard ad to the right side of our logo.

I have seen many discussions regarding this, but nothing very clear as how to make this work.

Any help would be greatly appreciated. :)</blockquote>

Hi theprofessor,

try this using templates/ja_opal/css/template.css,

/* HEADER
——————————————————— */

h1.logo a {

width: 728px;
height: 90px;
display: block;
background-image: url(../images/logo.jpg);
background-repeat: no-repeat;
background-position: left;
padding-left: 0px;
padding-top: 0px;
}

you want to change margins according to your needs 😎

thanks.

[theprofessor Friend theprofessorJoin date: March 2009Posts: 365Downloads:0Uploads:0 Thanks: 47 Thanked: 64 times in 18 posts]

#296118

Thanks a lot for the advice, I will give it a try and post my results. 😎

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#296124

<em>@dumindard 117833 wrote:</em><blockquote>Hi theprofessor,

try this using templates/ja_opal/css/template.css,

/* HEADER
——————————————————— */

h1.logo a {

width: 728px;
height: 90px;
display: block;
background-image: url(../images/logo.jpg);
background-repeat: no-repeat;
background-position: left;
padding-left: 0px;
padding-top: 0px;
}

you want to change margins according to your needs 😎

thanks.</blockquote>

Surely, to the right side is currently the menus?

I would have thought it better to move the logo to above the menus and then create a new module position to the right of the logo. I don’t think your suggestion will work but I would love to be proved wrong.

[theprofessor Friend theprofessorJoin date: March 2009Posts: 365Downloads:0Uploads:0 Thanks: 47 Thanked: 64 times in 18 posts]

#296151

Yeah, it didn’t work. It did not change the size of the banner box and shifted everything right so that the logo was not in the spot it was supposed to be, and only about 1/4 of the banner was showing.

There must be a simple way to do this. 728×90 is the most common ad size (leaderboard) out there.

In fact, if JA is going to get into the business of creating Sports templates, I suggest that the next version of Opal accomodates a leaderboard ad. In NA, you are hard pressed to find a sports website that doesn’t have it — it is pretty much protocol.

Anyways, I need to make this modification. We have an agreement in place to partner with a major sports network, but 728×90 leaderboard directcly at the top the the site (beside the logo) is not an option — it is a necessity.

I’ve done a google search and also a search on these forums. I know this question has been asked countless times, but I haven’t come across a solution. :((

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#296181

first, widen the banner and remove right margin
template.css (line 1727)

#ja-banner {
float:right;
margin:15px 0 0 0;
overflow:hidden;
padding:0;
text-align:center;
width:720px;
}

then, remove uncessary margin for logo and resize the logo div to let the banner fit in
template.css (line 945)

h1.logo, div.logo-text {
float:left;
height:200px;
margin:30px 0 0;
padding:0;
width:230px;
}

[theprofessor Friend theprofessorJoin date: March 2009Posts: 365Downloads:0Uploads:0 Thanks: 47 Thanked: 64 times in 18 posts]

#296188

<em>@jsliao 117998 wrote:</em><blockquote>first, widen the banner and remove right margin
template.css (line 1727)

#ja-banner {
float:right;
margin:15px 0 0 0;
overflow:hidden;
padding:0;
text-align:center;
width:720px;
}

then, remove uncessary margin for logo and resize the logo div to let the banner fit in
template.css (line 945)

h1.logo, div.logo-text {
float:left;
height:200px;
margin:30px 0 0;
padding:0;
width:230px;
}
</blockquote>

Excellent! Thanks so much for the help — that did the trick. 🙂

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#296191

no problem! thanks for the credits you donated!

[Author]

Posts