Joomla Templates Club 406,261 posts

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#195702

hi, i created a custom.css file in /templates/ja_social_t3/css with class
.t3-sidebar .t3-module .module-title-red
to give Module a new style. i’v added
module-title-red
in Module suffix, but unfortunately it does not work..your glossary does also not help me here http://www.joomlart.com/glossary-joomla/module-class-suffix

can you please explain me step by step wich module suffix name should i add in module and what class name should i use in custom.css file?

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#526447

@testcouch,

When you add the module class suffix, you need to leave a white space before the class suffix name.

In this case, you need to add: ” module-title-red”. Please try again.

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#526596

@nazario A

thanks for your tip with space, but i already tried this..but the Suffix does not work.

let us Start from the ground..maybe we can fix then my problem.

What i trie to achieve?

I want to give module-title from Module “Blog Categories” instead of blue a red color!

What i need?

I need the correct css Code for my costum.css file and the Suffix for Blog Categories Module.

Please try this first on your Demo Page. many thanks

---

Attachments:

1. 
2. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#526865

@testcouch,

Please try to open file: /templates/your_template_name/css/custom.css (If not exists, plg create one), then add this rule:

.t3-module.modulemodule-title-red .module-title {
background: red;
}

Let me know how it goes

1 user says Thank You to Nazario A for this useful post

1. testcouch

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#526974

<em>@Nazario A 416553 wrote:</em><blockquote>@testcouch,

Please try to open file: /templates/your_template_name/css/custom.css (If not exists, plg create one), then add this rule:

.t3-module.modulemodule-title-red .module-title {
background: red;
}

Let me know how it goes</blockquote>

many thanks the module suffix module-title-red works now 🙂

P.S. i do not use a white space before the class suffix name..

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#527038

@ Nazario A

please check my site again..i got a issue with module title on mobile.

red module-title looks perfect but the yellow module-title is a bit mess on mobile view.

see screenshot

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#527159

@testcouch,

Please open file /templates/your_template_name/css/custom.css then add this rule:

@media (min-width: 320px) and (max-width: 480px) {
.t3-content.span9.pull-right {
float: none;
}
}

Hope this helps

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#527351

<em>@Nazario A 416910 wrote:</em><blockquote>@testcouch,

Please open file /templates/your_template_name/css/custom.css then add this rule:

@media (min-width: 320px) and (max-width: 480px) {
.t3-content.span9.pull-right {
float: none;
}
}

Hope this helps</blockquote>

thanks for your css, it works on iPhone 4/5 vertical but not on horizontal view!

P.S. i’v testet also mobile devices like samsung S4 horizontal view and found there other issues with module and content position inside JA Social! for this problem i will open a new thread cause it’s not longer related to module suffix.

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#527477

@testcouch,

You need to add the max-width so that above CSS will be applied to all devices that have screen size from 320px to 640px:

@media (min-width: 320px) and (max-width: 640px) {
.t3-content.span9.pull-right {
float: none;
}
}

[Author]

Posts