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 adukes_007 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?

adukes_007
Forumember

Male Posts : 229
Reputation : 1
Language : English
Location : Alabama- Forrest Gump Land

http://www.turbohkforums.com

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;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

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

Michael_vx
Forumember

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

Back to top Go down

Solved Re: CSS code for mobile site?

Post by adukes_007 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

adukes_007
Forumember

Male Posts : 229
Reputation : 1
Language : English
Location : Alabama- Forrest Gump Land

http://www.turbohkforums.com

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS code for mobile site?

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

Solved!  Thanks so much

adukes_007
Forumember

Male Posts : 229
Reputation : 1
Language : English
Location : Alabama- Forrest Gump Land

http://www.turbohkforums.com

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
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