Module suffix in Grid

Hi!

I am trying to implement a suffix in a module placed in the grid.

Right now i have 7 grid positions with 7 different modules, all of them is nspGK5. What i am trying to do is to change the font size of the H3 tag but not on all modules in the grid.
So I created suffix on some of the modules but i cant get them to work in the grid. If i change the position and move the module to another page of the site and not on the grid the suffix work fine, but when it is in a grid position the module doesnt read the suffix. It also works if i put the suffix in the gkGrid module but then it will affect all the modules in the grid. Is there something I can do to make this work?

Regards
Oskar

Do you have a live link where this module is so we can check.

Sorry no link.

The site is on localhost right now, but i can upload it so you can check. I'll send a PM with link and login to backend.

I've used suffixes before, and as i wrote in my last post it works but when I use the same module in the grid the suffixes won't read. Don't know if it helps to have a live site but i'll fix it.

I've found a solution which will work for me but my issue is maybe something you should look into anyways.

What i've done (maybe someone else is looking for the same thing) is to locate the grid where you want a different style with firebug or directly in Chrome.
For example I want to change grid5 which for my site is .gkGridElement.gkGrid-grid5-1 and add an H3 tag so it should look something like this

Code: Select all

.gkGridElement.gkGrid-grid5-1 h3 {font-size:14px;}

Will probably change in the tablet and mobile .css as well.

Maybe it's possible to add suffixes in every grid in the GK Grid module in the future?

Just a thought.

I have already replied to your private message but I have read your question wrong.

Normally NSP modules do add their module id as div id to add individual css but I guess it is not implemented in some of the portal modes. We will look into that. Individual grid slots already have css class.

You can use following grid css class to accomplish what you want. Try to use grid id in case you have other grid modules.

Code: Select all

#gk-grid-203 .gkGrid-grid1-1 .gkNspPM-GridTitleOverlay > figcaption h3 { font-size: 10px; }
#gk-grid-203 .gkGrid-grid2-1 .gkNspPM-GridTitleOverlay > figcaption h3 { font-size: 10px; }
#gk-grid-203 .gkGrid-grid3-1 .gkNspPM-GridTitleOverlay > figcaption h3 { font-size: 10px; }
#gk-grid-203 .gkGrid-grid4-1 .gkNspPM-GridTitleOverlay > figcaption h3 { font-size: 10px; }
#gk-grid-203 .gkGrid-grid5-1 .gkNspPM-GridTitleOverlay > figcaption h3 { font-size: 10px; }


I've skipped the ID because i will only use one instance of the module but it's good to think about if i decide to use more in the future.

Marking this topic as solved, see you around...