It started with me running a bit of custom CSS in Stylish to override some of this site's code. Then I got to thinking it'd be fun to have the option of different banners per category and/or per board, and to have them scale with window width. So I loaded Prosilver_SE on local and messed around with it (this was basically an exercise in me trying out how to do conditionals in phpBB syntax).
Have got it sorted, and it works in Firefox, Opera (which means Chrome too), Pale Moon and IE11. This code posted just for fun, in case anyone finds any of it useful.
It requires one small edit in overall_header.html. A similar conditional could be applied to any style.
Find:
Code: Select all
<div id="site-description" class="site-description">
<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
Code: Select all
<div id="site-description" class="site-description">
<a id="banner_<!-- IF S_FORUM_ID -->{FORUM_ID}<!-- ELSE -->0<!-- ENDIF -->" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
The CSS I'm running is just appended to the end of Prosilver_SE's stylesheet.css. Looks like this:
Code: Select all
.copyright {
color: #bbb;
}
.copyright a {
color: #000000 !important;
color: #8AB1D3 !important;
}
li.row {
background-color: #E8ECEE;
}
li.row:hover {
background-color: #EBEFF1;
}
li.row.bg3 {
background-color: #F0F4F6;
}
li.row.bg3:hover {
background-color: #F4F8FA;
}
.site_logo {
background-image: url("./images/site_logo.gif");
}
/* @Gumboots - trial additions. */
.forabg .topics, .forabg .posts,
.forumbg .posts, .forumbg .views, .header .lastpost {
display: none;
}
html {
background: #214770;
}
body {
padding: 26px 0 0;
background: linear-gradient(#111E2C, #214770 300px);
}
#wrap {
max-width: 1024px;
min-width: 290px;
margin: 0 auto 20px;
padding: 14px 24px;
background: #fff;
background-image: linear-gradient(#dfdfdf, #fff 152px);
box-shadow: 0 0 5px 2px rgba(0,0,0,.7), inset 0 3px 18px rgba(100,100,100,0.25);
}
.headerbar {
margin-bottom: 1px;
padding: 0;
background: none;
}
.headerbar .inner {
position: relative;
}
.site-description {
float: none;
width: 100%;
height: auto;
}
.site-description .logo {
float: none;
width: 100%;
padding: 14.29% 0 0;
height: 0;
background-size: contain;
border-radius: 7px 7px 0 0;
}
#banner_0 {
background-image: url("images/banner_1.jpg");
}
#banner_39 {
background-image: url("images/banner_2.jpg");
}
#banner_1 {
background-image: url("images/banner_3.jpg");
}
#banner_52 {
background-image: url("images/banner_4.jpg");
}
#banner_10 {
background-image: url("images/banner_5.jpg");
}
#banner_49 {
background-image: url("images/banner_6.jpg");
}
#banner_50 {
background-image: url("images/banner_7.jpg");
}
#banner_51 {
background-image: url("images/banner_8.jpg");
}
#banner_81 {
background-image: url("images/banner_9.jpg");
}
#banner_43 {
background-image: url("images/banner_10.jpg");
}
.site_logo {
display: none;
}
.site-description h1 {
position: absolute;
top: 1.3em;
left: .5em;
margin: 0;
}
.site-description p:not(.skiplink) {
position: absolute;
top: 5em;
left: 1em;
}
.search-header {
border-radius: 0;
display: block;
float: none;
overflow: hidden;
margin: -1px 0;
padding: 4px;
background: linear-gradient(#474F55, #7C8891);
box-shadow: none;
}
.search-header #search {
float: right;
}
#page-header .navbar {
margin: 0 0 4px;
background: #e8ecee url("/assets/images/images/silver/row_bg.gif");
border: solid #7C8891;
border-width: 0 3px 3px;
border-radius: 0 0 5px 5px;
}
.responsive-center.time {
margin: 0 4px 1.5em;
}
.action-bar {
font-size: 11px;
margin: 4px;
}
.forabg, .forumbg {
padding: 5px 5px 4px;
border-radius: 8px 8px 5px 5px;
}
.forums {
border-radius: 0 0 3px 3px;
overflow: hidden;
}
.header dt {
padding: 0 9px 2px !important;
font-size: 15px !important;
font-weight: 500 !important;
text-transform: capitalize !important;
}
.collapse-btn {
margin: -22px 0 0;
opacity: .4;
}
.collapse-btn:hover {
opacity: .75;
}
ul.topiclist dt .list-inner {
margin-right: 260px;
}
ul.topiclist .lastpost, ul.topiclist .redirect {
float: right;
width: 260px;
}
@media (max-width: 1200px) {
#wrap {
max-width: 88%;
}
}
/* responsive.css changes */
@media only screen and (max-width: 860px), only screen and (max-device-width: 860px) {
#wrap {
width: auto;
}
}
@media (max-width: 700px) {
body {
padding: 0;
}
#wrap {
max-width: 100%;
margin: 0;
padding: 0 5px 5px;
border: 0;
border-radius: 0;
}
.site-description .logo {
display: block;
border-radius: 0;
}
.site-description h1 {
top: .7em;
}
.site-description p:not(.skiplink) {
top: 3.2em;
left: .5em;
}
.site-description p, .search-header {
display: block;
}
#page-header .navbar {
margin: 0 -5px 4px;
border-radius: 0;
}
.forabg, .forumbg {
padding: 5px 3px 3px;
border-radius: 0;
}
li.header dt {
text-align: start;
}
ul.topiclist dt .list-inner {
margin-right: 0;
}
}Note that some parts of that code will also hide the posts/topics columns, because I think they're boring and I don't want to look at them, but you can remove those parts if you love looking at stats. I prefer to just see the content that interests me.
I also tweaked the paddings and border-radius on forabg/forumbg and the child lists. I think the default bottom corners are a bit wrong. The lower corner of the li is too close and too square compared to the wrapper, and looks sorta like bones poking out through skin. IMO a slight tweak makes them look smoother and more harmonious.
Слава Україні! 