Thank you, but the code is from someone else. I just improved the style even more and some code changes.
The problem with the modern style and the Blackfog style is only, without statistics background you can read hardly, because of the wrap background image(That was a pretty elaborate work, with the styles. Because I had to reformat all titles, so that they can be seen at all with this wrap).
Anyway I have to solve the statistics problem before I can submit the style for validation.
With our first non-conventional solution, the statistics section becomes extremely long, when you install additional statistical extensions.
I think you would have to create your own container for the statistics. Only that's pretty complicated for me. But I will try it in the next days. The problem is definitely the 24 Hour Activity Stats Ext., which always comes outside from the formatted section.
There you go!
However, I had to change the class in the 24 hours ext. Otherwise it didn't work - for whatever reason
For the statblock above
Code: Select all
.stat-block {
background: #7a7a7a; /* Old browsers */
background: -moz-linear-gradient(-45deg, #7a7a7a 0%, #afafaf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #7a7a7a 0%,#afafaf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #7a7a7a 0%,#afafaf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#afafaf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #262223;
padding: 10px 5px;
color: #333;
margin: -6px 1px -6px 1px;
border-left: none;
border-right: none;
}
.stat-block p {
line-height: 1.4em;
color: #333;
margin-bottom: -1px;
margin-left: 2px;
}
.stat-block a {
line-height: 1.4em;
color: #1F1F1F;
font-weight: bold;
margin-bottom: -1px;
}
.stat-block a:hover {
line-height: 1.4em;
color: #840000;
margin-bottom: -1px;
}
.stat-block h3 {
font-size: 10px;
font-family: Arial, sans-serif;
text-transform: uppercase;
font-weight: 800;
line-height: 1.3em;
border-bottom-color: transparent;
text-decoration: underline;
margin-bottom: 0.3em;
color: #333;
margin-top: -1px;
margin-left: 2px;
}
.stat-block h3 a {
font-size: 10px;
font-family: Arial, sans-serif;
text-transform: uppercase;
font-weight: 800;
line-height: 1.2em;
border-bottom-color: transparent;
text-decoration: underline;
color: #333;
margin-left: 1px;
}
.stat-block h3 a:hover {
font-size: 10px;
font-family: Arial, sans-serif;
text-transform: uppercase;
font-weight: 800;
line-height: 1.2em;
border-bottom-color: transparent;
text-decoration: underline;
color: #840000;
margin-left: 1px;
}
For the extension block
Code: Select all
<!-- IF S_CAN_VIEW_24_HOURS -->
<div class="displaystatswwh2">
<h3 id="twentyfourhour_stats">{L_TWENTYFOURHOUR_STATS}</h3>
<p>{HOUR_POSTS} • {HOUR_TOPICS} • {HOUR_USERS}
<br>{TOTAL_24HOUR_USERS} {USERS_24HOUR_TOTAL} {HIDDEN_24HOUR_TOTAL} {GUEST_ONLINE_24} {L_LAST_24_HOURS}
</p>
</div>
<!-- ENDIF -->
Code: Select all
.displaystatswwh2 {
background: #7a7a7a; /* Old browsers */
background: -moz-linear-gradient(-45deg, #7a7a7a 0%, #afafaf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #7a7a7a 0%,#afafaf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #7a7a7a 0%,#afafaf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#afafaf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 3px solid #262223;
border-radius: 1px !important;
margin-bottom: 4px;
padding: 3px 0 3px 0;
margin-left: 1px;
margin-right: 1px;
margin-top: -11px;
}
.displaystatswwh2 p{
color: #333;
padding-left: 10px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
}
.displaystatswwh2 h3{
font-size: 10px;
font-family: Arial, sans-serif;
text-transform: uppercase;
font-weight: 800;
color: #333;
text-decoration: underline;
padding-left: 10px;
padding-right: 10px;
margin-left: 8px;
margin-right: 8px;
border-bottom-color: transparent;
margin-top: 5px;
}
Regarding the text color formatting you have to look. I have to do that because I use two different text colors about a dark and a bright background in the style. However, it is not necessary to specify in every style.
Don't forget that you also have to adjust the index. html with the code in the above answer
Of course, you can also make it flush. But I think it looks a bit silly when the black line comes down over the whole width and above not. Besides, it doesn't have exactly the same background
Of course it looks good if the statistics is configured like a forum. However, if you install two statistic extensions in addition, it will be extremely long! That's why I was looking for a better solution.
You can also make something like this
But don't forget, you have to add everything in every new Prosilver version and adjust it if necessary. Except you have/make a child style.