Public Forums 71,145 posts

[romagromov Friend romagromovJoin date: July 2009Posts: 23Downloads:7Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#198074

HI!

I created new style for module title – in file custom.css added new class

.module-title {
margin-bottom: 20px;
background: #008FE0
padding: 15px;
color: #FFF
}

http://monosnap.com/image/RLOd65HyHiV49UM1zJKReLDL8NvxF9.png

But now all modules have same title style.

How I can add new module suffixes with different styles for module titile and module body?
Something like mysuffix.module-title and mysuffix.module-ct ?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#536308

You can use module class suffix to distinguish that module from others with regard to the css classes it uses.

Using the JA OnePage template as an example . . . . .

You can create module class suffix as follows . . . .

1. Add new code block into templates/ja_onepage/css/custom.css

example:


.hero-unit {
margin: 59px 0 0;
padding: 0;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

2. Add your module class suffix within the selected module as follows:

Here are some additional resources concerning using module class suffix in Joomla . . . ..

JOOMLA DOCS: MODULE CLASS SUFFIX

USING TYPOGRAPHY PAGE to IDENTIFY MODULE CLASSES

Hope That Helps

😎

[romagromov Friend romagromovJoin date: July 2009Posts: 23Downloads:7Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#536311

Thanks.
I understand this.
I added your example to custom css and edited suffix field in module.
Now all module area have new style.
But how I can add different styles for module title and module body?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#536313

<em>@romagromov 428785 wrote:</em><blockquote>Thanks.
I understand this.
I added your example to custom css and edited suffix field in module.
Now all module area have new style.
But how I can add different styles for module title and module body?</blockquote>

You would need to create specific CSS classes for those elements.

[romagromov Friend romagromovJoin date: July 2009Posts: 23Downloads:7Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#536314

I explain:

When I set

.module-title {
margin-bottom: 20px;
background: #008FE0
padding: 15px;
color: #FFF

Only titles have blue background.

But when I set

.blue_style {
margin-bottom: 20px;
background: #008FE0
padding: 15px;
color: #FFF
}

and then set suffix for module ” blue_style”
all module is blue

I need blue title and red background…

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

#536340

Could you post URL of page where this module locates here so that we can have a closer look?

[romagromov Friend romagromovJoin date: July 2009Posts: 23Downloads:7Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#536349

Yes, it is your Purity III template, you can check any module.

http://moy1dom.ru/index.php/joomla-pages/other-pages/single-articles
PLease, point me in right direction.

I need blue title and red background…

But I can’t undestand, how to create new class (suffix) for module title and body.

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

#536477

In this single article page, there is a menu module which has

Suppose that you’ve already have /purity_iii/css/custom.css file, you can try adding this css rule:


.t3-module.module_menu .module-inner .module-title {
background: /*your color goes here*/;
}

.t3-module.module_menu .module-inner .module-ct {
background: /*your color goes here*/;
}


Hope this helps.

1 user says Thank You to Saguaros for this useful post

1. romagromov

[romagromov Friend romagromovJoin date: July 2009Posts: 23Downloads:7Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#536504

That not I need…

Ok, see:

I created new style:

h3.mtblue {
margin-bottom: 20px;
background: #008FE0
padding: 15px;
color: #FFF
}

Then I set this style in suffix field

But this method don’t work…

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

#536618

Could you send me the URL of page where I can see this module?

[romagromov Friend romagromovJoin date: July 2009Posts: 23Downloads:7Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#536684

Yes, of cource.
Here page

http://moy1dom.ru/index.php/joomla-pages/other-pages/tag

I set suffix mtblue for this modules:

Blog Categories
Who’s Online

and I added in custom.css new class

h3.mtblue {
margin-bottom: 20px;
background: #008FE0
padding: 15px;
color: #FFF
}

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

#536807

You can try with this css rule:


.t3-module.mtblue .module-inner .module-title {
margin-bottom: 20px;
background: #008FE0
padding: 15px;
color: #FFF
}


2 users say Thank You to Saguaros for this useful post

1. romagromov
2. TomC

[romagromov Friend romagromovJoin date: July 2009Posts: 23Downloads:7Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#536817

Yes!
It works. Now I can create different colors for modules title.

But how I can create new style (suffix) for module body?

[romagromov Friend romagromovJoin date: July 2009Posts: 23Downloads:7Uploads:1 Thanks: 5 Thanked: 1 times in 1 posts]

#536849

Ok, I got it.

For module body:

.t3-module.mtblue .module-ct {
border: 1px solid #f3f3f3
padding: 10px;
}

1 user says Thank You to romagromov for this useful post

1. Saguaros

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#553864

I’m trying to create the same thing, but I want only to change the title of the module not the body like this image:4

but I’m not able to do that with Module Class Suffix.
Now all my module getting the same thing, and I want only to specify some of them not the rest.
I tried with this

.t3-module.mtblue .module-inner .module-title {
all my code here
}

then I inserted: mtblue in the Module Class Suffix but it did not work for me.

Now I inserted this code below,, but it changes all my modules with the same style, all I need as mentioned to specify some moudle with the Class Suffix, please help.:

.module-title{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
opacity: 0.88;
padding: 20px;
overflow: hidden;
border: none;
-webkit-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: #08677e
-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
}

---

Attachments:

1. 

[Author]

Posts