Grid card stylish

kmk · August 27, 2020

Hi, there already shared how we can stylish the grid card?

1. Hide the description space.

2. Hide the author avatar

3. Hide the repeated author and topic information.

What I would like to have is, just last one or two topics name below the card image.

I think that will create a clean, simple and focused forum homepage.

IP-Gamers · September 1, 2020

And for what?

WP V0RT3X · September 1, 2020

It's all in the template forumGridItem ...

{{if $forum->can('view')}}
{{$lastPost = $forum->lastPost();}}
{{$club = $forum->club();}}
	<div class="ipsBox ipsBox--child cForumGrid
		{{if \IPS\forums\Topic::containerUnread( $forum ) && !$forum->redirect_on}}cForumGrid--unread ipsDataItem_unread{{endif}} {{if !\IPS\forums\Topic::containerUnread( $forum ) && !$forum->redirect_on}}cForumGrid--read{{endif}} {{if $forum->redirect_on}}cForumGrid--redirect{{elseif $forum->forums_bitoptions['bw_enable_answers']}}cForumGrid--answers{{elseif $forum->password}}cForumGrid--password{{else}}cForumGrid--forum{{endif}}" data-forumID="{$forum->_id}">

		<!-- Hero -->
		<div class='cForumGrid__hero'>

			<!-- Clickable area -->
			<a {{if $forum->password && !$forum->loggedInMemberHasPasswordAccess()}}href="{$forum->url()->setQueryString( 'passForm', '1' )}" data-ipsDialog data-ipsDialog-size='narrow' data-ipsDialog-title='{lang="forum_requires_password" sprintf="$forum->_title"}'{{else}}href="{$forum->url()}"{{endif}} class='cForumGrid__hero-link' aria-hidden='true'>
				{{if $club and ! $forum->card_image}}
					{{$coverPhoto = $club->coverPhoto( FALSE );}}
					{{$cfObject = $coverPhoto->object;}}
					{{if $coverPhoto->file}}
					<span class='cForumGrid__hero-image' role='img' style="background-image:url('{$coverPhoto->file->url}')" aria-label='{$forum->_title}'></span>
					{{elseif ! empty( $cfObject::$coverPhotoDefault )}}
						<span class='cForumGrid__hero-image' role='img' style="background-color: {$coverPhoto->object->coverPhotoBackgroundColor()};background-image:url('{resource="pattern.png" app="core" location="global"}')" aria-label='{$forum->_title}'></span>
					{{endif}}
				{{else}}
				<span class='cForumGrid__hero-image' role='img' {{if $forum->card_image}}style="background-image:url('{file="$forum->card_image" extension="forums_Cards"}')"{{endif}} aria-label='{$forum->_title}'></span>
				{{endif}}
				<span class='cForumGrid__hero-image-overlay'></span>	
			</a>

			<!-- Forum info -->
			<div class='cForumGrid__forumInfo ipsFlex ipsFlex-ai:end'>

				<!-- Title and post count -->
				<div class='ipsFlex-flex:11'>
					<h3 class='cForumGrid__title ipsType_reset ipsTruncate ipsTruncate_line'>
						{{if $forum->password && !$forum->loggedInMemberHasPasswordAccess()}}
							<a href="{$forum->url()->setQueryString( 'passForm', '1' )}" data-ipsDialog data-ipsDialog-size='narrow' data-ipsDialog-title='{lang="forum_requires_password" sprintf="$forum->_title"}'>{$forum->_title}</a>
						{{else}}
							<a href="{$forum->url()}">{{if $club}}{lang="club_node" sprintf="$club->name, $forum->_title"}{{else}}{$forum->_title}{{endif}}</a>
						{{endif}}
					</h3>
					{{if !$forum->redirect_on}}
						<ul class='cForumGrid__title-stats ipsType_reset ipsType_light'>
							{{$count = \IPS\forums\Topic::contentCount( $forum, TRUE );}}
							{{if $count > 0}}<li>{lang="posts_number" pluralize="$count" format="short"}</li>{{endif}}
							{{if $forum->followerCount}}
								<li>
									<a href='{url="app=core&module=system&controller=notifications&do=followers&follow_app=forums&follow_area=forum&follow_id={$forum->_id}"}' title='{lang="followers_tooltip"}' class='ipsType_blendLinks ipsType_noUnderline' data-ipsTooltip data-ipsDialog data-ipsDialog-size='narrow' data-ipsDialog-title='{lang="who_follows_this"}'>{lang="forum_follower_count" pluralize="$forum->followerCount"}</a>
								</li>
							{{endif}}
						</ul>
					{{endif}}
				</div>
				
				<!-- Forum icon -->
				<span class='cForumGrid__icon-wrap ipsFlex-flex:00'>
					{{if !$forum->redirect_on AND \IPS\forums\Topic::containerUnread( $forum ) AND \IPS\Member::loggedIn()->member_id}}
						<a href="{$forum->url()->setQueryString( 'do', 'markRead' )->csrf()}" data-action='markAsRead' title='{lang="mark_forum_read"}' data-ipsTooltip>
					{{endif}}
						{{if $club}}
							<img src="{{if $club->profile_photo}}{file="$club->profile_photo" extension="core_Clubs"}{{else}}{resource="default_club.png" app="core" location="global"}{{endif}}" alt='' class='cForumGrid__icon-image'>
						{{elseif $forum->icon}}
							<img src="{file="$forum->icon" extension="forums_Icons"}" alt='' class='cForumGrid__icon-image cForumGrid__icon--custom'>
						{{else}}
							{{if $forum->redirect_on}}
								<span class='cForumGrid__icon cForumGrid__icon--redirect' {template="formattedInlineStyle" params="$forum" app="core" group="global" location="front"}>
									<i class='fa fa-arrow-right'></i>
								</span>
							{{elseif $forum->forums_bitoptions['bw_enable_answers']}}
								<span class='cForumGrid__icon cForumGrid__icon--answers' {template="formattedInlineStyle" params="$forum" app="core" group="global" location="front"}>
									<i class='fa fa-question'></i>
								</span>
							{{elseif $forum->password}}
								<span class='cForumGrid__icon cForumGrid__icon--password' {template="formattedInlineStyle" params="$forum" app="core" group="global" location="front"}>
									{{if $forum->loggedInMemberHasPasswordAccess()}}
										<i class='fa fa-unlock'></i>
									{{else}}
										<i class='fa fa-lock'></i>
									{{endif}}
								</span>
							{{else}}
								<span class='cForumGrid__icon cForumGrid__icon--normal' {template="formattedInlineStyle" params="$forum" app="core" group="global" location="front"}>
									<i class="fa fa-comments"></i>
								</span>
							{{endif}}
						{{endif}}
					{{if !$forum->redirect_on AND \IPS\forums\Topic::containerUnread( $forum ) AND \IPS\Member::loggedIn()->member_id}}
						</a>
					{{endif}}
				</span>
			</div>
		</div>
      
		<!-- Last post information -->
		<div class='cForumGrid__last ipsBorder_top ipsPadding_vertical:half ipsPadding_horizontal'>
			{{if !$forum->redirect_on}}
				{{if $lastPost}}
						<div>
							<ul class='ipsList_reset'>
								<li class='ipsDataItem_lastPoster__title'><a href="{$lastPost['topic_url']->setQueryString( 'do', 'getNewComment' )}" class='ipsType_break' title='{$lastPost['topic_title']}'>{$lastPost['topic_title']}</a></li>
							</ul>
						</div>
				{{else}}
					<p class='ipsType_light ipsType_reset ipsTruncate ipsTruncate_line'>{{if $forum->password}}{lang="no_forum_posts_password"}{{else}}{lang="no_forum_posts"}{{endif}}</p>
				{{endif}}
			{{else}}
				<p class='ipsType_light ipsType_reset ipsTruncate ipsTruncate_line'>
					{lang="redirect_hits" pluralize="$forum->redirect_hits"}
				</p>
			{{endif}}
		</div>
	</div>
{{endif}}

