Search code examples
apostrophe-cms

Replacing SVG image on apostrophecms login page

How do you replace the apostrophe logo on the login page? I've traced the styling back to the public/modules/apostrophe-login/css/always.less file. When I try to set the background, the apostrophe logo sits on top of the image I'm trying to use. I'm looking for a way to override that image. I've included the code below of my most recent attempt.

.apos-login-logo
{
  text-align: center;
  margin-bottom: @apos-margin-5;
  svg { background: url('/images/el_logo.svg'); width: 84px; height: 84px;  }

}

Solution

  • That logo get included in the login interface here:

    node_modules/apostrophe/lib/modules/apostrophe-login/views/loginBase.html
        ...
    <div class="apos-login-content">
    <div class="apos-login-logo">{% block logo %}{% include "apostrophe-admin-bar:logo.html" %}{% endblock %}</div>
    <div class="apos-ui apos-login">
        ...

    So you can decide eather to include some other html file which contents your logo or change logo.html in:

    node_modules/apostrophe/lib/modules/apostrophe-admin-bar/views/logo.html

    So you copy one of theese to your project lib folder. They get loaded atomaticly and pushed to browser as my-apostrophe-login or my-apostrophe-admin-bar and will override the elements in node_modules.

    So it must be looking like that for example:

    your_project/lib/modules/apostrophe-admin-bar/views/logo.html