Adding A Header & Border Around The Stat Blocks

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
Jodi-86
Registered User
Posts: 100
Joined: Thu Nov 30, 2017 10:04 pm

Adding A Header & Border Around The Stat Blocks

Post by Jodi-86 »

Happy new year guys,

Just a quick question, i wanted to add a header and a border around the stats blocks in Prosilver, to get the following result:

Image

To do it i added this into the CSS code, which does work fine on my test forum,

Code: Select all

.stat-block h3 a {
color: #FFFFFF;
}

.stat-block h3 {
background-color: #404040;
padding: 4px 8px;
color: #FFFFFF;
border-radius: 4px 4px 0 0;
margin-bottom: -1px;
}

.stat-block p {
border: 1px solid #ADADAD;
background: #F0F0F0;
padding: 5px;
margin-bottom: 15px;
}
But before i add it on to my live forum, i wanted to ask if there was a more proper / recommended way of doing it?
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Adding A Header & Border Around The Stat Blocks

Post by PlanetStyles.net »

Hello Jodi :)
Jodi-86 wrote: Tue Jan 02, 2018 6:05 am i wanted to ask if there was a more proper / recommended way of doing it?
Not really a proper way of doing it. One option using existing code would be to copy the forum / category container code form forumlist_body.html, but these are built with definition lists and are generally quite tricky to wrap around non-forum content.

Your code looks clean and simple enough, if it works it's all good :)
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: Adding A Header & Border Around The Stat Blocks

Post by Tastenplayer »

I did it in my style, the same way. Otherwise you couldn't read everything with this wrap.
The attempt to create a separate html file didn't work.
However, I have not yet checked whether this works with the 24 hour statistics of RMcGirr83(Yes is also displayed correctly)
Image

Otherwise there is the Statblock Extension by Kirk, where it looks like this:
Image
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: Adding A Header & Border Around The Stat Blocks

Post by Tastenplayer »

I have now tried this with the change in index_body. html. That would be the correct way, I think.
This works until you install an extension that comes into the statistics block. The problem are the events. The extensions result in a superfluous termination </p>, which results in an html error and a much too large distance. Or a space and an empty field.

Image

Because the last 24 hours extensions were not in the field, I changed the event.
Image
Only now I'm too far down below because of a needless </p> and with the other extensions there is too little space at the top.

If I remove the superfluous </p> in an extension or html file of the style, I don't have html error anymore and everything looks correct(Look at the first picture in the above article).

inserted in the style.css

Code: Select all

/* stat-block
---------------------------------------- */
.stat-block {
   background: #262223;
   background: -moz-linear-gradient(45deg, #262223 1%, #303032 41%, #303032 58%, #262223 100%);
   background: -webkit-linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
   background: linear-gradient(45deg, #262223 1%,#303032 41%,#303032 58%,#262223 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262223', endColorstr='#262223',GradientType=1 );
   border: 1px solid #262223;
   padding: 10px 10px;
   color: #B5B5B5;
   margin: -4px -5px -4px -5px;
}

.stat-block p {
   font-size: 1.1em;
   line-height: 1.4em;
   color: #B5B5B5;
}

.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: #B5B5B5;
   margin-top: -1px;
}

.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: #B5B5B5;
}

.displaystatswwh {
   background: #262223;
   border: 5px solid #000;
   border-radius: 2px !important;
   -moz-box-shadow: inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow: inset 0 0 10px #000000;
   margin-bottom: 4px;
   padding: 5px 10px;
   margin-left: -15px;
   margin-right: -15px;
}
In the index_body.html this

Code: Select all

