The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make Topics, Posts to look like this?

View previous topic View next topic Go down

Solved How to make Topics, Posts to look like this?

Post by Nalence on January 20th 2016, 12:54 am

Does anyone knew if is it possible to make this ?



My forum is: http://thetudors.forumsr.com/forum


Last edited by Nalence on January 22nd 2016, 3:19 pm; edited 3 times in total

Nalence
Forumember

Female Posts : 72
Reputation : 2
Language : English

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by Nalence on January 21st 2016, 6:54 pm

Anyone?

Nalence
Forumember

Female Posts : 72
Reputation : 2
Language : English

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by 10spetter10 on January 21st 2016, 7:18 pm

Try by adding this css:

Code:
ul.forums dd.topics {
  background-color: #382457;
  box-shadow: 0px 0px 5px #702963 inset;
  border-radius: 5px;
  line-height: 1.5em;
  margin: 18px 0px;
}
ul.forums dd.topics dfn {
  display: block;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by Nalence on January 21st 2016, 7:35 pm

It works but just adds topic in the box. I want both topics and last post to be in box, if it's posible.

Thanks Smile

Nalence
Forumember

Female Posts : 72
Reputation : 2
Language : English

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by 10spetter10 on January 21st 2016, 8:24 pm

Oh right, how could I forget ... Embarassed

But now I'm a bit confused, do you want the number of posts or the last post? I'll send the both. Razz

number of topics and number of posts
Code:
ul.forums dd.topics, ul.forums dd.posts {
  background-color: #382457;
  box-shadow: 0px 0px 5px #702963 inset;
  border-radius: 5px;
  line-height: 1.5em;
  margin: 18px 0px;
}
ul.forums dd.topics dfn, ul.forums dd.posts dfn {
  display: block;
}

number of topics and last posts
Code:
ul.forums dd.topics, ul.forums dd.lastpost {
  background-color: #382457;
  box-shadow: 0px 0px 5px #702963 inset;
  border-radius: 5px;
  line-height: 1.5em;
  margin: 18px 0px;
}
ul.forums dd.lastpost {
  margin: 0px;
}
ul.forums dd.topics dfn {
  display: block;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by Nalence on January 22nd 2016, 3:57 am

Thank you so much it works Smile I just have a little question and sorry to bother you, but is it possible to have them placed like this:


Nalence
Forumember

Female Posts : 72
Reputation : 2
Language : English

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by 10spetter10 on January 22nd 2016, 9:22 am

For that result you'll need to edit the template 'index_box'. Can you check if you have edited it before and if so, can you post it in this topic?

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by Nalence on January 22nd 2016, 1:33 pm

No I never edited template 'index_box'

Nalence
Forumember

Female Posts : 72
Reputation : 2
Language : English

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by 10spetter10 on January 22nd 2016, 2:13 pm

Try using this template:

Code:
<ul class="linklist">
   <!-- BEGIN switch_user_logged_in -->
   <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>&nbsp;&bull;&nbsp;</li>
   <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>&nbsp;&bull;&nbsp;</li>
   <!-- END switch_user_logged_in -->
   <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
   <!-- BEGIN switch_user_logged_in -->
   <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                  <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li class="row">
               <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                     <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        <br />
                        {catrow.forumrow.FORUM_DESC}

                        <!-- BEGIN switch_moderators_links -->
                           {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                     </div>
                  </dd>
                  <dd class="lastpost">
                                                   <div class="lastpost_top">
                        <span class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></span>
                        <span class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></span>
                                                   </div>
                                                     <div class="lastpost_bottom">
                        <!-- BEGIN avatar -->
                        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                        <!-- END avatar -->
                        <span>
                        <!-- BEGIN switch_topic_title -->
                        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                        <!-- END switch_topic_title -->
                        {catrow.forumrow.USER_LAST_POST}
                        </span>
                                                   </div>
                  </dd>
               </dl>
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
   <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>&nbsp;&bull;&nbsp;</li>
   <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>&nbsp;&bull;&nbsp;</li>
   <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   <!-- BEGIN switch_delete_cookies -->
   <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

Don't forget to confirm the modification by pressing the green + button.

Then append this css:
Code:
.lastpost_top {
  display: flex;
  justify-content: space-around;
  padding: 5px 0px;
  margin-bottom: 5px;
  background-color: #362355;
}
.lastpost_top .topics, .lastpost_top .posts, .lastpost_top dfn {
  display: inline !important;
  padding: 0px;
}
ul.topiclist dd.dterm, ul.topiclist dt {
  width: 75%;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by Nalence on January 22nd 2016, 2:35 pm

There is slight problem which I just noticed when I enter the subforum and forums everything is messed up

it look like this:

Nalence
Forumember

Female Posts : 72
Reputation : 2
Language : English

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by 10spetter10 on January 22nd 2016, 3:05 pm

Oops, that is because I made the cell with the forumtitle bigger on the index. Replace the last part of the code by this css, it will bring the width to the default in the subforums.

Code:
ul.topiclist.forums dd.dterm {
  width: 75%;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by Nalence on January 22nd 2016, 3:18 pm

Now is perfect Smile Thank you so much for your help Smile

Nalence
Forumember

Female Posts : 72
Reputation : 2
Language : English

Back to top Go down

Solved Re: How to make Topics, Posts to look like this?

Post by SLGray on January 22nd 2016, 9:35 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum