The site slogan doesn't show with Olivero

This is something that we discussed during the design phase, and we couldn't find a good solution, so it was intentionally omitted. I'll leave this open for now, because I want to see if more people are missing this and would find it useful. If that turns out to be the case, we'll need some designs before we can implement the styling.

The code in #3 looks great, but I'm setting this to postponed for now and will wait to see if others are interested. Good catch!

I found odd too that the slogan was not showing !

I can confirm that the patch works as espected, even if a bit of CSS to get a render similar to #5 would be a good addition.

On the question of if the "Slogan" is necessary, YES...ABSOLUTELY.

I work with a Chicago Ad Agency who does a lot of site creative. A logo, a brand/headline, and a Tagline/Slogan are pretty much a template for any site build in any application being built. Without it, I am stuck in terms of using Olivero and will return to Bootstrap Barrio and TWIG level programming to get what I want. Hate to see that happen because I really like what I see so far with Olivero.

Apply patch #5 and #3 working fine now the site slogan visible in Olivero theme but

site slogan and site name is coming in same row sharing screenshot

I have attached a patch and after patch screenshot for reference. The site name and slogan are on different lines now.

Attached interdiff for 3-11.

Applied patch #11 and slogan will displayed in new line. Please check screenshots.
RTBC +1

Hi.
The patch in the comment#11 cleanly applies.
Need reporter to review once.
Thanks.

The patch works well adding the slogan on new line.
But I think the slogan's font size should be smaller than the site name. As there is no design specification provided for slogan in the Figma design it would be great if Olivero team can confirm it.

I have decreased the font size of the slogan to 16px. Attached an after-patch screenshot for reference.
Needs a maintainer's review.

The screen shot in #17 looks pretty good in terms of proportions between Site Name and Slogan. I can tell you in my mock up getting ready to use Olivero with its release (custom theme under it), what the #17 screenshot shows is very close to what I have. I have my logo image set a little larger as the image itself, but have a transparent background so the total visible proportions are only slightly bigger than the #17 screenshot. I have a four word slogan rather than three, so it might feel a little tight out of the box. But as a starting point you pretty much nailed it and users can tweak CSS from there.

Working with HTML and some inline CSS on another front page region (social), that may be an area where you want to spend a little extra time in the documentation. I wanted a styled button that will call a page for multiple user input options. I wanted my "Add your own!" button to read horizontally while keeping the vertical RSS Feed you already have in the region. That took some doing to get the 'transform' to operate selectively on just the styled button block with its Node/URL call. Several tries twisted both. Some approaches impacted the 'Name/Logo' section retraction on scroll.

I included a screen shot that shows the larger logo, proportionate Site Name (missing slogan), and the node calling button block placed in the social region.

hi govravmahlawat,
#17 patch applied 9.2.x-dev. I got an issue...

Verified and tested patch#17 on the Drupal 9.3.x-dev version and Olivero 9.3.0-dev version. Patch applied successfully and looks good to me.

Testing Steps:

1. Install Drupal 9.3.x-dev version.
2. Go to Appearance -> Set Olivero theme as admin and default theme
3. Go to "Configuration"->Basic Site Setting-> Add Site Slogan->Save.
4. Go to Homepage and Click on the Site branding "Configure Block option and enable site slogan checkbox -> Save Block
5. Go to Homepage and observe the slogan not displayed in the site branding block.
6. Now apply the patch and clear the cache.
7. Again go to the homepage and verify after the patch site slogan displayed with 16px size.

Testing Results:

After applying the patch site slogan displayed with 16px size.
Please refer attached Before patch and After patch images for reference.
We can move this ticket to RTBC.

Patch #17 work for me as well.

Created a slogan in configurations, checked it in the brand blog but didn't showed up.

After patch, slogan shows up and nicely.

Even a long slogan fits nicely.

I believe it can be moved to RTBC, of course it's up to maintainers but I believe it's simply enough functionality to have.

Patch #17 applied successfully for drupal 9.3.x-dev. thank's @Gauravmahlawat.

As maintainer of Olivero, I'd like @mherchel to explicitly +1 this

