Joomla Templates Club 406,261 posts

[vipcory Friend vipcoryJoin date: June 2011Posts: 84Downloads:0Uploads:0 Thanks: 18 Thanked: 1 times in 1 posts]

#177683

Hello, I want to have 2 modules on the right side of the header (where the demo shows a banner now).
In the current module in header-r i have a 220 width image. I want to put another module with a 420 width image right before that.
Can I just place that in the same header-r position too?
So would have 2 modules in header-r. With total width more than 640.

If so I put module class suffix -ads just like the other header-r module right?

Thank you

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#455462

Perhaps THIS TUTORIAL may assist you with what you’re wanting to achieve

[vipcory Friend vipcoryJoin date: June 2011Posts: 84Downloads:0Uploads:0 Thanks: 18 Thanked: 1 times in 1 posts]

#455692

Thanks Tom that is a great tutorial… but I am a bit confused on the css part that I need to add for header-m. Could you help me out on this? Here is the current css for my logo/header (because I have a different sized logo now)

#ja-header { }

#ja-header .main { height: 121px; padding: 0; }

h1.logo, div.logo-text h1 { font-size: 40px; line-height: 1; }

/* Logo Image —*/
h1.logo { height: 120px; margin-top: 40px; width: 245px; }

h1.logo a {
background: url(../images/logo.png) no-repeat left top;
display: block;
height: 120px;
width: 245px;
}

h1.logo a:hover, h1.logo a:focus { background-position: left bottom; }

In the current module in header-r i have a 220 width image. I want to put another module with a 420 width image right before that.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#456048

Hi vipcory,

As mentioned in Tom’s great tut, you can add class:
.ja-header-m {
//your_desired_code_here;
}

in templatesja_teline_ivcsstemplate.css

[vipcory Friend vipcoryJoin date: June 2011Posts: 84Downloads:0Uploads:0 Thanks: 18 Thanked: 1 times in 1 posts]

#456151

<em>@Saguaros 323596 wrote:</em><blockquote>Hi vipcory,

As mentioned in Tom’s great tut, you can add class:
.ja-header-m {
//your_desired_code_here;
}

in templatesja_teline_ivcsstemplate.css</blockquote>

Hi, yes but I dont understand some of the css code I have to put there, can you please explain to me the following and if you could tell me what i would put if im doing 420 width image for this and the header-r (right of this) is going to be reduced to only 220 w image.

position: absolute; < ?
right: 470px; <width of the header-r module?
top: 40px; <space from top
width: 265px; <width of this module?
z-index: 999; <no idea what this means

thank you

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#456450

Hi vipcory,

Above css code helps you to specify the position of this module.

right: 470px; <<< distance from the right to module position
top: 40px; <<< distance from the top to module position
width: 265px; <<< width of the div that contains this module.

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order and only works on positioned elements.

You can try to change the value and see the differences.

You can know more about CSS in http://www.w3schools.com/css/

[Author]

Posts