<!-- IF S_DISPLAY_ONLINE_LIST -->
   <div class="stat-block online-list">
      <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
      <p>
         <!-- EVENT index_body_block_online_prepend -->
         {TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br />
         <!-- IF U_VIEWONLINE -->
            <br />{LOGGED_IN_USER_LIST}
            <!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
         <!-- ENDIF -->
         <!-- EVENT index_body_block_online_append -->
      </p>
   </div>
<!-- ENDIF -->

<!-- EVENT index_body_birthday_block_before -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
   <div class="stat-block birthday-list">
      <h3>{L_BIRTHDAYS}</h3>
      <p>
         <!-- EVENT index_body_block_birthday_prepend -->
         <!-- IF .birthdays -->{L_CONGRATULATIONS}{L_COLON} <strong><!-- BEGIN birthdays -->{birthdays.USERNAME}<!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
         <!-- EVENT index_body_block_birthday_append -->
      </p>
   </div>
<!-- ENDIF -->

<!-- IF NEWEST_USER -->
   <div class="stat-block statistics">
      <h3>{L_STATISTICS}</h3>
      <p>
         <!-- EVENT index_body_block_stats_prepend -->
         {TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
         <!-- EVENT index_body_block_stats_append -->
      </p>
   </div>
<!-- ENDIF -->
replaced with

Code: Select all

<div style="margin:15px;">
   <div class="displaystatswwh">
      <div class="inner">
         <!-- IF S_DISPLAY_ONLINE_LIST -->
            <div class="stat-block online-list">
               <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
               <p>
                  <!-- EVENT index_body_block_online_prepend -->
                  {TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br />
                  <!-- IF U_VIEWONLINE -->
                     <br />{LOGGED_IN_USER_LIST}
                     <!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
                  <!-- ENDIF -->
                  <!-- EVENT index_body_block_online_append -->
               </p>
            </div>
         <!-- ENDIF -->

         <!-- EVENT index_body_birthday_block_before -->

         <!-- IF S_DISPLAY_BIRTHDAY_LIST -->
            <div class="stat-block birthday-list">
               <h3>{L_BIRTHDAYS}</h3>
               <p>
                  <!-- EVENT index_body_block_birthday_prepend -->
                  <!-- IF .birthdays -->{L_CONGRATULATIONS}{L_COLON} <strong><!-- BEGIN birthdays -->{birthdays.USERNAME}<!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
                  <!-- EVENT index_body_block_birthday_append -->
               </p>
            </div>
         <!-- ENDIF -->

         <!-- IF NEWEST_USER -->
            <div class="stat-block statistics">
               <h3>{L_STATISTICS}</h3>
               <p>
                  <!-- EVENT index_body_block_stats_prepend -->
                  {TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
                  <!-- EVENT index_body_block_stats_append -->
               </p>
            </div>
         <!-- ENDIF -->
      </div>
   </div>
</div>
<div style="clear: both"></div>
Inside and outside it works with this change. But a solution would have to be found for the extension, respectively the events problem.

So that I don't have to make a new picture, here you can see clearly what happens regarding the superfluous </p> for a distance. Or just on this picture an additional bar.
Image

I'll probably have to do it again, just like in the other style. Otherwise my style will never be finished. Although the second way here would be the better solution.
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
Jodi-86
Registered User
Posts: 100
Joined: Thu Nov 30, 2017 10:04 pm

Re: Adding A Header & Border Around The Stat Blocks

Post by Jodi-86 »

Great work and i like the modern grey/black style
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: Adding A Header & Border Around The Stat Blocks

Post by Tastenplayer »

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. :lol:
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 :)

Image

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} &bull; {HOUR_TOPICS} &bull; {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 Image

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
Image
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.
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: Adding A Header & Border Around The Stat Blocks

Post by Tastenplayer »

I just updated the statistics section in the standard style keyboard. Now the Statblock extension is no longer active for me. You can now see my stats block in Style Keyboard, Modern, and Blackfog.
However, in Style Modern I still have to configure the icons. I completely forgot. :oops: :oops: :oops:

It's a completely new code. To see everything: User Jimmy, Password Frühling

In order for the activity24hours extension to appear in the statistics block, I had to change the event. Otherwise it is not displayed in the block.
https://www.forum.my-tastenworld.ch/vie ... 226&t=2673
statblock_keyboard.jpg
index_body.html

Code: Select all

<!-- EVENT index_body_stat_blocks_before -->

<div class="statistics-container">
         <!-- IF S_DISPLAY_ONLINE_LIST -->
            <div class="stat-block online-list">
               <!-- IF U_VIEWONLINE --><h3><i class="icon fa-wifi fa-fw icon-bluegray icon-xl" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i><span><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3><i class="icon fa-wifi fa-fw icon-bluegray icon-xl" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i><span>{L_WHO_IS_ONLINE}</h3></span><!-- ENDIF -->
               <p>
                  <!-- EVENT index_body_block_online_prepend -->
                  {TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
                  <!-- IF U_VIEWONLINE -->
                     <br />{LOGGED_IN_USER_LIST}
                     <!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
                  <!-- ENDIF -->
                  <!-- EVENT index_body_block_online_append -->
               </p>
            </div>
         <!-- ENDIF -->

         <!-- EVENT index_body_birthday_block_before -->

         <!-- IF S_DISPLAY_BIRTHDAY_LIST -->
            <div class="stat-block birthday-list">
               <h3><i class="icon fa-birthday-cake fa-fw icon-bluegray icon-xl" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i><span>{L_BIRTHDAYS}</h3></span>
               <p>
                  <!-- EVENT index_body_block_birthday_prepend -->
                  <!-- IF .birthdays -->{L_CONGRATULATIONS}{L_COLON} <strong><!-- BEGIN birthdays -->{birthdays.USERNAME}<!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
                  <!-- EVENT index_body_block_birthday_append -->
               </p>
            </div>
         <!-- ENDIF -->

         <!-- IF NEWEST_USER -->
            <div class="stat-block statistics">
               <h3><i class="icon fa-signal fa-fw icon-bluegray icon-xl" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i><span>{L_STATISTICS}</h3></span>
               <p>
                  <!-- EVENT index_body_block_stats_prepend -->
                  {TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
                  <!-- EVENT index_body_block_stats_append -->
               </p>
            </div>
         <!-- ENDIF -->
      </div>

<!-- EVENT index_body_stat_blocks_after -->
CSS

Code: Select all

/* stat-block
---------------------------------------- */
.stat-block {
	background-color: transparent;
	border-bottom: 1px solid #444;
	border-radius: 2px;
	padding: 10px 5px;
	margin: -4px 0 -4px 0;
}

.statistics-container {
	background-color: #aeaeae;
	background-image: linear-gradient(to bottom, #f1f1f1 0%, #aeaeae 100%);
	background-image: -webkit-linear-gradient(top, #f1f1f1 0%,#aeaeae 100%);
	background-image: linear-gradient(to bottom, #f1f1f1 0%,#aeaeae 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#aeaeae',GradientType=0 );
	border: 5px solid #1D1D1D;
	border-radius: 7px;
	margin: 13px 0 4px 0;
	padding: 5px 10px 3px 10px;
}

.stat-block a:hover {
	color: #006FA0;
}

.stat-block h3 {
	line-height: 1.3em;
	border-bottom-color: transparent;
	text-decoration: underline;
	margin-bottom: 0.3em;
	margin-top: -1px;
	margin-left: -4px;
}

.stat-block h3 a {
	text-decoration: underline;
	margin-left: -1px;
}

.stat-block h3 a:hover {
	color: #006FA0;
	text-decoration: none;
}

.stat-block p {
	line-height: 1.4em;
	margin-bottom: -1px;
	margin-left: -4px;
}
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
Post Reply

Return to “[3.2.x] Styles Support & Discussion”