Re: [jgen] J4: Trying to apply template's css values to fields in admin panel

[Hannes Papenberg]

No, that code isn't valid anymore. That in parts contains code from Joomla 1.0... some of the files you are including don't exist anymore. I would solve the issue differently, mainly by writing a static css file, but if you want, you can do it like this.

Chris Bold <cmb...@gmail.com> schrieb am Do., 29. Juli 2021, 22:54:

For Joomla 3, I was able to use this trick and created intermediate files (admin.css.php, style.css.php) which were accessed by my custom modules and my custom template.

This method let me set color values in my custom template, and display those colors both in the module and template admin, like this:

Here is a more verbose explanation on stackoverflow, but it does a good job of illustrating my goal:

https://joomla.stackexchange.com/questions/28668/unable-to-get-site-template-params-from-my-modules-backend

Unfortunately this method no longer works for Joomla 4. 

When I inspect the admin page in Chrome I see the following error:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) admin.css.php

I am a novice developer without much understanding of the changes between J3 and J4

I don't know if the syntax is no longer valid in admin.css.php:

define( '_JEXEC', 1 ); 

define( '_VALID_MOS', 1 ); 

define( 'JPATH_BASE', realpath(dirname(__FILE__).'/../..' ));

define( 'DS', DIRECTORY_SEPARATOR ); 

require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' ); 

require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );

$app = JFactory::getApplication('site');

$app->initialise();

$defaultTemplate = $app->getTemplate(true);

$params = $defaultTemplate->params;

header("Content-Type:text/css; charset=UTF-8");

header("Cache-Control:must-revalidate");

Or if the method for calling admin.css.php in the template's xml no longer works:

<description>My custom template

<![CDATA[<link rel="stylesheet" type="text/css" href="../media/mycustomtemplate/admin.css.php" />]]>

</description>

Maybe there is a better method in J4 to fetch a template's parameters for use in the backend? Any guidance is greatly appreciated!

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/joomla-dev-general/f49bc84d-84f4-4b57-a607-c679f51c2908n%40googlegroups.com.

[Chris Bold]

I realize my description of the issue was not very organized. In order to reduce confusion, I have removed my previous posts and attmepted to clarify the issue:

I want my custom modules & custom template to fetch the parameter values (colors) from my custom template's backend. This way I can see what colors I'm picking when when I'm configuring my website.

That is, a button’s background color in the module/templates’s config page will match the color I defined in templateDetails.xml.

I have built a working J4 template and modules. In the templateDetails.xml I use the following

<description>My Custom Template

    <![CDATA[<link rel="stylesheet" type="text/css" href="../media/vendor/mycustomfolder/admin.css.php" />]]>

</description>

Which allows me to add css for use in the backend. Later in templateDetails.xml there is a fieldset for defining colors:

<field name="color01" label="Color 01" type="color" format="hex" />

<field name="color02" label="Color 02" type="color" format="hex" />

<field name="color03" label="Color 02" type="color" format="hex" />

<field etc> 

The admin.css.php file is supposed to access my custom template's color values using this method:

<?php

define('_JEXEC', 1);

define('JPATH_BASE', __DIR__ . '/../../..');

require_once JPATH_BASE . '/includes/defines.php';

require_once JPATH_BASE . '/includes/framework.php';

$container = \Joomla\CMS\Factory::getContainer();

$container->alias(\Joomla\Session\SessionInterface::class, 'session.web.site');

$app                    = $container->get(\Joomla\CMS\Application\SiteApplication::class);

$defaultTemplate    = $app->getTemplate(true);

$params                     = $defaultTemplate->params;

header("Content-Type:text/css; charset=UTF-8");

header("Cache-Control:must-revalidate");

?>

.bg01 {-webkit-text-stroke: 1px #000; -webkit-text-fill-color:#fff; font-weight:bold; color:<?php echo $params->get('color01'); ?>; }

.bg02 {-webkit-text-stroke: 1px #000; -webkit-text-fill-color:#fff; font-weight:bold; color:<?php echo $params->get('color02'); ?>; }

.bg02 {-webkit-text-stroke: 1px #000; -webkit-text-fill-color:#fff; font-weight:bold; color:<?php echo $params->get('color02'); ?>; }

etc

So that in my custom modules and elsewhere in my custom template, when I have xml fields marked up with CSS classes like this:

<field name="backgroundColor" label="Background Color" type="radio" >

        <option class="btn bg01" value="color01">Color 01</option>

        <option class="btn bg02" value="color02">Color 02</option>

        <option class="btn bg03" value="color03">Color 03</option>

        etc

</field>

the admin.css.php should be fetching values for color01, color02, color03, (etc) and use them for the color attributes in .bg01, bg02, .bg03, etc.

So when the fields in the backend of my custom templates use the classes .bg01, bg02, .bg03 etc, and the end result should look like this

The problem is that the templateDetails.xml parameter values are not being passed through and the result is this:

When I inspect the admin page in Chrome I see this:

Clearly the admin.css.php is being accessed because the hardcoded values are being applied. But the variables (color values) are not. I have a J3 version that works, but can't figure out why the J4 version isn't working.

My thought is that the php at the beginning of admin.css.php needs revision in order to properly fetch and pass the parameters from templateDetails.xml

I am hoping there is someone knowlegable enough about Joomla 4 to help me solve this (or recommend another method to achieve the same result).

[Chris Bold]

Solved for Joomla 4! I found this tracker entry which lead me to update the php at the beginning of admin.css.php

<?php

define('_JEXEC', 1);

define('JPATH_BASE', __DIR__ . '/../../..');

require_once JPATH_BASE . '/includes/defines.php';

require_once JPATH_BASE . '/includes/framework.php';

// Boot the DI container.

$container = \Joomla\CMS\Factory::getContainer();

// Alias the session service key to the web session service.

$container->alias('session.web', 'session.web.site')

->alias('session', 'session.web.site')

->alias('JSession', 'session.web.site')

->alias(\Joomla\CMS\Session\Session::class, 'session.web.site')

->alias(\Joomla\Session\Session::class, 'session.web.site')

->alias(\Joomla\Session\SessionInterface::class, 'session.web.site');

$app    = $container->get(\Joomla\CMS\Application\SiteApplication::class);

$myTemplate = $app->getTemplate(true);

$params = $myTemplate->params;

header("Content-Type:text/css; charset=UTF-8");

header("Cache-Control:must-revalidate");

?>

This allowed the parameters to pass properly. Atum (the default admin template for Joomla 4) makes targeting the button backgrounds a little tricky. In order for backgrounds to work you must add the class btn btn-outline-secondary to your field options

<field name="backgroundColor" label="Background Color" type="radio" >

        <option class="btn btn-outline-secondary bg01" value="color01">Color 01</option>

        <option class="btn btn-outline-secondary bg02" value="color02">Color 02</option>

        <option class="btn btn-outline-secondary bg03" value="color03">Color 03</option>

        etc

</field>

And in the admin.css.php, use the following markup for each button:

.bg01 {text-shadow: 0px 1px #000000; border-color: #495057; font-weight: bold; color:<?php echo $params->get('color01'); ?>; }

.btn-check:checked + .btn-outline-secondary.bg01 {text-shadow: 0px 1px #000000; color:#fff; background-color:<?php echo $params->get('color01'); ?>; }

This will create two color states for when the button is selected, or not selected. Here is the final result:

[Chris Bold]

One thing that I discovered in order for this method to work:

<description>My Custom Template

    <![CDATA[<link rel="stylesheet" type="text/css" href="../media/vendor/mycustomfolder/admin.css.php" />]]>

</description>

the template must be set as default in order for the color parameters to be fecthed.

------------------------------------------------------------

I came across this on joomla.stackechange which is cause for concern:

"define('_JEXEC', 1) is a bad for security in the module. It allows people to use this file as an alternative entry point for joomla."

can anyone tell me if this file is a security risk:

<?php

define('_JEXEC', 1);

define('JPATH_BASE', __DIR__ . '/../../..');

require_once JPATH_BASE . '/includes/defines.php';

require_once JPATH_BASE . '/includes/framework.php';

// Boot the DI container.

$container = \Joomla\CMS\Factory::getContainer();

// alias the session service key to the web session service.

$container->alias('session.web', 'session.web.site')

    ->alias('session', 'session.web.site')

    ->alias('JSession', 'session.web.site')

    ->alias(\Joomla\CMS\Session\Session::class, 'session.web.site')

    ->alias(\Joomla\Session\Session::class, 'session.web.site')

    ->alias(\Joomla\Session\SessionInterface::class, 'session.web.site');

$app       = $container->get(\Joomla\CMS\Application\SiteApplication::class);

$template  = $app->getTemplate(true);

$params    = $template->params;

header("Content-Type:text/css; charset=UTF-8");

header("Cache-Control:must-revalidate");

?>

.bg01 {text-shadow: 0px 1px #000000; border-color: #495057; font-weight: bold; color:<?php echo $params->get('color01'); ?>; }

.bg02 {text-shadow: 0px 1px #000000; border-color: #495057; font-weight: bold; color:<?php echo $params->get('color02'); ?>; }

.bg03 {text-shadow: 0px 1px #000000; border-color: #495057; font-weight: bold; color:<?php echo $params->get('color03'); ?>; }

.bg04 {text-shadow: 0px 1px #000000; border-color: #495057; font-weight: bold; color:<?php echo $params->get('color04'); ?>; }

.btn-check:checked + .btn-outline-secondary.bg01 {text-shadow: 0px 1px #000000; color:#fff; background-color:<?php echo $params->get('color01'); ?>; }

.btn-check:checked + .btn-outline-secondary.bg02 {text-shadow: 0px 1px #000000; color:#fff; background-color:<?php echo $params->get('color02'); ?>; }

.btn-check:checked + .btn-outline-secondary.bg03 {text-shadow: 0px 1px #000000; color:#fff; background-color:<?php echo $params->get('color03'); ?>; }

.btn-check:checked + .btn-outline-secondary.bg04 {text-shadow: 0px 1px #000000; color:#fff; background-color:<?php echo $params->get('color04'); ?>; }

<!-- EOF -->

If this is a vulnerability, can anyone recommend a fix, or recommend an alternative method for achieving the button styling in admin?