2013-11-05, 07:10 AM
As you see here, things are all screwed up with desktop theme on mobile. Here's Global CSS copy and images.
Also forum.css
The reason for forum.css was because Desktop Opera was displaying all pages completely fraggled. This line fixed things in Opera. Not sure if it's the cause of the issues with standard theme on mobile or no.
Thanks for any help on this. The first 3 (posts and thread list) are not looking correct at all. The 4th (index) is fine and how all areas should hopefully be.
Okay, have solved the issue with image 3 (thread list). This was due to
I'm still having a problem with as you see in image 1 and image 2 (show thread). I can't figure out what the problem is here. I've replaced showthread with untouched template and the problem remains. Anyone has an idea here, that's appreciated.
body {
color: #000;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: Open Sans, Tahoma, Arial, Sans-Serif;
font-size: 13px;
background: linear-gradient(to bottom, rgba(133,133,133,0.65) 0%,rgba(133,133,133,0) 100%); /* W3C */
}
.post_body a:link, .post_body a:visited {
text-shadow: .05em .05em .05em;
}
.post_body a:hover, .post_body a:active {
transition: color 0.5s ease-in-out;
text-decoration: underline;
}
a:link {
color: #555;
text-decoration: none;
text-shadow: none;
}
a:visited {
color: #444;
text-decoration: none;
text-shadow: none;
}
a:hover, a:active {
color: #000;
transition: color 0.5s ease-in-out;
text-decoration: underline;
}
#container {
width: 96%;
color: #000;
text-align: left;
line-height: 1.4;
margin: 15px auto;
box-shadow: 0 0 10px #000000;
font-family: Open Sans, Tahoma, Arial, Sans-Serif;
font-size: 13px;
}
.wrapper {
width: 95%;
max-width: 1366px;
margin: auto auto;
}
#logo {
background: url(http://www.chinaphonearena.com/forum/images/headerbackground.jpg) repeat-x scroll left bottom #13BCD0;
box-shadow: 0 0 10px #000000;border-radius: 10px 10px 0 0;
border-radius: 0 0 0 0;
min-height: 100px;
border-bottom: 1px solid #1d2b34;
}
#content {
overflow: visible !important;
background: #fff;
width: auto !important;
padding: 20px 10px;
border-bottom: 1px solid #000;
}
#panel ul.menu {
margin: 0;
padding: 0;
list-style: none;
}
#panel ul.menu li {
margin: 0 5px;
display: inline;
}
#panel ul.menu li a {
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
}
#panel .upper ul.top_links {
float: right;
font-weight: bold;
}
#panel .upper ul.top_links a.search {
background-image: url(images/twilight/icons/search.gif);
}
#panel .upper ul.top_links a.memberlist {
background-image: url(images/twilight/icons/memberlist.gif);
}
#panel .upper ul.top_links a.calendar {
background-image: url(images/twilight/icons/calendar.gif);
}
#panel .upper ul.top_links a.help {
background-image: url(images/twilight/icons/help.gif);
}
#panel .upper a.logout {
font-weight: bold;
background: url(images/twilight/icons/logout.gif) right no-repeat;
padding-right: 20px;
margin-left: 10px;
}
#panel .upper a.login,
#panel .upper a.lost_password {
background: url(images/twilight/icons/login.gif) no-repeat;
padding-left: 20px;
margin-left: 10px;
font-weight: bold;
}
#panel .upper a.register {
background: url(images/twilight/icons/logout.gif) right no-repeat;
padding-right: 20px;
margin-left: 10px;
font-weight: bold;
}
#panel .lower ul.panel_links {
float: left;
}
#panel .lower ul.panel_links a.usercp {
background-image: url(images/twilight/icons/usercp.gif);
}
#panel .lower ul.panel_links a.modcp {
background-image: url(images/twilight/icons/modcp.gif);
}
#panel .lower ul.panel_links a.admincp {
background-image: url(images/twilight/icons/admincp.gif);
}
#panel .lower ul.user_links {
float: right;
}
#panel .lower ul.user_links li a {
padding: 0;
}
#panel .upper {
background: #0f0f0f url(images/twilight/tcat.png) repeat-x;
color: #fff;
border-top: 1px solid #444;
border-bottom: 1px solid #000;
padding: 7px;
}
#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
color: #fff;
}
#panel .lower {
background: #efefef;
color: #999;
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
overflow: hidden;
padding: 5px;
}
#panel .lower a:link,
#panel .lower a:visited {
color: #666;
}
#panel .lower a:hover,
#panel .lower a:active {
color: #333;
text-decoration: none;
}
#panel .remember_me input {
vertical-align: middle;
margin: -3px 0 0 5px;
}
#panel input {
margin: -3px 0;
}
#panel input.button {
padding: 0;
}
#footer ul.menu {
margin: 0;
padding: 0;
list-style: none;
}
#footer ul.menu li {
margin: 0 5px;
display: inline;
}
#footer .upper {
background: #0f0f0f url(images/twilight/tcat.png) repeat-x;
padding: 6px;
overflow: hidden;
font-size: 12px;
}
#footer a:link,
#footer a:visited {
color: #aaa;
}
#footer a:hover,
#footer a:active {
color: #fff;
text-decoration: none;
}
#footer .upper .language {
float: right;
margin: -2px;
}
#footer .upper .language select {
border-color: #000;
}
#footer .upper ul.bottom_links {
float: left;
margin: 3px 0 0 -5px;
}
#footer .lower {
background: #273a46 url(images/twilight/thead.png) top left repeat-x;
color: #fff;
border-top: 1px solid #000;
border-bottom: 1px solid #1d2b34;
overflow: hidden;
padding: 6px;
font-size: 11px;
}
#footer .lower a:link,
#footer .lower a:visited {
color: #fff;
font-weight: bold;
}
#footer .lower a:hover,
#footer .lower a:active {
color: #fff;
text-decoration: underline;
font-weight: bold;
}
#footer .lower #current_time {
float: right;
}
fieldset {
border: 1px solid #ddd;
}
table {
color: #000000;
font-size: 13px;
}
.tborder {
background: #fff;
width: 100%;
margin: auto auto;
border: 1px solid #ccc;
padding: 1px;
}
.thead {
background: #273a46 url(images/twilight/thead.png) top left repeat-x;
color: #ffffff;
border-bottom: 1px solid #1d2b34;
padding: 8px;
}
.thead a:link {
color: #ffffff;
text-decoration: none;
}
.thead a:visited {
color: #ffffff;
text-decoration: none;
}
.thead a:hover, .thead a:active {
color: #ffffff;
text-decoration: underline;
}
.tcat {
background: #0f0f0f url(images/twilight/tcat.png) repeat-x;
color: #fff;
border-top: 1px solid #444;
border-bottom: 1px solid #000;
padding: 6px;
font-size: 12px;
}
.tcat a:link {
color: #fff;
}
.tcat a:visited {
color: #fff;
}
.tcat a:hover, .tcat a:active {
color: #fff;
}
.trow1 {
background: #f5f5f5;
border: 1px solid;
border-color: #fff #ddd #ddd #fff;
}
.trow2 {
background: #efefef;
border: 1px solid;
border-color: #fff #ddd #ddd #fff;
}
.trow_shaded {
background: #ffdde0;
border: 1px solid;
border-color: #fff #ffb8be #ffb8be #fff;
}
.trow_selected td {
background: #FFFBD9;
border-right-color: #F7E86A;
border-bottom-color: #F7E86A;
color: #000;
}
.trow_selected td a:link,
.trow_selected td a:visited,
.trow_selected td a:hover,
.trow_selected td a:active {
color: #000;
}
.trow_sep {
background: #ddd;
color: #000;
border-bottom: 1px solid #c5c5c5;
padding: 6px;
font-size: 12px;
font-weight: bold;
}
.tfoot {
background: #273a46 url(images/twilight/thead.png) top left repeat-x;
color: #ffffff;
border-top: 1px solid #fff;
padding: 6px;
}
.tfoot a:link {
color: #ffffff;
text-decoration: none;
}
.tfoot a:visited {
color: #ffffff;
text-decoration: none;
}
.tfoot a:hover, .tfoot a:active {
color: #ffffff;
text-decoration: underline;
}
.thead input.textbox,
.thead select,
.tfoot input.textbox,
.tfoot select {
border: 1px solid #1d2b34;
}
.bottommenu {
background: #efefef;
color: #000000;
border: 1px solid #4874a3;
padding: 10px;
}
.navigation {
color: #000000;
font-size: 12px;
}
.navigation a:link {
text-decoration: none;
}
.navigation a:visited {
text-decoration: none;
}
.navigation a:hover, .navigation a:active {
text-decoration: none;
}
.navigation .active {
color: #000000;
font-size: small;
font-weight: bold;
}
.smalltext {
font-size: 11px;
}
.largetext {
font-size: 16px;
font-weight: bold;
}
input.textbox {
background: #ffffff;
color: #000000;
border: 1px solid #ccc;
padding: 3px;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
}
textarea {
background: #ffffff;
color: #000000;
border: 1px solid #ccc;
padding: 2px;
line-height: 1.4;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
select {
background: #ffffff;
padding: 3px;
border: 1px solid #ccc;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
}
input.button {
padding: 2px;
cursor: pointer;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
}
.editor {
background: #f1f1f1;
border: 1px solid #ccc;
}
.editor_control_bar {
background: #fff;
border: 1px solid #ccc;
}
.autocomplete {
background: #fff;
color: black;
border: 1px solid #ccc;
padding: 1px;
}
.autocomplete_selected {
background: #426276;
color: #fff;
}
.popup_menu {
background: #fff;
border: 1px solid #ccc;
}
.popup_menu .popup_item {
background: #efefef;
color: #000;
}
.popup_menu .popup_item:hover {
background: #426276;
color: #fff;
}
.trow_reputation_positive {
background: #ccffcc;
}
.trow_reputation_negative {
background: #ffcccc;
}
.reputation_positive {
color: green;
}
.reputation_neutral {
color: #444;
}
.reputation_negative {
color: red;
}
.invalid_field {
border: 1px solid #f30;
color: #f30;
}
.valid_field {
border: 1px solid #0c0;
}
.validation_error {
background: url(images/invalid.gif) no-repeat center left;
color: #f30;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-left: 22px;
}
.validation_success {
background: url(images/valid.gif) no-repeat center left;
color: #00b200;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-left: 22px;
}
.validation_loading {
background: url(images/spinner.gif) no-repeat center left;
color: #555;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-left: 22px;
}
/* Additional CSS (Master) */
img {
border: none;
}
.clear {
clear: both;
}
.hidden {
display: none;
float: none;
width: 1%;
}
.hiddenrow {
display: none;
}
.selectall {
background: #FFFBD9;
border-bottom: 1px solid #F7E86A;
color: #000;
text-align: center;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.expcolimage {
float: right;
width: auto;
vertical-align: middle;
margin-top: 3px;
}
img.attachment {
border: 1px solid #E9E5D7;
padding: 2px;
}
hr {
background-color: #000000;
color: #000000;
height: 1px;
border: 0px;
}
#debug {
float: right;
text-align: right;
margin-top: 20px;
font-size: 11px;
}
blockquote {
border: 1px solid #ccc;
margin: 0;
background: #fff;
padding: 4px;
font-size: 11px;
}
blockquote a:link {
font-size:13px;
color:#600000;
}
blockquote a:visited {
text-shadow:white;
color:#600000;
}
blockquote cite {
font-weight: bold;
border-bottom: 1px solid #ccc;
font-style: normal;
display: block;
margin: 4px 0;
font-size: 11px;
}
blockquote cite a:link,blockquote cite a:visited {
font-size: 13px;
}
blockquote cite span {
float: right;
font-weight: normal;
}
blockquote cite span.highlight {
float: none;
font-weight: bold;
padding-bottom: 0;
}
.codeblock {
background: #fff;
border: 1px solid #ccc;
padding: 4px;
}
.codeblock .title {
border-bottom: 1px solid #ccc;
font-weight: bold;
margin: 4px 0;
}
.codeblock code {
overflow: auto;
height: auto;
max-height: 200px;
display: block;
font-family: Monaco, Consolas, Courier, monospace;
font-size: 13px;
}
.subforumicon {
border: 0;
vertical-align: middle;
}
.separator {
margin: 5px;
padding: 0;
height: 0px;
font-size: 1px;
list-style-type: none;
}
form {
margin: 0;
padding: 0;
}
.popup_menu .popup_item_container {
margin: 1px;
text-align: left;
}
.popup_menu .popup_item {
display: block;
padding: 4px;
white-space: nowrap;
text-decoration: none;
}
.popup_menu a.popup_item:hover {
text-decoration: none;
}
.autocomplete {
text-align: left;
}
.subject_new {
font-weight: bold;
}
.highlight {
background: #FFFFCC;
padding-top: 3px;
padding-bottom: 3px;
}
.pm_alert {
background: #FFF6BF;
border: 1px solid #FFD324;
text-align: center;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 11px;
}
.red_alert {
background: #FBE3E4;
border: 1px solid #A5161A;
color: #A5161A;
text-align: center;
padding: 5px 20px;
margin-bottom: 15px;
font-size: 11px;
}
.high_warning {
color: #CC0000;
}
.moderate_warning {
color: #F3611B;
}
.low_warning {
color: #AE5700;
}
div.error {
padding: 5px 10px;
border-top: 2px solid #FFD324;
border-bottom: 2px solid #FFD324;
background: #FFF6BF;
font-size: 12px;
}
div.error p {
margin: 0;
color: #000;
font-weight: normal;
}
div.error p em {
font-style: normal;
font-weight: bold;
padding-left: 24px;
display: block;
color: #C00;
background: url(images/error.gif) no-repeat 0;
}
div.error.ul {
margin-left: 24px;
}
.online {
color: #15A018;
}
.offline {
color: #C7C7C7;
}
.pagination {
font-size: 11px;
padding-top: 10px;
margin-bottom: 5px;
}
.tfoot .pagination, .tcat .pagination {
padding-top: 0;
}
.pagination .pages {
font-weight: bold;
}
.pagination .pagination_current, .pagination a {
padding: 3px 6px;
margin-bottom: 3px;
}
.pagination a {
background: #f5f5f5;
border: 1px solid #ccc;
}
.pagination .pagination_current {
background: none;
color: #000;
border: none;
font-weight: bold;
}
.pagination a:hover {
background: #426276;
color: #fff;
border-color: #273a46;
text-decoration: none;
}
.thread_legend, .thread_legend dd {
margin: 0;
padding: 0;
}
.thread_legend dd {
padding-bottom: 4px;
margin-right: 15px;
}
.thread_legend img {
margin-right: 4px;
vertical-align: bottom;
}
.forum_legend, .forum_legend dt, .forum_legend dd {
margin: 0;
padding: 0;
}
.forum_legend dd {
float: left;
margin-right: 10px;
margin-top: 7px;
}
.forum_legend dt {
margin-right: 10px;
float: left;
}
.success_message {
color: #00b200;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}
.error_message {
color: #C00;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}
.post_body {
padding: 5px;
}
.post_buttons {
background: #f5f5f5;
padding: 3px 3px 0 3px;
border-bottom: 1px solid #ddd;
}
.post_content {
padding: 5px 10px;
}
.quick_jump {
background: url(images/jump.gif) no-repeat 0;
width: 13px;
height: 13px;
padding-left: 13px; /* amount of padding needed for image to fully show */
vertical-align: middle;
border: none;
}
.repbox {
font-size:16px;
font-weight: bold;
padding:5px 7px 5px 7px;
}
._neutral {
background-color:#FAFAFA;
color: #999999;
border:1px solid #CCCCCC;
}
._minus {
background-color: #FDD2D1;
color: #CB0200;
border:1px solid #980201;
}
._plus {
background-color:#E8FCDC;
color: #008800;
border:1px solid #008800;
}
.pagination_breadcrumb {
background-color: #efefef;
border: 1px solid #fff;
outline: 1px solid #ccc;
padding: 5px;
margin-top: 5px;
font-weight: normal;
}
.pagination_breadcrumb_link {
vertical-align: middle;
cursor: pointer;
}
form #message {
width: 500px;
}
.asb_custom_1_main_5 thead {display: none!important;}
.move_right {position:relative; right:-60%;}
Also forum.css
#content {overflow: visible !important;}
The reason for forum.css was because Desktop Opera was displaying all pages completely fraggled. This line fixed things in Opera. Not sure if it's the cause of the issues with standard theme on mobile or no.
Thanks for any help on this. The first 3 (posts and thread list) are not looking correct at all. The 4th (index) is fine and how all areas should hopefully be.
Okay, have solved the issue with image 3 (thread list). This was due to
.move_right {position:relative; right:-60%;}
The <div> was closed properly, but for some reason it continued to affect the entire page. Removing the div move_right call fixed the problem (though the 'new thread' button is right next to multipages, still it doesn't look bad).I'm still having a problem with as you see in image 1 and image 2 (show thread). I can't figure out what the problem is here. I've replaced showthread with untouched template and the problem remains. Anyone has an idea here, that's appreciated.