Jump to content

Title in the card


kmk
 Share

Recommended Posts

8 hours ago, Davyc said:

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

image.png.794cf30c6f6005f06173822a83d5e731.png

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!

Link to comment
Share on other sites

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:

image.thumb.png.0c809ed697393dae17a2f8e8ab2af067.png

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! 👏 

Link to comment
Share on other sites

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:

image.thumb.png.0c809ed697393dae17a2f8e8ab2af067.png

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? 

Link to comment
Share on other sites

@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 🙂

 

Link to comment
Share on other sites

  • 2 months later...
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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...