Joomla Templates Club 406,261 posts

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#174948

Hello,

I like the template and it is smart one , however I feel it is dry and lucks some attractive colors so decided to add some colors to some places.

I would like to change the Modules Titles holders and Backgrounds from gray to the Main Menu Colors accordingly.

Please see attached images.

Link : http://www.xn--mgbfwa6f4b.com/

Notice : important!!! Updating the template should not defect the added new colors.

---

Attachments:

1. 

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#443476

You can put whatever colours you want in there with a little css. I personally would create some custom module classes then I could choose what colours I would like each module to be on an individual basis.

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#443505

<em>@phill luckhurst 307260 wrote:</em><blockquote>You can put whatever colours you want in there with a little css. I personally would create some custom module classes then I could choose what colours I would like each module to be on an individual basis.</blockquote>

Thank you . I guess that this is very generic answer, and I know it.
You forgot my request , that colors will be depended on Main Menu Colors , which is changed per menu item.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#443506

This is actually quite easy to do using themes and page assignments.

different template but the concept is exactly the same i.e. menü driven changes of colours/styles.

http://www.joomlart.com/forums/topic/multiple-themes-in-your-tiris-joomshopping-site/. For category read menü. That is all it is – a menü item!

Maybe that helps you?

1 user says Thank You to swissa for this useful post

1. waelali

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#443508

<em>@swissa 307303 wrote:</em><blockquote>This is actually quite easy to do using themes and page assignments.

different template but the concept is exactly the same i.e. menü driven changes of colours/styles.

http://www.joomlart.com/forums/topic/multiple-themes-in-your-tiris-joomshopping-site/. For category read menü. That is all it is – a menü item!

Maybe that helps you?</blockquote>

I need more direct answers if you do not mind.. Code sample maybe??!! 🙂
I will not digg into that now .. no time

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#443512

The backup you should do before doing this will take the same time as you reading my post. 😉 Learning takes time. 🙂

There is NO code to do!

If you want another colour style for menü item go to Template Manager. Go to Profiles.

On the left in page assignments click in the left box, pick your menu item, select. In the right box, pick the colour theme. Teline has 8 I see. Save at top of page.

Quick lesson no? 😎

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#443514

<em>@swissa 307309 wrote:</em><blockquote>The backup you should do before doing this will take the same time as you reading my post. 😉 Learning takes time. 🙂

There is NO code to do!

If you want another colour style for menü item go to Template Manager. Go to Profiles.

On the left in page assignments click in the left box, pick your menu item, select. In the right box, pick the colour theme. Teline has 8 I see. Save at top of page.

Quick lesson no? :cool:</blockquote>

Thank you for the lesson, but I guess you did not understand my requirements at all. 🙂
I do not want to pick up specific them. I want to customize specific modules title background according to them which is specified dynamically from the themes set.

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#443515

How to add custom class to h3 background , which is specific to module , and not to all modules??…
Please see attached image for more details.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#443516

Then you have to follow the advice from Phill above and make custom modul classes. I thought you said menü items. Sorry!

If you want an example you can go to my test site – it is still work in progress but there you will see modules have different classes and look different, so if you use Firebug or Chrome you will see the code. 🙂

I suggest that you save it all to a theme so that if a template update comes you do not lose your changes.

I am still a beginner too! So maybe it isn’t all perfect!

click on shop in menü. “on sale” has it’s own class so has a different border for example

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#443517

<em>@swissa 307313 wrote:</em><blockquote>Then you have to follow the advice from Phill above and make custom modul classes. I thought you said menü items. Sorry!

If you want an example you can go to my test site – it is still work in progress but there you will see modules have different classes and look different, so if you use Firebug or Chrome you will see the code. 🙂

I suggest that you save it all to a theme so that if a template update comes you do not lose your changes.

I am still a beginner too! So maybe it isn’t all perfect!

http://tiny.cc/aos4aw – click on shop in menü. “on sale” has it’s own class so has a different border for example</blockquote>

Thank you
I have stupid question and sorry if it is silly 🙂
Please see attached image

---

Attachments:

1. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#443519

Nothing is silly. As I said I am still learning too!

div.ja-moduletable, div.moduletable { margin-bottom: 20px;
margin-top: 20px;
border: 1px solid #e5e6e7;
padding: 15px 19px;
background: #fff;
}

so I add new code

div.ja-moduletable.highlight { border-color: #c33; border-width: 5px !important; background-color: #fff; padding: 15px !important; }

and in the modul itself in “Module Class Suffix* I add ‘ highlight’ (with the leading space.) So that this module knows it has the suffix highlight and will apply the code for this.

I don’t know if I explain very well sorry.

2 users say Thank You to swissa for this useful post

1. waelali
2. Phill

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#443520

<em>@swissa 307316 wrote:</em><blockquote>Nothing is silly. As I said I am still learning too!

div.ja-moduletable, div.moduletable { margin-bottom: 20px;
margin-top: 20px;
border: 1px solid #e5e6e7;
padding: 15px 19px;
background: #fff;
}

so I add new code

div.ja-moduletable.highlight { border-color: #c33; border-width: 5px !important; background-color: #fff; padding: 15px !important; }

and in the modul itself in “Module Class Suffix* I add ‘ highlight’ (with the leading space.) So that this module knows it has the suffix highlight and will apply the code for this.

I don’t know if I explain very well sorry.</blockquote>

Yes great .. Thank you 🙂 The suffix issue was missing in y head 🙂 .. I understand now the way to specify class to specific module using the suffix.

Thank you

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#443521

Welcome. Best of luck with your site!

🙂

1 user says Thank You to swissa for this useful post

1. waelali

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#443522

I will try it and we will see…
But one more question please!!!

How to link the new class which is related to specific module , to specific menu color.?
If you go to my site , and you click on the first category , and then at the second , and the third, you will see that the colors are changed.

You also said “I suggest that you save it all to a theme so that if a template update comes you do not lose your changes.” – Where is this theme folder?

http://www.xn--mgbfwa6f4b.com/

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#443524

This is very difficult for me as my Arabic is as good as my Chinese! :laugh:

If you use profile for the menü items to change the colour then all you do is add the new code into each profile.

That way the suffix in one profile will add one style and in another theme you can make it add a different style. That was my point earlier about using profiles. It makes it very easy to change everything. 🙂

Don’t forget that a profile can be a copy of the default with just a small change – it doesn’t have to be a major theme change.

If you look again at my page. The main page has one profile and the next pages another – they add in a breadcrumb above the menü.

T3 is very flexible this way. Not just for positions of modules but also for colours. Again I suggest you take 5 mins and read the article I first linked to. 🙂 It may help to understand what I mean.

1 user says Thank You to swissa for this useful post

1. waelali

[Author]

Posts