Information

Forumotion Mobile Theme From 'Ange Tuteur'

From

Topic ID: 14

Sat Aug 22, 2015 2:47 pmNo.1
OLC CREATORS
OLC CREATORS
Sat Aug 22, 2015 2:47 pm
https://promote.forumotion.com
Thanks everyone, and congratulations to the others as well ! You all did a fantastic job on your themes, so thanks for participating ! Smile
-Ange Tuteur

If anyone wants the theme I made for mobile, you can find it below.

The main style should go into the CSS.
Display > Colors > CSS stylesheet
Code:
/* THEME MOBILE */
#mpage-body {
  background:#FFF;
}

#mpage-body .post .content a {
  color:#FFF;
  text-decoration:underline;
}

/* POSTS */
#mpage-body .post .content a:hover { color:#333 }

#mpage-body .post {
  color:#FFF;
  background:#39C;
  margin:6px 3px;
  border-radius:3px;
}

#mpage-body .postbody .post_header {
  color:#FFF;
  background:#333;
  border-radius:3px 3px 0 0;
}

.avatarMobile {
  background:#39C;
  border:1px solid #555;
  border-radius:20px;
  height:20px;
  width:20px;
  display:inline-block;
  vertical-align:bottom;
  margin-bottom:-0.1em;
  overflow:hidden;
}

.avatarMobile img {
  max-width:20px;
  max-height:20px;
}

#mpage-body .postbody:after, #mpage-body .postbody::after { background:none }

/* HEADER */
.mobile_title {
  background:none;
  border:none;
}

.mobile_title.application_header {
  background:#FFF;
  border-bottom:1px solid #CCC;
}

.mobile_title_content {
  color:#333;
  text-shadow:none;
}

/* FORUMS */
.mobile_set {
  color:#FFF;
  background:#333;
  border:none;
  border-radius:3px;
  margin:6px 3px;
}

.mobile_set_content {
  text-shadow:none;
  line-height:16px;
}

.mobile_item {
  background:#3399CC;
  border:none;
  border-radius:3px;
  margin:6px 3px;
  padding:0;
  overflow:hidden;
}

.mobile_item:hover, .mobile_item_content:hover {
  background-color:#333;
}

.mobile_item_content {
  padding:6px 0;
  background-position:-2px 50%;
}

.mobile_subtitle, .mobile_comment {
  color:#FFF;
  text-shadow:none;
}

/* BUTTONS */
.mobile_prev_button, .mobile_next_button, .defaultBtn {
  background:#39C;
  border:none;
  border-radius:3px;
}

.mobile_prev_button p, .mobile_next_button p {
  color:#FFF;
  text-shadow:none;
}

.mobile_prev_button:hover, .mobile_next_button:hover, .defaultBtn:hover { background:#333 }

/* INPUT FIELDS */
.inputTxtContainer {
  padding:0;
  border:none;
}

.inputTxtContainer .inputTxt, #mpage-body textarea {
  color:#666;
  border:1px solid #CCC !important;
  border-radius:3px;
  padding:5px;
}

.inputTxtContainer .inputTxt:hover, #mpage-body textarea:hover { border-color:#39C !important }
.inputTxtContainer .inputTxt:focus, #mpage-body textarea:focus { border-color:#333 !important }

/* POST BOXES */
#mpage-body blockquote, #mpage-body .codebox, #mpage-body .spoiler {
  color:#666;
  background:#FFF;
  border:1px solid #333;
  border-radius:3px;
  display:block;
}

#mpage-body blockquote cite, #mpage-body .codebox p, #mpage-body .spoiler_title {
  color:#FFF;
  background:#333;
  border-radius:3px;
  display:block;
  float:none;
  padding:0.5em;
  margin-bottom:0.5em;
}

#mpage-body .codebox code, #mpage-body .spoiler_content {
  color:#39C;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  padding:0.5em;
}

/* ERROR MESSAGE */
.errorMobile {
  color:#FFF;
  font-size:0.8em;
  font-weight:bold;
  background:#E53;
  padding:16px 5px;
}

#mpage-body .poll .fieldset { border:none }

/* NEW TOPIC */
#mobileActionBar {
  background:#8C5;
  font-weight:bold;
}

#mobileActionBar .mobileActionLabel {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/add10.png');
  text-transform:uppercase;
  font-size:1em;
}

/* FORUM IMAGES */
.mobile_item_link_content {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/chevro10.png');
  background-position:99% 50%;
}

.cat_no_new, .cat_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/folder10.png');
}

.forum_no_new, .forum_new, .folder_new, .folder_no_new, .folder_hot, .folder_hot_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}

.cat_locked, .forum_locked, .folder_locked, .folder_locked_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/locked10.png');
}

.folder_global, .folder_global_new, .folder_announce, .folder_announce_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/announ10.png');
}

.folder_sticky, .folder_sticky_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/pinned10.png');
}

/* NEW POST COLOR */
.cat_new, .forum_new, .folder_new, .folder_locked_new, .folder_global_new, .folder_announce_new, .folder_hot_new, .folder_sticky_new {
  background-color:#8C5;
}
/*
** hommage de forumactif
** mise a jour : 6 Juil 2015
** par ange tuteur
**/

There are a few modified templates as well, which are optional.
Administration Panel > Display > Templates > Mobile Version

Open the template error_body and replace the contents with :
Code:
<div class="errorMobile">
 {ERROR_MESSAGE}
</div>

Lastly, if you want the avatar in posts open the viewtopic_body template and replace this :
Code:
<div class="post_header">{L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>

By this :
Code:
<div class="post_header"><span class="avatarMobile">{postrow.displayed.POSTER_AVATAR}</span> {L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>

When you're finished be sure to publish the templates.

ENJOY...

Official Information

You cannot reply to topics in this forum

Main Head

Sample Content is Growing...