Joomla Templates Club 406,261 posts

[anisjolly Friend anisjollyJoin date: April 2008Posts: 661Downloads:0Uploads:15 Thanks: 33 Thanked: 96 times in 55 posts]

#142169

Hey all

Been away from this game for quite some time now and working on a new project. Just wondering – how do I make one of my modules in the right hand column different to the others.

I believe I have to create a new suffix to tailor it differently?

I’ve tried to add a suffix class in the module params but it doesn’t seem to change the look and feel of it AND I’ve also looked at amending basic css code but that takes the lok and feel for the whole right column.

If you need a URL – pm me as the project is something of a hush hush thing at the mo until launch.

Thanks

Anis

[nguyenhuu quang Friend nguyenhuu quangJoin date: September 2014Posts: 1087Downloads:0Uploads:3 Thanks: 29 Thanked: 328 times in 288 posts]

#308809

surfix like that

div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.module_testimonial h3 {
border-bottom: 1px solid #E5E5E5;
margin: 0 0 10px;
padding: 8px 0;
font-size: 125%;
color: #666666;
text-transform: capitalize;
}

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.module_testimonial {
background: url(../images/box-br.gif) no-repeat bottom right;
padding: 0;
width: 100%;
margin-bottom: 15px;
width: 100%;
float: left;

}

div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.module_testimonial div {
margin: 0;
padding: 0;
background: url(../images/box-bl.gif) no-repeat bottom left;
zoom: 1;
}

div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.module_testimonial div div {
padding: 0;
margin: 0;
background: url(../images/box-tr.gif) no-repeat top right;
}

div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.module_testimonial div div div {
padding: 0 15px 15px;
background: url(../images/box-tl.gif) no-repeat top left;
}

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div,
div.module_testimonial div div div div {
margin: 0;
padding: 0;
background: none;
}

/*module hilite*/
div.module_hilite h3 {
background: url(../images/h3-hilite-bg.gif) repeat-x left bottom;
border: none;
color: #858585;
margin-right: 15px;
}

div.module_hilite {
background: url(../images/box-hilite-br.gif) no-repeat bottom right;
}

div.module_hilite div {
background: url(../images/box-hilite-bl.gif) no-repeat bottom left;
}

div.module_hilite div div {
background: url(../images/box-hilite-tr.gif) no-repeat top right;
}

div.module_hilite div div div {
background: url(../images/box-hilite-tl.gif) no-repeat top left;
}

div.module_hilite img {
background: #3F3F3F;
border: 1px solid #4F4F4F;
}

/*module testimonial*/
div.module_testimonial h3 {
background: url(../images/h3-bubble-bg.gif) repeat-x left bottom;
border: none;
color: #D2DCEF;
}

div.module_testimonial,
div.module_testimonial div,
div.module_testimonial div div,
div.module_testimonial div div div {
background: none;
padding: 0;
}

div.module_testimonial div div div div {
float: left;
clear: both;
}

div.module_testimonial div.bubble {
width: 100%;
}

div.module_testimonial div.bubble div {
background: #7786A2 url(../images/bubble-hilite-br.gif) no-repeat right bottom;
width: 100%;
}

div.module_testimonial div.bubble div div {
background: url(../images/bubble-hilite-bl.gif) no-repeat left bottom;
}

div.module_testimonial div.bubble div div div {
background: url(../images/bubble-hilite-tr.gif) no-repeat right top;
}

div.module_testimonial div.bubble div div div div {
background: url(../images/bubble-hilite-tl.gif) no-repeat left top;
}

div.module_testimonial div.bubble div div div div div {
padding: 0 20px 20px;
color: #D2DCEF;
width: auto;
}

div.module_testimonial span.author {
font-weight: bold;
color: #7786A2;
}


1 user says Thank You to nguyenhuu quang for this useful post

1. anisjolly

[anisjolly Friend anisjollyJoin date: April 2008Posts: 661Downloads:0Uploads:15 Thanks: 33 Thanked: 96 times in 55 posts]

#308814

I’m guessing so – but how can i make one module in the right hand column look different thank all the other modules

Do i need to create a new set of css rules and then apply it to the module? if so I know how to create the css rules BUT how do i apply it to only one module???

maybe i’m missing the point by looking at the code above?

help?

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

#308851

You’re on the right track Anis…

Lets take a look at some of the code above…

div.module div div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.module_testimonial div div div {
margin: 0;
padding: 0;
background: none;
}
If we change some of the styling above (in orange) then it will apply to ALL the suffix’s listed above (in red). This is not what we want. Lets say we wanted the ‘_text‘ suffix to have a black background and only the _text suffix. We would apply the following CSS after the one above…


div.module_text div div div {
background: #000000;
}
Now when we enter _text as the module suffix in the module manager our module will have a black background while all the others will have ‘none’.

You can see in Quangs post above that after all the ‘common’ module styles have been coded there are some new styles coded that are unique to the _hilite and _testimonial suffixes. It is important to remember when writing CSS that the last rule read (reading down like a human) is the rule that is applied. For example, in the following CSS…

p {color: red;}

p {color: white;}

p {color: black;}
… the paragraph text on our page will be black.

However we can over rule this with !important. For example in the following CSS…

p {color: red !important;}

p {color: white;}

p {color: black;}
… the paragraph text on our page in the case will be red.

I did write a tutorial on suffixes before and you can read it here… http://www.joomlart.com/forums/topic/all-about-the-module-suffix/

1 user says Thank You to scotty for this useful post

1. anisjolly

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#308907

Nice one Scotty! Anis, I’ll not reply via PM as Scotty seems to have hit it on the head!

1 user says Thank You to questbg for this useful post

1. anisjolly

[anisjolly Friend anisjollyJoin date: April 2008Posts: 661Downloads:0Uploads:15 Thanks: 33 Thanked: 96 times in 55 posts]

#308984

Hey Chris / Scotty

Thanks for the heads up! Believe it or not I didn’t actually need to create a new suffix!!!

Scotty, the tutorial you wrote got me looking at the code and I came across one called ‘_blank’ – it was exactly what I needed!

Dude – YOU ARE A LEGEND!

Thanks very much for the help. I hope I can get the time again to spend more time here – currently setting up my own little business – fingers crossed it works out!

Really good though to hear from you both again!

😀

Anis

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#308988

Glad you got it working anis 🙂

Thumbs up for scotty 🙂

[toddman Friend toddmanJoin date: October 2006Posts: 118Downloads:0Uploads:2 Thanks: 33 Thanked: 8 times in 1 posts]

#308998

anisjolly;134095Hey Chris / Scotty

Thanks for the heads up! Believe it or not I didn’t actually need to create a new suffix!!!

Scotty, the tutorial you wrote got me looking at the code and I came across one called ‘_blank’ – it was exactly what I needed!
Anis

It would be a great help if all the suffic codes where posted in the demo & userguide;)

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#309026

<em>@toddman 134112 wrote:</em><blockquote>It would be a great help if all the suffic codes where posted in the demo & userguide;)</blockquote>

Agreed! That could save a load of reading through the code!

<em>@anisjolly 134095 wrote:</em><blockquote>Thanks very much for the help. I hope I can get the time again to spend more time here – currently setting up my own little business – fingers crossed it works out!
</blockquote>

Good Luck with that Anis. Looking forward to a ‘sneak preview’ of what you’re working on!

Chris

[Author]

Posts