Jordan Miller Posted February 23, 2021 Posted February 23, 2021 Hey. I'm actually not quite sure what you mean. I believe a lot of the suggestions you've made recently could be accomplished on an individual basis with CSS 🙂 This may not be a case for one size fits all 😇 @kmk christopher-w 1
kmk Posted February 24, 2021 Author Posted February 24, 2021 The forum name can not be show completely
Luuuk Posted February 24, 2021 Posted February 24, 2021 @kmk I use the following code in custom.css: /* Allow forum names in grid view to wrap */ .ipsApp .cForumGrid__title{ white-space: normal; } kmk and mcartemon2we23 1 1
Davyc Posted February 24, 2021 Posted February 24, 2021 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 🙂 kmk, Noble~, Ibai and 3 others 6
Jordan Miller Posted February 24, 2021 Posted February 24, 2021 8 hours ago, Davyc said: 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 🙂 Oooh love this! Davyc 1
Davyc Posted February 25, 2021 Posted February 25, 2021 @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 🙂 Jordan Miller 1
Jordan Miller Posted February 25, 2021 Posted February 25, 2021 10 hours ago, Davyc said: @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 🙂 Looks nice and clean! 👏 Davyc 1
kmk Posted February 26, 2021 Author Posted February 26, 2021 21 hours ago, Davyc said: @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 🙂 That is what make sense, is possible share the CSS?
Davyc Posted February 26, 2021 Posted February 26, 2021 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 🙂 kmk 1
Davyc Posted February 26, 2021 Posted February 26, 2021 @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}} · {lang="club_members_count" pluralize="$club->members"} {{endif}} {{if $club->last_activity}} · {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, rastafari, Jordan Miller and 1 other 2 2
Jordan Miller Posted February 26, 2021 Posted February 26, 2021 6 hours ago, Davyc said: OK here we go You rock 👏 Davyc 1
kmk Posted April 28, 2021 Author Posted April 28, 2021 On 2/24/2021 at 2:20 AM, Luuuk said: @kmk I use the following code in custom.css: /* Allow forum names in grid view to wrap */ .ipsApp .cForumGrid__title{ white-space: normal; } Could anyone make same result for "Clubs directory" page? @Ehren
kmk Posted April 28, 2021 Author Posted April 28, 2021 I want to leave the Clubs as homepage, users enter to my site then choose which club want to surface, but the current Clubs directory page is a little ugly... 1. I would like to show the club name completely, I focus on the mobile version. 2. The club icon should be moved to before of the statictis datas. Avoiding compete the use of space in the Photo area.
Recommended Posts