Font size change in Title

[kfriii (Fred Rist)]

I have added a second line to the site title with HTML code. I would like the second line to have smaller font size, but everything I’ve tried (inline CSS) does not work. I probably cannot do it, but maybe someone has a suggestion.

Thank you

[klaatu]

A link to the page so we can see and inspect the issue would be best.

[kfriii (Fred Rist)]

Tell me what you would like to see. A publishing website. A RW8 file.

Thank you

[klaatu]

A link to a single published page where we can see the problem live on the internet, please. That way we can inspect the page, see what’s going on and hopefully make some recommendations.

[kfriii (Fred Rist)]

The web has not been published yet, but I added a folder under mine. Hopefully you can make a suggestion.

www.kfrist3.com/WOA

[klaatu]

@kfriii
Yes, of course. Thanks for publishing the test page; it does indeed allow us to see what’s going on.

Try these steps:

1. Whatever you have put into the site title box in Settings->General, just removal all if it. It makes no sense and it is not helping. We need to start again with the input in that box.

2. In the site title box enter the following, exactly as you see here:
   Wings Over Alma<br><div class="custTitle">Nature and Art Center</div>
   Exactly like that, including all the greater than and less than signs. In fact, copy and paste that line above into your site title box.

3. Now, go to Settings->Code->CSS and enter the following in the CSS box:
   .custTitle {
font-size: 10px;
}

4. Now preview your page and see if that gets you what you need.

Here are some screenshots to guide you along the way:

The site title box:

The custom CSS box:

What you should expect to see. I don’t have the theme you are using so I chose the legendary ‘Flood’ theme from the same developer. That is STILL one of the best themes out there in my worthless view.

So what the heck made that work? Its actually about as basic as you can get. All we did was exploit the site title box to inject a custom div element with a class named ‘custTitle’ into the site title spot. Now that the text we want to target is contained within the custom CSS class we are pretty much free to apply custom styles to that CSS class; which in your case is as simple as indicating what font size should be applied to text with that class.

See here:

In the example below I changed the class to apply color: green and make the font size 20px, to demonstrate how you can exert control over what the class can do.

And thats about all there is to it. Finally watch out for page/console errors, you have a few there but it might just be due to a trash publish:

Anyway. Hope that helps.

PS - Dear forum police, I didn’t compress the images because I am lazy.

[kfriii (Fred Rist)]

I did as you directed, but it did not work. I put up a new version on the web. Thanks

[swilliam (scott williams)]

It looks like You made an error in the html in the site title box. delete the contents there and try again

[klaatu]

Any luck?

[kfriii (Fred Rist)]

This sort of works. Have an extra slogan and the foot area is wide. The font size works. I made it large, and it worked.

Unless you have an idea about what is happening, I will go a different route. thanks for the help. Good learning for me.

[kfriii (Fred Rist)]

I moved

and the slogan to the slogan line on the general tab. Deleted the code and the last half of the title line. It now works. Thank you for the Help!!!

[klaatu]

I had a quick look at the issue you described where things were not quite right,. I don’t think you did anything wrong, what you were seeing there is actually an issue with the theme.