How do I create a multiline site title?

[bmfe2PnHS9K7mPs]

I would like my Site Title (under Settings - General - Site Title) to be centered and to say my name, then my website name underneath, then my location underneath that.

Something like this but centered instead of left-aligned:

John Doe

Chairs-R-Us

Denver, CO

I see where to choose the font type, font size, and font weight (bold or regular), and whether all caps or not, but I do not see how to add a multiline option.  Is this somewhere in the html/css code?

[bobafett]

@bmfe2PnHS9K7mPs there are some themes that allow that has center logo.  For multi-line thing you may have to create an image 

[PaulMathews]

@bmfe2PnHS9K7mPs What you're asking about is line breaks and those are content items not style items and hence won't be found in the theme styling panel for the site title. The line break tag is added to text to force the break:

Line 1<br>Line 2<br>Line 3

This is simple html that will present the three line items stacked vertically. If the site title allows for html, you can directly add the line break tag and you'll see it work in the preview. If the site title only accepts static text, you'll need to use a Code Element in your banner zone and manually code the title content.

[bmfe2PnHS9K7mPs]

@PaulMathews It seems to only accept static text.  In the Site Title field the <br> tag dissappears the second I click outside of the field.

What Code Element exactly would go in the header/banner zone?

[PaulMathews]

@bmfe2PnHS9K7mPs So, if the title element only accepts static text, what happens if you simply hit your enter key to manually enter a line break?

[bmfe2PnHS9K7mPs]

@PaulMathews  It doesn't do anything. The Site Title field is only a single line field.

If I entered a long title it would display on multiple lines, but I cannot control where it breaks. It must be set at some width before it automatically breaks to a new line.

[PaulMathews]

@bmfe2PnHS9K7mPs Ah, that's interesting. I've never actually used the Site Title field in a Weebly site so I'm not familiar with how it works. Instead, most, if not all, themes allows you to drag and drop any Weebly element into the banner zone so I would do this with the Code Element and add my own title/sub-title via simple html which will allow you to add line breaks wherever you'd like:

<h2>Build your Weebly site today!</h2>
<p>
Start with a professional-looking theme<br>
Drag and drop content elements on to the page<br>
Add your site content<br>
Voila! You have a groovy new website!
</p>

[bmfe2PnHS9K7mPs]

@PaulMathews  Yes, but that is not a Site Title that would appear in the site title's normal position.  That just inserts a paragraph or whatever whereever you place it on the page.  The Site Title should appear in the navigation section at the very top.

[PaulMathews]

@bmfe2PnHS9K7mPs Ah, I see what you're asking about now. I thought you were referring to the title text in a page banner. You are instead talking about the Site Title description in the SEO Settings for the site. Yes, this is plain text because this is really a meta data item and there is absolutely no compelling reason to have formatting or line breaks in meta data. The purpose of meta data is to simply convey information. If you want to delimit the information in a Site Title, use commas or pipes to aid readability.

In Weebly sites, the Site Title is additionally combined with the site logo. If you want formatting of the title, you'll need to either do this via a logo graphic or manually add the title as html in the Page Header html in the Code Editor (turn off the Site Title in SEO Settings).

[bmfe2PnHS9K7mPs]

@PaulMathews If I manually add the title as html in the Page Header html in the Code Editor, then would it appear in the same place?  I currently have two pages on my website and both are set to 'no header'.  Additionally, I have the following code in the footer field of the SEO settings because I wanted very minimal design:

<style>
#header-wrap { display:none; }
</style>

<style>
#banner { display:none; }
</style>

Weebly's SEO guide says it's best to keep the Site Title turned on, so that the Site Title appears on each page.  In that case, it's no longer meta data I don't think, so there should be some formatting options since it then would appear on each page of your site.  Am I nuts?

[PaulMathews]

@bmfe2PnHS9K7mPs The point of confusion here is that Weebly uses the Site Title as a default for the site logo. So, in the event that you don't have a logo graphic image, your site will still publish with the Site Title in the place where the logo would be. So, you're correct that, in that application, the Site Title is not meta data but is rather a text-based version of the site logo. Some formatting is possible with the Site Title via basic text font styling, e.g., font family, font size, color. But the Site Title isn't exposed as a fully standard Weebly page element and so there are limits to what you can do with it.

What you're suggesting is that you essentially have the ability to build the Site Title as a text-based logo where you could, for example, add the company name in larger font and a tagline in smaller font below the name. You can do this but not via the Weebly Site Title parameter in the SEO Settings.

If you're not going to use a logo graphic, you can replace the {logo} mustache element in the page header html with your desired text. The {logo} mustache element is the item that provides the clickable logo graphic uploader you see on your site pages. This defaults to the text-based Site Title (when there is no logo graphic). If you replace the {logo} mustache element with something like 

<span class="mycompany">Company Name</span><br>
<span class="mytagline">Tagline for my company</span>

This will replace the default logo/site title element with your company name and tagline (below the company name). You can use the span classes "mycompany" and "mytagline" to specify the styling for each of those items (you'd add these classes to the site's css code):

.mycompany {
   font-size:26px;
   color: #000000;
   text-transform: uppercase;
}

.mytagline {
    font-size: 14px;
    color: #808080;
    letter-spacing: 1px;
}

Note that replacing the {logo} mustache element means that you won't be able to use the alternative logo graphic image option. To replace the {logo} element, you can either remove it entirely from the html or wrap it in a no-display div: <div style="display:none;">{logo}</div>

[bmfe2PnHS9K7mPs]

@PaulMathews Will this soltuion adjust the font size or format for different screen sizes and mobile automatically?  I see 26px and 14px so I thought I would ask.

Also, note that the Site Title option in Settings - SEO puts the site title in the navigation menu, not the header.  The code you provided puts it in the header instead, right?  I currently have 'no header'.

My site without the Site Title checked/displayed: spellicane.com

[PaulMathews]

@bmfe2PnHS9K7mPs The solution provided only sets the font size as indicated. If you want the font size to change depending on viewport size, you'll need to use media queries in your css and set the font size for each span class at the desired media query breakpoint(s).

The Site Title is not part of the Weebly navigation. Weebly sites typically place the Site Title adjacent to the navigator, e.g., to the left of the navigator or above it but these items operate completely independently from one another. In the page header html, {title} is the mustache element for the Site Title but I believe that this is normally applied in the head zone of Weebly sites and is therefore expressed as the title meta data (not displayed on the page). The {logo} mustache element is where the logo graphic image would appear but, in the absence of that graphic, displays the Site Title on the page. The {menu} mustache element holds the site navigation menu.

[bmfe2PnHS9K7mPs]

@PaulMathews In the editor I can use the Device Switcher to see my site displayed on Desktop or Mobile.  Is the default behavior, before altering the html or CSS, to scale the font size of the Site Title depending on the device (desktop or mobile) if it's displayed in place of a logo?

[PaulMathews]

@bmfe2PnHS9K7mPs If you have a fully-responsive Weebly site theme, the site will automatically modify its layout for mobile right on the front end - just shrink the width of your desktop browser on the front end and you'll see your site page reorganize itself for smaller screens. You can effectively emulate tablet and mobile sized viewports this way. If you use the Chrome code inspector, it'll additionally display the pixel width of the viewport (so you'll for example see the breakpoint at which the navigation switches from the full menu to the hamburger). You can apply font size changes to the desired breakpoint and emulate that on the front end to see how it looks. The mobile switcher in Weebly is a far less useful tool since it can't display multiple viewport sizes.

[bmfe2PnHS9K7mPs]

@PaulMathews The theme is fully-responsive according to what I read when in Mobile mode in the Weebly editor.

I do not see where the font size is listed when using inspect.  Attached is a screenshot of the website maximized on my laptop and with inspect open.  Can you point out where to check?  This would be so I can see how the font size is adjusting so that I can mimic that when I go multiline with the Site Title.