Change text bar without affect tabs #7378

mer0x · 2024-07-19T20:15:18Z

mer0x
Jul 19, 2024

Hello, please tell me how can I change the text which is after the logo ( apple avatar ) MEROX.DEV to something else, and also keep the MEROX.DEV in every page tab opened ( like Home - MEROX.DEV )? Thank you!

Answered by kamilkrzyskow

Jul 20, 2024

Hello @mer0x,
the value in the browser tab comes from the title tag in the head part of the page, like in all other websites:

mkdocs-material/src/templates/base.html

Lines 89 to 98 in 6b13c56

     <!-- Site title -->  
   {% block htmltitle %}  
   {% if page.meta and page.meta.title %}  
   <title>{{ page.meta.title }} - {{ config.site_name }}</title>  
   {% elif page.title and not page.is_homepage %}  
   <title>{{ page.title | striptags }} - {{ config.site_name }}</title>  
   {% else %}  
   <title>{{ config.site_name }}</title>  
   {% endif %}  
   {% endblock %}  

 

The value next to the logo in the header can change based on the scroll and heading:

mkdocs-material/src…

View full answer

kamilkrzyskow · 2024-07-20T05:12:24Z

kamilkrzyskow
Jul 20, 2024
Collaborator

Hello @mer0x,
the value in the browser tab comes from the title tag in the head part of the page, like in all other websites:

mkdocs-material/src/templates/base.html

Lines 89 to 98 in 6b13c56

    
           <!-- Site title --> 
        
           {% block htmltitle %} 
        
             {% if page.meta and page.meta.title %} 
        
               <title>{{ page.meta.title }} - {{ config.site_name }}</title> 
        
             {% elif page.title and not page.is_homepage %} 
        
               <title>{{ page.title | striptags }} - {{ config.site_name }}</title> 
        
             {% else %} 
        
               <title>{{ config.site_name }}</title> 
        
             {% endif %} 
        
           {% endblock %}

The value next to the logo in the header can change based on the scroll and heading:

mkdocs-material/src/templates/partials/header.html

Lines 55 to 73 in 6b13c56

    
           <!-- Header title --> 
        
           <div class="md-header__title" data-md-component="header-title"> 
        
             <div class="md-header__ellipsis"> 
        
               <div class="md-header__topic"> 
        
                 <span class="md-ellipsis"> 
        
                   {{ config.site_name }} 
        
                 </span> 
        
               </div> 
        
               <div class="md-header__topic" data-md-component="header-topic"> 
        
                 <span class="md-ellipsis"> 
        
                   {% if page.meta and page.meta.title %} 
        
                     {{ page.meta.title }} 
        
                   {% else %} 
        
                     {{ page.title }} 
        
                   {% endif %} 
        
                 </span> 
        
               </div> 
        
             </div> 
        
           </div>

In both cases the MEROX.DEV comes from the site_name value in your mkdocs.yml, so you need to override one case.
Since you want to keep the value in the tab name, I would recommend overriding the htmltitle block.
Just copy-paste the contents into your main.html block override and replace the {{ config.site_name }} with your desired text value.

https://squidfunk.github.io/mkdocs-material/customization/#overriding-blocks

7 replies

kamilkrzyskow Jul 20, 2024
Collaborator

Why did you add a header block when I suggested the htmltitle block which should be simpler to maintain?
Also your approach is incorrect, as it removes too much. The header block in the base.html includes the whole header.html partial.

mkdocs-material/src/templates/base.html

Lines 270 to 273 in 6b13c56

    
           <!-- Header --> 
        
           {% block header %} 
        
             {% include "partials/header.html" %} 
        
           {% endblock %}

So if you want to modify the header, then create an exact copy of the file first and put it under the matching path in your custom_dir and only then start editing the custom partial file.

https://github.com/squidfunk/mkdocs-material/blob/master/material/templates/partials/header.html

mer0x Jul 20, 2024
Author

Hello, thank you for clarification, this is how I configured now:

https://github.com/mer0x/merox.dev/blob/master/assets/main.html

But doesnt look like how I want

This implementation just added that black bar, maybe I still implemented wrong, can you check please? Thanks!

kamilkrzyskow Jul 20, 2024
Collaborator

Focus on the example in the OP first, mobile comes later (aka I think should not require any attention)
The htmltitle block is located in the <head> tag, there should not be any divs there, also by design this block should render the one single <title> tag, not some elaborate structure.

https://www.w3schools.com/TAGS/tag_title.asp

I think I elaborated before enough:

Just copy-paste the contents into your main.html block override and replace the {{ config.site_name }} with your desired text value.

Copy this into your custom block, and replace the config value with a static string MEROX.DEV
To meet the criteria:

and also keep the MEROX.DEV in every page tab opened ( like Home - MEROX.DEV

mkdocs-material/src/templates/base.html

Lines 91 to 97 in 6b13c56

    
           {% if page.meta and page.meta.title %} 
        
             <title>{{ page.meta.title }} - {{ config.site_name }}</title> 
        
           {% elif page.title and not page.is_homepage %} 
        
             <title>{{ page.title | striptags }} - {{ config.site_name }}</title> 
        
           {% else %} 
        
             <title>{{ config.site_name }}</title> 
        
           {% endif %}

So the custom htmltitle will use a custom static text in the template, in-place of the loaded config value {{ config.site_name }}.

And change the site_name back to the alternative to use it at the top of the page.
site_name: root@merox.dev:~#

It's not the first time you're asking for override tips on the forums, at this point I feel like you should have HTML/CSS 101 under your tool belt.

kamilkrzyskow Jul 20, 2024
Collaborator

Also I see you're doing a lot of commits, I highly recommend installing Python + mkdocs on your local machine and test things in your browser. Currently it looks like you're doing changes blindly and then waiting for the CI to push the changes onto the server to see the changes, so instead of 3 seconds you wait 80s+

mer0x Jul 20, 2024
Author

Thank you for your support, I managed it! Working as expected now.

Yes, for sure I need to create an test env ( I was a little bit lazy to do this, but it will be the next step )

All the best 🍺

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change text bar without affect tabs #7378

{{title}}

Replies: 1 comment 7 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

	<!-- Site title -->
	{% block htmltitle %}
	{% if page.meta and page.meta.title %}
	<title>{{ page.meta.title }} - {{ config.site_name }}</title>
	{% elif page.title and not page.is_homepage %}
	<title>{{ page.title \| striptags }} - {{ config.site_name }}</title>
	{% else %}
	<title>{{ config.site_name }}</title>
	{% endif %}
	{% endblock %}

Change text bar without affect tabs #7378

mer0x Jul 19, 2024

Replies: 1 comment · 7 replies

kamilkrzyskow Jul 20, 2024 Collaborator

kamilkrzyskow Jul 20, 2024 Collaborator

mer0x Jul 20, 2024 Author

kamilkrzyskow Jul 20, 2024 Collaborator

kamilkrzyskow Jul 20, 2024 Collaborator

mer0x Jul 20, 2024 Author

mer0x
Jul 19, 2024

Replies: 1 comment 7 replies

kamilkrzyskow
Jul 20, 2024
Collaborator

kamilkrzyskow Jul 20, 2024
Collaborator

mer0x Jul 20, 2024
Author

kamilkrzyskow Jul 20, 2024
Collaborator

kamilkrzyskow Jul 20, 2024
Collaborator

mer0x Jul 20, 2024
Author