R3gi Posted June 21, 2014 Report Share Posted June 21, 2014 Hello there! Let me introduce you my new skin "Wooden Darkness" for Maxthon's website & Forum! I have reworked and optimized the user interface, so it doesn't hurt my eyes when browsing web at night. But it isn't too dark, as some black skins are, so it could be comfortably used also during the whole day :-) A few screenshots: It's not finished yet, just first alpha version, but in my opinion it's usable, so you may try it ;-) Just simply copy this code and paste it to AdHunter for maxthon.com:! Wooden Darkness v0.3 ! Maxthon.com skin ! by Zugi, Czech Republic ! --------------------------- !ul.nav.nav-list.mx-sidenav ## #feedback-form, aside{ background-color: #232A31 !important; border: 2px #0066cc solid !important; padding: 5px !important;} ! !--------------------------- ! Font color ## .tpclg .pt, features aside a,h1,h2,h3,strong,.mn a,.banner h1 {color: #0066CC !important;} ## ol li,.row-fluid .form-horizontal .control-label, a,.pl .quote blockquote font, .chart em,.fl_tb dd,.fl_tb dd a {color: #C9C4C4 !important;} ## .communnity,a.xst,.tl #forumnewshow a,.xst,.pcb strong,.pl .quote blockquote strong,.reason_slct .pt.mx-sidenav-wrapper dt.media-heading,.tl .by a, .xg2 strong, .fl .bm_h h2:hover,.flb em, p,ul,summary,td,ul a,.pl .blockcode em,.fl .bm_h a,.fl_tb a, .tl th a, .t_f a,.body .body-title h1 {color: #FFFFFF !important;} ## #worldcup .hr, hr {height: 2px !important; background: #0066CC !important;} ## .location h2,.intro .detail h4,.pn strong, #qmenu {font-weight: 300 !important; color: #FFFFFF !important; text-shadow: 0 0 0 !important;} !--------------------------- ! Font color and no border ## a, , {color: #FFFFFF !important; border: none !important;} ## .ct2_a .tb a,#uhd .tb a {color: #FFFFFF !important; background: transparent !important; border: none !important;} !--------------------------- ! Top nav menu on maxthon.com/app/ ## .categories .items a:hover,#scbar_type:hover, .tbn li:hover, .nav li a:hover {text-decoration: underline !important;} !--------------------------- ! No background ## .mod-blue,.bgContainer,.pm .flb, .pm .c, .editable li a.title, .navbar-inverse .navbar-inner, .card .o a,.pn, .scbar_type_td, .scbar_btn_td, .scbar_txt_td, .pnc, .pns .pn,.fl .bm_h, .ct2_a .appl, .ct2_a, #qmenu, #p_btn i, #p_btn a, .pls .avatar img, .get-download-link a,.plc{ background: transparent !important;} ## .tfx th, .tfx td,.favor-list li.add a, #nv li.a { background-color: transparent !important;} ## .reason_slct .pt.mod-list .extension-list li.current,.btns a.install,.detail .btns li a.share { background-image: none !important;} !--------------------------- ! No background, no border ## .navbar-inner,#uhd, .dt th, .bm,.pi strong a { background: transparent !important; border: none !important;} ## #myTab li,#scbar, .scbar_icon_td {background-color: #232A31 !important; background: transparent !important; border: none !important;} ! No border ## #carousel_container,.tl #forumnewshow a,.news-item,#news-slider,.tb,.navbar-inverse .brand, .navbar-inverse .nav > li > a,.wrap-android, .navbar .nav>li>a {border: none !important;} !--------------------------- ! Background, border ## #carousel_ul li,.outer-extend,.sltm,.joyride-expose-wrapper,.reviews li,.intro .log,.wpProQuiz_questionList, .sidebar .tab-module, .ct1, .tabs-content-structure .tab-content, .tabs-content-structure .nav-tabs,.dropdown-menu,div,.zoominner,.tl .th, { background-color: #232A31 !important; border: 2px #0066CC solid !important;} !--------------------------- ! Background ## .easy-table-cuscosky tbody tr:nth-child(2n+1) td, .easy-table-cuscosky tbody tr:nth-child(2n+1) th,#cssmenu > ul > li > a > span,.pm .flb,.weather-pane, #worldcup .tab-pane, .favor-list li, #news .tab-pane-container { background-color: #232A31 !important;} ## .mod-list .extension-list li.current,.pm_tac,#news-slider-title { background-color: rgba(35, 42, 49, 0.75) !important;} ## .tl #forumnewshow,.pml .newpm { background-color: rgba(39, 204, 39, 0.19) !important;} ! Dark blue ## .easy-table-cuscosky td, .easy-table-cuscosky th,.alt, .alt th, .alt td { background-color: #183347 !important;} ! Brown ## .tfx .alt, .tfx .alt th, .tfx .alt td { background-color: #503C1E !important;} ! Transparent yellow ## .newthread tr th, .newthread tr td { background-color: rgba(255, 255, 0, 0.22) !important;} !--------------------------- ! ! Splitter ## .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody>tr:nth-child(odd)>th,.mod-blue,.help-wrap-crumbs, .bm_h,.tl .ts td, .tl .ts th, .sttl { background-color: #232A31 !important; border-top: 2px #0066CC solid !important; border-bottom: 2px #0066CC solid !important;} !--------------------------- ## header{border-bottom: none !important;} ! Border dark ## .write-review form textarea,.avatar-panel-demo,.card .o a, .dpbtn,.tpclg .pt, #scbar_txt, .tedt,.edt,.ftid, .px,.get-download-link input {border: 2px #232A31 solid !important;} ! Border blue ## table.easy-table-cuscosky, .easy-table-cuscosky th, .easy-table-cuscosky td,.reason_slct .pt,.tab-body .main, .write-review form textarea:hover,#worldcup .tab-pane, .dpbtn:hover, #scbar_txt:hover, #nv, .t_f td, .t_f th, , .pbw a img,#scform.mbm a img, .tedt:hover,.edt:hover,.ftid:hover, .px:hover,.get-download-link a:hover {border: 2px #0066CC solid !important;} ## hr.bk {background: transparent !important; border-top: 2px #0066cc solid !important;} ## .tl #forumnewshow a,.sidebar .mod h3,.line,.page-header,.nav-tabs,.sep,.tab-head-container {background: transparent !important; border-bottom: 2px #0066cc solid !important;} ## #worldcup .head-links {background: transparent !important; border-left: 2px #0066cc solid !important; border-right: 2px #0066cc solid !important;} !--------------------------- ## .tl table, .table {border-collapse: collapse !important;} !--------------------------- ## nav,.ct2_a .tb, .bbs {color: #0066CC !important;border-bottom: 2px #0066CC solid !important;} ## .pls,.psth, .ct2_a .appl { background-color: #232A31 !important; border-right: none !important;} !--------------------------- ! Navigation menu (tabs) - selected - border top-left-right ## nav ,.ct2_a .tb a {color: #FFFFFF !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important; border-top: 2px #0066cc solid !important; border-left: 2px #0066cc solid !important; border-right: 2px #0066cc solid !important;} !--------------------------- ## nav a {color: #FFFFFF !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important; outline: 0 !important;} !--------------------------- ! Navigation menu (tabs) - selected - no border ## .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a,.navbar .nav>li>a:hover, {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important; border: 0 !important;} !--------------------------- ! Hover, no border ## .categories a.current,.nav-tabs>.active>a, .nav-tabs>.active>a:hover,#extcreditmenu.a,.tabs-content-structure .nav-tabs > li.active > a, .tabs-content-structure .nav-tabs > li.active > a:hover, .tabs-content-structure .nav-tabs > li.active > a:focus,#qmenu_menu ul a:hover, .tbn li.a, #uhd .tb a:hover, .ct2_a .tb a:hover ,.tb .a a, a:hover, , , a:hover, a:hover, a:hover, .pi strong a:hover, #uhd .tb li{background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important; color: #FFFFFF !important; border: none !important;} ! Hover ## .sltm:hover,.pl .blockcode ol li:hover,.p_pop a:hover,.table-hover tbody tr:hover td, .table-hover tbody tr:hover th,.search-engine-popup li a.checked, .search-engine-popup li a:hover, .search-suggest li a:hover, .favor-list a.title:hover, .nav>li>a:hover,.get-download-link a:hover, .tl tr:hover td,.tl tr:hover th {color: #FFFFFF !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important;} ! Hover, border ## .card .o a:hover, #p_btn a:hover, .download-btn .inner:hover {color: #FFFFFF !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important; border: 2px #0066cc solid !important;} ! Hover, border, shadow ## .btns a.install:hover,.detail .btns li a.share:hover,.pns .pn:hover,.ttp .a a, .ttp .a a:hover, .ttp a:hover, .pl .blockcode em:hover,.pgb a:hover, .pg a:hover, .pg strong {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important; color: #FFFFFF !important; text-shadow: 0 0 0 !important; background-position: 0 0 !important; border: 2px #0066CC solid !important; box-shadow: 2px 2px 3px #092933 !important;} ! ! Hover, font-weight ## #qmenu:hover {color: #FFFFFF !important; text-shadow: 0 0 0 !important; font-weight: 300 !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important;} ## .pn:hover, .fl .bm_h:hover {color: #FFFFFF !important; font-weight: 300 !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080ff), color-stop(100%,#0072e3)) !important;box-shadow: 2px 2px 3px #092933 !important;} !--------------------------- ! Border, shadow, blue text ## #p_btn a, .get-download-link a,.ttp a, ul, ul, .p_pop, .pgb a, .pg a, .pg label, .ct2_a {background-color: #232A31 !important; color: #0066CC !important; text-shadow: 0 0 0 !important; background-position: 0 0 !important; border: 2px #0066CC solid !important;box-shadow: 2px 2px 3px #092933 !important;} ! Border, shadow, white text ## .btns a.install,.detail .btns li a.share,.popup, .nfl .f_c, .tip, .fl .bm_h {color: #FFFFFF !important; background-color: #232A31 !important; border: 2px #0066CC solid !important; box-shadow: 2px 2px 3px #092933 !important;} !--------------------------- ! Search button and other buttons ##.pn, .pnc, a.pnc, .pns .pn {background-color: #232A31 !important; border: 2px #0066CC solid !important; height: 26px !important; box-shadow: 2px 2px 3px #092933 !important;} ! !--------------------------- ! Bottom border 1px, white ## .tedt .bar,.tl th,.tl td,.tl th,.tl td {border-bottom: 1px #FFFFFF solid !important;} ! ! Top border, 2px, blue ## .m_c .o {border-top: 2px #0066CC solid !important;} ! ! Light background, border ## .reviews div.reply,.t_table, .pl .blockcode, .pl .quote{ color: #F7F7F7 !important; background: url("http://www.jpeg.cz/images/2014/06/02/XlImH.jpg") top center fixed !important;-webkit-filter: brightness(90%) !important; border: 2px #0066CC solid !important;} ! !## #nv {border-left: 2px #0066CC solid !important; border-right: 2px #0066CC solid !important; border-top: 2px #0066CC solid !important;} ! !--------------------------- ## .security-list li,.reason_slct .pt,.m_c .o {color: #FFFFFF !important; background-color: #232A31 !important;} ! ! Light background ## .m_c,.p_opt {background: url("http://www.jpeg.cz/images/2014/06/02/XlImH.jpg") top center fixed !important;} ! ! Dark background ## html,body,.wrap-android { color: #FFFFFF !important; background-color: transparent !important;background: url("http://www.jpeg.cz/images/2014/05/25/s9rfA.jpg") top center fixed !important;} ## .navbar,#toptb, #top,.head { background:url("http://www.jpeg.cz/images/2014/05/25/s9rfA.jpg") top center fixed !important; border-bottom: 2px #0066cc solid !important;} !## #top {-webkit-filter: brightness(90%) !important;} ## #footer, footer, .footer, #ft { background:url("http://www.jpeg.cz/images/2014/05/25/s9rfA.jpg") top center fixed !important;-webkit-filter: brightness(90%) !important; border-top: 2px #0066cc solid !important;} ## .buddy li,.download-btn .inner {color: #FFFFFF !important; background: url("http://www.jpeg.cz/images/2014/05/25/s9rfA.jpg") top center fixed !important; border: 2px #0066cc solid !important;} ! Blocked elements ##.tip_4 .tip_horn ## #xdsEnjoy & Rate if you like it ;-) PS: On some parts of maxthon's web it may not work and should be deactivated! If you find some bug, please, report it here. Thanks! :-) EDITs: 4.VII.2014 - Updated and adapted to changes on www.jpeg.cz (image host) 4.IX.2014 - Some small fixes and improvements, mainly around user account pages 8.IX.2014 - v0.2 Fixed text color in blockquotes, menu next to the search field, list of friends, footer etc 11.IX.2014 - v0.3 Added support for "forum updates info" and some new parts of web, bugfix 1 Link to comment Share on other sites More sharing options...
Tony Posted June 21, 2014 Report Share Posted June 21, 2014 like that although not keen on the wood effect but i guess that can be changed or alternatives offered Tony - Vivaldi 4 on Windows 10 64Bit Link to comment Share on other sites More sharing options...
R3gi Posted June 21, 2014 Author Report Share Posted June 21, 2014 Sure, you can simply change the background images :-) Link to comment Share on other sites More sharing options...
R3gi Posted June 22, 2014 Author Report Share Posted June 22, 2014 You're right, but the problem is, that the night mode change the backgrounds and I think It's not possible to replace them with for example wooden background, just the colors as you say...but this skin imho doesn't require switching to night mode :-D Also it isn't a skin for the browser window, it's only replacement of some CSS rules for maxthon's web and forum...so, actually it's not a real skin :-) Link to comment Share on other sites More sharing options...
Tony Posted June 22, 2014 Report Share Posted June 22, 2014 we were promised skins for the forum - like many things they never happened - why is a good question as they have them on the chinese forum so the method above would fill that gap maybe a few comments in the text file above or a description of what each area is - for example - what font is altered by a font call would be useful to let those who want to modify it see how to do it easily Tony - Vivaldi 4 on Windows 10 64Bit Link to comment Share on other sites More sharing options...
R3gi Posted September 4, 2014 Author Report Share Posted September 4, 2014 Updated. Just small fix...:-) Link to comment Share on other sites More sharing options...
Recommended Posts