by Ange Tuteur August 21st 2015, 7:45 pm
Thanks everyone, and congratulations to the others as well ! You all did a fantastic job on your themes, so thanks for participating !
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} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>
When you're finished be sure to publish the templates.