How do I style dynamically generated pages?

  • berry metal

    (@erikalleman)


    2 years, 9 months ago

    How do I style dynamically generated pages that don’t have any of the theme selectors as a parent?

    This is the HTML of the page:

    flameshot_screenshot

    You can see the stats-head and stats-content selectors, but if I style those in my style sheet, the styles will not be applied.
    I asked around and people just said (including support personnel) that it’s a dynamically generated page so it’s not possible to style it.

    the url looks like this:
    mysite.com/ad-stats/qaI21ThjITSynPxlVIuIVPkDAH3zPbcxb3axlcYnhJjIchuJ/

    so I do have a slug that I could target… but how?

    In WordPress I can just use .page for example as a selector, I mean selectors that are built in WordPress, but in this case I have nothing like that.

    I have given up trying to style elements on this dynamically generated page because I didn’t find any information on how to do it.

    So now I am just trying to apply a single SVG filter to filter the whole page, to gain some kind of control over its colors and appearance, instead of styling its elements.

    But I don’t understand why using the selectors stats-head and stats-content that are in the HTML (and I checked in the dev tools that they do select the whole page, if I would style both) cannot be styled from my style sheet, but they can be styled from the dev tools.

    There is no style sheet defined for these elements in the plugin.
    How do I create and apply a style sheet for such a dynamically generated page so that it would be also plugin update proof?
    Is it usual practice for WP plugin authors to not make a stylesheet or not provide styling possibility for dynamically generated pages?
    But in WP everything is dynamically generated, so I don’t understand why this ad statistics page is more dynamically generated than the rest?

    • This topic was modified 2 years, 9 months ago by berry metal.
    • This topic was modified 2 years, 9 months ago by berry metal.
    • This topic was modified 2 years, 9 months ago by berry metal.
    • This topic was modified 2 years, 9 months ago by berry metal.
    • This topic was modified 2 years, 9 months ago by berry metal.
    • This topic was modified 2 years, 9 months ago by berry metal.
    • This topic was modified 2 years, 9 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 10 replies - 16 through 25 (of 25 total)
1 2
  • Thread Starter berry metal

    (@erikalleman)

    2 years, 9 months ago

    I have also found this example code of adding external CSS:

    <?php
add_action( 'some_hook', 'maxslider_enqueue_slider_css' );
function maxslider_enqueue_slider_css() {
	$css = '';

	// ...

	if ( true === $something ) {
		$css = 'body { background-color: ' . $color . '; }';
	}

	// ...

	wp_register_style( 'maxslider-footer', false );
	wp_enqueue_style( 'maxslider-footer' );
	wp_add_inline_style( 'maxslider-footer', $css );
}

    Do you think it’s a good idea?

    Thread Starter berry metal

    (@erikalleman)

    2 years, 9 months ago

    Why is the empty array required in the code?

    • This reply was modified 2 years, 9 months ago by berry metal.
    Moderator bcworkz

    (@bcworkz)

    2 years, 9 months ago

    Its link has media=’all’. What does that mean?

    It’s like the media query within CSS, that the file is to be applied to all output devices — screens, printers, etc.

    Any advanced-ads action hooks in plugin code are there for us to utilize. It’s not a WP core hook, it’s custom for the advanced-ads plugin, so it wouldn’t be documented in WP code references. Plugin documentation by its devs is often incomplete when it exists at all.

    You do not need to replicate the same CSS in both external file and inline. I was suggesting alternatives if there was no practical way to add HTML in the head section.

    The code snippet you found will not work if the plugin page does not use the WP enqueuing scheme. Instead, use an action hook that does fire in its head section to directly output a stylesheet link tag. Ensure the tag is output after all other stylesheet link tags. It might help if you hook the action with a large priority arg, if other stylesheet link tags are output from the same hook.

    The dependencies arg when enqueuing is optional. The reason to pass an empty array is when you want to pass other args that need to be placed after the dependencies, such as the version and media args. If the empty array is the last arg passed, you don’t really need it at all, but there’s no harm in it being there. But if you are enqueuing CSS that is to override other CSS, ideally you’d specify dependencies so the array wouldn’t be empty.

    Thread Starter berry metal

    (@erikalleman)

    2 years, 9 months ago

    Hi there, thanks for your reply, I am working on it.
    I got an other code.
    Could you tell why this code results in a critical error?

    add_action( 'advanced-ads-public-stats-head', function()) { ?>
    <style>
        body {

background: yellow !important;

        }
    </style>
<?php }

    The linter found 2 errors, first to close the second parenthesis on the first row which I did, but now is telling me: unmatched } :

    flameshot_screenshot

    Could you help me with the correct syntax?
    Should this code go into the child themes functions.php or into the style mu plugin?

    Thread Starter berry metal

    (@erikalleman)

    2 years, 9 months ago

    This code does insert the styles in the head:

    add_action('advanced-ads-public-stats-head', 'ad_stats_styles', 100);
function ad_stats_styles()
{
 echo "<style>{color: red !important}</style>";
}

    But they are not applied, so I’ll try to echo the style sheet link instead.

    • This reply was modified 2 years, 9 months ago by berry metal.
    • This reply was modified 2 years, 9 months ago by berry metal.
    Thread Starter berry metal

    (@erikalleman)

    2 years, 9 months ago

    So this code finally works!

    add_action('advanced-ads-public-stats-head', 'ad_stats_styles', 100);

function ad_stats_styles()
{
 echo '<link href="https://mysite.com/wp-content/themes/total-child-theme-master/ads_stats.css" media="screen" rel="stylesheet" type="text/css" />';
}

    Do you think this is not optimal, or unprofessional?

    Thanks for your support!

    • This reply was modified 2 years, 9 months ago by berry metal.
    Thread Starter berry metal

    (@erikalleman)

    2 years, 9 months ago

    If the action hook wouldn’t have been added in the plugin, is there a possibility for me to add the action hook into the plugin just like this:

    do_action( 'advanced-ads-public-stats-head' );

    or this needs to be “covered” in other places in the code to make it work?

    If such action hook is not added by the developer in other plugins, can I just add this line above, or it needs to be supported by other parts of plugin code?

    Thread Starter berry metal

    (@erikalleman)

    2 years, 9 months ago

    But my ad stats page still doesn’t show my favicon.
    Could you advise something to be able to show my favicon?

    Moderator bcworkz

    (@bcworkz)

    2 years, 9 months ago

    Look at the HTML source code of a page on your site that does have a working favicon. Search it for a distinctive portion of the favicon’s base filename. There should be multiple lines with the file referenced in slightly different formats and image sizes. My site has 4 different lines, YMMV. Copy all the favicon HTML into an echo statement similar to how you’ve echoed the CSS stylesheet link.

    If the plugin is subject to periodic updates, you should avoid altering its source code if at all possible. You’d then have to re-apply your edit after every update. We avoid this by using available hooks already in place. If it’s never updated, edit as you wish (assuming it’s GPL licensed), it becomes your plugin. Non-GPL code is subject to whatever terms of use its author has applied.

    Your working solution is fine, well done! It’s not ideal to hard code your site’s domain and instead use the appropriate WP stylesheet or plugin URI function. For your own site it doesn’t matter much whether you put your code in a plugin, custom theme or child theme. Themes are meant to determine a site’s appearance, plugins are meant to alter a site’s functionality. You could even have your code split among both to maintain that distinction, but it’s not required unless your code is destined for the WP repository.

    Thread Starter berry metal

    (@erikalleman)

    2 years, 9 months ago

    Thanks, it did work out with the favicon.
    Interestingly, it only works if the favicons are echoed first, and the rest echoed after.

Viewing 10 replies - 16 through 25 (of 25 total)
1 2
  • The topic ‘How do I style dynamically generated pages?’ is closed to new replies.

Tags