CSS code for mobile site?
2 posters
Page 1 of 1
CSS code for mobile site?
Is it allowed for us to have access to the css for the mobile version? If so, how?
Guest- Guest
Re: CSS code for mobile site?
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 :
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://2img.net/i/fa/mobile/arrow_right.png) no-repeat scroll 100% 50%;
}
.forum_no_new {
background: url(http://2img.net/i/fa/subsilver/folder_big.gif) no-repeat scroll 0 50%;
}
.forum_new {
background: url(http://2img.net/i/fa/subsilver/folder_new_big.gif) no-repeat scroll 0 50%;
}
.forum_locked {
background: url(http://2img.net/i/fa/subsilver/folder_locked_big.gif) no-repeat scroll 0 50%;
}
.cat_no_new {
background: url(http://2img.net/i/fa/subsilver/category.gif) no-repeat scroll 0 50%;
}
.cat_new {
background: url(http://2img.net/i/fa/subsilver/category_new.gif) no-repeat scroll 0 50%;
}
.cat_locked {
background: url(http://2img.net/i/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://2img.net/i/fa/prosilver/topic_read.gif) no-repeat scroll 10px 50%;
}
.folder_new {
background: url(http://2img.net/i/fa/prosilver/topic_unread.gif) no-repeat scroll 10px 50%;
}
.folder_global {
background: url(http://2img.net/i/fa/prosilver/announce_read.gif) no-repeat scroll 10px 50%;
}
.folder_global_new {
background: url(http://2img.net/i/fa/prosilver/announce_unread.gif) no-repeat scroll 10px 50%;
}
.folder_announce {
background: url(http://2img.net/i/fa/prosilver/announce_read.gif) no-repeat scroll 10px 50%;
}
.folder_announce_new {
background: url(http://2img.net/i/fa/prosilver/announce_unread.gif) no-repeat scroll 10px 50%;
}
.folder_sticky {
background: url(http://2img.net/i/fa/prosilver/sticky_read.gif) no-repeat scroll 10px 50%;
}
.folder_sticky_new {
background: url(http://2img.net/i/fa/prosilver/sticky_unread.gif) no-repeat scroll 10px 50%;
}
.folder_locked {
background: url(http://2img.net/i/fa/prosilver/topic_read_locked.gif) no-repeat scroll 10px 50%;
}
.folder_locked_new {
background: url(http://2img.net/i/fa/prosilver/topic_unread_locked.gif) no-repeat scroll 10px 50%;
}
.folder_hot {
background: url(http://2img.net/i/fa/prosilver/topic_read_hot.gif) no-repeat scroll 10px 50%;
}
.folder_hot_new {
background: url(http://2img.net/i/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://2img.net/i/fa/mobile/inner-left-arrow.png") no-repeat scroll left center transparent;
}
.mobile_next_button p {
padding: 0 15px 0 0px;
background: url("http://2img.net/i/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://2img.net/i/fa/i/mobileNavbar/sprite.png');
background-position: -160px 0;
}
a#mToggleArrow.shownBar {
background-image: url('http://2img.net/i/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://2img.net/i/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://2img.net/i/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://2img.net/i/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;
}
Re: CSS code for mobile site?
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://2img.net/i/fa/mobile/arrow_right.png) no-repeat scroll 100% 50%;
}
.forum_no_new {
background: url(http://2img.net/i/fa/subsilver/folder_big.gif) no-repeat scroll 0 50%;
}
.forum_new {
background: url(http://2img.net/i/fa/subsilver/folder_new_big.gif) no-repeat scroll 0 50%;
}
.forum_locked {
background: url(http://2img.net/i/fa/subsilver/folder_locked_big.gif) no-repeat scroll 0 50%;
}
.cat_no_new {
background: url(http://2img.net/i/fa/subsilver/category.gif) no-repeat scroll 0 50%;
}
.cat_new {
background: url(http://2img.net/i/fa/subsilver/category_new.gif) no-repeat scroll 0 50%;
}
.cat_locked {
background: url(http://2img.net/i/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://2img.net/i/fa/prosilver/topic_read.gif) no-repeat scroll 10px 50%;
}
.folder_new {
background: url(http://2img.net/i/fa/prosilver/topic_unread.gif) no-repeat scroll 10px 50%;
}
.folder_global {
background: url(http://2img.net/i/fa/prosilver/announce_read.gif) no-repeat scroll 10px 50%;
}
.folder_global_new {
background: url(http://2img.net/i/fa/prosilver/announce_unread.gif) no-repeat scroll 10px 50%;
}
.folder_announce {
background: url(http://2img.net/i/fa/prosilver/announce_read.gif) no-repeat scroll 10px 50%;
}
.folder_announce_new {
background: url(http://2img.net/i/fa/prosilver/announce_unread.gif) no-repeat scroll 10px 50%;
}
.folder_sticky {
background: url(http://2img.net/i/fa/prosilver/sticky_read.gif) no-repeat scroll 10px 50%;
}
.folder_sticky_new {
background: url(http://2img.net/i/fa/prosilver/sticky_unread.gif) no-repeat scroll 10px 50%;
}
.folder_locked {
background: url(http://2img.net/i/fa/prosilver/topic_read_locked.gif) no-repeat scroll 10px 50%;
}
.folder_locked_new {
background: url(http://2img.net/i/fa/prosilver/topic_unread_locked.gif) no-repeat scroll 10px 50%;
}
.folder_hot {
background: url(http://2img.net/i/fa/prosilver/topic_read_hot.gif) no-repeat scroll 10px 50%;
}
.folder_hot_new {
background: url(http://2img.net/i/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://2img.net/i/fa/mobile/inner-left-arrow.png") no-repeat scroll left center transparent;
}
.mobile_next_button p {
padding: 0 15px 0 0px;
background: url("http://2img.net/i/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://2img.net/i/fa/i/mobileNavbar/sprite.png');
background-position: -160px 0;
}
a#mToggleArrow.shownBar {
background-image: url('http://2img.net/i/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://2img.net/i/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://2img.net/i/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://2img.net/i/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
- Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: CSS code for mobile site?
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
http://www.technipages.com/google-chrome-change-user-agent-string
Guest- Guest
Re: CSS code for mobile site?
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 ?
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 ?
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.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
Similar topics
» Mobile site
» mobile site help
» Better Mobile site
» Remove Mobile Site?
» How can I disable the mobile site on Punbb?
» mobile site help
» Better Mobile site
» Remove Mobile Site?
» How can I disable the mobile site on Punbb?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum