Metro Theme: tagline not visible; site title too long for iphone?

[kay9]

1. If you have a LONGER site title, how can you keep it from overlapping on itself (making three lines that overlap each other, stacked vertically!) in mobile phone view? (iphone)

2. Is there a way to have the "tagline" show up? I have it typed in under Settings but it's not showing in Metro!

Using the Metro theme.

Thanks!

[Susan]

See this thread about the site title cutting off on iPhone view:

Design Tip – Metro Theme Header

[kay9]

Susan - thank you, it worked perfectly. Wonder why the theme is not already coded that way? Weird, eh? Shouldn't it be updated with that code in it? Hmm. 🙂

Also, can anyone answer the other part of my question, as to why the tagline isn't showing in this theme?

Thanks!

[Susan]

Kay9 - it doesn't look like the Metro theme has #description in the stylesheet, which is how a tagline usually populates. I would be inclined to grab the code from another theme (or the genesis framework), and add it to you stylesheet - you'll probably have to do a little styling to get it to look right.

[kay9]

Yep, I just tried that! GMTA!

I added:

`#description {
display: block;
}`

to the stylesheet and saved, and refreshed and no change at all.

Baffling!

I'm thinking at some point it's easier to just make an image with the site title and tagline and use that!

Thanks again!
🙂

[Susan]

I’m thinking at some point it’s easier to just make an image with the site title and tagline and use that!

That was going to be my second suggestion 🙂

You might want to put in a help ticket - they will either tell you what to add, or tell you it's not in the theme, so you'll have to come back here, but it wouldn't hurt to ask...

[kay9]

Ha! Too funny. Thanks again. I might open a ticket and ask, as you said. Couldn't hurt.

🙂

[Susan]

Great! If they give a recommendation, come here and add it to this thread, so others will know the solution!

[kay9]

Susan (and whomever else happens along):

I did open a support ticket and here is what they said:

1. for the tagline, the code will say "removes the description". Then it will be that line of code.

I also asked why the captions under pictures were mangled in the iPhone view and how I could go about trying to fix this (I have not customized this theme) and this was the reply:

2. Margin:auto woudl be in the style.css for the home pages images. I also find these things with Firebug, or Chrome's Inspect Element. It's an invaluable tool for looking at the HTML source of your site as well as the css. It will even let you test changes before making them live.

If you or anyone else knows more about specifically how to fix this stuff, I'm all ears and maybe this will help the next person using the default Metro theme who is encountering these issues.

🙂

[westerdaled]

Kay

I too want to put a tagline below my site name on my blog site. I am also using metro.  To be honest, I thought it was an issue I caused when it didn't get displayed - white colour font for the site name may be an issue if is displayed on the default white background.  Did you get this to work in the end or do did you add the static tag line to your header image..

I will have a go tonight doing this but it would nice to know that it can be done..

 
`
#description {
display: block;
}
`

[Shelley_E]

I would like to know how to get the tagline to show as well. I do not understand what kay9 wrote: 1. for the tagline, the code will say “removes the description”. Then it will be that line of code.

Hope to hear something soon, or maybe I just need to open a support ticket.

 

Shelley

[westerdaled]

Hi

Yesterday,   I switched to the Genesis sample child theme which places the tagline under the site title.  Since the theme is almost entirely styles.css I have been comparing with the syles.css in Metro. Anyway I suspect we need to retrofit these styles to Metro which I won't be to do until about later on today - It would be  good is someone has a go as well and we can compare notes.
``

#description {
font-size: 12px;
font-style: italic;
}

.header-image #description {
display: block;
overflow: hidden;
}

 

As for raising a support call; well your on your own there as I was directed here!

Daniel

[Susan]

@Shelley_E:

I do not understand what kay9 wrote: 1. for the tagline, the code will say “removes the description”. Then it will be that line of code.

In your theme functions file, remove this:

// Remove the site description
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

[westerdaled]

hi

In the end I needed to add and amend this markup to get my tagline to display - could see the tagline was there in firebug but it still wasn't being displayed ... now it is
.
`
/* tagline - taken from the sample child theme */
#description {
font-size: 12px;
font-style: italic;
color: #636363 !important; /* otherwise this is overridden and doesn't get displayed note my site title uses a white colour font */
}
`

`

[Shelley_E]

Thank you, Susan!  I may try that if I get more proficient with php, but every time I've tried to edit php with any of my WordPress blogs, I mess everything up - either immediately or later on when I want to make changes and need to remove code I've entered or add code I had removed. However, I came up with a solution that works great for me: I created an image with my tagline and used it with a JetPack Image widget in the Header Right area.

Shelley

P.S. One of the things I love most about Genesis is the Edit CSS feature. I can experiment and if I hose something up, when I remove the code from Edit CSS everything goes back into place. If I could do that with php, I would try your fix immediately.

[Susan]

I'm glad you found a solution, Shelley!

[Author]

Posts