Joomla Templates Club 406,261 posts

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#163851

Dear JA,

i’m using JA Portfolio for my demo website. And there a lot of module at the frontpage of my website. So I want assign different color for my modules. But I didn’t know how to modify my css/ module suffix for each colors..

can anybody help me.? below my temporary demo site for your reference:

http://jpam-demo.roboticsasia.org/

I want the background module header ” Pengumuman Dan Hebahan Terkini ” has the blue background and and white text.

thank you

*sorry for my bad english

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#390740

Hi,

Currently there is only 1 colored module as you can see in JA Portfolio demo. It has _hilite as module class suffix and gives a module green colored background.

To give your module a blue background, you can use say _bluehilite as your module class suffix and copy all the styling given to _hilite and change _hilite suffix to _ bluehilite in your copied styles. So whenever you apply _bluehilite suffix to any module, that module will look exactly as colored module in the demo, only with blue color.

You can make as many color stylings as you want as explained above.

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#390746

<em>@himangi 239775 wrote:</em><blockquote>Hi,

Currently there is only 1 colored module as you can see in JA Portfolio demo. It has _hilite as module class suffix and gives a module green colored background.

To give your module a blue background, you can use say _bluehilite as your module class suffix and copy all the styling given to _hilite and change _hilite suffix to _ bluehilite in your copied styles. So whenever you apply _bluehilite suffix to any module, that module will look exactly as colored module in the demo, only with blue color.

You can make as many color stylings as you want as explained above.</blockquote>

Hi Himangi… thank for the reply..

I already set the module class suffix to _hilite , but it appear like image attached:

I want only my module header/title background in blue color style, and text in white color.

thank you in advance.

---

Attachments:

1. 

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#390757

Hi,

Please find div.moduletable_hilite { on line 161 in your template.css and remove its background color to put none instead the color. This will remove the background color applied to the content, below title.

Add following code in the template.css to have colored module title.
<blockquote>div.moduletable_hilite h3 {
background: none repeat scroll 0 0 #5F9729;
border-bottom: 1px dotted #CCCCCC;
color: #333333;
margin-bottom: 0;
}</blockquote>

1 user says Thank You to himangi for this useful post

1. wan fadli

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#390760

After you add the styling for h3, you may need to add <blockquote>div.moduletable_hilite div#marqueecontainer h3{ background: #ffffff; }</blockquote> since you have more titles having h3 tags..

1 user says Thank You to himangi for this useful post

1. wan fadli

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#390852

Thanks Himangi,

this solution not solved at all.. but after apply comment to this code :

<blockquote>body .mod-content-module h3,
body .mod-content-module h3 {
/* background: #fff;
border-bottom: dotted 1px #ccc;
color: #333333;*/
}

#ja-current-content div.ja-moduletable h3,
#ja-current-content div.moduletable h3 {
/* background: #fff*/;
border-bottom: dotted 1px #ccc;
/* color: #333;*/
margin-bottom: 0px;
}</blockquote>

its worked… but other modules (GALERI GAMBAR, GALERI VIDEO) back to normal module same as lef/right module.. :((

If you dont mind, can you explain why it happened and and solution to solve this problem.. 🙂

also css file (in zip file) attached for your reference..
btw, thank you for your help..

---

Attachments:

1. template-css.zip

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#390919

Hi it worked after you commented that particular code because that code must have had priority than the code I had suggested you to add in your css.

Now to use the commented code as well as our code, you can uncomment the previous code and add !important to the background properties and border-bottom property like background: none repeat scroll 0 0 #5F9729 !important; !important sets the highest priority to the prperty having it among all the applicable properties from any css.

Try it and let me know.

[wan fadli Developer wan fadliJoin date: January 2011Posts: 98Downloads:2Uploads:28 Thanks: 31 Thanked: 2 times in 1 posts]

#390922

<em>@himangi 240009 wrote:</em><blockquote>Hi it worked after you commented that particular code because that code must have had priority than the code I had suggested you to add in your css.

Now to use the commented code as well as our code, you can uncomment the previous code and add !important to the background properties and border-bottom property like background: none repeat scroll 0 0 #5F9729 !important; !important sets the highest priority to the prperty having it among all the applicable properties from any css.

Try it and let me know.</blockquote>

yeah!! its worked..! 😉

thank you for your help Himangi.. 🙂

SOLVED

[Author]

Posts