-
Hello,
I would like to create a position on the header of JA Methys on Jommla! 1.7 so that it resembles exactly the header of JA Ironis. It’s just to give me the ability to create links and also that big nice rectangle.
Please see attachement for illustration.
Your assistance is very much appreciated.
Thank you.
Okay, as promised, here is your step-by-step guide as to how you can achieve your desired result . . .
STEP ONE – Create Menu:
Within your Menu Manager, create a new menu with the items you want in your top menu.
For the purposes of this tutorial, we’ll use the same items as in JA Ironis – and name the menu “Top Menu“
STEP TWO – Add CSS:
Modify lines 807-808 as follows:<blockquote>/* Ja Social List —*/
.ja-social-list { text-align: right; margin-bottom: 10px; margin-top: 15px; float: right; width: 115px;}
</blockquote>Add the following lines from (approximately) lines 924 – 977 within templates/ja_methys/css/template.css
<blockquote>
/* HEADER
——————————————————— */
#ja-header .main { padding: 20px 0; height: 100px;}#ja-top {
float: right;
margin-top: 5px;
width: 625px;
}#ja-top ul.menu { margin-top: 0px; }
#ja-top ul.menu li {
border-left: solid 1px #d6d7d8;
display: block;
float: left;
margin-top: 15px;
padding: 0;
}#ja-top ul.menu li.first { border-left: none; }
#ja-top ul.menu li a {
border-bottom: dotted 1px #d6d7d8;
color: #aaa;
display: inline;
font-size: 95%;
margin: 0 10px;
padding: 0 0;
}#ja-top ul.menu li a:hover,
#ja-top ul.menu li a:focus,
#ja-top ul.menu li a:active { color: #ec534d; }#ja-top ul.menu li:first-child { border-left: 0; }
#ja-top .buy-your-tickets { display: inline; margin-left: 25px; padding-right: 5px; }
#ja-top .buy-your-tickets a { background: #3DB9B1; float: left; padding: 0 10px; }
#ja-top .buy-your-tickets a:hover,
#ja-top .buy-your-tickets a:focus,
#ja-top .buy-your-tickets a:active { background-color: #ec534d; }#ja-top .buy-your-tickets a span {
color: #fff;
font-family: ‘BebasNeueRegular’, Arial, sans-serif;
font-size: 290%;
font-weight: bold;
letter-spacing: 0;
margin: 0 10px;
text-transform: uppercase;
}</blockquote>
STEP THREE – Create Top Menu Module
Within your Module Manager, create a new Module – name it “Top Menu”
– Type = Menu
– Menu Assignment = Top Menu
– Position = top
STEP FOUR – Create Custom HTML Module (for “Buy Your Tickets”)
– Type = Custom HTML
– Position = top
– Within the “Custom Input” field, click the little HTML icon. Within the pop-up field, put in the following:
<blockquote><div class=”buy-your-tickets”><a href=”#” title=”Register now”><span>Buy your tickets</span></a></div></blockquote>
– Within the “Advanced Options” Tab (on the right), enter the following:SAVE ALL CHANGES – PUBLISH ALL MODULES – CLEAR CACHE – REFRESH PAGE
[FONT=arial]To make sure the method works, I did the modifications myself in my own install of JA-Methys, and this is the result . . . .
[/FONT]
So, as you can see, it is a relatively simple process. You can, of course, play around with the CSS for the various elements to achieve the final styling YOU want – but this, too, is a relatively simple trial-and-error process.
Just as an FYI, what I did to achieve the virtual “clone” result form JA Ironis (as you wanted) was the following:
- I downloaded the JA Ironis quickstart files to a folder on my desktop (for reference)
- I then used our DEMO BUILDER to create a temporary clone demo (with site administration) of JA Ironis
- I then cross-referenced the configurations between JA Ironis and JA Methys to re-create the JA Ironis elements you wanted within JA Methys.
I hope you found the above tutorial both helpful and educational(you as well, Joo) 😎
Viewing 13 posts - 1 through 13 (of 13 total)This topic contains 13 replies, has 3 voices, and was last updated by
TomC 12 years, 4 months ago.We moved to new unified forum. Please post all new support queries in our New Forum
How to do it like in Ironis?
Viewing 13 posts - 1 through 13 (of 13 total)
