# 问答设计（空白）

**URL:** https://meta.discourse.org/t/q-a-design-blank/80672
**Category:** Development
**Created:** [2018年二月15日 20:49 UTC](https://meta.discourse.org/t/q-a-design-blank/80672 "2018-02-15T20:49:45Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [2018年二月15日 20:49 UTC](https://meta.discourse.org/t/q-a-design-blank/80672/1 "2018-02-15T20:49:45Z")

</div>

I was asked to do Q&A design, sketch. Which can then be used for later editing.

This code is very raw and if someone wants it, they can use it further.

It was a fun hobby - 10 minutes.

I won’t support it, but I’m placing it here, maybe it will be useful to someone.

**CSS**

> **Summary**
>
> ```
> .sidebar {
> float: right !important;
> padding: 1px 15px 15px 15px;
> }
> .list-container.has-sidebar {float: left !important;}
> .topic-list .sortable, .topic-list .posters, .badge-wrapper.bullet .badge-category-bg {display: none;}
> 
> .topic-list a.title, .topic-list-item.visited a.title { 
> color: #72afd2 !important;font-size: 1.06em; 
> &:visited {color: #07C !important;}
> &:hover {color: #f56400 !important;}
> }
> 
> .post-row .box .t {
> margin-top: 8px;
> }
> .badge-wrapper {
> font-size: 13px;
> font-weight: 300;
> color: #3c8dbc !important;
> }
> .number, .post-row .box .c{font-size: 16px;}
> .userlink {
> float: right;
> padding-top: .1em;
> font-size: small; color: #777;
> }
> a.pren, .sidebar .badge-wrapper.bullet span.badge-category {
> color: #3e6d8e !important;
> }
> 
> .badge-wrapper.bullet span.badge-category {
> color: #777 !important;
> }
> .badge-wrapper.bullet span.badge-category:hover, a.pren:hover {
> color: #f56400 !important;
> }
> .text-right {
> text-align: right;
> }
> .post-row {
> padding: 12px 0 15px 0;
> border-bottom: 1px solid #ececec;
> }
> 
> .clearfix .communities .badge-wrapper.bullet {
> padding: .4em .5em;
> }
> .clearfix .communities .badge-wrapper.bullet:hover {
> color:#3e6d8e;background-color:#dae6ef;text-decoration:none;
>     
> }
> .post-row .box {
> display: inline-block;
> min-width: 58px;
> margin: 0 3px 0 0;
> font-size: 11px;
> color: #777;
> padding: 5px 5px 6px 5px;
> text-align: center;
> float: left;
> }
> .post-row .count-box {
> float: left;
> margin-right: 10px;
> }
> .post-row .unanswered {
> background-color: #fff;
> color: #45A163;
> border: solid 1px #45A163;
> }
> .post-row .title-box {
> display: block;
> overflow: hidden;
> }
> .post-row .title-box .post-title {
> font-weight: normal;
> font-size: 16px;
> margin-bottom: 5px;
> }
> .post-row .community-pad {
> margin-top: 5px; color: #777;
> margin-bottom: 2px;
> font-size: 12px;
> font-weight: normal;
> display: inline-block!important;
> }
> 
> ```

**Head**

> **Summary**
>
> ```
> <script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
> <div class="post-row">
> 
> <div class="count-box">
> 
> <div class="box">
> <div class="c">{{number topic.views numberKey="views_long"}}</div>
> <div class="t">лайков</div>
> </div>
>         
> {{#if topic.replyCount}}   
> <div class="box unanswered">
> <div class="c">{{topic.replyCount}}</div>
> <div class="t">ответа</div>
> </div>
> {{else}} 
>   
> <div class="box no">
> <div class="c">{{topic.replyCount}}</div>
> <div class="t">ответов</div>
> </div>
> {{/if}}      
>        
> <div class="box view">
> <div class="c">{{number topic.views numberKey="views_long"}}</div>
> <div class="t">показов</div>
> </div>
> 
> </div>
> 
> <div class="title-box clearfix">
> 
> <div class="post-title">
> {{topic-link topic}}
> </div>
> 
> <div class="clearfix">
> 
> <span class="communities community-pad">
> Раздел: {{category-link topic.category showParent="true" onlyStripe="true"}}
> </span>
> 
> <span class="userlink text-right muted">
> изменен <span class="ago2">{{format-date topic.bumpedAt format="tiny"}}</span> назад 
> <a class="pren" href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a> &nbsp;
> </span>
> 
> </div>
> </div>
> 
> </script>
> 
> ```

 ![toxu](https://global.discourse-cdn.com/meta/original/3X/d/8/d8ad2f12de3b1af4ba0239f89607d63c5428d06b.gif)

_You can use other elements in it, for example:_

```
{{#if topic.featured_link}}
    {{topic-featured-link topic}}
{{/if}}

```

Etc.

And also sorting at the top:

```
<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
...
</script>

```