Joomla Templates Club 406,261 posts

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#140481

Edit: I am using the same

Teline II Sandbox 099
http://joomlart.bayanihan-saranay.org/jte15x099/

in other discussions here in the Forum. For this reason, the Sections where the Hot Topic module may be seen was moved. Please click on any of the Sections to view the Hot Topic module just below the Magazine Navigation menu..

Hello,

I have not been able to solve this for awhile in spite of many attempts. Kindly, view the Hot Topic modules in this

Teline II Sandbox 099
http://joomlart.bayanihan-saranay.org/jte15x099/

there are two Hot Topic modules

• Hot Topic module 2, that should span the entire page horizontally, near the top of the Footer.
• Hot Topic module 1, that should span the entire page horizontally, just below the magazine menu navigation

Thanks to Hainn, I modified the code for

Hot Topic module 2, that should span the entire page horizontally, near the top of the Footer.

.ja-catslwi
{
display:block;
float:left;
margin: 10px 5px 10px 0px;
padding: 0px 0px 0px 0px;
position:relative;
border: 1px solid #999999;
width:156px;
}

I created a new CSS for

Hot Topic module 1, that should span the entire page horizontally, just below the magazine menu navigation

.ja-hcatslwi
{
display:block;
float : left;
margin : 10px 0px 10px 3px;
padding : 0px 0px 0px 0px;
position : relative;
border : 1px solid #999999;
width : 260px;
}

I placed the suffix ja-hcatslwi also in the Module Edit menu for
Hot Topic module 1:

Extensions => Module Manager => Hot Topic 1 (click to open)

Edit menu of Hot Topic 1

Parameters => Module Parameters =>

=> => => Module Class Suffix => ja-hcatslwi

based from the above, if it works, the Hot Topic module 1, (that should span the entire page horizontally, just below the magazine menu navigation) should have a

width : 260px;

while Hot Topic module 2, (that should span the entire page horizontally, near the top of the Footer) should have a

width:156px;

This was not happening though. Instead, both different Hot Topic modules (in fact all modules in a site) are defined by

.ja-catslwi
{
display:block;
float:left;
margin: 10px 5px 10px 0px;
padding: 0px 0px 0px 0px;
position:relative;
border: 1px solid #999999;
width:156px;
}

a width of 156

Is there anything that could be done to have dfferent widths for the two Hot Topic modules?

Cornelio

Notes:
#The first response by duchh addressed the key issue to achieve variable widths for different Hot Topic modules. However, there are further clarifications below that needed to be addressed also.

#It is important to consider that the Hot Topic modules indicated here were modified for horizontal presentation, a script change provided by Hainn, as discussed in another thread:

Horizontal “Hot Topic” to span page width just below “Magazine Menu”

there are other issues explored in the aforementioned link also to further explore the features of the Hot Topic.

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#302265

<em>@cgc0202 125415 wrote:</em><blockquote>
Hi duchh,

Your suggestion might be the direction to solve a problem that confounded me for quite a while now.

Where is this located: templates_name/html ?

I have a related question, but I will place it as a separate, and link it here.

How do I change the widths of Hot Topic modules
http://www.joomlart.com/forums/showthread.php?p=125415

Kindly respond there so that this thread will focus solely on leisurepublishing issue.

Thanks.

Cornelio
******************
</blockquote>

Hi cgc0202,

You asked me : <blockquote>Where is this located: templates_name/html ?</blockquote>

Example : templates/ja_teline_ii/html

<blockquote>How do I change the widths of Hot Topic modules</blockquote>

I think you should set up two styles for them. Example: have a style for Inside Teline II Sandbox 099


#ja-footer .ja-catslwi {
width: 156px;
}


and have a style for top sandbox :


#iblab-topx .ja-catslwi {
width: 260px;
}


My code is example, you can change based on this idea. Good luck

1 user says Thank You to Css Magician for this useful post

1. cgc0202

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#302280

:

Thanks duchh,

It seems to work, but there are some features that still need to be refined, I will separate the issues into individual responses, so that it is simpler.

The image enlarges in the topx position, if I use this:


#iblab-topx .ja-catslwi {
width: 320px;
}


The actual images sizes are:

280 x 175
279 x 175
261 x 175

the dimensions chosen for the Htot topic module was:

320 x 200

I expect the two images with larger widfths to fill the maximum width of 320 but as shown in the Sandbox; only the image with narrower width should have a gap. Instead, each imaget enlarges only to the maximum size of the actual image, as shown above. ( actual images sizes)

Note that if the CSS tag was a simple:

ja-catslwi
{
display:block;
float:left;
margin: 10px 5px 10px 0px;
padding: 0px 0px 0px 0px;
position:relative;
border: 1px solid #999999;
width: 320px;
}

the image will enlarge properlym even larger than its actual width and the height will enlarge proportionately, also..

At any rate, I am just glad that I can now have different widths for different modules. Thanks again.

Cornelio

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#302283

Hi duchh,

Right now, the spacing was defined in the primary CSS tag:

.ja-catslwi
{
display:block;
float:left;
margin: 10px 5px 10px 0px;
padding: 0px 0px 0px 0px;
position:relative;
border: 1px solid #999999;
width:156px;
}

if I want to have variable spacing also for each module, is this the proper way? The set of CSS tags and specifications would be:

.ja-catslwi
{
display:block;
float:left;
position:relative;
border: 1px solid #999999;
}

Note: In the script above, I removed the margin, padding and width specification in the generic .ja-catslwi

#ja-footer .ja-catslwi
{
margin: 10px 5px 10px 0px;
padding: 0px 0px 0px 0px;
width:156px;
}

Note: In the script above, the margin, padding and width were defined here for #ja-footer .ja-catslwi

#iblab-topx .ja-catslwi
{
margin: 10px 5px 10px 5px;
padding: 10px 0px 0px 0px;
width:320px;
}

Note: In the script above, the margin, padding and width defined here for #iblab-topx .ja-catslwi I included the aforementioned changes, but there seem to be no top margin or padding in the Hot Topic just below the Magazine navigation menu.

Related question:

Should the aforementioned CSS tag be indicated in the respective module, when filling up the suffix?

Path:

Extensions => Modules => Hot Topic => (click to open) => Isee right top)

Parameters => Module Parameters

Module Class Suffix: #iblab-topx .ja-catslwi

A related clarification: In the aforementioned dialog, what is the correct suffix to place there (which in the list below).

1. #iblab-topx .ja-catslwi
2. iblab-topx .ja-catslwi
3. #iblab-topxi
4. iblab-topxi

Cornelio

[Author]

Posts