Changing colours.css to dark theme

[DV1]

I've modified prosilver, design-wise, to my needs. The changes are basically in colours.css.

I want to make a dark version of the theme, e.g., black background-white text, thus giving members and guests a choice.

Do I have to upload another, entire prosilver with just those color changes in the css? Or is there something whereby the dark colours.css would be recognized?

Thanks

Daniel

[david63]

The easiest way would be to create your dark style as a "child" style of your prosilver and just have the changes in that style.

Incidentally that is also the recommended way to change prosilver otherwise you will have to reapply all of your changes whenever there is an update to phpBB

[DV1]

David, thanks for responding. Long time no answer a post of mine. Then again, I do visit here infrequently.

The easiest way would be to create your dark style as a "child" style of your prosilver and just have the changes in that style.

If I understand you correctly, 'that style' means a folder with the style's name - let's just call it 'childstyle'- which contains the files that I changed. In this case it would be the colours, content, and common css files; no changes were made to any of the templates. Along with the .cfg file that makes for 4 files for the 'childstyle' folder. Am I right so far on that?

Apparently, it is the .cfg file which makes the 'switch' possible to the child style.

Code: Select all

# General Information about this style
name = prosilver
copyright = © phpBB Limited, 2007
style_version = 3.2.8
phpbb_version = 3.2.8

# Defining a different template bitfield
# template_bitfield = //g=

# Parent style
# Set value to empty or to this style's name if this style does not have a parent style
parent = prosilver

Would the 'childstyle' simply change, "name = prosilver" to "name=childstyle" and nothing else changed?

Thanks

[david63]

Would the 'childstyle' simply change, "name = prosilver" to "name=childstyle" and nothing else changed?

As far as I know, yes - but I am not a styles person.

[Mannix_]

In this case it would be the colours, content, and common css files; no changes were made to any of the templates. Along with the .cfg file that makes for 4 files for the 'childstyle' folder. Am I right so far on that?

nope you need to inherit the css files that are not modified from parent style in this case prosilver. You can read on how to do it here https://www.phpbb.com/styles/create/ you have 4 methods to choose from

[DV1]

Mannix, thank you for responding.

I read your suggestion about inheritance and the 4 methods. I then looked at your style, 'CleanSilver', to see how you dealt with it. The theme folder is fairly spare with only 5 css files: bidi, custom, plupload, print, tweaks.

It seems you used method 3 to include the rest of the css files by putting the following in CleanSilver's overall-header.html?:

Code: Select all

<link href="{ROOT_PATH}styles/prosilver/theme/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{T_THEME_PATH}/custom.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

So far, so good.

Then I noticed that your template folder has just about every html-template in it. Did you modify all the templates? I ask that because I made no modifications to said templates and I'm wondering if there are some templates that are essential to include in a template folder regardless if they were changed or not.

I hope that makes sense in the way I described it.

[Mannix_]

In your case I would use method 2 or 4 since you will be using 3 css files that are being modified to make the board dark. Using 4th method you would have to load all the non edited files like this in the overall_header.html and simple_header.html files

Code: Select all

<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

and the three edited like this

Code: Select all

<link href="{T_THEME_PATH}/custom.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet"> 

The files you need to load can be found in the stylesheet.css file

Code: Select all

@import url("normalize.css?v=3.3");
@import url("base.css?v=3.3");
@import url("utilities.css?v=3.3");
@import url("common.css?v=3.3");
@import url("links.css?v=3.3");
@import url("content.css?v=3.3");
@import url("buttons.css?v=3.3");
@import url("cp.css?v=3.3");
@import url("forms.css?v=3.3");
@import url("icons.css?v=3.3");
@import url("colours.css?v=3.3");
@import url("responsive.css?v=3.3");

remember to keep the order and keep extras like print.css etc. in you child theme folder like i did in CleanSilver.
I hope i was clear enough with the instructions



PS. 3 method it useful if you are adding extra css file for your style like in my CleanSilver style.

[DV1]

Mannix

Thank you for the explanation re the methods. Thankfully, I've got a test forum on my server so I can work these things out.

I think I understand re the css files but I want to be clear on the html-templates which I mentioned in my previous question. By your suggestions I can see that overall_header.html and simple_header.html would be templates to have in the new style folder. Will those two be the only ones I need? This refers back to my question about you having most of the main templates in CleanSilver's folder. Do the templates also have to be imported such as the files you show in the stylesheet.css?

I guess at the back of all of this I'm wondering just how many changes - and to what - will I have to make to the child style when a new version of phpBB arrives. Thus, I wondered about your html-template folder and if all of those have to be replaced-recoded with new-version updates.

And as a sidecar-question (to anyone) prompted by all of this, just how much difference is there between making a new style and a 'child' style?

Thanks

[Mannix_]

I think I understand re the css files but I want to be clear on the html-templates which I mentioned in my previous question. By your suggestions I can see that overall_header.html and simple_header.html would be templates to have in the new style folder. Will those two be the only ones I need? This refers back to my question about you having most of the main templates in CleanSilver's folder. Do the templates also have to be imported such as the files you show in the stylesheet.css?

Yes that would be the only template/html files you need in your child style because you only want to change colours not the stuff that is getting displayed. CleanSilver has more template/html file because all those files were edited to make the style look the way it looks. Something added or remove etc f.e the statistics blocks were edited so i needed to make changes index_body.html viewforum_body.html and viewtopic_body.html to make it look like it looks now because those are place where those blocks are being displayed.

I guess at the back of all of this I'm wondering just how many changes - and to what - will I have to make to the child style when a new version of phpBB arrives. Thus, I wondered about your html-template folder and if all of those have to be replaced-recoded with new-version updates.

This depends of have many change the original prosilver will get in the new update it can be you can look here viewtopic.php?f=591&t=2428791 to see how many changes were made from 3.2.0 prosilver up to 3.2.8. In your case it gonna be minimal since most of the stuff is gonna be inherited from the parent prosilver style and you only edited like 3 css files. So when new version is release you need to check the topic I mention above to see if any changes have to be applied to those 3css files you edited if not you don't have to do anything with your child style

Now when I update my styles is a bit more complex because it involves more files and i need to check if they were edited if the were I need to mirror (or not) the changes in those files present in my style.

And as a sidecar-question (to anyone) prompted by all of this, just how much difference is there between making a new style and a 'child' style?

"99%" of the styles in the CDB are child's of prosilver because it easier then making a style from scratch.

[PlanetStyles.net]

Hi there,

Converting a light style to dark is a lot of work. I recently released prosilver dark edition here: https://www.phpbb.com/customise/db/styl ... lver_dark/

Feel free to use it as a starting point for your project

[DV1]

Hi, Christian. Long time no hear from you too.

Actually, it doesn't take that long just to change the colors in prosilver. I can see that in your case where there are many changes going on with different types of files it would take some time. By the way, your prosilver dark looks good.

As you can see by this image a lot gets done just with the colours.css. No other files were modified.



The only thing left in this example are the search boxes and some minor adjustments here and there.

[PlanetStyles.net]

minor adjustments here and there.

That's what takes all the time

Nice to see you rolling your sleeves up and getting stuck in