Davyc

Hey there! Check this out 😉 
Perhaps it could be native one day, but for now this should do the trick! 
 
 

Click the Notification bell icon in the upper right of the ACP and then Notification Settings.

This is already available using the ACP notification settings..

Correct - but we shouldn't have to build new page templates, and not everyone is up to doing this, so whilst you are correct I am asking for something out of the box and not having to make new templates.  I can do this myself, but I am asking on behalf of those who can't 🙂
 

🥲 Appreciate that @Davyc!!

We definitely want to bring this kind of functionality to Pages. It's high on our list.

Correct - but we shouldn't have to build new page templates, and not everyone is up to doing this, so whilst you are correct I am asking for something out of the box and not having to make new templates.  I can do this myself, but I am asking on behalf of those who can't 🙂
 

Therein lies your problem. 'you think it would enhance your forum' - have you asked your members what they think of this solution towards politeness?  After all, asking on here is one thing and you have had your responses from a few who have taken the time to respond, but what about your members? They are the ones who are going to have to live with this if you are able to implement it.  I believe their feedback would be more valuable to you than any on here.
As for this idea to stop people in their tracks and make them think before they post, it has the potential to stifle their desire to respond; emotions and passion are essential to good debate, these elements are what 'make people think' - this doesn't mean they have to be offensive, that's what your rules are there for, to remind them what is and isn't permissible. If anyone steps over the line, then you and your moderators are there to step in and do the job you're there for.  You have an inbuilt warning system, use that instead of penalising the many for the transgressions of the few.
Personally, if this was implemented in the core and it was not optional, I would go elsewhere for my community software.  I would not impose this on my members, but as I mentioned in an earlier post, it's your site, your forum, you do as you think best, but this is definitely not for the core, ask a developer to make this plugin/app for you, but I really would ask your members first if they believe this to be a good idea.  Do a poll, so they don't even have to say what they think 🙂
 

@kmk OK here we go - first you need to make a change to the Club Card template - you can see where I commented out the original positioning of the code that need to be moved and where I moved it to.
{{$coverPhoto = $club->coverPhoto( FALSE );}} {{$memberStatus = $club->memberStatus( \IPS\Member::loggedIn() );}} <div class="cClubCard {{if settings.clubs_require_approval and !$club->approved}}{{if $approvalQueue}}ipsBox{{else}}ipsModerated{{endif}}{{endif}}" {{if $approvalQueue}}id="elApprovePanel"{{endif}}> {{if \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER ) )}} <span class='ipsBadge ipsBadge_positive ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_member"}"><i class='fa fa-check'></i></span> {{elseif \in_array( $memberStatus, array( $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) )}} <span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_expired"}"><i class='fa fa-exclamation-triangle'></i></span> {{elseif $memberStatus == $club::STATUS_INVITED or $memberStatus == $club::STATUS_INVITED_BYPASSING_PAYMENT}} <span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_invited"}"><i class='fa fa-envelope'></i></span> {{elseif $memberStatus == $club::STATUS_REQUESTED}} <span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_requested_desc_short"}"><i class='fa fa-clock-o'></i></span> {{elseif $memberStatus == $club::STATUS_WAITING_PAYMENT}} <span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_awaiting_payment_title"}"><i class='fa fa-check'></i></span> {{endif}} <div class='ipsPageHead_special' data-controller='core.global.core.coverPhoto' data-url="{$club->url()->csrf()}" data-coverOffset='{$coverPhoto->offset}'> {{$cfObject = $coverPhoto->object;}} {{if $coverPhoto->file}} <div class='ipsCoverPhoto_container'> {{if settings.lazy_load_enabled}} <img src="{expression="\IPS\Text\Parser::blankImage()"}" data-src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'> {{else}} <img src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'> {{endif}} </div> {{elseif ! empty( $cfObject::$coverPhotoDefault )}} <div class='ipsCoverPhoto_container' style="background-color: {$coverPhoto->object->coverPhotoBackgroundColor()}"> <img src='{resource="pattern.png" app="core" location="global"}' class='ipsCoverPhoto_photo' alt=''> </div> {{endif}} {template="clubIcon" group="clubs" app="core" params="$club, 'medium'"} <!-- <h2 class="ipsType_reset cClubCard_title ipsType_blendLinks"> <span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'> {{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span> {{elseif $club->featured}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> {{endif}} <a href='{$club->url()}' title="{$club->name}">{$club->name}</a> </span> </h2> --> </div> <p class='ipsType_reset ipsType_light ipsType_medium cClubCard_info'> {lang="club_{$club->type}"} {{if $club->type !== $club::TYPE_PUBLIC}} &nbsp;&middot;&nbsp; {lang="club_members_count" pluralize="$club->members"} {{endif}} {{if $club->last_activity}} &nbsp;&middot;&nbsp; {lang="club_last_activity"} {datetime="$club->last_activity"} {{endif}} {{if ( \in_array( $club->type, array( $club::TYPE_OPEN, $club::TYPE_CLOSED ) ) or \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER, $club::STATUS_INVITED, $club::STATUS_INVITED_BYPASSING_PAYMENT, $club::STATUS_REQUESTED, $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) ) ) and $priceBlurb = $club->priceBlurb()}} <br> <span class="ipsType_medium"> <span class="cClubPrice">{$priceBlurb}</span> {{if $club->isPaid() and $club->joiningFee() and \IPS\Member::loggedIn()->language()->checkKeyExists('nexus_tax_explain_val')}} <span class='cNexusPrice_tax ipsType_light'>{lang="nexus_tax_explain_val"}</span> {{endif}} </span> {{endif}} </p> <h2 class="ipsType_reset cClubCard_title ipsType_blendLinks"> <span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'> {{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span> {{elseif $club->featured}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> {{endif}} <a href='{$club->url()}' title="{$club->name}">{$club->name}</a> </span> </h2> <div class='ipsPad'> {{if $club->about}} <div class='ipsType_richText ipsType_medium' data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='2 lines'> {$club->about} </div> {{else}} <div class='ipsType_light ipsType_medium'> <em>{lang="club_no_about"}</em> </div> {{endif}} {{if $club->type != $club::TYPE_PUBLIC}} {{if $club->canViewMembers() }} <hr class='ipsHr ipsHr_small'> <ul class='cClubCard_memberList ipsList_inline ipsList_noSpacing'> {{foreach $club->randomTenMembers() as $member}} <li> {template="userPhotoFromData" group="global" app="core" params="$member['core_members']['member_id'], $member['core_members']['name'], $member['core_members']['members_seo_name'], \IPS\Member::photoUrl( $member['core_members'] ), 'tiny'"} </li> {{endforeach}} </ul> {{endif}} {{if $club->canJoin()}} <hr class='ipsHr ipsHr_small'> <a class="ipsButton ipsButton_small ipsButton_primary ipsButton_fullWidth" href="{$club->url()->setQueryString('do', 'join')->csrf()}" {{if $club->isPaid() and $memberStatus !== $club::STATUS_INVITED_BYPASSING_PAYMENT}}data-confirm data-confirmIcon="info" data-confirmMessage="{lang="club_membership_item"}" data-confirmSubmessage="{$club->memberFeeMessage()}"{{endif}}>{lang="club_join"}</a> {{endif}} {{endif}} </div> </div> Next is the CSS which you need to put into your custom CSS file:
/* Changes to Clubs */ [data-pagemodule="clubs"] .ipsApp .ipsSpacer_top, .ipsApp .ipsSpacer_both { margin-top: 0px; } .cClubCard .ipsPageHead_special { height: 185px; } .cClubCard .cClubCard_info { margin-left: 5px !important; margin-top: 7px; margin-bottom: 10px; } .ipsType_reset.cClubCard_title.ipsType_blendLinks .ipsPageHead_barText_small { background: rgb(4 128 93); line-height: 1; padding: 12px 10px; font-weight: 500; } [data-pagemodule="clubs"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 48px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pagemodule="clubs"] .ipsType_pageTitle { padding-left: 20px; } [data-pageid="1"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="2"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="3"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="4"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } You may not need all of the CSS code, but if you have pages in your club that is where this comes into play and you will need to find out what your page ID's are.  
[data-pageid="1"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } The page ID section makes some alignment changes.  Just play around with the CSS to achieve the look you want.  Much of it is alignment issues that really annoy the hell out of me; my designer OCD kicking in lol.
Let me know how you get on and enjoy 🙂
 

@kmk OK here we go - first you need to make a change to the Club Card template - you can see where I commented out the original positioning of the code that need to be moved and where I moved it to.
{{$coverPhoto = $club->coverPhoto( FALSE );}} {{$memberStatus = $club->memberStatus( \IPS\Member::loggedIn() );}} <div class="cClubCard {{if settings.clubs_require_approval and !$club->approved}}{{if $approvalQueue}}ipsBox{{else}}ipsModerated{{endif}}{{endif}}" {{if $approvalQueue}}id="elApprovePanel"{{endif}}> {{if \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER ) )}} <span class='ipsBadge ipsBadge_positive ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_member"}"><i class='fa fa-check'></i></span> {{elseif \in_array( $memberStatus, array( $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) )}} <span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_expired"}"><i class='fa fa-exclamation-triangle'></i></span> {{elseif $memberStatus == $club::STATUS_INVITED or $memberStatus == $club::STATUS_INVITED_BYPASSING_PAYMENT}} <span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_invited"}"><i class='fa fa-envelope'></i></span> {{elseif $memberStatus == $club::STATUS_REQUESTED}} <span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_requested_desc_short"}"><i class='fa fa-clock-o'></i></span> {{elseif $memberStatus == $club::STATUS_WAITING_PAYMENT}} <span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_awaiting_payment_title"}"><i class='fa fa-check'></i></span> {{endif}} <div class='ipsPageHead_special' data-controller='core.global.core.coverPhoto' data-url="{$club->url()->csrf()}" data-coverOffset='{$coverPhoto->offset}'> {{$cfObject = $coverPhoto->object;}} {{if $coverPhoto->file}} <div class='ipsCoverPhoto_container'> {{if settings.lazy_load_enabled}} <img src="{expression="\IPS\Text\Parser::blankImage()"}" data-src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'> {{else}} <img src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'> {{endif}} </div> {{elseif ! empty( $cfObject::$coverPhotoDefault )}} <div class='ipsCoverPhoto_container' style="background-color: {$coverPhoto->object->coverPhotoBackgroundColor()}"> <img src='{resource="pattern.png" app="core" location="global"}' class='ipsCoverPhoto_photo' alt=''> </div> {{endif}} {template="clubIcon" group="clubs" app="core" params="$club, 'medium'"} <!-- <h2 class="ipsType_reset cClubCard_title ipsType_blendLinks"> <span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'> {{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span> {{elseif $club->featured}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> {{endif}} <a href='{$club->url()}' title="{$club->name}">{$club->name}</a> </span> </h2> --> </div> <p class='ipsType_reset ipsType_light ipsType_medium cClubCard_info'> {lang="club_{$club->type}"} {{if $club->type !== $club::TYPE_PUBLIC}} &nbsp;&middot;&nbsp; {lang="club_members_count" pluralize="$club->members"} {{endif}} {{if $club->last_activity}} &nbsp;&middot;&nbsp; {lang="club_last_activity"} {datetime="$club->last_activity"} {{endif}} {{if ( \in_array( $club->type, array( $club::TYPE_OPEN, $club::TYPE_CLOSED ) ) or \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER, $club::STATUS_INVITED, $club::STATUS_INVITED_BYPASSING_PAYMENT, $club::STATUS_REQUESTED, $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) ) ) and $priceBlurb = $club->priceBlurb()}} <br> <span class="ipsType_medium"> <span class="cClubPrice">{$priceBlurb}</span> {{if $club->isPaid() and $club->joiningFee() and \IPS\Member::loggedIn()->language()->checkKeyExists('nexus_tax_explain_val')}} <span class='cNexusPrice_tax ipsType_light'>{lang="nexus_tax_explain_val"}</span> {{endif}} </span> {{endif}} </p> <h2 class="ipsType_reset cClubCard_title ipsType_blendLinks"> <span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'> {{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span> {{elseif $club->featured}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> {{endif}} <a href='{$club->url()}' title="{$club->name}">{$club->name}</a> </span> </h2> <div class='ipsPad'> {{if $club->about}} <div class='ipsType_richText ipsType_medium' data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='2 lines'> {$club->about} </div> {{else}} <div class='ipsType_light ipsType_medium'> <em>{lang="club_no_about"}</em> </div> {{endif}} {{if $club->type != $club::TYPE_PUBLIC}} {{if $club->canViewMembers() }} <hr class='ipsHr ipsHr_small'> <ul class='cClubCard_memberList ipsList_inline ipsList_noSpacing'> {{foreach $club->randomTenMembers() as $member}} <li> {template="userPhotoFromData" group="global" app="core" params="$member['core_members']['member_id'], $member['core_members']['name'], $member['core_members']['members_seo_name'], \IPS\Member::photoUrl( $member['core_members'] ), 'tiny'"} </li> {{endforeach}} </ul> {{endif}} {{if $club->canJoin()}} <hr class='ipsHr ipsHr_small'> <a class="ipsButton ipsButton_small ipsButton_primary ipsButton_fullWidth" href="{$club->url()->setQueryString('do', 'join')->csrf()}" {{if $club->isPaid() and $memberStatus !== $club::STATUS_INVITED_BYPASSING_PAYMENT}}data-confirm data-confirmIcon="info" data-confirmMessage="{lang="club_membership_item"}" data-confirmSubmessage="{$club->memberFeeMessage()}"{{endif}}>{lang="club_join"}</a> {{endif}} {{endif}} </div> </div> Next is the CSS which you need to put into your custom CSS file:
/* Changes to Clubs */ [data-pagemodule="clubs"] .ipsApp .ipsSpacer_top, .ipsApp .ipsSpacer_both { margin-top: 0px; } .cClubCard .ipsPageHead_special { height: 185px; } .cClubCard .cClubCard_info { margin-left: 5px !important; margin-top: 7px; margin-bottom: 10px; } .ipsType_reset.cClubCard_title.ipsType_blendLinks .ipsPageHead_barText_small { background: rgb(4 128 93); line-height: 1; padding: 12px 10px; font-weight: 500; } [data-pagemodule="clubs"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 48px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pagemodule="clubs"] .ipsType_pageTitle { padding-left: 20px; } [data-pageid="1"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="2"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="3"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="4"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } You may not need all of the CSS code, but if you have pages in your club that is where this comes into play and you will need to find out what your page ID's are.  
[data-pageid="1"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } The page ID section makes some alignment changes.  Just play around with the CSS to achieve the look you want.  Much of it is alignment issues that really annoy the hell out of me; my designer OCD kicking in lol.
Let me know how you get on and enjoy 🙂
 

With a few simple template changes and some custom CSS I've change the way grid forums appear:

Forum name is under the image as opposed to being over the image and the last entry is shown below.  It just makes things look neater and tidier, at least it does for me 🙂
 

You rock 👏 

@kmk OK here we go - first you need to make a change to the Club Card template - you can see where I commented out the original positioning of the code that need to be moved and where I moved it to.
{{$coverPhoto = $club->coverPhoto( FALSE );}} {{$memberStatus = $club->memberStatus( \IPS\Member::loggedIn() );}} <div class="cClubCard {{if settings.clubs_require_approval and !$club->approved}}{{if $approvalQueue}}ipsBox{{else}}ipsModerated{{endif}}{{endif}}" {{if $approvalQueue}}id="elApprovePanel"{{endif}}> {{if \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER ) )}} <span class='ipsBadge ipsBadge_positive ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_member"}"><i class='fa fa-check'></i></span> {{elseif \in_array( $memberStatus, array( $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) )}} <span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_expired"}"><i class='fa fa-exclamation-triangle'></i></span> {{elseif $memberStatus == $club::STATUS_INVITED or $memberStatus == $club::STATUS_INVITED_BYPASSING_PAYMENT}} <span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_invited"}"><i class='fa fa-envelope'></i></span> {{elseif $memberStatus == $club::STATUS_REQUESTED}} <span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_requested_desc_short"}"><i class='fa fa-clock-o'></i></span> {{elseif $memberStatus == $club::STATUS_WAITING_PAYMENT}} <span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_awaiting_payment_title"}"><i class='fa fa-check'></i></span> {{endif}} <div class='ipsPageHead_special' data-controller='core.global.core.coverPhoto' data-url="{$club->url()->csrf()}" data-coverOffset='{$coverPhoto->offset}'> {{$cfObject = $coverPhoto->object;}} {{if $coverPhoto->file}} <div class='ipsCoverPhoto_container'> {{if settings.lazy_load_enabled}} <img src="{expression="\IPS\Text\Parser::blankImage()"}" data-src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'> {{else}} <img src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'> {{endif}} </div> {{elseif ! empty( $cfObject::$coverPhotoDefault )}} <div class='ipsCoverPhoto_container' style="background-color: {$coverPhoto->object->coverPhotoBackgroundColor()}"> <img src='{resource="pattern.png" app="core" location="global"}' class='ipsCoverPhoto_photo' alt=''> </div> {{endif}} {template="clubIcon" group="clubs" app="core" params="$club, 'medium'"} <!-- <h2 class="ipsType_reset cClubCard_title ipsType_blendLinks"> <span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'> {{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span> {{elseif $club->featured}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> {{endif}} <a href='{$club->url()}' title="{$club->name}">{$club->name}</a> </span> </h2> --> </div> <p class='ipsType_reset ipsType_light ipsType_medium cClubCard_info'> {lang="club_{$club->type}"} {{if $club->type !== $club::TYPE_PUBLIC}} &nbsp;&middot;&nbsp; {lang="club_members_count" pluralize="$club->members"} {{endif}} {{if $club->last_activity}} &nbsp;&middot;&nbsp; {lang="club_last_activity"} {datetime="$club->last_activity"} {{endif}} {{if ( \in_array( $club->type, array( $club::TYPE_OPEN, $club::TYPE_CLOSED ) ) or \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER, $club::STATUS_INVITED, $club::STATUS_INVITED_BYPASSING_PAYMENT, $club::STATUS_REQUESTED, $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) ) ) and $priceBlurb = $club->priceBlurb()}} <br> <span class="ipsType_medium"> <span class="cClubPrice">{$priceBlurb}</span> {{if $club->isPaid() and $club->joiningFee() and \IPS\Member::loggedIn()->language()->checkKeyExists('nexus_tax_explain_val')}} <span class='cNexusPrice_tax ipsType_light'>{lang="nexus_tax_explain_val"}</span> {{endif}} </span> {{endif}} </p> <h2 class="ipsType_reset cClubCard_title ipsType_blendLinks"> <span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'> {{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span> {{elseif $club->featured}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> {{endif}} <a href='{$club->url()}' title="{$club->name}">{$club->name}</a> </span> </h2> <div class='ipsPad'> {{if $club->about}} <div class='ipsType_richText ipsType_medium' data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='2 lines'> {$club->about} </div> {{else}} <div class='ipsType_light ipsType_medium'> <em>{lang="club_no_about"}</em> </div> {{endif}} {{if $club->type != $club::TYPE_PUBLIC}} {{if $club->canViewMembers() }} <hr class='ipsHr ipsHr_small'> <ul class='cClubCard_memberList ipsList_inline ipsList_noSpacing'> {{foreach $club->randomTenMembers() as $member}} <li> {template="userPhotoFromData" group="global" app="core" params="$member['core_members']['member_id'], $member['core_members']['name'], $member['core_members']['members_seo_name'], \IPS\Member::photoUrl( $member['core_members'] ), 'tiny'"} </li> {{endforeach}} </ul> {{endif}} {{if $club->canJoin()}} <hr class='ipsHr ipsHr_small'> <a class="ipsButton ipsButton_small ipsButton_primary ipsButton_fullWidth" href="{$club->url()->setQueryString('do', 'join')->csrf()}" {{if $club->isPaid() and $memberStatus !== $club::STATUS_INVITED_BYPASSING_PAYMENT}}data-confirm data-confirmIcon="info" data-confirmMessage="{lang="club_membership_item"}" data-confirmSubmessage="{$club->memberFeeMessage()}"{{endif}}>{lang="club_join"}</a> {{endif}} {{endif}} </div> </div> Next is the CSS which you need to put into your custom CSS file:
/* Changes to Clubs */ [data-pagemodule="clubs"] .ipsApp .ipsSpacer_top, .ipsApp .ipsSpacer_both { margin-top: 0px; } .cClubCard .ipsPageHead_special { height: 185px; } .cClubCard .cClubCard_info { margin-left: 5px !important; margin-top: 7px; margin-bottom: 10px; } .ipsType_reset.cClubCard_title.ipsType_blendLinks .ipsPageHead_barText_small { background: rgb(4 128 93); line-height: 1; padding: 12px 10px; font-weight: 500; } [data-pagemodule="clubs"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 48px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pagemodule="clubs"] .ipsType_pageTitle { padding-left: 20px; } [data-pageid="1"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="2"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="3"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="4"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } You may not need all of the CSS code, but if you have pages in your club that is where this comes into play and you will need to find out what your page ID's are.  
[data-pageid="1"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } The page ID section makes some alignment changes.  Just play around with the CSS to achieve the look you want.  Much of it is alignment issues that really annoy the hell out of me; my designer OCD kicking in lol.
Let me know how you get on and enjoy 🙂
 

@kmk OK here we go - first you need to make a change to the Club Card template - you can see where I commented out the original positioning of the code that need to be moved and where I moved it to.
{{$coverPhoto = $club->coverPhoto( FALSE );}} {{$memberStatus = $club->memberStatus( \IPS\Member::loggedIn() );}} <div class="cClubCard {{if settings.clubs_require_approval and !$club->approved}}{{if $approvalQueue}}ipsBox{{else}}ipsModerated{{endif}}{{endif}}" {{if $approvalQueue}}id="elApprovePanel"{{endif}}> {{if \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER ) )}} <span class='ipsBadge ipsBadge_positive ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_member"}"><i class='fa fa-check'></i></span> {{elseif \in_array( $memberStatus, array( $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) )}} <span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_expired"}"><i class='fa fa-exclamation-triangle'></i></span> {{elseif $memberStatus == $club::STATUS_INVITED or $memberStatus == $club::STATUS_INVITED_BYPASSING_PAYMENT}} <span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_invited"}"><i class='fa fa-envelope'></i></span> {{elseif $memberStatus == $club::STATUS_REQUESTED}} <span class='ipsBadge ipsBadge_intermediary ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_requested_desc_short"}"><i class='fa fa-clock-o'></i></span> {{elseif $memberStatus == $club::STATUS_WAITING_PAYMENT}} <span class='ipsBadge ipsBadge_neutral ipsBadge_icon ipsBadge_large cClubCard_status' data-ipsTooltip title="{lang="club_awaiting_payment_title"}"><i class='fa fa-check'></i></span> {{endif}} <div class='ipsPageHead_special' data-controller='core.global.core.coverPhoto' data-url="{$club->url()->csrf()}" data-coverOffset='{$coverPhoto->offset}'> {{$cfObject = $coverPhoto->object;}} {{if $coverPhoto->file}} <div class='ipsCoverPhoto_container'> {{if settings.lazy_load_enabled}} <img src="{expression="\IPS\Text\Parser::blankImage()"}" data-src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'> {{else}} <img src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' alt='{$club->name}'> {{endif}} </div> {{elseif ! empty( $cfObject::$coverPhotoDefault )}} <div class='ipsCoverPhoto_container' style="background-color: {$coverPhoto->object->coverPhotoBackgroundColor()}"> <img src='{resource="pattern.png" app="core" location="global"}' class='ipsCoverPhoto_photo' alt=''> </div> {{endif}} {template="clubIcon" group="clubs" app="core" params="$club, 'medium'"} <!-- <h2 class="ipsType_reset cClubCard_title ipsType_blendLinks"> <span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'> {{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span> {{elseif $club->featured}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> {{endif}} <a href='{$club->url()}' title="{$club->name}">{$club->name}</a> </span> </h2> --> </div> <p class='ipsType_reset ipsType_light ipsType_medium cClubCard_info'> {lang="club_{$club->type}"} {{if $club->type !== $club::TYPE_PUBLIC}} &nbsp;&middot;&nbsp; {lang="club_members_count" pluralize="$club->members"} {{endif}} {{if $club->last_activity}} &nbsp;&middot;&nbsp; {lang="club_last_activity"} {datetime="$club->last_activity"} {{endif}} {{if ( \in_array( $club->type, array( $club::TYPE_OPEN, $club::TYPE_CLOSED ) ) or \in_array( $memberStatus, array( $club::STATUS_MEMBER, $club::STATUS_MODERATOR, $club::STATUS_LEADER, $club::STATUS_INVITED, $club::STATUS_INVITED_BYPASSING_PAYMENT, $club::STATUS_REQUESTED, $club::STATUS_EXPIRED, $club::STATUS_EXPIRED_MODERATOR ) ) ) and $priceBlurb = $club->priceBlurb()}} <br> <span class="ipsType_medium"> <span class="cClubPrice">{$priceBlurb}</span> {{if $club->isPaid() and $club->joiningFee() and \IPS\Member::loggedIn()->language()->checkKeyExists('nexus_tax_explain_val')}} <span class='cNexusPrice_tax ipsType_light'>{lang="nexus_tax_explain_val"}</span> {{endif}} </span> {{endif}} </p> <h2 class="ipsType_reset cClubCard_title ipsType_blendLinks"> <span class='ipsPageHead_barText_small ipsTruncate ipsTruncate_line'> {{if !$approvalQueue and settings.clubs_require_approval and !$club->approved}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="club_unapproved"}'><i class='fa fa-eye-slash'></i></span> {{elseif $club->featured}} <span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span> {{endif}} <a href='{$club->url()}' title="{$club->name}">{$club->name}</a> </span> </h2> <div class='ipsPad'> {{if $club->about}} <div class='ipsType_richText ipsType_medium' data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='2 lines'> {$club->about} </div> {{else}} <div class='ipsType_light ipsType_medium'> <em>{lang="club_no_about"}</em> </div> {{endif}} {{if $club->type != $club::TYPE_PUBLIC}} {{if $club->canViewMembers() }} <hr class='ipsHr ipsHr_small'> <ul class='cClubCard_memberList ipsList_inline ipsList_noSpacing'> {{foreach $club->randomTenMembers() as $member}} <li> {template="userPhotoFromData" group="global" app="core" params="$member['core_members']['member_id'], $member['core_members']['name'], $member['core_members']['members_seo_name'], \IPS\Member::photoUrl( $member['core_members'] ), 'tiny'"} </li> {{endforeach}} </ul> {{endif}} {{if $club->canJoin()}} <hr class='ipsHr ipsHr_small'> <a class="ipsButton ipsButton_small ipsButton_primary ipsButton_fullWidth" href="{$club->url()->setQueryString('do', 'join')->csrf()}" {{if $club->isPaid() and $memberStatus !== $club::STATUS_INVITED_BYPASSING_PAYMENT}}data-confirm data-confirmIcon="info" data-confirmMessage="{lang="club_membership_item"}" data-confirmSubmessage="{$club->memberFeeMessage()}"{{endif}}>{lang="club_join"}</a> {{endif}} {{endif}} </div> </div> Next is the CSS which you need to put into your custom CSS file:
/* Changes to Clubs */ [data-pagemodule="clubs"] .ipsApp .ipsSpacer_top, .ipsApp .ipsSpacer_both { margin-top: 0px; } .cClubCard .ipsPageHead_special { height: 185px; } .cClubCard .cClubCard_info { margin-left: 5px !important; margin-top: 7px; margin-bottom: 10px; } .ipsType_reset.cClubCard_title.ipsType_blendLinks .ipsPageHead_barText_small { background: rgb(4 128 93); line-height: 1; padding: 12px 10px; font-weight: 500; } [data-pagemodule="clubs"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 48px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pagemodule="clubs"] .ipsType_pageTitle { padding-left: 20px; } [data-pageid="1"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="2"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="3"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } [data-pageid="4"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } You may not need all of the CSS code, but if you have pages in your club that is where this comes into play and you will need to find out what your page ID's are.  
[data-pageid="1"] #elContextualTools { padding: 0px 15px 0px 15px; margin: 65px -15px 0px -15px; transition: box-shadow 0.3s linear; } The page ID section makes some alignment changes.  Just play around with the CSS to achieve the look you want.  Much of it is alignment issues that really annoy the hell out of me; my designer OCD kicking in lol.
Let me know how you get on and enjoy 🙂
 

I'll dig this out for you and post later - it requires a template change too, so I'll post the details on that too 🙂
 

Looks nice and clean! 👏 

With a few simple template changes and some custom CSS I've change the way grid forums appear:

Forum name is under the image as opposed to being over the image and the last entry is shown below.  It just makes things look neater and tidier, at least it does for me 🙂
 

@Jordan Invision I did a similar thing with the clubs (renamed to groups) and moved the text link out of the image and made the image bigger:

Added some CSS changes to the background colour and the text weighting - also added so extra padding to give the text some breathing room 🙂
 

Oooh love this!

With a few simple template changes and some custom CSS I've change the way grid forums appear:

Forum name is under the image as opposed to being over the image and the last entry is shown below.  It just makes things look neater and tidier, at least it does for me 🙂
 

With a few simple template changes and some custom CSS I've change the way grid forums appear:

Forum name is under the image as opposed to being over the image and the last entry is shown below.  It just makes things look neater and tidier, at least it does for me 🙂
 

With a few simple template changes and some custom CSS I've change the way grid forums appear:

Forum name is under the image as opposed to being over the image and the last entry is shown below.  It just makes things look neater and tidier, at least it does for me 🙂
 

With a few simple template changes and some custom CSS I've change the way grid forums appear:

Forum name is under the image as opposed to being over the image and the last entry is shown below.  It just makes things look neater and tidier, at least it does for me 🙂
 

IPS’ system already does that. Just upload the image here: