Create child not from Prosilver

[Tastenplayer]

Creating a style from another style than Prosilver was my problem today Seems to have worked (if it doesn't have another error in the overall_header / simple_header). Anyway, everything works so far.
Too bad that all html files have to be inserted in the child. Or is there any other way?

Code: Select all

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

overall_header.html

Code: Select all

<link href="{ROOT_PATH}styles/prosilver/theme/normalize.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/base.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/utilities.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/content.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/icons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/colours.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/ahoi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
	<link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<link href="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
	<link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

simple_header.html

Code: Select all

<link href="{ROOT_PATH}styles/prosilver/theme/normalize.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/base.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/utilities.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/content.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/icons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/colours.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/Ahoi/theme/ahoi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{ROOT_PATH}styles/prosilver/theme/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 8]>
 <link href="{{ T_THEME_PATH }}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

<!-- DEFINE $POPUP = 1 -->

<!-- EVENT simple_header_head_append -->

I first lowered the style name in the code, which didn't cause any problems locally on the computer, but when the style was installed in the forum on the server, it wasn't displayed correctly anymore.

In the style folder:

Code: Select all

- stylesheet
- index
- ahoi_xmas.css
- bidi.css
- plupload.css

https://abload.de/img/ahoi_xmasywklo.png
Must go with the code, right? Style looks correct and everything seems to work as it should. (Demo is on)

[Gumboots]

The old single-colour variants of Aero (for 3.2.0) have the default blue Aero as a parent. Cfg for Aero Black:

Code: Select all

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

It only contains the following directories and files:

Code: Select all

aero_black\template\profilefields

aero_black\template\ajax.js
aero_black\template\forum_fn.js
aero_black\template\jquery.collapse.js
aero_black\template\jquery.cookie.js
aero_black\template\timezone.js

aero_black\theme\en
aero_black\theme\images

aero_black\theme\base.css
aero_black\theme\bidi.css
aero_black\theme\buttons.css
aero_black\theme\colours.css
aero_black\theme\common.css
aero_black\theme\content.css
aero_black\theme\cp.css
aero_black\theme\forms.css
aero_black\theme\icons.css
aero_black\theme\index.htm
aero_black\theme\links.css
aero_black\theme\normalize.css
aero_black\theme\plupload.css
aero_black\theme\print.css
aero_black\theme\responsive.css
aero_black\theme\stylesheet.css
aero_black\theme\tweaks.css
aero_black\theme\utilities.css

There are no HTML files at all.

[EA117]

Indeed, it should be possible to create a child style which only "must" include HTML templates for pages it's actually changing the functionality in. It shouldn't need to duplicate templates "just to successfully inherit from the parent style", before even making any changes in the child style.

Indeed, there is an issue to solve: For example the parent style's HTML templates will continue to be making references such as <link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">. And because the {T_THEME_PATH} is now your child style rather than the parent style, this template would fail to load the parent's bidi.css by default. But you can simply include a "stub" bidi.css in your child style, which does nothing except reach over with a relative path to include the parent style's existing bidi.css file.

Which makes the parent's template happy, and keeps you from having to unnecessarily "duplicate" either the template or the CSS file content into your child style. An example similar to Gumboots' example, for making "a child that duplicates prosilver" without duplicating any templates or images, is described in this post.

For making a child of a different style, you would just have to determine "what resources are the parent's templates going to expect to exist in the {T_THEME_PATH}". It probably won't be identical to the files needed for inheriting 100% of prosilver; but the same approach can still be used.

One thing that isn't necessarily obvious is that you don't need to duplicate the image files referenced from the CSS, because the relative paths used to load images are relative to the CSS file that referenced them.

e.g. ../../prosilver/theme/colours.css will continue using the image ../../prosilver/theme/images/site_logo.gif, even when your child style is what has caused the /styles/prosilver/theme/colours.css file to be included. Because CSS looks for the path url("./images/site_logo.gif") relative to the directory where /styles/prosilver/theme/colours.css exists; not on a path relative to "the current phpBB theme directory."

[Gumboots]

Sounds nice and simple. One thing that occurred to me: how does this go for http requests? If you duplicate the CSS files to the child, but empty the content, is the child then sending a request to the server for its CSS file and for the parent's file as well?

Come to think of it, same applies to templates or to any other file. If you're going to be doubling up on http requests then there would be a good argument for not using inheritance and for giving each style its own files. OTOH, if the processing is done internally before the http requests are sent out, then using inheritance wouldn't be an issue for web performance.

[EA117]

Agree it's definitely a behavior worthy of consideration. Yes, having /child/sheet.css include /parent/sheet.css results in two separate HTTP requests. The only reason this doesn't concern me -- or at least still "wins" in my mind, compared to the alternative of committing to future template maintenance "just to load the parent's CSS" for a template I wouldn't have otherwise needed to maintain -- is because of how far out of our way we need to go in order to make users' browsers reload changed CSS files.

Meaning yes, the first time they visit the page, it's definitely two HTTP GET requests to pull first /child/sheet.css and then /parent/sheet.css. But if you LAN trace your access even here on phpbb.com/community (at least for me, and on Chrome where I'm usually working), navigating from one page to another doesn't reload any of these files. So you haven't "doubled your HTTP traffic" with this decision. The browser has cached the CSS resource URLs he's already been requested to pull, and won't pull another one until he thinks his cache should be expired, or until we increment phpBB's T_ASSETS_VERSION to change the CSS URL the template is requesting to something the browser hasn't cached previously.