Just try yourself, I like it as it is by default.

kmk · September 1, 2020

11 hours ago, V0RT3X666 said:

Just try yourself, I like it as it is by default.

I try to learn to hide the description area with css, but I´m not clearly how should be the code for next step...thank in advance if you can tell me I on the right way

WP V0RT3X · September 1, 2020

In this case you don't need CSS edits, the code above is the modified template to make the card look like on the second screenshot.

Just replace the whole forumGridItem template with that. If you don't like it, revert it.

If you want to hide something via CSS it looks like this...

.whatever {
	display: none;
}

kmk · September 1, 2020

51 minutes ago, V0RT3X666 said:
In this case you don't need CSS edits, the code above is the modified template to make the card look like on the second screenshot.

Just replace the whole forumGridItem template with that. If you don't like it, revert it.

If you want to hide something via CSS it looks like this...
.whatever {
	display: none;
}

So nice, thanks

53 minutes ago, V0RT3X666 said:

Just replace the whole forumGridItem template with that. If you don't like it, revert it.

Is possible appear more than one last topics? I would like have last 2.

Invision Community 5: Assign topics to moderators

Invision Community 4: Pages databases in Clubs

Invision Community 5: Live Topic Improvements

Invision Community 5: New Live Community Features

Grid card stylish

Recommended Posts

kmk

Link to comment

Share on other sites

IP-Gamers

Link to comment

Share on other sites

WP V0RT3X

Link to comment

Share on other sites

kmk

Link to comment

Share on other sites

WP V0RT3X

Link to comment

Share on other sites

kmk

Link to comment

Share on other sites

Recently Browsing 0 members

Upcoming Events

Trending Content

More