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.

CSS code for mobile site?

View previous topic View next topic Go down

Solved CSS code for mobile site?

Post by Guest on August 22nd 2014, 7:18 am

Is it allowed for us to have access to the css for the mobile version?  If so, how?

Guest
Guest


Back to top Go down

Solved Re: CSS code for mobile site?

Post by Ange Tuteur on August 22nd 2014, 8:06 am

You can modify the mobile version style as you like, you just need to know the Classnames, or Ids of the elements. You can spoof your browser useragent and trick a website into thinking you're on a mobile device. This allows you to modify the style easily.

This is the CSS from the mobile version on my forum :
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;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2873
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS code for mobile site?

Post by Michael_vx on August 22nd 2014, 11:00 pm

@Ange Tuteur wrote:You can modify the mobile version style as you like, you just need to know the Classnames, or Ids of the elements. You can spoof your browser useragent and trick a website into thinking you're on a mobile device. This allows you to modify the style easily.

This is the CSS from the mobile version on my forum :
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;
}

sorry to post here i know its not my topic but i have thing to ask
how can i get my forum mobile CSS like that and when i like to make some changes how it will be
thank you
avatar
Michael_vx
Forumember

Male Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: CSS code for mobile site?

Post by Guest on August 23rd 2014, 12:37 am

Use Chrome to inspect the element after changing the user agent.  You don't need special software just chrome on a desktop.  Here are some tips..

http://www.technipages.com/google-chrome-change-user-agent-string

Guest
Guest


Back to top Go down

Solved Re: CSS code for mobile site?

Post by Ange Tuteur on August 23rd 2014, 12:49 am

Firefox has no emulation so it takes a little more work.

Address bar > Type about:config > create new string > write general.useragent.override > insert a useragent

Good list of useragents : http://www.useragentstring.com/pages/useragentstring.php

Is this solved for you ?

@Michael_vx wrote:sorry to post here i know its not my topic but i have thing to ask
how can i get my forum mobile CSS like that and when i like to make some changes how it will be
thank you
That should* be the complete default mobile CSS. I can't guarantee it comepletely since I did just pull it from the file on my forum. I didn't modify my mobile version though.
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2873
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS code for mobile site?

Post by Guest on August 23rd 2014, 1:03 am

Solved!  Thanks so much

Guest
Guest


Back to top Go down

Solved Re: CSS code for mobile site?

Post by Ange Tuteur on August 23rd 2014, 1:06 am

You're welcome

Topic archived

Have a nice day. Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2873
Language : EN10, FR5
Location : Macungie, PA

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