The same "double HTTP requests" won't apply to templates themselves, because that's a server-side decision. phpBB itself is able to resolve "inheritance" for the templates, and doesn't rely or result in templates going across any HTTP requests first. phpBB simply can't apply that same "I'll resolve inheritance before ever rendering the page" when it comes to CSS, simply due to the technical details of how CSS itself works.

As to "any other file" I guess we would need an example. Images won't become "doubled" in their transmission over the wire, since only the correct template executes (once), and only the image referenced by the executed template will be pulled. Even for CSS the user agent is only going to pull "the image that ultimately needed to be displayed" after all the CSS calculus; not "every image that was cited in the CSS file, but was overridden or disabled by a later cascaded style sheet from the child style."

e.g. Pulling in prosilver's colours.css and then your own additional CSS file to provide a site logo doesn't mean "you had to download prosilver's site_logo.png first, and then also had to download mylogo.png." Only if the image is being displayed will it be pulled, and so long as your CSS has replaced or disabled the other logo display (and not just "covered it up" so to speak), you're still only loading the one displayed image.

[Gumboots]

Yes fair point on the server-side. I've been messing with static files recently and sort of had them on the brain.

Re CSS overrides: I just have this personal thing about not calling more CSS than I need, I find it makes things easier on my brain when tracking stuff down. But I get the maintenance argument. Although how often does phpBB change CSS for basic patches? I would have thought all (or at least most) minor version patches would only be back end security fixes.

[EA117]

(Note my edit to the previous post at the same time as your post was just for a typo; no substantial info change or correction made.)

But I get the maintenance argument. Although how often does phpBB change CSS for basic patches? I would have thought all (or at least most) minor version patches would only be back end security fixes.

Yeah, CSS probably not often. But the issue is with phpBB-initiated template maintenance; not the CSS changes. e.g. To define overall_header.html in my child style "just to control where he attempts to pull bidi.css from" means now I have to keep up with all of phpBB's changes to prosilver's overall_header.html. (Or from the author of whichever parent style I'm actually extending, if not prosilver.) Whereas with the described approach, I don't have to worry about the publisher changing either overall_header.html or bidi.css.

I'll grant that "professional style authors" might not view this as a problem like I do, and might say "but I have to perform constant maintenance anyway, so what does it matter." In my case, I'm giving folks a customized version of the parent style that just integrates their color choices, their site-specific logo, etc. And I don't want anyone to have to revisit it -- neither them nor me -- for as long as possible, even as updates get published and installed for the parent style.

e.g. If I gave you a customized prosilver child style back at phpBB 3.2.0 or earlier, you might very well still be using it; if I went out of my way to defer to existing prosilver resources instead of duplicating them.

[Gumboots]

Fair enough.

[Tastenplayer]

Yes interesting approaches, but I created a child of my own style, that's a completely different thing.
Prosilver - Ahoi - Ahoi_Xmas
As soon as I delete integrated CSS files from the overall_header, the style is no longer displayed correctly. Therefore I think that my inserted code in overall_header and simple_header should be correct. But of course I'm insecure despite.
Style Ahoi & Prosilver must be installed
Download Ahoi * Download Ahoi_Xmas_dev

[Mannix_]

Why are including html files that are not different from the ones present in the parent style? The only change i see is an icon in forumlist_body.html the other files are not necessary. I see you chose 4th method for inheritance. When i was creating the child style for my HexagonReborn style i included all css file from the parent (1st method) and edited only those files that needed to be changed. The only downside is when there is a phpbb update and I have to apply style changes to both of the css files and in the last few updates changes to css where minimal so it was not to much of a hassle. Maybe i should try your method and see if I have any success with it

[Tastenplayer]

Why are including html files that are not different from the ones present in the parent style? The only change i see is an icon in forumlist_body.html the other files are not necessary.

Not necessary: that's exactly what I thought and didn't insert them. But the Ahoi_Xmas was only displayed correctly when I inserted it. But I'll try that again now and remove it again. Maybe it was another mistake.

True in Xmas style only need to be included:
- overall_header.html (Included CSS files and name change)
- simple_header.html (Included CSS files)
- overall_footer.html (name change)
- forumlist_body.html (icon change)

Maybe i should try your method and see if I have any success with it

So far everything seems to be working properly. But my solution could still be flawed. I don't really trust the whole thing yet .
In any case, I noticed that when you visit my forum for the first time, the page background image of the style Ahoi is always visible for one second first (At least with Firefox). But, if a style uses the same page background, then that's not a problem.

Download Ahoi * Download Ahoi_Xmas_3.2.8.1_dev

[Mannix_]

Just tested the the styles on my test board and everything seems to be loaded fine but I noticed you used 2nd method of inheritance in the parent style (ahoi) to load files from prosilver. I think it would be safer to use the 4th one like in ahoi_xmas. Combining them might not be the best solution.

EDIT: I don't see the necessity in adding the footer file just for the name change

[Tastenplayer]

Just tested the the styles on my test board and everything seems to be loaded fine but I noticed you used 2nd method of inheritance in the parent style (ahoi) to load files from prosilver. I think it would be safer to use the 4th one like in ahoi_xmas. Combining them might not be the best solution.

You might be right about that! But not all adjustments will work if I change that. So far I couldn't see any problems about that. But I will try again to change the style Ahoi as a real child. This will take longer, though.
But then my inserted code in the style Ahoi_Xmas in overall_header and simple_header is not correct anymore.
Exactly because of the code inserted in the headers I think it doesn't really matter how the first style is configured, i.e. if the ahoi is configured afther 2nd method or the 4th one.

EDIT: I don't see the necessity in adding the footer file just for the name change

Not necessarily, but it looks better . It's not just color matching.

[Gumboots]

That's the essence of making styles.

[Mannix_]

One more thing the print.css is missing from the ahoi_xmas style