phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

Flat Style

Grey variant? - Flat Style

Grey variant?

by dbrewood » Sat Apr 17, 2021 3:56 pm

How difficult would it to produce a grey variant of the style?
User avatar
dbrewood
Registered User
Posts: 522
Joined: Tue Feb 09, 2021 9:35 am
Name: Daron Brewood
Top

Re: Grey variant?

by eeji » Sat Apr 17, 2021 4:04 pm

The easiest way would be to use an existing child style as a base (i.e any except the orange parent). Copy the whole child style and rename the directory (eg copy flat-style-blue and rename to flat-style-grey) and edit the values in colour-override.css, recolour the icons in a graphic editor, and change the name to Flat Style Grey in style.cfg
My phpBB styles: phpbbstyles.iansvivarium.com
My "board": iansvivarium.com (yes, it's running phpBB!)
User avatar
eeji
Registered User
Posts: 1470
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Top

Re: Grey variant?

by dbrewood » Sat Apr 17, 2021 4:07 pm

Thanks, I'll leave it then as my graphical skills are not good enough to recolour the icons :)
User avatar
dbrewood
Registered User
Posts: 522
Joined: Tue Feb 09, 2021 9:35 am
Name: Daron Brewood
Top

Re: Grey variant?

by eeji » Sat Apr 17, 2021 4:20 pm

As its grey you want, it may be possible to change the icons with CSS. In the colour-override.css file in your new style, add to the icon rules the following:

Code: Select all

filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
This only needs to be applied to the site logo, contact icon sprite, and icons that are blue, as the 'read' icons are already black so won't need changing.

^^^^ code snippet is untested, but should work ;)
My phpBB styles: phpbbstyles.iansvivarium.com
My "board": iansvivarium.com (yes, it's running phpBB!)
User avatar
eeji
Registered User
Posts: 1470
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Top

Re: Grey variant?

by dbrewood » Sat Apr 17, 2021 4:46 pm

Fingers crossed, I'll have a play with it next week :)

I'll let you know hoe it goes!
User avatar
dbrewood
Registered User
Posts: 522
Joined: Tue Feb 09, 2021 9:35 am
Name: Daron Brewood
Top

Re: Grey variant?

by dbrewood » Sun Apr 18, 2021 8:47 am

That has all worked perfectly. One last thing. The header at the top of the page, I need to change two things:

Screenshot 2021-04-18 at 09.44.40.jpg
Screenshot 2021-04-18 at 09.44.40.jpg (9.47 KiB) Viewed 127 times

Have the name of the site as 'T3kk' (as in the board configuration settings), not 'T3KK', that is not upper case.

Thanks as always for your help.
Change the colour of both pieces of text to white (or a lighter shade of grey)

Is that easily possible?
User avatar
dbrewood
Registered User
Posts: 522
Joined: Tue Feb 09, 2021 9:35 am
Name: Daron Brewood
Top

Re: Grey variant?

by eeji » Sun Apr 18, 2021 12:25 pm

You would need to change the font as lower case isn't supported.

The title colour is defined on line 49 of flat.css in the parent orange style
The description colour is defined in your colour-override.css as .site-description p
My phpBB styles: phpbbstyles.iansvivarium.com
My "board": iansvivarium.com (yes, it's running phpBB!)
User avatar
eeji
Registered User
Posts: 1470
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Top

Re: Grey variant?

by dbrewood » Sun Apr 18, 2021 1:18 pm

Thanks for that. I assuming hanging the font would not be a simple matter as it looks to be endemic to the style itself?

For your reference so far I've made the following modifications:

Code: Select all

/* DMB Modifications */

.headerbar {
	background-color: #696969;
}

.wrap {
	margin: 0 auto;
	max-width: 85%;
	min-width: 400px;
	padding: 15px;
}

html, body {
	background-color: #CCCCCC;
	color: #444444;
	background-image: url("./images/background_spg.jpg");
	background-repeat: repeat;
}

.site-description h1 {
	color:#EEEEEE;
}

.site-description p {
	font-size:1.5em;
	color:#EEEEEE;
}

filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
User avatar
dbrewood
Registered User
Posts: 522
Joined: Tue Feb 09, 2021 9:35 am
Name: Daron Brewood
Top

Re: Grey variant?

by dbrewood » Sun Apr 18, 2021 1:35 pm

[Deleted]
User avatar
dbrewood
Registered User
Posts: 522
Joined: Tue Feb 09, 2021 9:35 am
Name: Daron Brewood
Top

Re: Grey variant?

by dbrewood » Thu Dec 23, 2021 8:33 pm

Another bit of help is needed if possible.... On my grey style I've modified the CSS to use colour #848482 which is fine and shows the control icons as per:

Screenshot 2021-12-23 at 20.26.28.jpg
Screenshot 2021-12-23 at 20.26.28.jpg (10.35 KiB) Viewed 89 times

However ideally I'd want to have the count badge next to VNC in another colour. Is this possible to do this without reverting the CSS colour for all icons in the line (e.g. like the original):

Screenshot 2021-12-23 at 20.26.08.jpg
Screenshot 2021-12-23 at 20.26.08.jpg (11.17 KiB) Viewed 90 times

Thanks in advance as always.
User avatar
dbrewood
Registered User
Posts: 522
Joined: Tue Feb 09, 2021 9:35 am
Name: Daron Brewood
Top

Re: Grey variant?

by eeji » Fri Dec 24, 2021 5:45 pm

If that icon has a unique class you could target that instead of the wider class of all the icons. If it hasn't, then add your own.
My phpBB styles: phpbbstyles.iansvivarium.com
My "board": iansvivarium.com (yes, it's running phpBB!)
User avatar
eeji
Registered User
Posts: 1470
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Top

Re: Grey variant?

by dbrewood » Fri Dec 24, 2021 5:48 pm

Okay I'll look into how to wrap that badge with a different class.
User avatar
dbrewood
Registered User
Posts: 522
Joined: Tue Feb 09, 2021 9:35 am
Name: Daron Brewood
Top