[Resolved]Understanding css logic stylesheet pointer

[The_Driver]

Hello,

I am newbie and i am learning with phpBB using wamp, only local.
I want to make a personalized style, who herit from prosilver, and modify.

I have a Folder "MyStyle" with :
[*] Folder "template"
[*] Folder "theme"
[*] style.cfg with parent = prosilver and name = MyStyle

In template i have index_body, overall_header and simple_header.
In theme i have a Folder image and files stylesheet.css and colours.css

myStyle/template/overall_header

Code: Select all

...
<!-- IF S_ALLOW_CDN -->
<script>
	WebFontConfig = {
		google: {
			families: ['Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese']
		}
	};

	(function(d) {
		var wf = d.createElement('script'), s = d.scripts[0];
		wf.src = 'https://cdn.jsdelivr.net/npm/[email protected]/webfontloader.min.js';
		wf.async = true;
		s.parentNode.insertBefore(wf, s);
	})(document);
</script>
<!-- ENDIF -->

<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/prosilver/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/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/prosilver/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/prosilver/theme/responsive.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]-->
<!-- EVENT overall_header_head_append -->

{$STYLESHEETS}
<!-- EVENT overall_header_stylesheets_after -->
</head> 
...

myStyle/theme/stylesheet.css

Code: Select all

/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			MyStyle
	Based on style:
	Original author:	Denis
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=7c5543be");
@import url("utilities.css?hash=d8f72c42");
@import url("common.css?hash=843d5d5f");
@import url("links.css?hash=18286e16");
@import url("content.css?hash=d0e24377");
@import url("buttons.css?hash=56f0d25f");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=9016b55c");
@import url("icons.css?hash=64da33ce");
/*@import url("colours.css?hash=fcb2f289");*/
@import url("responsive.css?hash=c9d32cba");

When i put the style (manage, uninstall, clean cache, install "myStyle" and i make F12, i see the stylesheet who is used is... prosilver and not mine. Can you explain why, and how can i fix that ?

[Gumboots]

Sure. You are calling all of Prosilver's stylesheets in your head tag, and you are not calling your style's colours.css. You have commented that out, so it doesn't get called.

[The_Driver]

@Gumboots

In MyStyle/theme/colours.css i copied the content of prosilver's file, and modified :

Code: Select all

html, body {
	color: #536482;
	background-color: [b]#090017[/b]; /* Purple */
}

but the background color is still the color of prosilver.
I dont understand why. I think my stylesheet is not "read", the program read the stylesheet of prosilver.

[Gumboots]

You have this in your stylesheet.css:

Code: Select all

@import url("icons.css?hash=64da33ce");
/*@import url("colours.css?hash=fcb2f289");*/
@import url("responsive.css?hash=c9d32cba");

You have commented out the call for colours.css, so that file is not being called. Every other file is being called, but not that file. So, your new style is (apparently) falling back to the Prosilver colours.css.

If you intended to only call colours.css in myStyle/theme/stylesheet.css it should look like this:

Code: Select all

/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			MyStyle
	Based on style:
	Original author:	Denis
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/
/*
@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=7c5543be");
@import url("utilities.css?hash=d8f72c42");
@import url("common.css?hash=843d5d5f");
@import url("links.css?hash=18286e16");
@import url("content.css?hash=d0e24377");
@import url("buttons.css?hash=56f0d25f");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=9016b55c");
@import url("icons.css?hash=64da33ce");
*/
@import url("colours.css?hash=fcb2f289");
/*
@import url("responsive.css?hash=c9d32cba");
*/

[ssl]

There's a full explanation here about child styles: https://www.phpbb.com/styles/create/

[The_Driver]

Thanks Gumboots, it works.
My problem is resolved. thanks a lot!

[ssl]

What is the point of importing CSS sheets into the child style's stylesheet.css file if these lines are commented out?

[Gumboots]

My assumption was that since he is just starting out, he may be thinking of including some of the other files later. That's the usual reason for commenting out code: to keep stuff that might be handy for something later. In the meantime the commented code does no harm. Also, since he had not done the commenting correctly I thought I should show him how it should have been done.