[CDB] Blackfog 3.2.2 Version 3.2.2.2

[Tastenplayer]

Style name: Blackfog
Autor: Tastenplayer
Style Version:3.2.2.1
phpBB Version: 3.2.2
Inherits from: prosilver

Description of the style: Black with fog (looks almost like an image behind plexiglass), silver-gray and a little bit red.
All icons are gradient icons(In IE they are displayed unicoloured)
The style has a special thick, silver/white border
The header image/logo is shown in each display (in the contrib file there are more header images)
Texture Wrap background
Special No-Ava is displayed
Offline/online display is without image - with color display on the right margin
The cookie hint is completely recolored
The statistics part is reformatted as a block, fitting the style
Added Count Badge to the topic/post /forum statistics.
Important:With this style prosilver, the respective phpbb version, must be installed!

For this style the Dark Style Smilies must be installed

There is also a Blackfog_Extra version with header links, which can be edited in top_modern.html.

Info:There is a problem with the wrapborder and mousover function with the first avatar with the "Who visited this topic Extension" from dmzx. Therefore, for this style, the avatar display should be disabled.

There are also some instructions for extension adjustments for this style in my forum.

More screenshoots and Download: https://www.forum.my-tastenworld.ch/vie ... 151#p12089




Demo URL: https://www.forum.my-tastenworld.ch Style 3.2.1

[Tastenplayer]

DEMO of the headerlink version is now on the liveboard for guests.
I've adapted it a little better.
Also the.wrap was double, so I moved it to the common.css.
(However, the link "Partner" is still empty)

As soon as I have checked everything again, I will create a new version with download.

The style only looks really cool if the Red title for new topic and new reply Ext is installed and color-matched! It's usually pretty simple.
https://www.phpbb.com/customise/db/exte... new_reply/
(see logged in: User Jimmy / Password Frühling)

I also noticed that the whole formatting for the links pages is not correct. Since there was nothing at all to read in the Blackfog. Should be right now. Created a new file in pages. Seems to be displayed correctly in every style.

[zardos]

Very nice style, thanks for your hard work.

[Tastenplayer]

Glad if you like my style
That's a derivation of my first style. With the first style there are problems with the font color adjustment, because it has dark and light background.

However, I noticed today that there may be problems with the English language because I did not insert the empty css in the en language folder.
The new version should be checked for download by Saturday.

I apologize for that stupid lapse With the german language there were never problems because of it

[RomaamoR]

Well, why not make the style adaptive? Why do I have to constantly make edits css.

[3Di]

it looks to me pretty responsive.

.
Thanks for your hard work @Tastenplayer, I will give it a shot.

Eine schöne tag noch.

[Tastenplayer]

Well, why not make the style adaptive? Why do I have to constantly make edits css.

What do you mean exactly? What do you have to change in the css?

You already know that the style is not yet released and not yet validated! There may already be several changes.
For most styles you have to adjust the extensions or make changes in the style for it.

[RomaamoR]

What do you mean exactly? What do you have to change in the css?

All styles are fixed. Not adapted to the mobile screen.

[Tastenplayer]

What do you mean exactly? What do you have to change in the css?

All styles are fixed. Not adapted to the mobile screen.

That's not true!
My style is fully responsive down to the smallest phone, including the header image. The most validated styles are completely responsive.
It couldn't be better!

And that's a huge job, make a header with a large image and getting a header image responsive, down to the smallest screen. Luckily another style developer did this for me.
I had ever received very good codes and tips for my first style on phpbb.de(not this style - the first is quite complicated)

So what's your problem in responsive? https://abload.de/img/blackfog_responsivex0uic.jpg https://abload.de/img/blackfoginsidemaoj2.jpg https://abload.de/img/headerblackfogresponsw9q1n.jpg

Edit:
One problem is just: If someone has such a long forum title and description as I have in my forum, then it is no longer responsive. It is simply impossible to take everything into account. Then you as a forum operator just have to adapt this yourself in the css. What I simply forgot, when I uploaded the styles as DEMO in my forum

[Tastenplayer]

It took a little longer than I thought. But: Good things take time.

-I corrected two not allowed css codes, which was quite complicated
-All style checked again for css errors with CSS Lint
-Added the correct image folder (unfortunately this was the wrong one before )
-The responsive adjusted even better(I hope I have not worsened it now, instead of improving it )

Everything should definitely be right now!

Downloadlink in the first Post with version 2.1.1 is updated!

[FranckTH]

Hi,

Very good job, thanks, i like black and red color

[Tastenplayer]

Hi,
Very good job, thanks, i like black and red color

Thanks - if it's a good job, I'll see when I submit it for validation
I have adjusted the background of the online display. I have to check everything again now.

[3Di]

Edit:
One problem is just: If someone has such a long forum title and description as I have in my forum, then it is no longer responsive. It is simply impossible to take everything into account. Then you as a forum operator just have to adapt this yourself in the css.

You could make the use of CSS here and "ellipsis" I think, I do.

Code: Select all

/* Manage long names */
.my-awesome-class {
	white-space: nowrap;
	/* you MUST set a fixed width of choice here, to make all of this working */
	width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}

result: "a very very very long name for the winner ..." note the ellipsis (...) at the end, when truncated.

And use @media screens to change the fixed width, in case - for every device.

In Firefox hit CTRL+SHIFT+m to see the variouses media screens.

[Tastenplayer]

@3Di
Would it be a possibility, but does it look good in a forum, if the whole description is not fully displayed? I don't know if that's the way to do it.
I think a responsive code for each resolution does not solve the problem that the description below goes beyond the background
But this also has an influence on long titles in contributions, long names in contributions, etc.
I've now tried that

Code: Select all

h5 {
	font-family: Arial, Sans-serif;
	margin-top: 16px;
	font-size: 1.2em;
	white-space: nowrap;
	/* you MUST set a fixed width of choice here, to make all of this working */
	width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}

But the problem is: if you go with the mouse on it, the whole description would have to be displayed, which is not the case.

h5ellipsis.jpg (82.64 KiB) Viewed 894 times

We need something like this

Code: Select all

h5{
    font-family: Arial, sans-serif;
    font-size: 1.2em;   
    width: 600px;
    text-overflow: ellipsis;    
    cursor: pointer;
    word-break: break-all;
    overflow:hidden;
    white-space: nowrap;
    margin-top: 16px;
}

h5:hover{
    overflow: visible; 
    white-space: normal;
    width: auto; 
}

It actually seems to work. Only the syllabification of words on mouseover is a bit like from another star

Even better in hover with background

Code: Select all

h5:hover{
    overflow: visible; 
    white-space: normal;
    width: auto; 
    background: #222;
}

blackfog_h5 responsive with background.jpg (61.36 KiB) Viewed 883 times

And you dont need @media screens to change the fixed width, in case - it seems that only that is needed

Code: Select all

@media (max-width: 700px) {
	h5 {
		width: 310px;
	}
}

However, touch screens should not have a hover function? Unfortunately I do not own such a device. I haven't even got a smartphone yet.

@All
The last few days I have:
Style completely controlled again
Style files completely checked and corrected again
Correct another link button
Try to integrate another link navigation. Nothing has worked satisfactorily so far.

Download link with final version 3.2.2 has been updated

[3Di]

H8 doesn't exist, https://www.w3schools.com/tags/tag_hn.asp

Let's create a fake H8 then - we copy some of the H5 properties to create it.
We add/remove things here, to fit our needs.

The media screen below is for small phones, you should modify some bit for the other 3 media screens usually needed and the default CSS.

CSS

Code: Select all

@media all and (max-width: 525px) {
	.h8 {
		font-family: Arial, Sans-serif;
		font-size: 1.1em;
		text-align: center;
		display: block;
		margin-top: 1.1em;
		font-weight: bold;
		color: #aaaaaa;
	}
}

HTML We use a span instead of a div.

Code: Select all

<span class="h8">
	EIN TREFFPUNKT FÜR KEYBOARDER, TASTENPLAYER, LIVE-MUSIKER UND GESANGTALENTE
</span>

.
.
In Firefox hit CTRL+SHIFT+m on the keyboard to see test media screens.
And the inspector to modify the dummy view on the fly, like I did.

I am not a big expert but I think you can get the point.

This is your original on the same device enclosed within H5
.
.