Joomla Templates Club 406,261 posts

[Khanh Le Moderator Khanh LeJoin date: November 2013Posts: 1884Downloads:41Uploads:31 Thanks: 44 Thanked: 203 times in 131 posts]

#118547

Hi all,

I have seen many questions regards to using a header module with template JA Zibal. Here is the instruction to add a module position to Zibal header to load an external module:

1. Open template index.php file, search this code:


<script type="text/javascript">initPNGTrans();</script>


Insert following code right after above line


<?php if ( mosCountModules('user9') ) { ?>
<div id="ja-sh-user9">
<?php mosLoadModules ( 'user9', -2 ); ?>
</div>
<?php } ?>

.

2. Open template css file template_css.css, insert this style:


#ja-sh-user9 div {
padding: 0;
margin: 0;
}


3. Now you could install a module header (like JA Header module in JA Antares) and publish to position user9.

[Peter Konstantakos Friend Peter KonstantakosJoin date: September 2014Posts: 108Downloads:0Uploads:8 Thanks: 10 Thanked: 6 times in 1 posts]

#213897

The header does not work in that position. Check out http://carpenterpr.com

It will work in postion user 3 which is in the footer

Something in the index.php file is preventing it from working

[Peter Konstantakos Friend Peter KonstantakosJoin date: September 2014Posts: 108Downloads:0Uploads:8 Thanks: 10 Thanked: 6 times in 1 posts]

#213905

I used your module now it works and looks really great. Check it out http://carpenterpr.com

