Blog slogan / Wintersong

[beautyfool]

Hi there!

I am looking to add a small line of text for my blog's slogan right underneath my header image. Not sure exactly how I can do that, would anyone know how to do this?

My site is: http://beautifille.com

(Looking to add in my slogan underneath the Beautifille logo, before the little widget divider line.)

Thank you,
Renee

[Jeff]

This can be done by changing a few things in your style.css file. This will add the site tagline (found under settings > general) right underneath your logo.

Line 919

.site-description {
	font-size: 12px;
}

Line 879

.site-title {
    font-family: 'Arial', sans-serif;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 10px;
}

Line 850
change this

.site-header .site-title::after {
	padding-bottom: 16px;
} 

to this

.site-header .site-description::after {
	padding-bottom: 16px;
}

Line 841
change this

.site-header .site-title::after, .site-header .widget::after {
    border-bottom: 1px solid #000;
    content: "";
    display: block;
    margin: 0 auto 19px;
    width: 25%;
}

to this

.site-header .site-description::after,
.site-header .widget::after {
	border-bottom: 1px solid #000;
	content: "";
	display: block;
	margin: 0 auto 30px;
	width: 25%;
}

Hopefully that helps!

[beautyfool]

Hi Jeff,

Thank you so much for helping me out and writing all that up for me.

Unfortunately, it didn't work. 🙁 The slogan didn't show up at all and it moved the widget below it higher instead. What I did was to add a text in a widget directly underneath the title - it's not exactly how I want it but it looks alright I think.

Do you think I could do it in a hook? Like, finding the logo/header info function and then just adding a line of text underneath it?

[Jeff]

Have you added any code to your functions.php file to remove the site description? I tested this all using a fresh copy of the Wintersong theme and it worked for me.

[Jeff]

I go it to work on your site as well while inspecting the code. I wonder why it's not working for you....

[Susan]

I wonder why it’s not working for you….

OP should refresh her browser's cache.

[Jeff]

Like this, right?

[beautyfool]

Hi Jeff, yes, from your screenshot that looks correct. Thank you.

Yep, Susan - I've refreshed my cache and tested it in different browsers, etc, somehow it's not working for me. It is still making my widgets below it "run" into my logo. I'll look into my functions now.

Jeff, May I request that the screenshot be taken down? (Just for privacy for my site).

Thank you,
Renee

[Jeff]

Renee, sorry for posting the screenshot. It's been taken down.

On line 918, did you remove everything under .site-description except a font-size?

[beautyfool]

No worries at all, Jeff!

My code for my site description is as follows, could that be the culprit?

.site-description {
font-size: 9px;
height: 0;
margin: 0;
text-indent: -9999px;
}

[Jeff]

Yes, that's part of it. You need to remove height, margin, and text-indent. That will let your slogan show up. You'll probably want to make the font size a little larger. Then there's a couple other changes to get it positioned where you want it. We will get this working for you! 🙂

.site-description {
font-size: 9px;
}

-Jeff

[beautyfool]

Thank you Jeff, I really appreciate the help. That was it - it's all good now, yay! 😀

[Author]

Posts