The site slogan doesn't show with Olivero

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request → as a guide.

This will need a test case to show the issue.

Issue summary should be updated with proposed solution, seen several different attempts but what is going to be the path forward.

Screenshots should be added to the issue summary.

H i @smustgrave ,Issue summary updated. Please review.

Seems better! Think just need to determine which of the current solutions to move forward with for the tests

Hi @smustgrave, when we use the logo supplied by the theme the slogans accurately displayed.

But when we use a custom logo(especially larger size custom logo) slogan was show as non-aligned. Need to work on this.

But shouldn't the slogan be just below the site name?

If there is a logo, or if there isn't a logo, the slogan should generally be below the site name (not the logo). Maybe I'm wrong, but I thought this was kind of standard procedure...

+1 for adding Slogan in Olivero.

To help keep this issue moving, maybe someone can update "Remaining tasks" in Issue Summary and outline which solutions are under consideration?

Issue solving for me when applying patch#54 and enabling the slogan from the "Site branding" block.

@jeyro I agree, the slogan should be below the title and next to the logo, therefore I would change the code in this file /olivero/templates/block/block--system-branding-block.html.twig, so that 'site_slogan' is inside the 'site_name':

    {% if site_name %}
      <div class="site-branding__text">
        <div class="site-branding__name">
          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
        </div>
            {% if site_slogan %}
              <div class="site-branding__slogan">{{ site_slogan }}</div>
            {% endif %}
      </div>
    {% endif %}
  </div>
{% endblock %}

@gintass That worked for me, perfectly, much thanks!

For 10.1.1 updated patch #54 manually. Added contribution of @gintass, added a font-size: 1rem; and a font-style: italic; Works fine.

Can someone finalize this so that it gets into core?

problem still in the latest 10.1.2, please advise the patch #54 is for the olivero or for the core ?

I have verified patch#54 on Drupal 10.1.x-dev version. The patch was applied successfully and looks and works fine. But there should be a cap on the length of characters for the slogan. Since I tried to add as much length as I could for the slogan and after saving and checking the same it is breaking the layout into more the one line and also doesn't look good from the UI perspective. I am adding both the small title and large title SS.

Just my thoughts on this - Site branding Block title which comes in a grey colour that is not completely visible. From a design perspective, it should be matched with the standard design which we are following for this theme.

I just spun up a very vanilla instance of Drupal with the lovely new Olivero theme enabled as default!
Happy to find my rusty Drupal skillz got me all the way until this bug.

I thought I was going mad about why I had enabled site slogan, but it just WOULD NOT display.

So I turned to a search engine and found this 3 year old bug.

I haven't through read the whole thread, or checked to see if the issue summary is up to date or not, but I can 100% confirm it was really frustrating to enable a feature and not be able to figure out why it doesn't work :)

Looks like there's working, tested patches here, so let's go with what we have here, and create a new issue for improvements like cap on length.

(: this is a feature of EVERY theme, certainly Olivero (the current core theme) should work as expected.

Slogan not displayed in the site branding block issue solving for me when applying patch#54 and enabling the slogan from the "Site branding" block. in drupal 10.1.x and in 10.2.x.

Still will need test coverage.

YevKo → changed the visibility of the branch 11.x to hidden.

Hi,

https://git.drupalcode.org/project/drupal/-/merge_requests/7792

I have done a re-roll of the existing fork to 11.x first and then applied changes mentioned in this issue:

• Slogan has been moved inside the 'site-branding__text' container, placed below the site name with the small gutter between. This setup works well with any type of logo, or without the logo.
• Color of the slogan is the same as of the site name (white). The issue with the text color against grey or white backgrounds is reported separately https://www.drupal.org/project/drupal/issues/3443881 🐛 Text color in the header does not adapt to the header background color Active

Screenshots in different setups:

Looks good with #89

I think we should move the test to \Drupal\FunctionalTests\Theme\OliveroTest - also I think we should have a +1 on the CSS / design elements from an Olivero maintainer. Will ping in Slack.

I'm gonna mark it as Needs review since i've inserted few modifications

smustgrave → changed the visibility of the branch 3188136-the-site-slogan to hidden.

Sounds like we need sub-maintainer sign off. Not sure about "design review" as we don't have designers (that I know of).

@smustgrave - I pinged the Olivero maintainers in Slack - @kostyashupenko is a maintainer of Olivero :)

Sorry @kostyashupenko!

Getting close! Visually, this looks great, with the minor exception that there should be a gap between the logo and text.

The main issue is that there are two <a> tags, which would be a bit confusing for people using assistive technology. All of the text and image should be wrapped within one <a> tag, and elements should be added in that as needed.

The use of CSS grid on branding text is basic (although it works), when I mentioned this in #44, I was thinking to align the items within the <a> tag. I probably should have been a bit more specific.

I am removing the Novice tag from this issue because it is not clear for a new contributor how to move the issue forward.

I’m using this documentation as a source: https://www.drupal.org/community/contributor-guide/task/triage-novice-is... →

Believe needs a rebase

Reviewed the MR !7792 is resolving the issue. Attached screenshot after applying the MR.

Before applying the patch:

After applying the patch:

Different logo and Long slogan

Ready for RTBC.

Found an issue during the test. If the Logo is unchecked(Show only Sitename and Slogan), none of the details are showing.

Verified for Drupal - 10.2 . The slogan is visible now.
Verified with Drupal 11.x-dev .The Slogan is visible now
Verified with disabled logo . The slogan is visible

Steps to reproduce
1. Install Drupal.
2. Go to "Configuration"->Basic Site Setting-> Add Site Slogan->Save.
3. Go to Homepage and Click on the Site branding "Configure Block option and enable site slogan checkbox -> Save Block
4. Go to Homepage and observe the slogan not displayed in the site branding block.

But the patch has white space warning

I have validated before MR that the slogan is not displaying on the UI for olivero theme.
Validated by switching to the branch and verified the slogan is visible/hidden as per the users choice and based on the block configuration. Attaching the screenshots for reference.

RTBC +1.

@Mithun S, Thanks for your interest in this issue. Testing of the latest MR and screenshots were already supplied in the comment before your work. The consequences of that are explained in this issue in comment #25. In the Drupal community we expect contributors to read all comments before making a contribution.

The testing in #106 does not account for the error case discovered in #105. Nor has there been a code review since that change. And surely the tests needs to be updated to include that situation. Back to needs work.

I've tested the MR!7792, the site slogan issue has been fixed and the font size for both Sitename and Site slogan is appearing perfectly. Found one issue for the spacing between the top site-branding region for mobile devices. On mobile devices there no space between the top of region and the site branding logo. Attaching screenshots of before and after for the fixes.

I tried the MR7792, but it seems like it does not work for me, with and without the patch the issue looks the same. Attaching the SS for the same.

@riddhi.addweb, could you confirm whether you have enabled the option Site slogan under Site branding block configuration? If the Site slogan option has not been checked then only Site name will be visible, in order to make Site slogan also visible you'll have to check that Site slogan option. Attaching the Site branding block configuration screenshot for your reference.

Attaching the Site branding block configuration screenshot for your reference.

@riddhi.addweb Can you please follow the Steps to reproduce once again. i am able to see slogan . attaching screenshot

I have tested MR 7792 for 11.0-dev. I can see the Slog.
I moved it to RTBC.
THANKS!!

I see that @mherchel noted the two a tag issue in #98 and #97 BUT this is an existing issue with the site branding block and in my mind requires a separate issue to discuss the usability concerns. Adding the site slogan is not part of that.

to fix the bug, first correct the 3 files as OliveroSloganFixed.png
after Clear all caches at Configuration > Development > Performance
refresh the page

@ito78x
It's working indeed only if site name and site slogan are selected, but unfortunately it doesn't work if site logo and site slogan are selected.

In that case only the slite logo is shown and the site slogan is not shown.

I guess it's caused by your code in templates\block--system-branding-block.html.twig.

Hi @redseujac @alexpott, I've fixed the site slogan issue while using the Olivero theme. Now the site slogan is being shown for all the cases when the site slogan, site name and site logo have been enable on site-branding block configuration for the theme. I'm attaching the screenshots of the fixes for the issue. Please review the MR changes.

Thanks!

The Needs Review Queue Bot → tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Moving back to Needs Review as the mentioned error in the file 3188136-nr-bot.txt → has been fixed by @Bhanu951.

Tried to applied the patch but its giving error..

Hello,
I also try to apply patch but getting error.
Attaching screenshots

Done the rebase, Now the MR passed, and hope it will apply to the latest version of the Drupal core.

The changes in MR #127 are applied successfully.
Now, the slogan is visible in all the cases:

Show slogan only

Show slogan and name

Show slogan and logo

Show slogan with name and logo

I've retested the patch.
The patch applied cleanly on 11.x & it fixed the site slogan visibility issue..

Attaching ss:

Hence moving it to RTBC.

Thanks @arunkumark & @tirupati_singh

This still needs design review. Either from the Olivero team or from a product manager I think.

We're adding some gap between the site title & slogan, but there's currently none between the text of this block and the site logo. Can we add the same --sp0-5 between the image and the text as we have between the title & slogan?

Hi @andy-blum, I've added the gap between the site logo and site title & slogan. Attaching the screenshot of the after fixes for your reference. Please review the changes.

Thanks!

The slogan is visible if slogan text is added. Also the gap has been added between the logo and the text.

Hence moving it to RTBC

Few things to fix still.

The spacing between the logo and title went from 0.75em to 0.5em, it should probably be fixed so that the spacing doesn't change.

Can someone open a follow-up issue to deal with the placement of the a tag as mentioned in #97, #98?

There are still tabs in the twig file instead of spaces

Hi, I've fixed the indentation issue in the template file. Please review the changes. I'm keeping the issue status to Needs work as the pipeline is failing.

Changing the issue status to Needs review as the pipeline is passing all tests.

Hello,
Verified and Tested on Drupal 11,
MR applied successfully,
Working as expected

Steps to reproduce
1. Install Drupal 10.1.x-dev version.
2. Go to "Configuration"->Basic Site Setting-> Add Site Slogan->Save.
3. Go to Homepage and Click on the Site branding "Configure Block option and enable site slogan checkbox -> Save Block
4. Go to Homepage and observe the slogan not displayed in the site branding block.

Check attachments -
Moving this to RTBC

Committed 23301df and pushed to 11.x. Thanks!

nod_ → closed merge request !7792

Automatically closed - issue fixed for 2 weeks with no activity.