[michelvanagtmaal Friend michelvanagtmaalJoin date: March 2006Posts: 3Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#214046

Hi,
I followed your instructions with success, thanks for the info!

I published the JA Headar module in position 9 and would like the have the images below the transparent main menu buttons like in the original. Is that possible using this module?

Thanks in advance!

Regards, Michel

[Khanh Le Moderator Khanh LeJoin date: November 2013Posts: 1884Downloads:41Uploads:31 Thanks: 44 Thanked: 203 times in 131 posts]

#214210

<blockquote>
I published the JA Headar module in position 9 and would like the have the images below the transparent main menu buttons like in the original. Is that possible using this module?
</blockquote>
Yes, you could use the module because JA Header module is published for club members.

[jwm931 Friend jwm931Join date: February 2007Posts: 15Downloads:0Uploads:0]

#214578

Hi,

I am trying to get this module to work correctly in JA_Sargas, any ideas?

I have had it in the right position, but I cannot get the search box or menu items to float over it correctly.

It is here: http://www.funtasticaltoys.com/index.php (I am currently playing around with it, so it may or may not have the header module running)

Thanks!

[rmd103 Friend rmd103Join date: February 2007Posts: 5Downloads:0Uploads:0]

#214626

could someone take me through the php and css code above and explain how it places user 9 into its location on the template?

id like to know how the module locations are coded into the template, but seem to be missing something.

thanks

[Stefanopoulos Friend StefanopoulosJoin date: March 2006Posts: 10Downloads:0Uploads:0]

#215121

<em>@michelvanagtmaal 7418 wrote:</em><blockquote>Hi,
I published the JA Headar module in position 9 and would like the have the images below the transparent main menu buttons.</blockquote>

I’ve got the same problem, even with the css margin set to 0…
(Here) you can see that the images are not sticking to the really top of the subheader (just below the transmenu bar).

Since the initial subheader module with fix images was doing it without any problem, I suppose that it is possible to fix this for the JA header ?

Thanks for any help !

[tom2012 Friend tom2012Join date: February 2007Posts: 6Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#215130

<blockquote>Originally Posted by rmd103:
could someone take me through the php and css code above and explain how it places user 9 into its location on the template?

id like to know how the module locations are coded into the template, but seem to be missing something.</blockquote>

Please refer to this image from the JA Zibal info page:

Basically, the JA instructions insert a new header module position below item “C” (JA Split Menu). First, either delete or comment-out (place within “<!– ‘code’ –>” brackets) the line of code in the index.php file (like, line 168) representing the JA Zibal default header image, which is this:

<blockquote><!– <div id=”ja-sh” class=”clearfix” style=”background:url(<?php echo “$ja_template_path/images/$ja_color/$ja_headerimg”; ?>) no-repeat top right; “> –></blockquote>

Then, referring to step 1. of the JA instructions, you are simply inserting a new user module position into that “area”, but at the insertion point specified above, like, below line 186 which says: <blockquote><script type=”text/javascript”>initPNGTrans();</script> </blockquote>This new user module position could be user5 through user9, as these are not currently used in the JA Zibal template (JA selected user9 in this instance). This means there’s lots of room for customization, as you can add an additional user module position anywhere it is needed. To fully grasp the reason why it is placed here, you must have a basic understanding of how DIV elements are structured. Basically, they function like tables, table rows, and table cells: <table><tr><td>. You can grasp this idea from the JA Zibal illustration above. Okay.

Viewing the index.php file, you’ll see that the template has 5 main sections, as indicated by the code comments:

<blockquote><!– BEGIN: HEADER –>…
<!– BEGIN: SUBHEADER –>…
<!– BEGIN: PATHWAY –>…
<!– BEGIN: MAIN CONTENT –>…
<!– BEGIN: FOOTER –>…</blockquote>

HEADER (logo, user tools, user4)
SUBHEADER (header image module, menu/navigation)
PATHWAY (breadcrumbs)
MAIN CONTENT (main body, spotlight (user1,2, and newsflash), and the sidecolumn (top, left, right))
FOOTER (user3)

This JA header module tutorial basically says to insert a new user module position (user9), and where precisely to do it: at the end of the SUBHEADER area, just before the PATHWAY begins. Also, the “main-wrap1”, “main-wrap2”, “main-wrap3” elements you see in the code are simply DIV containers which “wrap” the background drop-shadow and other design elements around each of the 5 main sections of the page, so don’t be confused by them.

<blockquote>#ja-sh-user9 div {
padding: 0;
margin: 0;
}</blockquote>
This css code basically says to style this new user9 module position with “0” margin and “0” padding, which you can customize to whatever you like, in addition to changing its background color, etc.

Hope this helps.
Tom

1 user says Thank You to tom2012 for this useful post

1. matt2047

[Stefanopoulos Friend StefanopoulosJoin date: March 2006Posts: 10Downloads:0Uploads:0]

#215260

After these smart explanations from tom2012, I’ve tried to place the user 9 module in different places in the index.php of JA Zibal…
But I’ve still not found a solution to place the JA Header module behind the Transmenu module like the original template was doing…

Can somebody help, please ?
Many Thanks !

[tom2012 Friend tom2012Join date: February 2007Posts: 6Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#215333

<blockquote>Originally posted by Stefanopoulos:

“After these smart explanations from tom2012, I’ve tried to place the user 9 module in different places in the index.php of JA Zibal…
But I’ve still not found a solution to place the JA Header module behind the Transmenu module like the original template was doing…

Can somebody help, please ?
Many Thanks !”</blockquote>

Okay.

On line 168 in index.php you’ll see that the original JA-Zibal header image is deployed as a background image:

<blockquote><div id=”ja-sh” class=”clearfix” style=”background:url(<?php echo “$ja_template_path/images/$ja_color/$ja_headerimg”; ?>) no-repeat top right; “></blockquote>

The JA Zibal menu system is contained within a div element, and is nested within the parent div which originally contained the default JA Zibal header image as its background. But you see that there is actually no content within that parent div, just a background image, and background images by nature are passive elements…they take up no actual space on the page and can be “floated” over.
<blockquote><!– BEGIN: SUBHEADER –>
<div id=”ja-sh-wrap1″>
<div id=”ja-sh-wrap2″>
<div id=”ja-sh-wrap3″>
<div id=”ja-sh” class=”clearfix” style=”background:url(<?php echo “$ja_template_path/images/$ja_color/$ja_headerimg”; ?>) no-repeat top right; “>
<div id=”ja-topnav”>
</blockquote>

Now, if that parent div actually had content in it, like the new user9 module position does (i.e. a header rotator module), and you attempted to nest the menu system within it just like the default configuration, you would not be able to achieve that cool transparent effect you see in the default menu system because the menu would be pushed to the bottom of the rotating header assembly. So logically the JA team instructs that the new header module position be placed below the menu, with the natural resulting loss of the menu transparency you seek. Thus is the nature of div’s. However…

You can place the menu system on your layout using absolute positioning, wherein you instruct it to float above all the other elements in a fixed position on the page. This will work if the new header is repeated on every page of your site, otherwise it will be hovering transparently over text, etc., which looks awkward. I’m not certain if this hack will break the trans menu drop-down alignment or not, but it will achieve the menu transparency you desire. Again, I prefer the son-of-suckerfish menu because it seems to be more consistent across all browser platforms, and basically achieves the same look.

In the template_css.css file, find the #ja-topnav element. The following is an example of what I used to accomplish on my page (to test your solution) what you are attempting to do with yours:

<blockquote>#ja-topnav {
position:absolute;
left:49%;
top:91px;
margin-left:-303px;
z-index: 1;
width: 622px;
border-top: 1px solid #505050;
border-bottom: 1px solid #81ABC6;
font-size: 10px;
text-transform: UPPERCASE;
}</blockquote>

Adjust the “top”, “margin-left”, and “width” settings to achieve the optimal positioning of the menu system on your page. Simply stated, we’re dealing with x and y coordinate positioning, and the width setting sets the menu (and transparency) to extend to the width of your layout, which in my case is 622px. z-index establishes the “stacking order” of elements within the layout.

Again, I prefer the son-of-suckerfish menu because it adapts to the hack much better than the trans menu, and they both look identical except for the smooth drop-down effect. If you need to tweak this menu’s css file, the path is: Templates > ja_zibal > ja_cssmenu > ja_sosdmenu.css

Perhaps the JA Pros can jump in and provide a qualified solution.

Happy hacking!

Tom

[Author]

Posts