Last active
December 19, 2015 02:38
-
-
Save codemasher/5884119 to your computer and use it in GitHub Desktop.
Fluid Layout CSS Hack for the official Guild Wars 2 Forums
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Fluid Layout CSS Hack for the official Guild Wars 2 Forums | |
* | |
* | |
* This stylesheet will override the forums default style and set it to a fluid full width layout | |
* with increased font sizes for better readability at high resolutions. | |
* It will also fix a few quirks like the unusable language links on the top and margins around smileys, | |
* increases the size of editor textareas and hides the e-mail address in the forums overall header. | |
* (if you ever happen to make screenshots on the forums) | |
* | |
* intended for use with tools like: | |
* | |
* Stylebot (developed and tested with that) | |
* https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha | |
* | |
* Stylish for Firefox (a few things somehow don't work, like min-height for posts) | |
* https://addons.mozilla.org/de/firefox/addon/stylish/ | |
* | |
* ...or any other browser plug-in which lets you add user defined styles. | |
* | |
* If you have suggestions or encounter problems with this stylesheet, just drop me a line on the gw2 forums | |
* or just leave a comment right here on GitHub. (just don't ask me how to install this!) | |
* | |
* | |
* smiley.1438 | |
* | |
*/ | |
.wrapper, nav.bookcrumbs { | |
width: 100% !important; | |
min-width: 960px !important; | |
} | |
.wrapper > div:not(.langselect):not(.character) { | |
padding-right: 3% !important; | |
padding-left: 3% !important; | |
} | |
#header > .wrapper > .langselect { | |
left: 400px !important; | |
} | |
#header > .wrapper > .character > .charname { | |
display: none !important; | |
} | |
/* | |
* outcomment the following and set the url if you want language icons instead of just text | |
* the icons should be served via https, otherwise they may be blocked as insecure content | |
*/ | |
/* | |
#header > .wrapper > .langselect > a:nth-of-type(1) { | |
content: url(https://path.to/your/icons/en.png) !important; | |
} | |
#header > .wrapper > .langselect > a:nth-of-type(2) { | |
content: url(https://path.to/your/icons/fr.png) !important; | |
} | |
#header > .wrapper > .langselect > a:nth-of-type(3) { | |
content: url(https://path.to/your/icons/de.png) !important; | |
} | |
#header > .wrapper > .langselect > a:nth-of-type(4) { | |
content: url(https://path.to/your/icons/es.png) !important; | |
} | |
*/ | |
#header > .wrapper > ul.mid-nav { | |
right: 200px !important; | |
} | |
#header > .wrapper > h1 > a { | |
left: 3% !important; | |
} | |
nav.bookcrumbs { | |
background-repeat: repeat-x !important; | |
} | |
nav.bookcrumbs > div:first-child { | |
margin-left: 3% !important; | |
} | |
#content.wrapper { | |
display: table !important; | |
} | |
.topiclist > .header, .topiclist > .footer, .messages > .header, .messages > .footer, .generic > .header, .generic > .footer { | |
background-position: 3% 100% !important; | |
} | |
.forum_index { | |
margin-right: 0 !important; | |
margin-left: 0 !important; | |
padding-right: 0 !important; | |
padding-left: 0 !important; | |
float: none !important; | |
display: table-cell !important; | |
} | |
.forum_index#sidebar { | |
padding-left: 0 !important; | |
width: 335px !important; | |
} | |
.forum_index#main { | |
padding-right: 1em !important; | |
width: 100% !important; | |
} | |
.forum_index#main > #cat_header { | |
width: 100% !important; | |
background: url(https://d1r2pgr9caw5gy.cloudfront.net/assets/forum/index/category_divider-74b5755dc8ccde42e795f747522c70bf.png) repeat-x 0 0 !important; | |
} | |
.forum_index#main > .category { | |
width: 100% !important; | |
background-repeat: repeat-x !important; | |
} | |
.forum_index#main > .category > a > .forum { | |
height: 30px !important; | |
line-height: 30px !important; | |
} | |
.forum_index#main > .category > h2 { | |
font-size: 28px !important; | |
} | |
.forum_index#main > .category > a > .forum > .sprite { | |
width: 24px !important; | |
height: 30px !important; | |
} | |
.forum_index#main > .category > a > .forum > .sprite > img { | |
width: 24px !important; | |
height: 24px !important; | |
vertical-align: -4px !important; | |
} | |
.forum_index#main > .category > a > .forum > h3 { | |
font-size: 22px !important; | |
line-height: 22px !important; | |
} | |
.forum_index#main > .category > a > .forum > .tagline { | |
font-size: 18px !important; | |
line-height: 18px !important; | |
background-position: 0 6px !important; | |
} | |
.topiclist > .list { | |
} | |
.topiclist > .list > div { | |
display: table !important; | |
width: 100% !important; | |
min-width: 1000px !important; | |
background-repeat: repeat-x !important; | |
float: none !important; | |
} | |
.topiclist > .list > div > span { | |
display: table-cell !important; | |
overflow: hidden !important; | |
text-overflow: ellipsis !important; | |
vertical-align: top !important; | |
width: auto !important; | |
float: none !important; | |
margin-right: 0 !important; | |
margin-left: 0 !important; | |
padding-right: 0 !important; | |
padding-left: 0 !important; | |
} | |
.topiclist > .list > .list_header > span { | |
font-size: 18px !important; | |
} | |
.topiclist > .list > .list_header > .title { | |
min-width: 15em !important; | |
} | |
.topiclist > .list > .topic > .title { | |
min-width: 500px !important; | |
padding-left: 40px !important; | |
font-size: 20px !important; | |
} | |
.topiclist > .list > .topic > .creator, .topiclist > .list > .list_header > .creator { | |
width: 200px !important; | |
} | |
.topiclist > .list > .topic > .replies, .topiclist > .list > .list_header > .replies { | |
text-align: left !important; | |
width: 100px !important; | |
} | |
.topiclist > .list > .topic > .views, .topiclist > .list > .list_header > .views { | |
text-align: left !important; | |
width: 100px !important; | |
} | |
.topiclist > .list > .topic > .lposter, .topiclist > .list > .list_header > .lposter { | |
width: 200px !important; | |
background-image: none !important; | |
} | |
.topiclist > .list > .topic > .lposter > a:before { | |
content: url(https://d1r2pgr9caw5gy.cloudfront.net/assets/forum/topiclist/arrow-5a5664e857add90729b323e187eadfb9.png)" " !important; | |
} | |
.messages > form > .header, .messages > form > .body > .post:not(.arenanet), .messages > .body > .post { | |
margin-right: 0 !important; | |
margin-left: 0 !important; | |
} | |
.messages > form > .body > .post, .messages > form > .header:not(.nobg) { | |
margin-left: 0 !important; | |
} | |
.messages > form > .body > .post:first-of-type, .messages > .body > .post:first-of-type { | |
background-image: none !important; | |
} | |
.messages > form > .body > div, .messages > .body > div { | |
display: table !important; | |
width: 100% !important; | |
min-width: 1000px !important; | |
float: none !important; | |
background: url(https://d1r2pgr9caw5gy.cloudfront.net/assets/post_line-e8168efa2505966e06897dbe3d18f88c.png) repeat-x top !important; | |
} | |
.messages > form > .body > .post > div, .messages > .body > .post > div { | |
display: table-cell !important; | |
vertical-align: top !important; | |
width: auto !important; | |
float: none !important; | |
margin-right: 0 !important; | |
padding-right: 0 !important; | |
} | |
.messages > form > .body > .post > .post-topic-header { | |
display: none !important; | |
} | |
.messages.topic_results > .body > .post > .post-header { | |
display: none !important; | |
} | |
.messages:not(.topic_results) > .body > .post > .post-header { | |
width: 250px !important; | |
} | |
.messages > form > .body > .post:not(.arenanet) > .post-header, .messages > .body > .post.quick > .post-header { | |
width: 335px !important; | |
} | |
.messages > form > .body > .post:not(.arenanet) { | |
min-height: 170px !important; | |
} | |
.messages > form > .body > .post { | |
min-height: 240px !important; | |
} | |
.messages > form > .body > .post > .post-header { | |
width: 290px !important; | |
} | |
.messages > .body > .post > .post-topic-header { | |
width: 350px !important; | |
} | |
.messages > .body > .post > .post-topic-header > h3 > a { | |
width: 300px !important; | |
} | |
.messages > form > .body > .post > .post-body, .messages > .body > .post > .post-body { | |
font-size: 20px !important; | |
} | |
.messages > form > .body > .post > .post-body > .message-content img, .messages > .body > .post > .post-body > .message-content img { | |
margin: 0 5px; | |
} | |
.messages > form > .body > .post > .post-footer, .messages > .body > .post > .post-footer { | |
width: 150px !important; | |
} | |
.messages > form > .body > .post > .post-footer > .utils, .messages > .body > .post > .post-footer .utils { | |
min-width: 130px !important; | |
left: 15px !important; | |
text-align: left !important; | |
} | |
.messages > .body > .post.quick > .post-body > form > textarea { | |
width: 800px !important; | |
height: 400px !important; | |
} | |
.messages > form > .body > .post.reply.long > .post-body > textarea { | |
width: 800px !important; | |
height: 400px !important; | |
} | |
pre, code { | |
white-space: pre !important; | |
font-family: Consolas, "Liberation Mono", Courier, monospace !important; | |
font-size: 12px !important; | |
line-height: 18px !important; | |
background-color: #eee !important; | |
padding-top: 5px !important; | |
padding-right: 5px !important; | |
padding-bottom: 5px !important; | |
padding-left: 5px !important; | |
margin-top: 1em !important; | |
margin-bottom: 1em !important; | |
} | |
/* brute force to remove the annoying edit notice */ | |
.flash.notice, .flash.notice > p { | |
content: " " !important; | |
width: 0 !important; | |
height: 0 !important; | |
display: none !important; | |
visibility: hidden !important; | |
} | |
.post > .overlay, .post > .overlay > .bottomright { | |
position: static !important; | |
left: 0 !important; | |
right: 0 !important; | |
top: 0 !important; | |
bottom: 0 !important; | |
text-align: left !important; | |
} | |
.bottomright { | |
padding-top: 20px !important; | |
padding-left: 630px !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment