Adding a footer image using css

Hi,

I'm using Elgg 2.3.14 and trying to do something that should be pretty simple.  I'd like to add an image as a backround for my site's footer.  I've uploaded the image to my /mod/my-plugin/graphics directory and in my start.php I've added:

elgg_extend_view('elgg.css', 'my-plugin/myFooter.css', 1000);

underneath all of my other extend_view functions in the init() method.  I've added my css file to /mod/my-plugin/views/default/my-plugin/myFooter.css. In the myFooter.css file I've added the style:

.elgg-page-footer {
    background-image: url("path-to-my-image.png");
}​

I've tested that the image loads at https://www.w3schools.com/cssref/pr_background-image.asp just to validate the reference path is correct.  I've also flushed my cache's from the admin panel but the images still won't load in the background.  I've viewed other similar threads in this forum such as https://elgg.org/discussion/view/2452742/footer-modifications but still not having any luck.  Anyone have any ideas what I'm missing?

  • Create a new file views.php:

    <?php
    
       return [
          'default' => [
              'images/' => __DIR__ . '/graphics',
          ],
    ];
     
    Put it in your plugin:
    /mod/my-plugin/views.php
    Change your myFooter.css on this:
    .elgg-page-footer {
        background: url(<?= elgg_get_simplecache_url("images/my-image.png"); ?>);
    }
    Clean the caches.
     
    In future, you can use this snippet elgg_get_simplecache_url("images/name.jpg"); to call any images from your directory /mod/my-plugin/graphics
     
  • Thank you.. I shall give this a try. One question I need to verify is. where should my 'myFooter.css' be located in my directory structure for my plugin?

  • I believe it should be at /my-plugin/views/default/my-plugin/myFooter.css but still not working.

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking