# Seeking advice for homepage

**URL:** <https://meta.discourse.org/t/seeking-advice-for-homepage/36268>\
**Category:** UX\
**Created:** [2015年十二月3日 03:45 UTC](https://meta.discourse.org/t/seeking-advice-for-homepage/36268 "2015-12-03T03:45:26Z")\
**Posts on this page:** 3\
**Page:** 3

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2018年一月23日 11:55 UTC](https://meta.discourse.org/t/seeking-advice-for-homepage/36268/41 "2018-01-23T11:55:40Z")

</div>

Is this close to what you had in mind?

 ![topic list with avatar on the left](https://global.discourse-cdn.com/meta/original/3X/7/1/714afc2b300b1dce175a81d88a141bfcb5beaced.PNG)

---

<div class="post-metadata">

**Author:** ![PaulSTC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulstc/32/86814_2.png) [@PaulSTC](https://meta.discourse.org/u/PaulSTC)\
**Post date:** [2018年一月23日 23:10 UTC](https://meta.discourse.org/t/seeking-advice-for-homepage/36268/42 "2018-01-23T23:10:39Z")

</div>

That’s just the concept I’m after - but I’d probably have Original Author on the left column, and Last Post on the right still

---

<div class="post-metadata">

**Author:** ![PaulSTC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulstc/32/86814_2.png) [@PaulSTC](https://meta.discourse.org/u/PaulSTC)\
**Post date:** [2018年一月24日 12:59 UTC](https://meta.discourse.org/t/seeking-advice-for-homepage/36268/43 "2018-01-24T12:59:13Z")

</div>

Just to update - I’ve managed to figure it out.  
Thanks again to Charles Walter for coming up with this neat layout !

To make the changes, I edited the “Desktop” \> Header and CSS sections

> **1. Added this into appropriate position in Header**
>
> ```JS
> <!-- Author Avatar script -->
> <td class="first-post">
> <div>
> <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="large"}}</a>
> </div>
> </td>
> 
> ```

> **2. Added this into appropriate position in Header**
>
> ```JS
> <!-- Author Avatar script -->
> {{raw "topic-list-header-column" order='authorcenter' forceName='Author'}}
> 
> ```

> **3a. Changed this part of the Header**
>
> ```JS
> <!-- Author Avatar script needs to remove bulk select button -->
> {{raw "topic-list-header-column" order='default' name='topic.title' bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
> 
> ```

> **3b. Into this**
>
> ```JS
> <!-- Author Avatar script needs to remove bulk select button -->
> {{raw "topic-list-header-column" order='default' name='topic.title'}}
> 
> ```

> **4. Added this into the CSS section**
>
> ```plaintext
> // Author Avatar script
> .topic-list td.first-post {
> width: 65px;
> text-align:center;
> padding-bottom:14px;
> padding-top:14px;
> .relative-date {
> color: #666;
> }
> }
> .topic-list th.authorcenter {
> text-align:center;
> }
> 
> ```

In context:

> **Full header code**
>
> ```JS
> <script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
> 
> <!-- Author Avatar script -->
> <td class="first-post">
> <div>
> <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="large"}}</a>
> </div>
> </td>
> 
> <td class='main-link clearfix'>
> {{raw "topic-status" topic=topic}}
> {{topic-link topic}}
> {{#if controller.showTopicPostBadges}}
> {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
> {{/if}}
> {{discourse-tags topic mode="list"}}
> {{raw "list/topic-excerpt" topic=model}}
> <div class='creator'>
> {{#if showCategory}}
> {{category-link topic.category}}
> {{/if}}
> {{~#if topic.creator ~}}
> <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
> {{~/if ~}}
> {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
> </div>
> </td>
> 
> {{#if controller.showLikes}}
> <td class="num likes">
> {{number topic.like_count}} <i class='fa fa-heart'></i>
> </td>
> {{/if}}
>    
> {{#if controller.showOpLikes}}
> <td class="num likes">
> {{number topic.op_like_count}} <i class='fa fa-heart'></i>
> </td>
> {{/if}}
> 
> {{raw "list/posts-count-column" topic=topic}}
> 
> <td class="last-post">
> <div class='poster-avatar'>
> <a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
> </div>
> <div class='poster-info'>
> <a href="{{topic.lastPostUrl}}">
> {{format-date topic.bumpedAt format="tiny"}}
> </a>
> <span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
> </div>
> </td>
> </script>
> 
> <script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
>   
> <!-- Author Avatar script -->
> {{raw "topic-list-header-column" order='authorcenter' forceName='Author'}}
>   
> <!-- Author Avatar script needs to remove bulk select button -->
> {{raw "topic-list-header-column" order='default' name='topic.title'}}
>   
> {{#if showLikes}}
> {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName='Likes'}}
> {{/if}}
> {{#if showOpLikes}}
> {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName='Likes'}}
> {{/if}}
> {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
> {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
> </script>
> 
> <script>
> 
> (function(){
> 
> var TopicListItemView = require('discourse/components/topic-list-item').default;
> 
> TopicListItemView.reopen({
> showCategory: function(){
> return !this.get('controller.hideCategory') &&
> this.get('topic.creator') &&
> this.get('topic.category.name') !== 'uncategorized';
> }.property()
> });
>    
> })();
>  
> </script>
> 
> ```

> **Full CSS code**
>
> ```plaintext
> //add space between categories
> .topic-list.categories {
> border-spacing: 0 1em;
> border-collapse: separate;
> }
> 
> //change category background color to white
> .topic-list.categories>tbody>tr {
> background-color: lighten($secondary, 10%);
> }
> 
> //padding for category title and description
> .topic-list.categories th,
> .topic-list.categories td {
> padding: 0 15px 0 15px;
> }
> 
> //Shadows for categories
> .topic-list.categories>tbody>tr td.category,
> .topic-list.categories>tbody>tr td.stats,
> .topic-list.categories>tbody>tr td.latest {
> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
> }
> 
> //add shadow behind the list of topics on right in Category and Latest View
> //add shadow behind list of categories on left in Category and Latest View
> //add shadow behind topics in Latest view
> .category-list,
> .topic-list:not(.categories),
> .latest-topic-list {
> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> background-color: lighten($secondary, 10%);
> border-collapse: collapse;
> }
> 
> //underline navigation links
> .nav-pills>li.active>a,
> .nav-pills>li>a.active {
> color: $primary;
> font-weight: 500;
> background-color: $secondary;
> border-bottom: 3px solid $tertiary;
> }
> 
> //remove highlighting navigation background on hover
> .nav-pills>li>a:hover {
> background-color: $secondary;
> }
> 
> //fix color of user profile navigation icons
> .user-main .nav-pills {
> a.active i {
> color: $primary;
> }
> a:hover:not(.active) i {
> color: $quaternary;
> }
> }
> 
> //create conversation cards
> .topic-body {
> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> background-color: lighten($secondary, 10%);
> margin-top: 10px;
> padding-left: 20px;
> border-radius: 2px;
> padding-right: 20px;
> }
> 
> //more space for avatars
> .topic-avatar {
> border-top: 0;
> padding-right: 10px;
> .avatar-flair {
> right: 4px;
> }
> }
> 
> //remove stray border from bottom of last post
> .topic-status-info {
> border-top: 0;
> }
> 
> //improve format of embedded posts
> .embedded-posts .topic-avatar {
> padding-left: 0px;
> }
> 
> .embedded-posts.top.topic-body {
> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
> background-color: $secondary;
> }
> 
> //raise and round buttons
> .btn:not(.bulk-select) {
> border-radius: 2px;
> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> }
> 
> //flatten editor, topic-map, more badges, and revision view buttons
> .d-editor-button-bar .btn,
> .topic-map .btn.no-text,
> .badge-section .btn,
> #revision .btn {
> border-radius: 0px;
> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
> }
> 
> //properly space buttons on login modal
> button#login-link,
> button#new-account-link {
> padding-left: 20px;
> }
> 
> //darken color, remove shadow and border when pressed
> .btn:active {
> background-color: rgba(0, 0, 0, .4);
> -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 00px 0 rgba(0, 0, 0, 0.12);
> -moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 00px 0 rgba(0, 0, 0, 0.12);
> box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 00px 0 rgba(0, 0, 0, 0.12);
> }
> 
> .btn:focus {
> outline: -webkit-focus-ring-color auto 0px;
> }
> 
> //shift "more" button slightly left
> .more-topics .btn {
> margin-right: 10px;
> }
> 
> //New Topic Fab
> #create-topic.btn-default {
> border-radius: 40px;
> position: fixed;
> bottom: 30px;
> right: 50px;
> z-index: 999;
> padding: 24px 20px 22px 5px;
> background-color: $tertiary;
> color: $tertiary;
> white-space: nowrap;
> text-indent: 10px;
> -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
> -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
> box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
> overflow: hidden;
> width: 63px;
> height: 63px;
> -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
> transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
> }
> 
> #create-topic.btn-default .fa-plus {
> color: white;
> }
> 
> #create-topic.btn-default:hover {
> text-indent: 8px;
> width: 190px;
> color: white;
> }
> 
> //Reply Fab
> .timeline-footer-controls {
> position: relative;
> }
> 
> .widget-button.btn.create {
> border-radius: 40px;
> position: absolute;
> top: 50px;
> left: -18px;
> z-index: 999;
> padding: 24px 20px 22px 5px;
> background-color: $tertiary;
> color: white;
> text-indent: 10px;
> -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
> -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
> box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
> overflow: hidden;
> width: 63px;
> height: 63px;
> -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
> transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
> }
> 
> //Center and increase size of reply icon
> .widget-button.btn.create .fa-reply {
> color: white;
> font-size: 20px;
> margin-left: -8px;
> }
> 
> //Proper spacing for iPad portrait
> @media only screen and (min-width: 768px) and (max-width: 1250px) {
> .timeline-container {
> margin-left: 820px;
> }
> .topic-admin-popup-menu {
> left: -40% !important;
> }
> }
> 
> //Properly space notifications button
> .widget-button.btn.notifications-dropdown {
> right: 4px;
> position: relative;
> border-radius: 40px;
> width: 30px;
> padding: 6px;
> }
> 
> //cards for search results
> .fps-result {
> -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
> background-color: lighten($secondary, 10%);
> margin-top: 10px;
> padding: 20px;
> border-radius: 2px;
> }
> 
> @keyframes background-fade-highlight {
> 0% {
> background-color: lighten($tertiary, 20%);
> }
> 100% {
> background-color: lighten($secondary, 10%);
> }
> }
> 
> #topic-status-info {
> border-top: none;
> }
> 
> // RTL Overrides
> .rtl {
> .widget-button.btn.notifications-dropdown .fa {
> margin-left: -2px;
> }
> .topic-avatar {
> padding-right: initial;
> padding-left: 10px;
> .avatar-flair {
> right: initial;
> left: 4px;
> }
> }
> .embedded-posts .topic-avatar {
> padding-left: initial;
> padding-right: 0;
> }
> button#login-link,
> button#new-account-link {
> padding-left: 20px;
> padding-right: 20px;
> }
> #create-topic.btn-default {
> right: initial;
> left: 50px;
> padding: 24px 5px 22px 20px;
> }
> .widget-button.btn.create {
> left: initial;
> right: -18px;
> padding: 24px 5px 22px 20px;
> }
> .widget-button.btn.create .fa-reply {
> margin-left: initial;
> margin-right: -8px;
> }
> .widget-button.btn.notifications-dropdown {
> right: initial;
> left: 4px;
> }
> .widget-button.btn.notifications-dropdown .fa {
> margin-left: initial;
> margin-right: -2px;
> }
> }
> 
> // RTL Overrides
> @media only screen and (min-width: 768px) and (max-width: 1250px) {
> .rtl {
> .timeline-container {
> margin-left: initial;
> margin-right: 820px;
> }
> .topic-admin-popup-menu {
> left: initial !important;
> right: -40% !important;
> }
> }
> }
> 
> //Mods from Sam's theme
> 
> .topic-list > tbody > tr:nth-child(odd) {
> background-color: white;
> }
> 
> .topic-list > tbody tr:not(.last-visit):not(.topic-list-item-separator) td {
> border-bottom: 1px solid #eee;
> }
> 
> .topic-list a.title:not(.badge-notification) {
> color: #3b5998;
> font-weight: normal;
> font-family: 'Helvetica Neue', Helvetica, Arial, Utkal, sans-serif;
> font-size: 18px;
> }
> 
> .topic-list a.title:not(.badge-notification):hover {
> text-decoration: underline;
> }
> 
> .topic-list .creator, .topic-list .editor {
> font-size: 13px;
> display: block;
> margin-top: 3px;
> }
> 
> .topic-list .main-link {
> width: auto;
> }
> 
> .topic-list {
> td, .creator a, .editor a {
> color: #888;
> }
> }
> 
> .topic-list td {
> padding-bottom: 10px;
> }
> 
> .topic-list th {
> color: black;
> background-color: #fafafa;
> }
> 
> .topic-list {
> border-top: none;
> }
> 
> .topic-list td:first-of-type {
> padding-bottom: 10px;
> padding-left: 10px;
> padding-top: 10px;
> }
> 
> .topic-list tr.topic-list-item-separator td:first-of-type {
> padding: 0;
> }
> 
>  
> .topic-list {
> .fa-tag {
> opacity: 0.7;
> font-size: 10px;
> margin-right: -2px;
> }
> .num.posts-map {
> position: relative;
> font-size: 17px;
> a {
> color: #888 !important;
> font-weight: normal;
> }
> a.heatmap-high {
> color: #c66 !important;   
> }
> width: 100px;
> }
> }
> 
> .topic-list td.last-post, .topic-list th.activity {
> width: 160px;
> .relative-date {
> color: #666;
> }
> }
> 
> // Author Avatar script
> .topic-list td.first-post {
> width: 65px;
> text-align:center;
> padding-bottom:14px;
> padding-top:14px;
> .relative-date {
> color: #666;
> }
> }
> .topic-list th.authorcenter {
> text-align:center;
> }
> 
> .topic-list .creator .relative-date {
> margin-left: 8px;
> }
> 
> .badge-category-bg {
> opacity: 0.8;
> }
> 
> .topic-list .badge-wrapper.bar {
> .badge-category {
> color: #9a9a9a !important;
> font-weight: 600;
> font-size: 12px;
> padding: 2px 6px;
> }
> .badge-category-bg {
> top: -1px;
> }
> }
> 
> .last-post {
> .poster-avatar {
> margin-right: 10px;
> }
> .poster-avatar, .poster-info {
> float: left;
> }
> }
> 
> .topic-list .posts {
> width: auto;
> }
> 
> /* topic page */
> #topic-progress {
> background-color: #f1f1f1;
> color: #666;
> font-weight: normal;
> .bg {
> background-color: #bee9e9;
> }
> }
> 
> nav.post-controls button.has-like {
> color: #08c;
> }
> 
> .badge-wrapper.bullet span.badge-category {
> color: #333 !important;
> }
> 
> .creator .badge-wrapper.bullet span.badge-category {
> color: #888 !important;
> margin-top: -2px;
> }
> 
> #suggested-topics td.main-link {
> width: 500px;
> }
> 
> .topic-list a.title.visited:not(.badge-notification) {
> color: #6644aa;
> }
> 
> .topic-list-item .discourse-tags {
> font-size: 0.75em;
> display: inline-block;
> margin-left: 5px;
> }
> 
> ```

Which gives me the layout

 ![topiclist](https://global.discourse-cdn.com/meta/original/3X/f/5/f522c2ce3a632c06e909d11caa1629f2cedf749d.png)

[上一頁](https://meta.discourse.org/t/seeking-advice-for-homepage/36268.md?page=2)