Joomla Templates Club 406,261 posts

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#186720

Hi,

In the JA nex demo site, the bottom of the “foot-left” module contains only 3 columns. How can I add additional columns?

Thanks!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#489749

“foot-left” position on JA Nex Template with 3 columns include in description module.

You can add more columns into it by changing html structure below


<div class="clearfix">
<div class="list-item first_item">
<h3>Hubs</h3>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Technology</a></li>
</ul>
</div>
<div class="list-item ">
<h3>Features</h3>
<ul>
<li><a href="#">Infographics</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Slideshow</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Current issue</a></li>
<li><a href="#">Online Store</a></li>
</ul>
</div>
<div class="list-item">
<h3>Company</h3>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
</div>


Also, you can refer to user guide of JA Nex Template and find: 5. Partner

1 user says Thank You to Ninja Lead for this useful post

1. TomC

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#490071

Hi,
I did modify the html code (see below as example), but instead giving me 4 columns side by side, it put the 4th column in the second row. I want to know if is possible to have all 4 columns in the same row, and maybe I need to adjust each column width in the css so it will have enough space in between each column?

<div class=”clearfix”>
<div class=”list-item first_item”>
<h3><strong>Elementary1</strong></h3>
<ul>
<li><strong><a href=”#”>B</a>asswood</strong></li>
<li><strong><a href=”#”>B</a>irch Grove</strong></li>
<li><strong><a href=”#”>C</a>edar Island</strong></li>
<li><strong><a href=”#”>C</a>rest View</strong></li>
<li><strong><a href=”#”>E</a>dinbrook</strong></li>
<li><strong><a href=”#”>E</a>lm Creek</strong></li>
</ul>
</div>
<div class=”list-item “>
<h3><strong>Junior High</strong></h3>
<ul>
<li><strong><a href=”#”>B</a>rooklyn Junior</strong></li>
<li><strong><a href=”#”>M</a>aple Grove Junior</strong></li>
<li><strong><a href=”#”>N</a>orth View Junior</strong></li>
<li><strong><a href=”#”>O</a>sseo Junior</strong></li>
</ul>
</div>
<div class=”list-item”>
<h3><strong>Senior</strong></h3>
<ul>
<li><strong><a href=”#”>M</a>aple Grove Senior</strong></li>
<li><strong><a href=”#”>O</a>sseo Senior</strong></li>
<li><strong><a href=”#”>P</a>ark Center</strong></li>
<li><strong><a href=”#”>O</a>ALC</strong></li>
</ul>
</div>
<div class=”list-item”>
<h3><strong>Senior #2</strong></h3>
<ul>
<li><strong><a href=”#”>M</a>aple Grove Senior</strong></li>
<li><strong><a href=”#”>O</a>sseo Senior</strong></li>
<li><strong><a href=”#”>P</a>ark Center</strong></li>
<li><strong><a href=”#”>O</a>ALC</strong></li>
</ul>
</div>
</div>

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#490189

After, you added script above, you need to customize css style

Open templates/ja_nex/css/template.css file

From


#ja-botsl2 .list-item {
border-left: solid 1px #333
float: left;
padding: 25px 0 40px;
width: 33%;
}

Change to


#ja-botsl2 .list-item {
border-left: solid 1px #333
float: left;
padding: 25px 0 40px;
width: 24.5%;
}


Remember to clear cache from Admin area.

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#490192

Here is an example url to show you what I’m trying to accomplish:
http://jlamp.district279.org/

If you scroll to the bottom of the page, you’ll see I’m trying to add 2 additional columns to the right of the “Junior High” column list. But instead showing on the right of the list, it puts it below “Junior High” and put the 5th column in another row below the “Senior High” column. I almost assuming I need to tweak the CSS so I can reduce each column width so all 5 columns can all fit on the same row.

Is that possible and where can I find the CSS code related to that footer module? Thanks!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#490274

With 5th column in row you can try to use this way

Open templates/ja_nex/css/template.css file

Add new script


#ja-botsl2 .list-item {
border-left: 1px solid #333333;
float: left;
margin: 0 0 -999em;
padding: 0 20px 999em;
width: 19.5%;
}

#ja-botsl2 div.ja-moduletable, #ja-botsl2 div.moduletable {
background: none repeat scroll 0 0 transparent;
border: medium none;
margin: 0;
overflow: hidden;
padding: 0;
}

#ja-botsl2 .ja-box-wrap { min-height: 0 !important;}

#ja-botsl2 .ja-box-wrap .no-padding {
overflow: hidden;
}


[Author]

Posts