I'm removing issue credits for people who posted duplicate screenshots that didn't add anything new - thanks for your assistance, but if someone else has already pasted screenshots, and you're not moving the issue forward, they just add additional noise. If you disagree with my assessment, please comment as such.

This is broken when the site name exists, but the slogan doesn't.

+++ b/core/themes/olivero/templates/block/block--system-branding-block.html.twig
@@ -26,6 +26,9 @@
       </div>

This div never closes if there is no site_slogan

Couple more tasks

1. Decrease the line height. Somewhere around 18px works for me.
2. Make the slogan span underneath the logo when the logo exists
3. We'll need designer approval when all of this is done.

Hi @mherchel I have done the changes which you mentioned in #26 and #27

Attaching SS for #26:

#27

1. Added the line height to 18px
2. Done the slogan span underneath the logo

Please review the merge request !831

The MR !831 works fine with small and larger slogans.

Not moving to RTBC, still needs designer approval.

Verified and tested patch#17 on Olivero 9.3.0-dev version with 9.3.x-dev
Patch applied successfully and result is Acceptable.

Testing Steps:

• Install Drupal 9.3.x-dev version.
• Go to Appearance -> Set Olivero theme as admin and default theme
• Go to "Configuration"->Basic Site Setting-> Add Site Slogan->Save.
• Go to Homepage and Click on the Site branding "Configure Block option and enable site slogan checkbox -> Save Block
• Go to Homepage and observe the slogan not displayed in the site branding block.
• Now apply the patch and clear the cache.
• Again go to the homepage and verify after the patch site slogan displayed with 16px size.
• Verify the slogan displayed with 16px as font size.

Testing Output:
After applying the patch site slogan displayed properly along with 16px font size.Please refer attached Before patch and After patch images for reference. Hence moving this ticket to RTBC.

Verified and tested merge request !831 - https://git.drupalcode.org/project/drupal/-/merge_requests/831.patch
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance -> Apply Olivero theme
# Go to "Configuration"->Basic Site Setting-> Add Site Slogan->Save.
# Go to Homepage and Click on the Site branding "Configure Block option clicking on the pencil icon and enable site slogan checkbox -> Save Block
# Go to the Homepage and observe the slogan not displayed in the site branding block.
# Now apply the patch and clear the cache.
# Again go to the homepage and verify after the patch site slogan is displayed with 16px font size.

Expected Results:
# Site slogan should appear below your site name version.

Actual Results:
# Currently site slogan is not appearing below your site name version.

Please refer attached screenshots for the same.
Looks good to me.
Can be a move to RTBC.

Moving back to needs review since based on #27, the design still needs review from one of the Olivero subsystem maintainers.

Verified and tested patch#17 on the Drupal 9.5.x-dev version and Olivero 9.5.0-dev version. Patch applied successfully.
Testing Steps:
1. Goto: Appearance -> Apply Olivero theme
2. Go to "Configuration"->Basic Site Setting-> Add Site Slogan->Save.
3. Go to Homepage and Click on the Site branding "Configure Block option clicking on the pencil icon and enable site slogan checkbox -> Save Block
4. Go to the Homepage and observe the slogan not displayed in the site branding block.
6. Now apply the patch and clear the cache.
7. Again go to the homepage and verify after the patch site slogan is displayed with 16px font size.

Expected Results:
Site slogan should appear below your site name

As per #27 and #37 - the design still needs review from one of the Olivero subsystem maintainers.

Thanks everyone for working on this. There are a couple things that need to be fixed:

1) MR needs to be rebased into 9.5.x
2) The site name changes position when the patch is applied (regardless if the site slogan is shown).
3) Code review incoming in the MR (likely tomorrow... it's getting late here)

Tried the patch 3188136-11.patch with version 10.1 and it's working fine.
attached the screenshot.

Before applied the patch

1. Go to "Configuration"->Basic Site Setting-> Add Site Slogan->Save.
2. Go to Homepage and Click on the Site branding "Configure Block option clicking on the pencil icon and enable site slogan checkbox -> Save Block
3. Now apply the patch and clear the cache.
4. theme the slogan, according your need.

Can anyone with edit access pls update the target branch to 10.x on MR, so we can check meege status.

I re added the slogan test from #3 into MR.

Still doesn't work in Drupal core version 10.0 official release.

@redseujac

Why would it work? This issue is not completed.

I think we should use the flex-wrap property to render the slogan on the next line. Would it not be a much simpler solution than the MR? I have attached a patch for reference

Fix Cs from #53

#54 applied successfully for drupal 10.1.x-dev

I have verified patch#54 on drupal 10.1.x-dev version. Patch applied successfully and looks and also works fine.
The site slogan is displayed with the Olivero theme after applying the patch.
Refer to screenshots:
Can be moved to RTBC+1

RTBC+1

Updating attributions

Bushra Shaikh wrote in #57:

Refer to screenshots:

There's no screenshot 'after patch' and the screenshot 'after patch' in #56 seems to be the wrong one (no screenshot of branding block with slogan).

I have applied the patch #54 and it's working indeed, but in my opinion there's too much space between the end of the slogan text and the far right-hand side of the (colored) branding block (see screenshot above). Patch#17 has not that problem, but has other issues when the slogan is not selected to be shown in the branding block (see #26).

Applied patch #54 on Drupal 10.1.x-dev with Olivero theme.
Patch applied cleanly

The slogan is displayed after applying the patch.
But if there is a logo (maybe of a bigger size) then the slogan is getting cut off from the bottom.
Refer to the attached SS
Before patch:

After patch:

Seems patch from MR in #48 is more better suited than patch from #54

Bhanu951 wrote:

patch from #48 is more better suited

Where can we find that patch to test? #48 doesn't seem to contain a "patch" for us to test.

@bhanu951, tried patch from MR #48.
Patch failed to apply on drupal 10.1.x-dev

Skipped patch 'core/modules/block/tests/src/Functional/BlockSystemBrandingTest.php'.
Skipped patch 'core/modules/block/tests/src/Functional/BlockSystemBrandingTest.php'.
Checking patch core/themes/olivero/css/components/header-site-branding.css...
error: while searching for:
  background: #fff;
}

.site-branding__inner {
  display: flex;
  align-items: center
}

.site-branding__inner a {
    text-decoration: none;
  }

@media (min-width: 75rem) {

[dir="ltr"] .site-branding__inner {

error: patch failed: core/themes/olivero/css/components/header-site-branding.css:124
error: core/themes/olivero/css/components/header-site-branding.css: patch does not apply
Checking patch core/themes/olivero/css/components/header-site-branding.pcss.css...
error: while searching for:
}

.site-branding__inner {
  display: flex;
  align-items: center;

  & a {
    text-decoration: none;
  }

  @media (--nav) {

error: patch failed: core/themes/olivero/css/components/header-site-branding.pcss.css:59
error: core/themes/olivero/css/components/header-site-branding.pcss.css: patch does not apply
Checking patch core/themes/olivero/templates/block/block--system-branding-block.html.twig...
error: while searching for:
{% set attributes = attributes.addClass('site-branding') %}
{% block content %}
  <div class="site-branding__inner">
    {% if site_logo %}
      <a href="{{ path('<front>') }}" rel="home" class="site-branding__logo">
        <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
      </a>
    {% endif %}
    {% 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>
      </div>
    {% endif %}
  </div>
{% endblock %}

error: patch failed: core/themes/olivero/templates/block/block--system-branding-block.html.twig:16
error: core/themes/olivero/templates/block/block--system-branding-block.html.twig: patch does not apply

Surely this is curious: in 2 years, no one has managed to fix this slogan problem (initial post more than 2 years ago) :-(

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.

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 issue. 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.

EDIT: The alternative is, "won't fix" and remove the feature instead.

(: yes, core provides these 2 fields for input. The main questions then is:
->is this issue miss-categorized: is this a bug or a feature request?

- individual themes can choose to not use these fields. ie: perhaps some sites choose to use them as meta tag instead!!

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.

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

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

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.

Updated MR to resolve this issue as well.

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.

@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. 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

3 files:
block.block.olivero_site_branding.yml
block--system-branding-block.html.twig
header-site-branding.css

@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.

It also works when al 3 are selected: site name, site logo and site slogan, but in that case the site logo must not be to wide.

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!