Joomla Templates Club 406,261 posts

[mx5gr Friend mx5grJoin date: September 2009Posts: 62Downloads:0Uploads:2 Thanks: 2 Thanked: 1 times in 1 posts]

#154533

We have been testing JA Social and we want to perform some customizations before proceeding.

First of all, we want to change the background of a module, by providing a module suffix. We use:


div.ja-moduletable.moduletable_banners .ja-box-ct ,div.moduletable.moduletable_banners .ja-box-ct{
background: #DCDCDC! important;
}


where “_banners” is the module suffix that we are using.

However, when the above tag is added, the entire design of the module box with the contents is destroyed. How can we preserve the rounded box design but change the module background for the specific suffix?

In addiion, we are trying to add a background image to JA-Tabs. We use mod_jatabs for publishing two other modules. However, when we add the backround:


div.ja-moduletable-news h3, div.moduletable-news h3 {
background: url(../images/news.gif) no-repeat left top;
color: #fff;
font-size: 110%;
font-family: "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
}


(“-news” is the module suffix) then the same background appears to tabs as well. We want the background to appear ONLY at mod_jatabs header and not within the tabs titles themselves.

We have been struggling with those, to no effect. Can you help?

[hilfiger Friend hilfigerJoin date: September 2010Posts: 76Downloads:0Uploads:11 Thanks: 17 Thanked: 6 times in 1 posts]

#356376

Ive been strugling with this yesterday too, with same results. Modules lose rounded corners.

Also didnt find where to change the text colors of the module with the new sufix

[mx5gr Friend mx5grJoin date: September 2009Posts: 62Downloads:0Uploads:2 Thanks: 2 Thanked: 1 times in 1 posts]

#356377

Anyone to the rescue?

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#356378

<em>@mx5gr 195076 wrote:</em><blockquote>How can we preserve the rounded box design but change the module background for the specific suffix?</blockquote>

Try add this at end of template.css file along with same suffix entered earlier by you

#ja-container div.moduletable_basic{background:#ccc;}

[mx5gr Friend mx5grJoin date: September 2009Posts: 62Downloads:0Uploads:2 Thanks: 2 Thanked: 1 times in 1 posts]

#356385

<em>@aman204 195089 wrote:</em><blockquote>Try add this at end of template.css file along with same suffix entered earlier by you

#ja-container div.moduletable_basic{background:#ccc;}</blockquote>

Tried


#ja-container div.moduletable_basic{background:#ccc;}


and


#ja-container div.moduletable-news{background:#ccc;}


(“-news” is the suffix)


#ja-container div.moduletable_basic.moduletable-news{background:#ccc;}


to no effect…

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#356396

Hi mx5gr,

Will it be possible for you to please pm me superadmin details to take closer look as i tried it on local and seems to be working fine

To know, Please check if you have enabled development mode in template parameters and ensure to have template.css file writable

[mx5gr Friend mx5grJoin date: September 2009Posts: 62Downloads:0Uploads:2 Thanks: 2 Thanked: 1 times in 1 posts]

#356484

<em>@aman204 195116 wrote:</em><blockquote>Hi mx5gr,

Will it be possible for you to please pm me superadmin details to take closer look as i tried it on local and seems to be working fine

To know, Please check if you have enabled development mode in template parameters and ensure to have template.css file writable</blockquote>

Please check your PM

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#356569

I am unable to see any such reference added::

#ja-container div.moduletable_banners{background:#ccc;}

[Urszula Dziki Friend Urszula DzikiJoin date: September 2014Posts: 221Downloads:0Uploads:44 Thanks: 34 Thanked: 20 times in 1 posts]

#356681

all works well for me I have changed colours for backgrounds for modules and titles in template.css and all work fine for me they still grab rounded corners

[Urszula Dziki Friend Urszula DzikiJoin date: September 2014Posts: 221Downloads:0Uploads:44 Thanks: 34 Thanked: 20 times in 1 posts]

#356735

but i spoke too soon. Work perfect but in exploer of couse not .. i can see your point now why you got not rounded corners. So I removed totally template-ie.css ( not sure if it is right way to do so ) but worked for me
adjusted also my templates for other backgrounds for explorer 8 7 etc I checked so far all explorers versions except 6 and worked

[hilfiger Friend hilfigerJoin date: September 2010Posts: 76Downloads:0Uploads:11 Thanks: 17 Thanked: 6 times in 1 posts]

#356738

<em>@di38 195580 wrote:</em><blockquote>but i spoke too soon. Work perfect but in exploer of couse not .. i can see your point now why you got not rounded corners.</blockquote>

Can u make a guide for this?

Thanx

[Urszula Dziki Friend Urszula DzikiJoin date: September 2014Posts: 221Downloads:0Uploads:44 Thanks: 34 Thanked: 20 times in 1 posts]

#356743

I am not an expert in css so it might be better way to do so.here is to create box like this

but you can play with background too

Anyhow what I did I added to template.css

/*my suffix green title background*/
div.ja-moduletablegreen h3, div.moduletablegreen h3 {

background: url(../images/greenbg.gif) repeat-x left top #11663b;

and placed my suffix ‘green’ in module But you can do combination of these with bg like this for example

It didn’t work for me in explorer though and i had extra errors too so I simply delated template-ie.css I don’t know why…..not so smart but somehow I had various errors when this file was in my css folder. It might be wrong but working for me and I tested on most of the browsers.

I hope that helps….let me know

---

Attachments:

1. 
2. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#356749

You try to

replace:

div.ja-moduletablegreen h3, div.moduletablegreen h3 {

background: url(../images/greenbg.gif) repeat-x left top #11663b;

}

to=>

div.ja-moduletablegreen h3, div.moduletablegreen h3 {

background: url(../images/greenbg.gif) repeat-x left top #11663b!important;

}

1 user says Thank You to Saguaros for this useful post

1. Urszula Dziki

[Urszula Dziki Friend Urszula DzikiJoin date: September 2014Posts: 221Downloads:0Uploads:44 Thanks: 34 Thanked: 20 times in 1 posts]

#356790

it worked for me without !important but thank you 🙂 i will do that too 🙂

[Author]

Posts