Linking stylesheets

Discussion forum for Extension Writers regarding Extension Development.
Post Reply
User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4276
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Linking stylesheets

Post by HiFiKabin »

My News Scroll extension has a preview facility in the ACP which has all of the CSS from prosilver/theme plus one extra block.

When it was validated almost three years ago this note was on the validation message.
adm/style/css/newsscroll_acp.css
Apart from the first CSS rule, the contents are identical to styles/prosilver/theme/newsscroll.css. Please avoid duplicate code.
How can I have two css files, one with just the contents needed for the ACP, and one which contains everything else needed for both prosilver and the ACP and linked to both places?

I have read the documentation, looked to see if any other extension does this (none that I can find), experimented with code, sworn and had several tantrums but can not get anywhere.

Does anyone know how to do this?

Download News Scroll Extension

User avatar
david63
Registered User
Posts: 17041
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Linking stylesheets

Post by david63 »

I have never tried it but can you not include the prosilver .css files in your template and then have another .css file with your own bit of css in it.

Personally though I would keep the method that you are using for one reason - if the core css changes then it might "break" your extension whereas having the code in your extension means that that will not happen.
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4276
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: Linking stylesheets

Post by HiFiKabin »

Apologies, I wasn't totally clear. the CSS files are located as below
hifikabin/newsscroll/adm/style/css/newsscroll_acp.css
hifikabin/newsscroll/styles/prosilver/theme/newsscroll.css
So I want one CSS file in ADM and another somewhere but linked to both adm and prosilver The ADM CSS file will contain the container for the scrolling text , the other contains all of the scrolling element which are used in both locations.

User avatar
david63
Registered User
Posts: 17041
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Linking stylesheets

Post by david63 »

Sorry, but yes you did confuse me (should be used to that by now :lol: )

Have you tried including the hifikabin/newsscroll/styles/prosilver/theme/newsscroll.css in the adm template? I think that it should work if you give it the absolute path
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4276
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: Linking stylesheets

Post by HiFiKabin »

I am happy to keep up my usual (low) standard ;)

Doesn't work David (that was my first idea) but it errors every time

Code: Select all

Fatal error: Uncaught Twig\Error\LoaderError: Unable to find template "hifikabin/newsscroll/styles/prosilver/theme/newsscroll.css" (looked into: C:\wamp64\www\quickinstall\boards\3_3_0\ext\hifikabin\newsscroll\adm\style, C:\wamp64\www\quickinstall\boards\3_3_0\adm\style) in "acp_newsscroll_config.html" at line 1. in C:\wamp64\www\quickinstall\boards\3_3_0\vendor\twig\twig\src\Loader\FilesystemLoader.php on line 250
Trying @hifikabin_newsscroll also errors

Code: Select all

Fatal error: Uncaught Twig\Error\LoaderError: Unable to find template "@hifikabin_newsscroll/styles/prosilver/theme/newsscroll.css" (looked into: C:\wamp64\www\quickinstall\boards\3_3_0\ext\hifikabin\newsscroll\adm\style) in "acp_newsscroll_config.html" at line 1. in C:\wamp64\www\quickinstall\boards\3_3_0\vendor\twig\twig\src\Loader\FilesystemLoader.php on line 250
as does {BOARD_URL}

Code: Select all

Fatal error: Uncaught Twig\Error\LoaderError: Unable to find template "{{ BOARD_URL }}ext/hifikabin/newsscroll/styles/prosilver/theme/newsscroll.css" (looked into: C:\wamp64\www\quickinstall\boards\3_3_0\ext\hifikabin\newsscroll\adm\style, C:\wamp64\www\quickinstall\boards\3_3_0\adm\style) in "acp_newsscroll_config.html" at line 1. in C:\wamp64\www\quickinstall\boards\3_3_0\vendor\twig\twig\src\Loader\FilesystemLoader.php on line 250
ext/hifikabin/newsscroll/styles/prosilver/theme/newsscroll.css'

Doesn't error, but it doesn't load the stylesheet either.

User avatar
david63
Registered User
Posts: 17041
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Linking stylesheets

Post by david63 »

OK - I give up too

Next suggestion - ask kasimi
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4276
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: Linking stylesheets

Post by HiFiKabin »

... but hes away right now :cry: (well, not logged on for 3 weeks)

User avatar
david63
Registered User
Posts: 17041
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Linking stylesheets

Post by david63 »

HiFiKabin wrote:
Mon Jan 13, 2020 4:11 pm
... but hes away right now :cry: (well, not logged on for 3 weeks)
Try Matt then
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
VSE
Extensions Development Coordinator
Extensions Development Coordinator
Posts: 5034
Joined: Sat Jan 17, 2009 9:37 am
Location: Los Angeles, CA
Name: Matt Friedman
Contact:

Re: Linking stylesheets

Post by VSE »

Use an @import

Change the contents of your adm/css/newsscroll_acp.css to:

Code: Select all

@import url("../../../styles/prosilver/theme/newsscroll.css");

.newsscroll_outer{
	background-color: #cadceb;
	border: 1px solid black;
	border-radius: 10px;
	overflow: hidden;
	width: 98%;
	height: auto;
	position: absolute;
}
Official phpBB Extensions ⭐️ My Extensions & MODs 🔔 YES!!! They ALL work with phpBB 3.3.x 🔔
Please do not PM me for support.

User avatar
VSE
Extensions Development Coordinator
Extensions Development Coordinator
Posts: 5034
Joined: Sat Jan 17, 2009 9:37 am
Location: Los Angeles, CA
Name: Matt Friedman
Contact:

Re: Linking stylesheets

Post by VSE »

Alternatively you could copy the prosilver CSS file to an "assets" folder in the root level of your extension. Then both your existing CSS files could import from there, and they would simply contain:

newscroll_acp.css

Code: Select all

@import url("../../../assets/newsscroll.css");

.newsscroll_outer{
	background-color: #cadceb;
	border: 1px solid black;
	border-radius: 10px;
	overflow: hidden;
	width: 98%;
	height: auto;
	position: absolute;
}
and

newscroll.css

Code: Select all

@import url("../../../assets/newsscroll.css");
Official phpBB Extensions ⭐️ My Extensions & MODs 🔔 YES!!! They ALL work with phpBB 3.3.x 🔔
Please do not PM me for support.

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4276
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: Linking stylesheets

Post by HiFiKabin »

Thanks Matt, I used the first example (as any user who wanted to make stylesheet changes would expect it to be there) It works exactly as it should and has saved me any more hours of fruitless frustration.

As you might have gathered, its been driving me mad. I'll try and remember for future extensions.

User avatar
VSE
Extensions Development Coordinator
Extensions Development Coordinator
Posts: 5034
Joined: Sat Jan 17, 2009 9:37 am
Location: Los Angeles, CA
Name: Matt Friedman
Contact:

Re: Linking stylesheets

Post by VSE »

HiFiKabin wrote:
Mon Jan 13, 2020 5:28 pm
Thanks Matt, I used the first example (as any user who wanted to make stylesheet changes would expect it to be there) It works exactly as it should and has saved me any more hours of fruitless frustration.

As you might have gathered, its been driving me mad. I'll try and remember for future extensions.
The collapsible categories is an extension that shows this in use... in all the 3rd party styles
Official phpBB Extensions ⭐️ My Extensions & MODs 🔔 YES!!! They ALL work with phpBB 3.3.x 🔔
Please do not PM me for support.

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4276
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: Linking stylesheets

Post by HiFiKabin »

Cheers, I'll check that out as well

User avatar
david63
Registered User
Posts: 17041
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Linking stylesheets

Post by david63 »

@HiFiKabin

I would be more inclined to use the "assets" option as it is more logical and safer - if a user was to delete the prosilver folder then they would loose the css in the ACP
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4276
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: Linking stylesheets

Post by HiFiKabin »

Good point David.

Post Reply

Return to “Extension Writers Discussion”