BigDrago wrote: Sat Sep 07, 2019 8:11 pm
Let´s say I want to tweak colours.css on myowntheme. I copy colours.css to my own folder and myowntheme will use that .css?
Not exactly. The way CSS works doesn't allow for phpBB's "inheritance" behavior to work exactly the same way as it works for template (.html) files. And is what
https://www.phpbb.com/styles/create/ is referring to when it said
"The biggest obstacle for most style authors is the fact that the inheritance tree only works for templates, not CSS."
So although
"copying /styles/myown/template/overall_header.html" into your style would begin causing phpBB to start using your style's version of the overall_header.html template instead of /styles/prosilver/template/overall_header.html, the same
is not true for
"copying colours.css into your style directory."
Nor would you want to literally
"copy colours.css and have that be used instead of prosilver's colours.css", at least not in this case. You
want prosilver's version of colours.css to continue being used, so that when phpBB updates prosilver and makes a couple tweaks or fixes to colours.css, your style will inherit those fixes rather than being stuck with your "old" static copy.
So what you want is to create a local blank .css file in your style. It can be named colours.css if this helps you keep track of which prosilver CSS sheet's definitions you're tweaking, but what you name the file isn't really important and can be whatever you prefer. Since you gave a hint as to your intention, let's use "logo.css" as the file you create in this example.
Then you will update your style's stylesheet.css so that in addition to importing 100% of prosilver's stylesheet.css, it now also includes your additional style-specific CSS file(s), such as:
Code: Select all
/* Inherit all of proSilver style sheets */
@import url("../../prosilver/theme/stylesheet.css");
/* Load additional style sheets specific to your theme */
@import url("logo.css");
Now inside your style-specific logo.css file (or whatever you've named it), you would put only the CSS definitions that you want to further extend or override, compared to what prosilver's CSS is already doing (and is still doing) for your style. So you
do not want to start out with logo.css containing
"a complete copy of prosilver's existing colours.css" or anything like that; you want to define only that CSS which is necessary to change the behavior you're intending to change.
BigDrago wrote: Sat Sep 07, 2019 8:11 pm
Can I make the logo adjust automatically based on screen size and for cellphone users?
That's a perfect example of a situation where you want to ensure
"my style will continue to inherit as close to 100% as possible any changes phpBB makes to the underlying proSilver", because the changes you're doing are otherwise very minimal.
So if we continue with the
"I have created an additional logo.css file to contain CSS changes unique to my style" example described above, in order to actually change the logo, you'll extend and override what prosilver defines for the site logo (in prosilver's colours.css) by putting the following in your /styles/myown/theme/logo.css file that you're now including from your /styles/myown/theme/stylesheet.css:
Code: Select all
.site_logo {
background-image: url("./images/my_site_logo.png");
}
Note you can add alternate
height: and
width: to that definition as needed, too. Anything you define at this point is "after" and therefore overrides whatever prosilver had defined for these same CSS element path properties.
And so then finally,
now you need to create the /styles/myown/theme/images/ folder, because now you actually have an image which is specific to your style. (The "./images/my_site_logo.png" image.) The web browser will want to load this "./images/my_site_logo.png" file from /styles/myown/theme/images/, because the "./images/" path is relative to your style-specific /styles/myown/theme/logo.css file (or whatever you chose to name that file) in which your
.site_logo{ background-image: url("./images/my_site_logo.png"); } declaration was made.
BigDrago wrote: Sat Sep 07, 2019 8:11 pm
Can I make the logo adjust automatically based on screen size and for cellphone users?
prosilver's responsive.css style sheet contains any CSS changes that should apply as the screen width falls below certain thresholds, and your style is already receiving all of those by virtue of
@import url("../../prosilver/theme/stylesheet.css").
You can now add your own
@media (max-width: ) { } blocks to your style-specific logo.css in order to further override the otherwise prosilver-defined behavior. For example, the logo currently "disappears" on mobile devices because of the following block in prosilver's responsive.css:
Code: Select all
@media (max-width: 700px) {
...
.logo {
/* change display value to inline-block to show logo */
display: none;
float: none;
padding: 10px;
}
...
}
In other words, if the screen size falls to 700px wide or less, prosilver has changed the
<a class="logo"> link that encapsulates the logo image display such that it is
display: none. So you could then create your own
@media (max-width: 700px) { } block in your style's logo.css, and make your own further decisions about which of these prosilver behaviors to undo & what additional behaviors you want instead for your style.
Note that because the site logo image is actually attached as a background to the
<span class="site_logo">, changing the behaviors you want (such as switching to a different image on mobile displays) would involve adding CSS for paths other than just
.logo. For example, your style's logo.css could end up looking like:
Code: Select all
.site_logo {
background-image: url("./images/my_site_logo.png");
}
@media (max-width: 700px) {
.logo {
/* changed display value to inline-block to show logo on mobile instead of hide */
display: inline-block;
}
.site_logo {
/* use alternative logo file on mobile displays */
background-image: url("./images/my_smaller_site_logo.png");
height: 25px;
width: 25px;
}
}
So at this point, if you had only done exactly the changes described in the examples thus far, your alternate style would now be comprised of just the following files:
/styles/myown/style.cfg (with
parent=prosilver in addition to the other details)
/styles/myown/theme/stylesheet.css (containing @import url("../../prosilver/theme/stylesheet.css"); and now also @import url("logo.css");)
/styles/myown/theme/en/stylesheet.css (containing only
@import url("../../../prosilver/theme/en/stylesheet.css");)
/styles/myown/theme/bidi.css (containing only
@import url("../../prosilver/theme/bidi.css");)
/styles/myown/theme/plupload.css (containing only
@import url("../../prosilver/theme/plupload.css");)
/styles/myown/theme/print.css (containing only
@import url("../../prosilver/theme/print.css");)
/styles/myown/theme/tweaks.css (containing only
@import url("../../prosilver/theme/tweaks.css");)
/styles/myown/theme/logo.css (containing only the .site_logo and @media sections described)
/styles/myown/theme/images/my_site_logo.png (for use instead of the prosilver default logo)
/styles/myown/theme/images/my_smaller_site_logo.png (for use on mobile displays)
And nothing else.
sorry ScaniaLady!
(not insinuating anything 
)
Hint: 06.09.2019