Joomla Templates Club 406,261 posts

[SHoggard Friend SHoggardJoin date: October 2006Posts: 290Downloads:5Uploads:21 Thanks: 26 Thanked: 7 times in 1 posts]

#144372

Hi, a pretty basic question:- How do I set the ‘menu class suffix” for a module?

Is there a list anywhere of those built-in to Teline?

I found Scotty’s great post All about the Module ‘Suffix’ at http://www.joomlart.com/forums/topic/all-about-the-module-suffix/

I’ll get around to experimenting, but for now I’d like to apply something like the Book Reviews in the demo.

In the Typography area of the demo – http://www.joomlart.com/templates_demo.php?template=ja_teline_iii I found

<div class=”moduletable_default badge-hot”> <h3><span>Badge hot</span></h3> <span class=”badge”>space<span> <div class=”ja-box-ct clearfix”> Your content here! </div> </div>

But that seems to be for a Content Module – how would I do that on a VirtueMart ‘Latest Product’ module (for example)?

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#317843

Hi, please don’t confuse a menu style suffix with a module style suffix. The book review module in the demo is done with a module style suffix.

If you open this module in the Module Manager you will see in the ‘Module Class Suffix’ box the text ‘_hilite badge-top’. This is actually using two module suffix at the same time. The _hilite one and the badge-top one. If we look on our CSS we can see what each one does…

div.moduletable_hilite { background: #FFFFF0; }
So adding the _hilite suffix alone simply adds the background colour #FFFFF0 to our module. We could very easily add more suffix like…

div.moduletable_hilite2 { background: #006600; }
div.moduletable_hilite3 { background: #FF0000; }
div.moduletable_hilite4 { background: #0000FF; }
div.moduletable_hilite5 { background: #CCCCCC; }
We then simply change the suffix text in the module manager to the one we want to use. We could also make it easier to remember by using more obvious names and by using HTML colour names rather than HEX codes like…

div.moduletable_hilite-red { background: red; }
div.moduletable_hilite-shell { background: seashell; }
div.moduletable_hilite-pink { background: pink; }
div.moduletable_hilite-cyan { background: darkcyan; }
We would then enter _hilite-cyan, for example, in our module class suffix box to give a cyan coloured background.

We could also style the modules further by adding more attributes to the suffix CSS…

div.moduletable_hilite-cyan {
background: darkcyan;
border: 2px solid #000000;
font-style: italic;
}
So now our module has a Cyan background, a 2 pixel black border and all text in it is in italics.

Now lets look at the badge-top suffix. In In /templates/ja_teline_iii/html/modules.php we can see our custom HTML that JA have used for this template and we can see they have added a <span> with the class ‘.badge’ within the module. In our CSS we find on line 749 of template.css…

.badge {
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 46px;
}

.badge-hot .badge { background: url(../images/icon-badge.png) no-repeat 0px 0px; }
.badge-new .badge { background: url(../images/icon-badge.png) no-repeat 0px -46px; }
.badge-pick .badge { background: url(../images/icon-badge.png) no-repeat 0px -92px; }
.badge-top .badge { background: url(../images/icon-badge.png) no-repeat 0px -138px; }
So what this is saying is that the <span> is positioned in the top right corner of the module and it will display a background image icon-badge.png. Notice how only one main image is used for each of the four icon options but four different vertical position parameters are used to show each one. The actual image looks like this…

This method of CSS is called an image ‘sprite‘ where you load a single image in the CSS (thus faster load times and less header requests) and use various parts of that image to style your page.

So by using badge-top in our modules class suffix we are telling it to load the ‘Top’ icon in the upper right hand corner of the module. We can set it to a different one like ‘badge-new’ to display the ‘New’ icon. By copying the methods above we could also make our own.

So I hope you have a better understanding now of the module suffix and how it’s used.

Further Reading…

• More about the Module Suffix
• Joomla Classes Explained
• HTML Colour Names
• Complete CSS Reference
• Image Sprites Explained

7 users say Thank You to scotty for this useful post

1. SHoggard
2. cgc0202
3. 2Patrick
4. kalibs112
5. visor3333
6. martincg
7. foris

[SHoggard Friend SHoggardJoin date: October 2006Posts: 290Downloads:5Uploads:21 Thanks: 26 Thanked: 7 times in 1 posts]

#317845

phew!… That’s going to take a while to digest… but thanks.

This should probably be stickied

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

#317850

Scotty is this in the css tips section?

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#317933

No but you can copy it there is you wish. I posted it here as it’s specific to T3. Stickied also.

1 user says Thank You to scotty for this useful post

1. SHoggard

[hariorama Friend harioramaJoin date: April 2009Posts: 174Downloads:0Uploads:33 Thanks: 50 Thanked: 15 times in 1 posts]

#318189

on the demo page

we can see at “VIDEO OF THE DAY” a frame/border around the little tumbnails.

how is this realised???

on my page, it is not showing up.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#318229

You have your thumbs in a table. Put them in a DIV instead and give it the class “ja-video-thumb”

1 user says Thank You to scotty for this useful post

1. hariorama

[hariorama Friend harioramaJoin date: April 2009Posts: 174Downloads:0Uploads:33 Thanks: 50 Thanked: 15 times in 1 posts]

#318259

thank you very much for your reply scotty. you are doing great work here!

i took now the table off and in the modul class suffix i wrote: ja-video-thumb

i’m not familiar with DIV

here is the content:

[PHP]<p><br />
{japopup type=”youtube” content=”http://www.youtube.com/v/gfuBQE8xbbI?hl=en&fs=1″ width=”640″ height=”380″ title=”TckTckTck: Human Countdown in Central Park, New York”}<img height=”100″ border=”0″ width=”105″ alt=”TckTckTck: Human Countdown in Central Park, New York” src=”http://img.youtube.com/vi/gfuBQE8xbbI/2.jpg” />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/OsK4M4H3SZo?hl=en&fs=1″ width=”640″ height=”380″ title=”easy.vegan – der Film über Veganismus”}<img height=”100″ border=”0″ width=”105″ alt=”easy.vegan – der Film über Veganismus” src=”http://img.youtube.com/vi/OsK4M4H3SZo/2.jpg” />{/japopup}{japopup type=”youtube” content=”http://www.youtube.com/v/bOaGQNwKx9o?hl=en&fs=1″ width=”640″ height=”380″ title=”Renate Künast erschlägt Fische”}<img height=”100″ border=”0″ width=”105″ alt=”Renate Künast erschlägt Fische” src=”http://img.youtube.com/vi/bOaGQNwKx9o/2.jpg” />{/japopup}{japopup type=”youtube” content=”http://www.youtube.com/v/51nD0TqPDgU?hl=en&fs=1″ width=”640″ height=”380″ title=”Vegane Welt – Viktoria Moser”}<img height=”100″ border=”0″ width=”105″ src=”http://img.youtube.com/vi/51nD0TqPDgU/2.jpg” alt=”Vegane Welt – Viktoria Moser” />{/japopup}{japopup type=”youtube” content=”http://www.youtube.com/v/Clw5yvhGPrA?hl=en&fs=1″ width=”640″ height=”380″ title=”Mehr Menschlichkeit für Tiere “}<img height=”100″ border=”0″ width=”105″ alt=”Mehr Menschlichkeit für Tiere ” src=”http://img.youtube.com/vi/Clw5yvhGPrA/2.jpg” />{/japopup}{japopup type=”youtube” content=”http://www.youtube.com/v/1xN9EV0RjW0?hl=en&fs=1″ width=”640″ height=”380″ title=”PETA Anti Tierversuchs Spot „Jede Stunde””}<img height=”100″ border=”0″ width=”105″ src=”http://img.youtube.com/vi/1xN9EV0RjW0/2.jpg” alt=”PETA Anti Tierversuchs Spot „Jede Stunde” />{/japopup}</p>[/PHP]

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#318281

take off the module suffix and change the HTML to…

<div class=”ja-video-thumb”><p><br />
{japopup type=”youtube” content=”http://www.youtube.com/v/gfuBQE8xbbI?hl=en&fs=1″ width=”640″ height=”380″ title=”TckTckTck: Human Countdown in Central Park, New York”}<img height=”100″ border=”0″ width=”105″ alt=”TckTckTck: Human Countdown in Central Park, New York” src=”http://img.youtube.com/vi/gfuBQE8xbbI/2.jpg” />{/japopup} {japopup type=”youtube” content=”http://www.youtube.com/v/OsK4M4H3SZo?hl=en&fs=1″ width=”640″ height=”380″ title=”easy.vegan – der Film über Veganismus”}<img height=”100″ border=”0″ width=”105″ alt=”easy.vegan – der Film über Veganismus” src=”http://img.youtube.com/vi/OsK4M4H3SZo/2.jpg” />{/japopup}{japopup type=”youtube” content=”http://www.youtube.com/v/bOaGQNwKx9o?hl=en&fs=1″ width=”640″ height=”380″ title=”Renate Künast erschlägt Fische”}<img height=”100″ border=”0″ width=”105″ alt=”Renate Künast erschlägt Fische” src=”http://img.youtube.com/vi/bOaGQNwKx9o/2.jpg” />{/japopup}{japopup type=”youtube” content=”http://www.youtube.com/v/51nD0TqPDgU?hl=en&fs=1″ width=”640″ height=”380″ title=”Vegane Welt – Viktoria Moser”}<img height=”100″ border=”0″ width=”105″ src=”http://img.youtube.com/vi/51nD0TqPDgU/2.jpg” alt=”Vegane Welt – Viktoria Moser” />{/japopup}{japopup type=”youtube” content=”http://www.youtube.com/v/Clw5yvhGPrA?hl=en&fs=1″ width=”640″ height=”380″ title=”Mehr Menschlichkeit für Tiere “}<img height=”100″ border=”0″ width=”105″ alt=”Mehr Menschlichkeit für Tiere ” src=”http://img.youtube.com/vi/Clw5yvhGPrA/2.jpg” />{/japopup}{japopup type=”youtube” content=”http://www.youtube.com/v/1xN9EV0RjW0?hl=en&fs=1″ width=”640″ height=”380″ title=”PETA Anti Tierversuchs Spot „Jede Stunde””}<img height=”100″ border=”0″ width=”105″ src=”http://img.youtube.com/vi/1xN9EV0RjW0/2.jpg” alt=”PETA Anti Tierversuchs Spot „Jede Stunde” />{/japopup}</p> </div>

2 users say Thank You to scotty for this useful post

1. hariorama
2. kalibs112

[hariorama Friend harioramaJoin date: April 2009Posts: 174Downloads:0Uploads:33 Thanks: 50 Thanked: 15 times in 1 posts]

#318287

yes, that’s it.

thank you so much.:)

[hariorama Friend harioramaJoin date: April 2009Posts: 174Downloads:0Uploads:33 Thanks: 50 Thanked: 15 times in 1 posts]

#318364

scotty, i have another question.:-[

many people are using FCK editor.

there you can make a choice about layout. i use this[PHP]<p><img height=”100″ align=”left” width=”100″ alt=”” style=”margin-right: 10px;” /></p>
<h3>Type the title here</h3>
<p>Type the text here</p>[/PHP]

now, how do I add captions to photos like the captions included with the demo’s photos?

there is this thread

but i still cannot figure out the right code which goes together with the above one.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#318384

[php]<p><img height=”100″ align=”left” width=”100″ alt=”” style=”margin-right: 10px;” /></p>
<h3>Type the title here</h3>
<p>Type the text here</p>[/php]

There is no need to have the IMG in <p> tags. To get the caption you need to add class=”caption” and title=”caption text here”. So yours should look like…

[php]<img height=”100″ align=”left” width=”100″ alt=”alt text here” title=”Caption Text Here” class=”caption” style=”margin-right: 10px;” />
<h3>Type the title here</h3>
<p>Type the text here</p>[/php]

Note to JCE users… JCE adds style=”float: right;” instead of align=”right” but the caption plugin will only work with align= so you will have to manually add it to the HTML and remove the float.

1 user says Thank You to scotty for this useful post

1. hariorama

[hariorama Friend harioramaJoin date: April 2009Posts: 174Downloads:0Uploads:33 Thanks: 50 Thanked: 15 times in 1 posts]

#318388

there is this thread to the demo page, where the pictures in the article also pop up.

so far the code looks like this with the caption on the my page

[PHP]<img height=”300″ align=”left” width=”203″ alt=”eltern” style=”margin-right: 10px;” src=”images/stories/eltern.jpg” title=”Eltern erziehen oft durch Lügen ” class=”caption” />[/PHP]

now lets pop up the pictures to their original full size. what would be the full code, with popup and caption?

here is the pop up code

[PHP]{japopup type=”image” content=”images/stories/demo/gallery/gl-1.png” width=”700″ height=”380″ title=”Sample image” }<img src=”images/stories/demo/gallery/gl-1.png” border=”0″ alt=”Sample image” width=”100″ />{/japopup}[/PHP]

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#318446

<em>@scotty 145294 wrote:</em><blockquote>If you open this module in the Module Manager you will see in the ‘Module Class Suffix’ box the text ‘_hilite badge-top’. This is actually using two module suffix at the same time. The _hilite one and the badge-top one.
…

div.moduletable_hilite5 { background: #CCCCCC; }
We then simply change the suffix text in the module manager to the one we want to use. </blockquote>

Scotty,

I’m having a mental lapse apparently. When I add the “hilite5” code to the CSS file and then to the module suffix…I get the expected gray background for the module…but it also kills the “badge-top” sprite..and I can’t for the love of life figure out why?

“_hilite5 badge-top” for me shows only a gray background…with no “Top” image in the upper right corner.

Thanks,
John.:confused:

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#318587

Hmmm… the HTML for the module should look like…

<div id=”Mod94″ class=”moduletable_hilite badge-top”>
<h3><span>Mod Title Here</span></h3>
<span class=”badge”> </span>
<div class=”ja-box-ct clearfix”>
Module content here….
</div>

Is it a template position or one you created yourself? In T3 these icons will only work in xhtml positions (as opposed to rounded positions).

[Author]

Posts