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.

Theme and First View on an iPad

View previous topic View next topic Go down

Solved Theme and First View on an iPad

Post by moreno5 on December 29th 2014, 10:53 pm

Hi Guys, 

I have almost finished my forum but am a little disappointed with the way it looks on the iPad. 

Firstly, can I change the theme of the site on the iPad? Or force it to always start in classic view by default?

Secondly, when a unregistered user lands on my forum home page, can I get the login popup that appears on the desktop version to appear on the iPad? 

Thanks

moreno5
Forumember

Posts : 26
Reputation : 1
Language : English

http://victoriaparkdartford.forumotion.co.uk

Back to top Go down

Solved Re: Theme and First View on an iPad

Post by Ange Tuteur on December 29th 2014, 11:21 pm

Hi @moreno5,

Yes, you can change the style of the mobile version via the CSS stylesheet. This is the CSS for the mobile version I had lying around :
Code:
/* Version Mobile */
/* CSS Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, hr {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0?‘ in the markup */table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*Fin CSS Reset */
html,body {
  height: 100%;
}

body {
  font-size: 16px;
  font-family: Helvetica, sans-serif;
}

#page-body {
  position: relative;
  min-height: 100%;
  background: none #c4c4c6;
}

.mobile_title {
  font-size: 0.9em;
  height: 29px;
  position: relative;
  padding: 2px 0;
  line-height: 12px;
  background: none #BECCDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#BECCDD), to(#587397), color-stop(0.48, #8B9DB5), color-stop(0.5, #8195AF));
  background: -moz-linear-gradient(top, #BECCDD, #587397);
  background: -ms-linear-gradient(top, #BECCDD, #587397);
  background: linear-gradient(top, #BECCDD, #587397);
  border-top: 1px solid #D0D9E6;
  border-right: none;
  border-bottom: 1px solid #3F5C80;
  border-left: none;
}

.mobile_title.application_header {
  position: fixed;
  width: 100%;
  z-index: 100;
}

.application_header_spacer {
  height: 33px;
}

.mobile_title_content {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  font-weight: bold;
  float: none;
  width: auto;
  position: absolute;
  left: 65px;
  right: 65px;
  text-align: center;
  line-height: 34px;
  color: #fff;
  top: 0px;
}

.mobile_set {
  height: 1em;
  padding: 0.5em;
  color: #fff;
  font-size: 0.9em;
  background: none #347DEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));
  background: -moz-linear-gradient(top, #347DEE, #24445C);
  background: -ms-linear-gradient(top, #347DEE, #24445C);
/*background: -o-gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));background: gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));*/;
}

.mobile_set_content {
  float: left;
  width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  font-weight: bold;
  line-height: 1.2em;
}

.mobile_item {
  margin: 0;
  border: 1px solid #EEEEEF;
  border-bottom-color: #9C9EA5;
  border-right: 0;
  border-left: 0;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: none #DBDBDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));
  background: -moz-linear-gradient(top, #DBDBDD, #B4B4B8);
  background: -ms-linear-gradient(top, #DBDBDD, #B4B4B8);
/*background: -o-gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));background: gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));*/;
}

.mobile_item:hover {
  background: none #DBDBDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#DBDBDD), to(#FFFFFF), color-stop(0.5, white));
  background: -moz-linear-gradient(top, #DBDBDD, #FFFFFF);
  background: -ms-linear-gradient(top, #DBDBDD, #FFFFFF);
/*background: -o-gradient(linear, left top, left bottom, from(#DBDBDD), to(#FFFFFF), color-stop(0.5, white));background: gradient(linear, left top, left bottom, from(#DBDBDD), to(#FFFFFF), color-stop(0.5, white));*/;
}

.mobile_item_link_content {
  padding: 0 1em 0 45px;
  background: url(http://illiweb.com/fa/mobile/arrow_right.png) no-repeat scroll 100% 50%;
}

.forum_no_new {
  background: url(http://illiweb.com/fa/subsilver/folder_big.gif) no-repeat scroll 0 50%;
}

.forum_new {
  background: url(http://illiweb.com/fa/subsilver/folder_new_big.gif) no-repeat scroll 0 50%;
}

.forum_locked {
  background: url(http://illiweb.com/fa/subsilver/folder_locked_big.gif) no-repeat scroll 0 50%;
}

.cat_no_new {
  background: url(http://illiweb.com/fa/subsilver/category.gif) no-repeat scroll 0 50%;
}

.cat_new {
  background: url(http://illiweb.com/fa/subsilver/category_new.gif) no-repeat scroll 0 50%;
}

.cat_locked {
  background: url(http://illiweb.com/fa/subsilver/category_locked.gif) no-repeat scroll 0 50%;
}

.folder_birthday {
  background: url() no-repeat scroll 10px 50%;
}

.folder_no_new {
  background: url(http://illiweb.com/fa/prosilver/topic_read.gif) no-repeat scroll 10px 50%;
}

.folder_new {
  background: url(http://illiweb.com/fa/prosilver/topic_unread.gif) no-repeat scroll 10px 50%;
}

.folder_global {
  background: url(http://illiweb.com/fa/prosilver/announce_read.gif) no-repeat scroll 10px 50%;
}

.folder_global_new {
  background: url(http://illiweb.com/fa/prosilver/announce_unread.gif) no-repeat scroll 10px 50%;
}

.folder_announce {
  background: url(http://illiweb.com/fa/prosilver/announce_read.gif) no-repeat scroll 10px 50%;
}

.folder_announce_new {
  background: url(http://illiweb.com/fa/prosilver/announce_unread.gif) no-repeat scroll 10px 50%;
}

.folder_sticky {
  background: url(http://illiweb.com/fa/prosilver/sticky_read.gif) no-repeat scroll 10px 50%;
}

.folder_sticky_new {
  background: url(http://illiweb.com/fa/prosilver/sticky_unread.gif) no-repeat scroll 10px 50%;
}

.folder_locked {
  background: url(http://illiweb.com/fa/prosilver/topic_read_locked.gif) no-repeat scroll 10px 50%;
}

.folder_locked_new {
  background: url(http://illiweb.com/fa/prosilver/topic_unread_locked.gif) no-repeat scroll 10px 50%;
}

.folder_hot {
  background: url(http://illiweb.com/fa/prosilver/topic_read_hot.gif) no-repeat scroll 10px 50%;
}

.folder_hot_new {
  background: url(http://illiweb.com/fa/prosilver/topic_unread_hot.gif) no-repeat scroll 10px 50%;
}

.mobile_subtitle {
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
  font-weight: bold;
  line-height: 1.3em;
}

.mobile_comment {
  font-size: 0.8em;
  color: #666;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
  line-height: 1.3em;
}

.block {
  display: block;
}

.mobile_prev_button, .mobile_next_button {
  display: inline-block;
  position: absolute;
  height: 26px;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
  margin: 0;
  padding: 0 5px;
  border: 1px solid rgba(0,0,0, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: none #9fb3cc;
  background: -webkit-gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa));
  background: -moz-linear-gradient(top, #9fb3cc, #5b80ab);
  background: -ms-linear-gradient(top, #9fb3cc, #5b80ab);
/*background: -o-gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa));background: gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa));*/;
}

.mobile_prev_button p, .mobile_next_button p {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 26px;
  margin: 0;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
  z-index: 2;
}

.mobile_prev_button {
  left: 12px;
}

.mobile_next_button {
  right: 12px;
}

.mobile_prev_button p {
  padding: 0 0px 0 15px;
  background: url("http://illiweb.com/fa/mobile/inner-left-arrow.png") no-repeat scroll left center transparent;
}

.mobile_next_button p {
  padding: 0 15px 0 0px;
  background: url("http://illiweb.com/fa/mobile/inner-right-arrow.png") no-repeat scroll right center transparent;
}

.clear {
  clear: both;
  width: 1px;
  font-size: 1px;
  line-height: 1px;
}

blockquote {
  display: inline-block;
  background: none #e5e5e5;
  padding: 0.5em;
  position: relative;
  max-width: 96%;
  margin: 1em auto;
  border: 1px solid #000;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

blockquote .quote_content {
  display: block;
  padding: 0 1em 1em;
}

blockquote cite {
  background: none white;
  float: left;
  padding: 0.5em;
  margin-bottom: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
}

blockquote .open_quote {
  display: block;
  font-weight: bold;
  font-size: 2em;
  height: 0.5em;
  width: 0.5em;
}

blockquote .close_quote {
  display: block;
  height: 0;
  font-weight: bold;
  font-size: 2em;
  padding-bottom: 0.5em;
  position: absolute;
  right: 0.2em;
  bottom: 0;
}

.spoiler .spoiler_content {
  display: none;
}

.spoiler .spoiler_content.hidden {
  display: block;
}

.spoiler {
  display: block;
  background: none #e5e5e5;
  padding: 0.5em;
  position: relative;
  width: 96%;
  margin: 1em auto;
  border: 1px solid #000;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

.spoiler_content {
  background: none white;
  margin-top: 0.5em;
  display: inline-block;
  padding: 0 1em;
  line-height: 1.3em;
  overflow: auto;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
}

.spoiler_title {
  cursor: pointer;
  background: none white;
  padding: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
}

.codebox {
  background-color: #e5e5e5;
  padding: 0.5em;
  border: 1px solid #000;
}

.codebox code {
  display: block;
  color: green;
  background-color: white;
  overflow: auto;
}

/* TEMP */
.post {
  padding: 0 0 1em;
  line-height: 1.3em;
  margin: 0;
  font-size: 0.8em;
  background: none #DBDBDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));
  background: -moz-linear-gradient(top, #DBDBDD, #B4B4B8);
  background: -ms-linear-gradient(top, #DBDBDD, #B4B4B8);
/*background: -o-gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));background: gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));*/;
}

.postbody {
  position: relative;
}

.postbody:after {
  width: 50%;
  height: 1px;
  background-color: #fff;
  content: '\00a0';
  position: absolute;
  bottom: -0.5em;
  left: 25%;
  right: 25%;
}

.postbody .post_header {
  margin: 0;
  padding: 0.5em;
  color: #fff;
  font-size: 0.9em;
  background: none #347DEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));
  background: -moz-linear-gradient(top, #347DEE, #24445C);
  background: -ms-linear-gradient(top, #347DEE, #24445C);
/*background: -o-gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));background: gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));*/;
}

.postbody .post_header a {
  color: #fff;
  vertical-align: text-top;
}

.postbody .post_header hr {
  margin: 0.5em 1em;
  height: 1px;
}

.postbody .content {
  position: relative;
  padding: 1em;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.img_link {
  display: inline-block;
  padding: 0 0.5em;
  white-space: nowrap;
  height: 2.3em;
  font-weight: normal;
}

.img_link:before {
  content: '[';
  font-size: 2em;
  vertical-align: sub;
  line-height: 1em;
}

.img_link:after {
  content: ']';
  font-size: 2em;
  vertical-align: sub;
  line-height: 1em;
}

.application_footer_spacer {
  height: 3em;
}

#page-footer {
  color: #fff;
  padding: 0.5em;
  margin-top: -3em;
  position: relative;
  text-align: center;
  height: 2em;
  background: none #000;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), color-stop(0.05, white), color-stop(0.3, #333), to(black));
  background: -moz-linear-gradient(top, #666, #000);
  background: -ms-linear-gradient(top, #666, #000);
/*background: -o-gradient(linear, 0% 0%, 0% 100%, from(black), color-stop(0.05, white), color-stop(0.3, #333), to(black));background: gradient(linear, 0% 0%, 0% 100%, from(black), color-stop(0.05, white), color-stop(0.3, #333), to(black));*/;
}

#page-footer a {
  color: #fff;
  display: block;
  line-height: 1.3em;
}

.small {
  font-size: 0.9em;
}

.poll {
  padding: 0.5em;
}

.poll .fieldset {
  border: 1px solid #000;
  padding: 0.5em;
}

.poll .legend {
  padding: 0 0 0.5em 0;
}

.poll dl {
  display: table;
  padding: 0 0 1em;
}

.poll dt, .poll dd {
  display: table-cell;
  padding: 0 1em;
}

.poll .table-row {
  display: table-row;
}

.poll .bold {
  font-weight: bold;
}

.attachbox {
  display: inline-block;
  border: 1px solid #000;
  margin-top: 2em;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

.attachbox .title {
  background-color: #fff;
  display: inline-block;
  padding: 0.2em 0.5em;
  -webkit-border-bottom-right-radius: 1em;
  -webkit-border-top-left-radius: 1em;
  -moz-border-radius: 1em;
  border-bottom-right-radius: 1em;
  border-top-left-radius: 1em;
}

dl.attachments {
  padding: 0 0.5em 0.5em;
}

dl.attachments dt {
  padding-top: 0.5em;
}

.hiddenMsgTitle {
  font-size: 0.9em;
}

.hiddenMsgBody {
  display: none;
  padding-top: 2em;
}

/* NAVIGATION BAR */
div#mToggleContainer {
  float: right;
  margin: 0;
  padding: 0;
  height: 33px;
  margin-top: -2px;
  width: 30px;
  background-color: #333333;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;
}

a#mToggleArrow {
  background-color: rgb(51, 51, 51);
  display: block;
  width: 30px;
  height: 33px;
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
}

a#mToggleArrow.hiddenBar {
  background-image: url('http://illiweb.com/fa/i/mobileNavbar/sprite.png');
  background-position: -160px 0;
}

a#mToggleArrow.shownBar {
  background-image: url('http://illiweb.com/fa/i/mobileNavbar/sprite.png');
  background-position: -192px 0;
}

ul#mNavbar {
  display: none;
  background-color: rgb(51, 51, 51);
  height: 50px;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

ul#mNavbar li {
  display: inline-block;
  padding: 0 10px;
  height: 100%;
  min-width: 50px;
  text-align: center;
}

a.navElement {
  text-decoration: none;
  border: none;
  display: block;
}

a.navElement span.navBtnIcon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: transparent url('http://illiweb.com/fa/i/mobileNavbar/sprite.png') no-repeat -224px 0;
}

a.navElement span.navBtnLabel {
  display: inline-block;
  color: #FFFFFF;
  font-weight: bold;
  white-space: nowrap;
}

/* ACTION BAR */
#mobileActionBar {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0;
  background-color: #333333;
  width: 100%;
  position: fixed;
  bottom: 0;
}

#mobileActionBar a.navbar {
  text-decoration: none;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  color: #FFFFFF;
  white-space: nowrap;
}

#mobileActionBar .mobileActionLabel {
  background: transparent url('http://illiweb.com/fa/i/mobileNavbar/ico_page001.png') no-repeat scroll left center;
  display: inline-block;
  line-height: 30px;
  padding-left: 25px;
  font-size: 0.9em;
}

/* MISC */
.inputTxtContainer {
  margin: 20px 0 0 0;
  padding: 5px;
  border: 1px solid #616161;
  background-color: #FFFFFF;
}

.inputTxtContainer .inputTxt {
  color: #606060;
  border: none;
  display: block;
  min-width: 90%;
}

.defaultBtn {
  display: inline-block;
  background: #6586ae url('http://illiweb.com/fa/i/mobileNavbar/bg_btn001.png') repeat-x top left;
  color: #fff;
  border: 1px solid #374d67;
  border-radius: 3px;
  padding: 0 6px;
  height: 26px;
}

.message_die {
  width: 90%;
  padding-top: 20px;
  margin: 0 auto;
  font-size: 0.8em;
}

.message_title {
  font-weight: bold;
  text-align: center;
}

.message_text {
  padding: 16px 0;
  line-height: 1.3em;
  text-align: justify;
}

.message_text a {
  text-decoration: underline;
  font-weight: bold;
  color: #275271;
}

As for the login popup on mobile ? Seeing as it's not on mobile, it was most likely develop for the classic version only. However, that doesn't limit you from developing a popup that works on mobile.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Theme and First View on an iPad

Post by moreno5 on December 29th 2014, 11:32 pm

@Ange Tuteur wrote:Hi @moreno5,

Yes, you can change the style of the mobile version via the CSS stylesheet. This is the CSS for the mobile version I had lying around :
Code:
/* Version Mobile */
/* CSS Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, hr {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0?‘ in the markup */table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*Fin CSS Reset */
html,body {
  height: 100%;
}

body {
  font-size: 16px;
  font-family: Helvetica, sans-serif;
}

#page-body {
  position: relative;
  min-height: 100%;
  background: none #c4c4c6;
}

.mobile_title {
  font-size: 0.9em;
  height: 29px;
  position: relative;
  padding: 2px 0;
  line-height: 12px;
  background: none #BECCDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#BECCDD), to(#587397), color-stop(0.48, #8B9DB5), color-stop(0.5, #8195AF));
  background: -moz-linear-gradient(top, #BECCDD, #587397);
  background: -ms-linear-gradient(top, #BECCDD, #587397);
  background: linear-gradient(top, #BECCDD, #587397);
  border-top: 1px solid #D0D9E6;
  border-right: none;
  border-bottom: 1px solid #3F5C80;
  border-left: none;
}

.mobile_title.application_header {
  position: fixed;
  width: 100%;
  z-index: 100;
}

.application_header_spacer {
  height: 33px;
}

.mobile_title_content {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  font-weight: bold;
  float: none;
  width: auto;
  position: absolute;
  left: 65px;
  right: 65px;
  text-align: center;
  line-height: 34px;
  color: #fff;
  top: 0px;
}

.mobile_set {
  height: 1em;
  padding: 0.5em;
  color: #fff;
  font-size: 0.9em;
  background: none #347DEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));
  background: -moz-linear-gradient(top, #347DEE, #24445C);
  background: -ms-linear-gradient(top, #347DEE, #24445C);
/*background: -o-gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));background: gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));*/;
}

.mobile_set_content {
  float: left;
  width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  font-weight: bold;
  line-height: 1.2em;
}

.mobile_item {
  margin: 0;
  border: 1px solid #EEEEEF;
  border-bottom-color: #9C9EA5;
  border-right: 0;
  border-left: 0;
  padding: 0.5em 0;
  font-size: 0.8em;
  background: none #DBDBDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));
  background: -moz-linear-gradient(top, #DBDBDD, #B4B4B8);
  background: -ms-linear-gradient(top, #DBDBDD, #B4B4B8);
/*background: -o-gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));background: gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));*/;
}

.mobile_item:hover {
  background: none #DBDBDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#DBDBDD), to(#FFFFFF), color-stop(0.5, white));
  background: -moz-linear-gradient(top, #DBDBDD, #FFFFFF);
  background: -ms-linear-gradient(top, #DBDBDD, #FFFFFF);
/*background: -o-gradient(linear, left top, left bottom, from(#DBDBDD), to(#FFFFFF), color-stop(0.5, white));background: gradient(linear, left top, left bottom, from(#DBDBDD), to(#FFFFFF), color-stop(0.5, white));*/;
}

.mobile_item_link_content {
  padding: 0 1em 0 45px;
  background: url(http://illiweb.com/fa/mobile/arrow_right.png) no-repeat scroll 100% 50%;
}

.forum_no_new {
  background: url(http://illiweb.com/fa/subsilver/folder_big.gif) no-repeat scroll 0 50%;
}

.forum_new {
  background: url(http://illiweb.com/fa/subsilver/folder_new_big.gif) no-repeat scroll 0 50%;
}

.forum_locked {
  background: url(http://illiweb.com/fa/subsilver/folder_locked_big.gif) no-repeat scroll 0 50%;
}

.cat_no_new {
  background: url(http://illiweb.com/fa/subsilver/category.gif) no-repeat scroll 0 50%;
}

.cat_new {
  background: url(http://illiweb.com/fa/subsilver/category_new.gif) no-repeat scroll 0 50%;
}

.cat_locked {
  background: url(http://illiweb.com/fa/subsilver/category_locked.gif) no-repeat scroll 0 50%;
}

.folder_birthday {
  background: url() no-repeat scroll 10px 50%;
}

.folder_no_new {
  background: url(http://illiweb.com/fa/prosilver/topic_read.gif) no-repeat scroll 10px 50%;
}

.folder_new {
  background: url(http://illiweb.com/fa/prosilver/topic_unread.gif) no-repeat scroll 10px 50%;
}

.folder_global {
  background: url(http://illiweb.com/fa/prosilver/announce_read.gif) no-repeat scroll 10px 50%;
}

.folder_global_new {
  background: url(http://illiweb.com/fa/prosilver/announce_unread.gif) no-repeat scroll 10px 50%;
}

.folder_announce {
  background: url(http://illiweb.com/fa/prosilver/announce_read.gif) no-repeat scroll 10px 50%;
}

.folder_announce_new {
  background: url(http://illiweb.com/fa/prosilver/announce_unread.gif) no-repeat scroll 10px 50%;
}

.folder_sticky {
  background: url(http://illiweb.com/fa/prosilver/sticky_read.gif) no-repeat scroll 10px 50%;
}

.folder_sticky_new {
  background: url(http://illiweb.com/fa/prosilver/sticky_unread.gif) no-repeat scroll 10px 50%;
}

.folder_locked {
  background: url(http://illiweb.com/fa/prosilver/topic_read_locked.gif) no-repeat scroll 10px 50%;
}

.folder_locked_new {
  background: url(http://illiweb.com/fa/prosilver/topic_unread_locked.gif) no-repeat scroll 10px 50%;
}

.folder_hot {
  background: url(http://illiweb.com/fa/prosilver/topic_read_hot.gif) no-repeat scroll 10px 50%;
}

.folder_hot_new {
  background: url(http://illiweb.com/fa/prosilver/topic_unread_hot.gif) no-repeat scroll 10px 50%;
}

.mobile_subtitle {
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
  font-weight: bold;
  line-height: 1.3em;
}

.mobile_comment {
  font-size: 0.8em;
  color: #666;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
  line-height: 1.3em;
}

.block {
  display: block;
}

.mobile_prev_button, .mobile_next_button {
  display: inline-block;
  position: absolute;
  height: 26px;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
  margin: 0;
  padding: 0 5px;
  border: 1px solid rgba(0,0,0, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: none #9fb3cc;
  background: -webkit-gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa));
  background: -moz-linear-gradient(top, #9fb3cc, #5b80ab);
  background: -ms-linear-gradient(top, #9fb3cc, #5b80ab);
/*background: -o-gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa));background: gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa));*/;
}

.mobile_prev_button p, .mobile_next_button p {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 26px;
  margin: 0;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
  z-index: 2;
}

.mobile_prev_button {
  left: 12px;
}

.mobile_next_button {
  right: 12px;
}

.mobile_prev_button p {
  padding: 0 0px 0 15px;
  background: url("http://illiweb.com/fa/mobile/inner-left-arrow.png") no-repeat scroll left center transparent;
}

.mobile_next_button p {
  padding: 0 15px 0 0px;
  background: url("http://illiweb.com/fa/mobile/inner-right-arrow.png") no-repeat scroll right center transparent;
}

.clear {
  clear: both;
  width: 1px;
  font-size: 1px;
  line-height: 1px;
}

blockquote {
  display: inline-block;
  background: none #e5e5e5;
  padding: 0.5em;
  position: relative;
  max-width: 96%;
  margin: 1em auto;
  border: 1px solid #000;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

blockquote .quote_content {
  display: block;
  padding: 0 1em 1em;
}

blockquote cite {
  background: none white;
  float: left;
  padding: 0.5em;
  margin-bottom: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
}

blockquote .open_quote {
  display: block;
  font-weight: bold;
  font-size: 2em;
  height: 0.5em;
  width: 0.5em;
}

blockquote .close_quote {
  display: block;
  height: 0;
  font-weight: bold;
  font-size: 2em;
  padding-bottom: 0.5em;
  position: absolute;
  right: 0.2em;
  bottom: 0;
}

.spoiler .spoiler_content {
  display: none;
}

.spoiler .spoiler_content.hidden {
  display: block;
}

.spoiler {
  display: block;
  background: none #e5e5e5;
  padding: 0.5em;
  position: relative;
  width: 96%;
  margin: 1em auto;
  border: 1px solid #000;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

.spoiler_content {
  background: none white;
  margin-top: 0.5em;
  display: inline-block;
  padding: 0 1em;
  line-height: 1.3em;
  overflow: auto;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
}

.spoiler_title {
  cursor: pointer;
  background: none white;
  padding: 0.5em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
}

.codebox {
  background-color: #e5e5e5;
  padding: 0.5em;
  border: 1px solid #000;
}

.codebox code {
  display: block;
  color: green;
  background-color: white;
  overflow: auto;
}

/* TEMP */
.post {
  padding: 0 0 1em;
  line-height: 1.3em;
  margin: 0;
  font-size: 0.8em;
  background: none #DBDBDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));
  background: -moz-linear-gradient(top, #DBDBDD, #B4B4B8);
  background: -ms-linear-gradient(top, #DBDBDD, #B4B4B8);
/*background: -o-gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));background: gradient(linear, left top, left bottom, from(#DBDBDD), to(#B4B4B8), color-stop(1, white));*/;
}

.postbody {
  position: relative;
}

.postbody:after {
  width: 50%;
  height: 1px;
  background-color: #fff;
  content: '\00a0';
  position: absolute;
  bottom: -0.5em;
  left: 25%;
  right: 25%;
}

.postbody .post_header {
  margin: 0;
  padding: 0.5em;
  color: #fff;
  font-size: 0.9em;
  background: none #347DEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));
  background: -moz-linear-gradient(top, #347DEE, #24445C);
  background: -ms-linear-gradient(top, #347DEE, #24445C);
/*background: -o-gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));background: gradient(linear, left top, left bottom, from(#347DEE), to(#24445C), color-stop(0.48, #489CDB), color-stop(0.5, #388CCB));*/;
}

.postbody .post_header a {
  color: #fff;
  vertical-align: text-top;
}

.postbody .post_header hr {
  margin: 0.5em 1em;
  height: 1px;
}

.postbody .content {
  position: relative;
  padding: 1em;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.img_link {
  display: inline-block;
  padding: 0 0.5em;
  white-space: nowrap;
  height: 2.3em;
  font-weight: normal;
}

.img_link:before {
  content: '[';
  font-size: 2em;
  vertical-align: sub;
  line-height: 1em;
}

.img_link:after {
  content: ']';
  font-size: 2em;
  vertical-align: sub;
  line-height: 1em;
}

.application_footer_spacer {
  height: 3em;
}

#page-footer {
  color: #fff;
  padding: 0.5em;
  margin-top: -3em;
  position: relative;
  text-align: center;
  height: 2em;
  background: none #000;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), color-stop(0.05, white), color-stop(0.3, #333), to(black));
  background: -moz-linear-gradient(top, #666, #000);
  background: -ms-linear-gradient(top, #666, #000);
/*background: -o-gradient(linear, 0% 0%, 0% 100%, from(black), color-stop(0.05, white), color-stop(0.3, #333), to(black));background: gradient(linear, 0% 0%, 0% 100%, from(black), color-stop(0.05, white), color-stop(0.3, #333), to(black));*/;
}

#page-footer a {
  color: #fff;
  display: block;
  line-height: 1.3em;
}

.small {
  font-size: 0.9em;
}

.poll {
  padding: 0.5em;
}

.poll .fieldset {
  border: 1px solid #000;
  padding: 0.5em;
}

.poll .legend {
  padding: 0 0 0.5em 0;
}

.poll dl {
  display: table;
  padding: 0 0 1em;
}

.poll dt, .poll dd {
  display: table-cell;
  padding: 0 1em;
}

.poll .table-row {
  display: table-row;
}

.poll .bold {
  font-weight: bold;
}

.attachbox {
  display: inline-block;
  border: 1px solid #000;
  margin-top: 2em;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

.attachbox .title {
  background-color: #fff;
  display: inline-block;
  padding: 0.2em 0.5em;
  -webkit-border-bottom-right-radius: 1em;
  -webkit-border-top-left-radius: 1em;
  -moz-border-radius: 1em;
  border-bottom-right-radius: 1em;
  border-top-left-radius: 1em;
}

dl.attachments {
  padding: 0 0.5em 0.5em;
}

dl.attachments dt {
  padding-top: 0.5em;
}

.hiddenMsgTitle {
  font-size: 0.9em;
}

.hiddenMsgBody {
  display: none;
  padding-top: 2em;
}

/* NAVIGATION BAR */
div#mToggleContainer {
  float: right;
  margin: 0;
  padding: 0;
  height: 33px;
  margin-top: -2px;
  width: 30px;
  background-color: #333333;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;
}

a#mToggleArrow {
  background-color: rgb(51, 51, 51);
  display: block;
  width: 30px;
  height: 33px;
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
}

a#mToggleArrow.hiddenBar {
  background-image: url('http://illiweb.com/fa/i/mobileNavbar/sprite.png');
  background-position: -160px 0;
}

a#mToggleArrow.shownBar {
  background-image: url('http://illiweb.com/fa/i/mobileNavbar/sprite.png');
  background-position: -192px 0;
}

ul#mNavbar {
  display: none;
  background-color: rgb(51, 51, 51);
  height: 50px;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

ul#mNavbar li {
  display: inline-block;
  padding: 0 10px;
  height: 100%;
  min-width: 50px;
  text-align: center;
}

a.navElement {
  text-decoration: none;
  border: none;
  display: block;
}

a.navElement span.navBtnIcon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: transparent url('http://illiweb.com/fa/i/mobileNavbar/sprite.png') no-repeat -224px 0;
}

a.navElement span.navBtnLabel {
  display: inline-block;
  color: #FFFFFF;
  font-weight: bold;
  white-space: nowrap;
}

/* ACTION BAR */
#mobileActionBar {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0;
  background-color: #333333;
  width: 100%;
  position: fixed;
  bottom: 0;
}

#mobileActionBar a.navbar {
  text-decoration: none;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  color: #FFFFFF;
  white-space: nowrap;
}

#mobileActionBar .mobileActionLabel {
  background: transparent url('http://illiweb.com/fa/i/mobileNavbar/ico_page001.png') no-repeat scroll left center;
  display: inline-block;
  line-height: 30px;
  padding-left: 25px;
  font-size: 0.9em;
}

/* MISC */
.inputTxtContainer {
  margin: 20px 0 0 0;
  padding: 5px;
  border: 1px solid #616161;
  background-color: #FFFFFF;
}

.inputTxtContainer .inputTxt {
  color: #606060;
  border: none;
  display: block;
  min-width: 90%;
}

.defaultBtn {
  display: inline-block;
  background: #6586ae url('http://illiweb.com/fa/i/mobileNavbar/bg_btn001.png') repeat-x top left;
  color: #fff;
  border: 1px solid #374d67;
  border-radius: 3px;
  padding: 0 6px;
  height: 26px;
}

.message_die {
  width: 90%;
  padding-top: 20px;
  margin: 0 auto;
  font-size: 0.8em;
}

.message_title {
  font-weight: bold;
  text-align: center;
}

.message_text {
  padding: 16px 0;
  line-height: 1.3em;
  text-align: justify;
}

.message_text a {
  text-decoration: underline;
  font-weight: bold;
  color: #275271;
}

As for the login popup on mobile ? Seeing as it's not on mobile, it was most likely develop for the classic version only. However, that doesn't limit you from developing a popup that works on mobile.

Not a clue where to even start with that. Surely there must be a way of forcing classic view on the mobile device instead of the mobile view?

moreno5
Forumember

Posts : 26
Reputation : 1
Language : English

http://victoriaparkdartford.forumotion.co.uk

Back to top Go down

Solved Re: Theme and First View on an iPad

Post by Ange Tuteur on December 29th 2014, 11:48 pm

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : your choice
Placement : in all the pages
Paste the code below and submit :
Code:
$(function(){if (_userdata && _userdata.page_desktop) window.location.href = _userdata.page_desktop.replace(/&/,'&')});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Theme and First View on an iPad

Post by moreno5 on December 30th 2014, 9:43 am

@Ange Tuteur wrote:Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : your choice
Placement : in all the pages
Paste the code below and submit :
Code:
$(function(){if (_userdata && _userdata.page_desktop) window.location.href = _userdata.page_desktop.replace(/&/,'&')});

Brilliant Ange, that is perfect!

Thanks for your help....consider this one solved!

moreno5
Forumember

Posts : 26
Reputation : 1
Language : English

http://victoriaparkdartford.forumotion.co.uk

Back to top Go down

Solved Re: Theme and First View on an iPad

Post by Ange Tuteur on December 30th 2014, 8:05 pm

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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