Joomla Templates Club 406,261 posts

[peforever Friend peforeverJoin date: December 2010Posts: 29Downloads:0Uploads:5 Thanks: 2]

#158476

Do you have a tutorial or detailed directions on how to add module positions to this Anion template?

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#371051

Hi,

Please clarify your question in more details for further help.

More info, this is the guide for JA Anion module position: http://www.joomlart.com/forums/topic/ja-anion-module-position-guide/

[peforever Friend peforeverJoin date: December 2010Posts: 29Downloads:0Uploads:5 Thanks: 2]

#371132

I want to add my own module positions to the anion template.
How can i do this?
Please give me instructions or a tutorial?
Thank You

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

#371137

We have a nice wiki that explains in great detail how to add blocks – http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides

If you want to add a specific module position then upload an image showing where you want it and I will detail exactly how to achieve that.

[peforever Friend peforeverJoin date: December 2010Posts: 29Downloads:0Uploads:5 Thanks: 2]

#371147

Hello Phil,
Yes, I want to add a module position that spans across the width of the site right under the mainnav (menu).
Attached is a screenshot with a red line representing where i want to place the module position.
Thanks!

---

Attachments:

1. 

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

#371168

No problem creating the block. If you want just 1 module in that area then from your template manager>layouts tab edite the default item as follows adding the line in red (top is the new module name)

<?xml version="1.0" encoding="utf-8"?>
<layout>
<name>Default</name>
<description>Default layout for JA Anion template</description>
<blocks name="top" style="xhtml">
<block name="header" type="header"></block>
<block name="cpanel" type="usertools/cpanel"></block>
<block name="mainnav" type="mainnav" markup="3"></block>
<block name="spotlight" type="modules" style="raw">top</block>
</blocks>
<blocks name="middle" colwidth="20" markup="3" fixheight="1">
<block name="content-mass-top" style="raw">content-mass-top</block>
<block name="content-top">content-top</block>
<block name="inset1" width="20">left</block>
<block name="right1" width="30">right</block>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="botsl" type="spotlight" markup="3">user5,user6,user7,user8</block>
<block name="navhelper" type="navhelper" markup="3"></block>
<block name="footer" type="footer" main-inner="1"></block>
</blocks>
</layout>

If you want multiple modules in that position then the code would be

<block name="spotlight" type="spotlight" style="raw">top,top1</block>

Here we have changed the type=”modules” to type=”spotlight” and added the position top1. You could add top2, top3 etc separating them with a comma

Finally you would want to style it as per your requirements.

[peforever Friend peforeverJoin date: December 2010Posts: 29Downloads:0Uploads:5 Thanks: 2]

#371182

Thanks Phil!
This was a great help.
Now (this should be my last question), how do i style the module position (ie – height, width, or specific placement on the page if i choose to change it)?

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

#371185

Assuming you are familiar with css simply use something like below in your template.css file


#ja-top {background: #fff;}

Where bachground: #fff can be any styling you wish. Height should expand to whatever you want but to fit anion you would need to add the styling for the sides/width I am guessing. I would start by working out what the existing styling is for the sides and add #ja-top to that

1 user says Thank You to Phill for this useful post

1. peforever

[peforever Friend peforeverJoin date: December 2010Posts: 29Downloads:0Uploads:5 Thanks: 2]

#371212

Attached is a pic of the header with the new module position below it.
I need the bottom of the mainnav module position to line up with bottom of the black header background.

I tried the line of code you gave me and changed it to this (in template.css):
#ja-mainnav .main {height: 100px;} AND #ja-mainnav {height: 100px;}
Neither of these worked.

---

Attachments:

1. 

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

#371217

Hmm, without actually seeing the page it is going to be hard to say but you could try something like


position: relative;
top: -10px;

where the -10px could be adjusted to move the box up or down.

[peforever Friend peforeverJoin date: December 2010Posts: 29Downloads:0Uploads:5 Thanks: 2]

#371222

The page is not far from the original anion template. Aside from the new position we created it’s just colors and images at this point. Maybe it will help if you look at the anion demo. Where exactly would i place this code?

[peforever Friend peforeverJoin date: December 2010Posts: 29Downloads:0Uploads:5 Thanks: 2]

#371245

If i did it right, that didn’t change anything.

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

#371287

If you post a link to your site we can give you a more detailse answer. Without seeing what your are trying to acomplish it is going to be almost impossible.

[peforever Friend peforeverJoin date: December 2010Posts: 29Downloads:0Uploads:5 Thanks: 2]

#371347

http://prosoundministry.com/

I noticed the desired change when i set the logo to text and frontpage font size to 1 (currently at 3) in
template manager/profiles/global settings
However, i don’t want the font that small.
I just need to get the menu lined up with header background without lowering the text.
I plan to use a slightly larger .png for the logo instead of the text.

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

#371353

<em>@peforever 214143 wrote:</em><blockquote>Thanks Phil!
This was a great help.
Now (this should be my last question), how do i style the module position (ie – height, width, or specific placement on the page if i choose to change it)?</blockquote>

With all due respect, you really need to take some time to learn about CSS styling – as it is the basis for the styling for pretty much ALL Joomla templates/websites.

http://www.cssbasics.com/

http://www.csstutorial.net/introductionCSS.php

http://www.debbietdesigns.com/learn/34/css-basics/

[Author]

Posts