Joomla Templates Club 406,261 posts

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

#132643

In this example, there are three Hot Topics modules:

http://joomla.bayanihan-saranay.com/jte15x099/

the Hot Topic module [with five (5) articles (images)] spanned the width at the bottom.

Unfortunately, the Hot Topic module [with three (3) articles (images) — placed between the “JA News Front Page” and the “JA News” module — does not span the width of the “JA News” position. It will require changing the “width:182px;” in the CSS shown below, to achieve this.

Question:

How can it be implemented so that individual groups of “Hot Topic” modules to have different CSS?

.ja-catslwi /* Horizonal Hot Topic */
{
display:block;
float:left;
margin: 10px 5px 5px 5px;
padding:1;
position:relative;
width:182px;
} /* orig changed added new style Horizonal */

• .ja-catslwi2

=> the width may be adjusted so that Hot Topic 2 module will span the width of the “JA News” module

• .ja-catslwi3

=> float specification may be changed (center?)

not too many new CSS.

Thanks.

Cornelio

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#267657

Hi cgc0202 !
why don’t add module class suffix for each hot topic module and create css for each hot topic module ?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#267658

Hi cgc0202 !
why don’t add module class suffix for each hot topic module and create css for each hot topic module ?

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

#267786

<em>@hainn84 76308 wrote:</em><blockquote>Hi cgc0202 !
why don’t add module class suffix for each hot topic module and create css for each hot topic module ?</blockquote>

Hi Hainn,

For this site:

http://joomla.bayanihan-saranay.com/jte15x099/

I added these suffixes:

1. ja-catslwi
2. csg-catslwi2
3. ja-catslwi3

and the CSS codes below in the ja_catslwi.css but csg-catslwi2 does not work properly

Hot Topic1: => at the bottom
This works


.ja-catslwi /* Horizonal Hot Topic */
{
display:block;
float:left;
margin: 10px 5px 5px 5px;
padding:1;
position:relative;
width:182px;
} /* orig changed added new style Horizonal */


Hot Topic 2 => between JA News Frontpage & JA News
does not work


.csg-catslwi2 /* Horizonal Hot Topic 2*/
{
display:block;
float:left;
margin: 10px 5px 5px 5px;
padding:1;
position:relative;
width:300px;
} /* orig changed added new style Horizonal */

Vertical Hot Topic 3 => Left module

.ja-catslwi3 /* Vertical Hot Topic */
{
position: relative;
margin: 0 0 14px 0;
padding: 0;
}


[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#267791

Hi cgc0202 !
the css is incorrect , they must have type below :
example about hot topic 3 :


.moduletableja-catslwi3 ja-catslwi {
....
}


not :


.ja-catslwi3 /* Vertical Hot Topic */
{
position: relative;
margin: 0 0 14px 0;
padding: 0;
}


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

#267910

Hi Hainn,

The widths of the two horizontal Hot Topic modules

1. ja-catslwi
2. ja-catslwi2

are the same => still based only from the width (width:182px; ) indicated in .ja-catslwi This means adding the above suffix in each of the two horizontal Hot Topic module did not work.

Here is what I did:

.ja-catslwi
{
display:block;
float:left;
margin: 10px 5px 5px 5px;
padding:1;
position:relative;
width:182px;
} /* orig changed added new style Horizonal */


I want ja-catslwi2 to be larger (width:350px; )

.ja-catslwi2 {
display:block;
float:left;
margin: 10px 5px 5px 5px;
padding:1;
position:relative;
width:350px;
} /* orig changed added new style Horizonal */

but it does not do it, it remains same as width:182px; same as indicated in ja-catslwi

I even included a second CSS as you suggested

.moduletableja-catslwi2 ja-catslwi {
display:block;
float:left;
margin: 10px 5px 5px 5px;
padding:1;
position:relative;
width:350px;
} /* orig changed added new style Horizonal */


No change in width, still remains same as width:182px; same as indicated in ja-catslwi

This means, specification of module suffix does not work

Cornelio

Note: I exaggerated width:350px; in ja-catslwi2 to check if it will change

[Author]

Posts