Joomla Templates Club 406,261 posts

[mrjoomlaart Friend mrjoomlaartJoin date: September 2008Posts: 14Downloads:0Uploads:0 Thanks: 7]

#133705

Hi,

Is there a tutorial on how to create the “Our Staff” box just like it shows in the right navbar on http://template15.joomlart.com/ja_edenite/? I have no idea how to accomplish that.

Thanks,

Doug

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#272152

Is it just a case of copying all the text and images from inside the our staff box then creating a new module which has a text area in it and pasting the contents into the text area…then swap the images with your own and assign the module to the desired position.

This way worked for all similar modules in fagus for my site

Hope this helps 😉

1 user says Thank You to mfcphil for this useful post

1. mrjoomlaart

[mrjoomlaart Friend mrjoomlaartJoin date: September 2008Posts: 14Downloads:0Uploads:0 Thanks: 7]

#272154

Thanks… that sounds simple enough. I will give it a shot when I get home from work.

Much appreciated,

Doug

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#272198

Turn off the wysiwyg editor and go to the modules and make a custom html module, and add this here in it:

<div class="ja-innerdiv clearfix">
<img src="images/stories/demo/sam-4.jpg" alt="Sample image" align="left" />
<strong>T.Schlossnagle</strong><br />
Director<br />
dr@ydomain.com
</div>

<div class="ja-innerdiv clearfix">
<img src="images/stories/demo/sam-2.jpg" alt="Sample image" align="left" />
<strong>Marry</strong><br />
Managing Director<br />
mg@ydomain.com
</div>

<div class="ja-innerdiv clearfix">
<img src="images/stories/demo/sam-3.jpg" alt="Sample image" align="left" />
<strong>Chris Shiflett</strong><br />
Chief Executive Officer
</div>

<div class="ja-innerdiv clearfix">
<img src="images/stories/demo/sam-1.jpg" alt="Sample image" align="left" />
<strong>Quynh Le</strong><br />
Sales manager<br />
sl@ydomain.com
</div>

<div class="ja-innerdiv clearfix">
<img src="images/stories/demo/sam-5.jpg" alt="Sample image" align="left" />
<strong>J.Nguyen</strong><br />
Support manager<br />
sd@ydomain.com
</div>
Change text and images to your own and it should work

1 user says Thank You to Menalto for this useful post

1. mrjoomlaart

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#272199

Menalto:

Thats just far too easy and my way is much more fun 😉

Code below was cut and pasted from here Menalto’s is an awful lot tidier…

<div id=”ja-containerwrap-c”>
<div class=”clearfix” id=”ja-container”>
<div id=”ja-colwrap”>
<div id=”ja-col1″>
<div class=”ja-innerpad”>
<div class=”module”>
<div>
<div>
<div>
<strong>
<a href=”http://www.peacockquizzes.com/movie-monsters.html”>
Movie Monsters</a></strong><br>
 <div class=”ja-innerdiv” style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 5px 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #434343 1px solid”>
<div style=”FLOAT: left; MARGIN-RIGHT: 5px”>
<a href=”http://www.peacockquizzes.com/movie-monsters.html”>
<img title=”Peacock Quizzes – The Pub Quiz Professionals” style=”BORDER-RIGHT: #373737 2px solid; BORDER-TOP: #373737 2px solid; BORDER-LEFT: #373737 2px solid; BORDER-BOTTOM: #373737 2px solid” height=”50″ alt=”Peacock Quizzes – The Pub Quiz Professionals” src=”http://www.peacockquizzes.com/images/stories/alien.png” width=”50″ border=”2″></a></div>
<p style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px”>
Some really great movie monster for you
to identify.</div>
<strong>
<a href=”http://www.peacockquizzes.com/english-writers.html”>
English Authors</a></strong><br>
 <div class=”ja-innerdiv” style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 5px 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #434343 1px solid”>
<div style=”FLOAT: left; MARGIN-RIGHT: 5px”>
<a href=”http://www.peacockquizzes.com/english-writers.html”>
<img title=”Peacock Quizzes – The Pub Quiz Professionals” style=”BORDER-RIGHT: #373737 2px solid; BORDER-TOP: #373737 2px solid; BORDER-LEFT: #373737 2px solid; BORDER-BOTTOM: #373737 2px solid” height=”50″ alt=”Peacock Quizzes – The Pub Quiz Professionals” src=”http://www.peacockquizzes.com/images/stories/billy.png” width=”50″ border=”2″></a></div>
<p style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px”>
Where the greatest writers in the world
English?</div>
<a href=”http://www.peacockquizzes.com/british-birds.html”>
<strong>English Birds</strong><br>
 </a><div class=”ja-innerdiv” style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 5px 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #434343 1px solid”>
<div style=”FLOAT: left; MARGIN-RIGHT: 5px”>
<a href=”http://www.peacockquizzes.com/british-birds.html”>
<img title=”Peacock Quizzes – The Pub Quiz Professionals” style=”BORDER-RIGHT: #373737 2px solid; BORDER-TOP: #373737 2px solid; BORDER-LEFT: #373737 2px solid; BORDER-BOTTOM: #373737 2px solid” height=”50″ alt=”Peacock Quizzes – The Pub Quiz Professionals” src=”http://www.peacockquizzes.com/images/stories/bird1.png” width=”50″ border=”2″></a></div>
<p style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px”>
You twitchers will have your work cut
out for this one!</div>
<strong>
<a href=”http://www.peacockquizzes.com/its-a-puppet.html”>
It’s A Puppet</a></strong><br>
 <div class=”ja-innerdiv” style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 5px 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #434343 1px solid”>
<div style=”FLOAT: left; MARGIN-RIGHT: 5px”>
<a href=”http://www.peacockquizzes.com/its-a-puppet.html”>
<img title=”Peacock Quizzes – The Pub Quiz Professionals” style=”BORDER-RIGHT: #373737 2px solid; BORDER-TOP: #373737 2px solid; BORDER-LEFT: #373737 2px solid; BORDER-BOTTOM: #373737 2px solid” height=”50″ alt=”Peacock Quizzes – The Pub Quiz Professionals” src=”http://www.peacockquizzes.com/images/stories/hoob.png” width=”50″ border=”2″></a></div>
<p style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px”>
Puppets on the TV…from the past to the
present day.</div>
<strong>
<a href=”http://www.peacockquizzes.com/doctor-in-the-house.html”>
TV & Movie Doctors</a></strong><br>
 <div class=”ja-innerdiv” style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 5px 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #434343 1px solid”>
<div style=”FLOAT: left; MARGIN-RIGHT: 5px”>
<a href=”http://www.peacockquizzes.com/doctor-in-the-house.html”>
<img title=”Peacock Quizzes – The Pub Quiz Professionals” style=”BORDER-RIGHT: #373737 2px solid; BORDER-TOP: #373737 2px solid; BORDER-LEFT: #373737 2px solid; BORDER-BOTTOM: #373737 2px solid” height=”50″ alt=”Peacock Quizzes – The Pub Quiz Professionals” src=”http://www.peacockquizzes.com/images/stories/house.png” width=”50″ border=”2″></a></div>
<p style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px”>
A collection of screen medical men and
women.</div>
</div>

[mrjoomlaart Friend mrjoomlaartJoin date: September 2008Posts: 14Downloads:0Uploads:0 Thanks: 7]

#272211

That was easy! Thanks a lot… I REALLY DO appreciate it.

Doug

[Author]

Posts