Jump to content

Grid card stylish


kmk
 Share

Recommended Posts

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. 

IMG_20200826_203901.jpg

Link to comment
Share on other sites

It's all in the template forumGridItem ...

forum-before.png.5c33560acb011ee06fbf5dd4ec71c05d.png forum-after.png.a88d3940b7ea26a1998cc50c2addf54b.png

{{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.

Link to comment
Share on other sites

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

ipscss.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...