Create child not from Prosilver

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
Tastenplayer
Registered User
Posts: 384
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Create child not from Prosilver

Post by Tastenplayer » Fri Oct 18, 2019 8:55 pm

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)
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Gumboots
Registered User
Posts: 193
Joined: Fri Oct 11, 2019 1:59 am

Re: Create child not from Prosilver

Post by Gumboots » Fri Oct 18, 2019 9:33 pm

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.

User avatar
EA117
Registered User
Posts: 1072
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Create child not from Prosilver

Post by EA117 » Fri Oct 18, 2019 10:33 pm

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."

User avatar
Gumboots
Registered User
Posts: 193
Joined: Fri Oct 11, 2019 1:59 am

Re: Create child not from Prosilver

Post by Gumboots » Sat Oct 19, 2019 12:02 am

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.

User avatar
EA117
Registered User
Posts: 1072
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Create child not from Prosilver

Post by EA117 » Sat Oct 19, 2019 12:29 am

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.
Last edited by EA117 on Sat Oct 19, 2019 12:39 am, edited 1 time in total.

User avatar
Gumboots
Registered User
Posts: 193
Joined: Fri Oct 11, 2019 1:59 am

Re: Create child not from Prosilver

Post by Gumboots » Sat Oct 19, 2019 12:37 am

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.

User avatar
EA117
Registered User
Posts: 1072
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Create child not from Prosilver

Post by EA117 » Sat Oct 19, 2019 12:58 am

(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.)
Gumboots wrote:
Sat Oct 19, 2019 12:37 am
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.
Last edited by EA117 on Sat Oct 19, 2019 1:02 am, edited 1 time in total.

User avatar
Gumboots
Registered User
Posts: 193
Joined: Fri Oct 11, 2019 1:59 am

Re: Create child not from Prosilver

Post by Gumboots » Sat Oct 19, 2019 1:01 am

Fair enough.

User avatar
Tastenplayer
Registered User
Posts: 384
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: Create child not from Prosilver

Post by Tastenplayer » Sun Oct 20, 2019 7:27 am

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
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Mannix_
Registered User
Posts: 567
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Create child not from Prosilver

Post by Mannix_ » Sun Oct 20, 2019 8:38 am

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 :)
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

User avatar
Tastenplayer
Registered User
Posts: 384
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: Create child not from Prosilver

Post by Tastenplayer » Sun Oct 20, 2019 8:57 am

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
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Mannix_
Registered User
Posts: 567
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Create child not from Prosilver

Post by Mannix_ » Sun Oct 20, 2019 10:12 am

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
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

User avatar
Tastenplayer
Registered User
Posts: 384
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: Create child not from Prosilver

Post by Tastenplayer » Sun Oct 20, 2019 10:39 am

Mannix_ wrote:
Sun Oct 20, 2019 10:12 am
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.
Mannix_ wrote:
Sun Oct 20, 2019 10:12 am
EDIT: I don't see the necessity in adding the footer file just for the name change
Not necessarily, but it looks better :lol: . It's not just color matching.
Last edited by Tastenplayer on Sun Oct 20, 2019 10:59 am, edited 4 times in total.
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Gumboots
Registered User
Posts: 193
Joined: Fri Oct 11, 2019 1:59 am

Re: Create child not from Prosilver

Post by Gumboots » Sun Oct 20, 2019 10:43 am

That's the essence of making styles.

User avatar
Mannix_
Registered User
Posts: 567
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Create child not from Prosilver

Post by Mannix_ » Sun Oct 20, 2019 11:17 am

One more thing the print.css is missing from the ahoi_xmas style :)
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”