phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

proflat

Colors & font size - proflat

Colors & font size

by AbuHossam » Sat May 06, 2023 4:20 pm

Hello sir
Thanks for this great style.
I have some questions please..

A. Are different colors available? If so, how do I choose?
B. How to change font size: h1, h2, h3 etc..
Recent Topics in DB-UK Community – Where Every Passion Finds Its Place.
User avatar
AbuHossam
Registered User
Posts: 361
Joined: Sun Sep 02, 2018 7:24 am
Top

Re: Colors & font size

by EA117 » Sun May 07, 2023 12:23 am

This style was created by Mazeltof, and on their web site you can find all the different color variations which are available. Assuming you are using the latest version of both phpBB and proflat, you want the downloads such as "proflat amber 1.3", "proflat blue grey 1.3", "proflat deep purple 1.3". from the Styles phpBB 3.3 section of Mazeltof's web site.

Note that you install these color-specific versions of the style in addition to installing proflat itself. Meaning you install "proflat 1.3" to have the base style, and then you also install "proflat black 1.3" or whichever color(s) you want, and install them as styles, too. The color-specific versions inherent from the main "proflat" style, and are dependent on "proflat" being installed in addition to the color-specific style.

Once you have the "proflat" style installed, and then once you have one or more of the color-specific proflat styles installed, you can choose which color style you want to be default for your board in the phpBB ACP. Both proflat and the color-specific versions of proflat will all simply show as installed styles you can choose between.

The proflat style inherits many things from the phpBB "prosilver" style, including the base font size. So there isn't an existing statement in style_proflat.css where the base font size was being set, because proflat was relying on the prosilver statements for the default font sizes. But you can add statements in the /styles/proflat/theme/style_proflat.css so that the proflat style does declare it's own base font size, such as the line I've added here:

Code: Select all

/* 1 - General Markup Styles */
body {
	padding: 0;
	font-size: 1.2em; /* Normally we inherit just 1em from proSilver, but we want something larger. */
}
So that now your custom version of proflat will override and have its own value for font-size, rather than inheriting prosilver's values.
User avatar
EA117
Registered User
Posts: 2173
Joined: Wed Aug 15, 2018 3:23 am
Top

Re: Colors & font size

by AbuHossam » Sun May 07, 2023 6:53 am

@EA117

thank you sir

The colors are way overdone. Why didn't they make these in simple options.

Anyway, I will try.

As for font size, what is the appropriate format for each group?

like:
H1
H2
H3
Recent Topics in DB-UK Community – Where Every Passion Finds Its Place.
User avatar
AbuHossam
Registered User
Posts: 361
Joined: Sun Sep 02, 2018 7:24 am
Top

Re: Colors & font size

by EA117 » Sun May 07, 2023 9:47 am

Agreed there is more than one way to implement color variation within a phpBB theme. The approach being used here is ideal if, for example, you would like both "proflat - orange" and "proflat - pink" to be available for users to choose between, since any color variation installs as a separately selectable phpBB style.

The real reason I like this approach: Because I use one of the color-specific versions of proflat as the basis for my customizations. Meaning, I never customize proflat itself, other than to fix bugs. But I took a copy of "proflat - black", renamed that into "EA117 site style", and made all my site-specific customizations in that style instead. So I'm able to update the installed proflat style itself without issue, and without losing any customizations, because all my customizations are in "the color-specific version" of proflat, which rarely requires updating.

As mentioned, proflat is inheriting from prosilver. Specifically in the case of <h1>, <h2>, and <h3> that means it is inheriting the CSS you see in /styles/prosilver/theme/common.css here:

Code: Select all

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}

h2.solo {
	margin-bottom: 1em;
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	margin-top: 20px;
}

h4 {
	/* Forum and topic list titles */
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
	font-size: 1.3em;
}
So you could add a similar section to proflat's /styles/proflat/theme/style_proflat.css, or where ever you intend to keep CSS-level customizations, if you want to give some proflat-specific overrides to "just the font sizes" that prosilver had otherwise been responsible for providing:

Code: Select all

h1 {
	/* Forum name */
	font-size: 2.1em; /* Larger than what we otherwise inherit from prosilver common.css */
}

h2 {
	/* Forum header titles */
	font-size: 2.1em; /* Larger than what we otherwise inherit from prosilver common.css */
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-size: 1.15em; /* Larger than what we otherwise inherit from prosilver common.css */
}

h4 {
	/* Forum and topic list titles */
	font-size: 1.4em; /* Larger than what we otherwise inherit from prosilver common.css */
}

edit: Fixed /styles/proflat/theme/common.css path reference to be /styles/prosilver/theme/common.css
Last edited by EA117 on Sun May 07, 2023 5:13 pm
User avatar
EA117
Registered User
Posts: 2173
Joined: Wed Aug 15, 2018 3:23 am
Top

Re: Colors & font size

by AbuHossam » Sun May 07, 2023 12:07 pm

@EA117
Oh my God, this is very useful. Thank you very much, professional.
Can you -please- add the code to change the font size of the content as well?
Recent Topics in DB-UK Community – Where Every Passion Finds Its Place.
User avatar
AbuHossam
Registered User
Posts: 361
Joined: Sun Sep 02, 2018 7:24 am
Top

Re: Colors & font size

by EA117 » Sun May 07, 2023 5:41 pm

If you are wanting to affect "everything" — and not just h1,h2,h3,h4 — then the earlier CSS block for affecting font-size for body should have already been the answer. Because normally proflat would be inheriting the following from prosilver's common.css:

Code: Select all

body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height: normal;
	margin: 0;
	padding: 12px 0;
	word-wrap: break-word;
	-webkit-print-color-adjust: exact;
}
So you're starting with a fixed 10px height font inherited from prosilver. You could change that to a larger fixed-size specification, like 16px, and put that into your style_proflat.css or where ever you choose to keep your customizations:

Code: Select all

body {
	font-size: 16px; /* Larger than what we would have otherwise inherited from prosilver common.css */
}
You wouldn't be required to explicitly increase h1,h2,h3,h4 in that case, because the CSS you're inheriting from prosilver has specified the h1,h2.h3,h4 sizes in "em" units rather than any fixed size like "18px". Meaning the fonts for the h1,h2,h3,h4 tags are already being sized relative to the font size of the element the tags are being invoked in.

So once you increase the body font size, the h1,h2,h3,h4 font sizes should already be increasing automatically, too.
User avatar
EA117
Registered User
Posts: 2173
Joined: Wed Aug 15, 2018 3:23 am
Top