Need to position site site logo

My god! I’m so blind ??

I forgot the ; from the end of position: relative!!

Sorry to have troubled you.

*EDIT – Sorry for marking as resolved

I marked the thread as resolved but then realised I still need to know if there is a better way to move the tagline out away from the logo without using a non-breaking space as I current am?

• This reply was modified 7 months ago by Bri.

Hi there,

you would use CSS margins.

For the default site description:

.site-description {
    margin-left: 5ch;
}

But as your not using the deccription but your own H5 it would be

.site-branding h5 {
    margin-left: 5ch;
}

Ahh ok. So rather than adding my custom H5 along with the non-breaking spaces I assume I could also move the other html from there too and have it all in my external styles.css too?

The only reason I added the h5 directly in the tagline field of the WordPress backend was because I don’t know how to add the h5 programmatically.

Still a lot to learn about CSS..

Can you advise?

Are you making edits to the parent Theme Files in the Theme Editor ?
If yes, then DO NOT do that, as any changes you make will get overwritten when the theme is updated.

If you need to inject code into the site then there are hooks for that.

In this case you can just use the Site Description field in the customizer site identity to output the text, and use the CSS I provided above. And in the Customiser > Typography there are options to style Site Title and Site Description.

I’m not touching the core files of WordPress or GeneratePress. I have a child theme where my CSS is being entered in style.css

The H5 was typed directly in to the tagline field within the backend, as were the non-breaking spaces.

To clarify, this is my CSS from my child themes style.css:

/* Site Logo START */
.site-logo {
    position: relative;
    top: -12px;
}
/* Site Logo END */


/* Site Title START */
.main-title {
	position: relative;
    left: -10px;
	width: 100%;
    max-width: 960px;
    margin: 0 auto 1px;
    transform: rotate(-3deg);
    color: #222222;
    font-size: 3rem;
    line-height: 3rem;
    text-shadow: 0 1px 0 rgb(255, 255, 255),
                 0 0 5px rgba(0,0,0,.05),
                 0 1px 3px rgba(0,0,0,.2),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.2),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.3);
}

@media screen and (max-width: 480px) {
	p.main-title a {
		position: relative;
		left: 10px;
		word-break: normal;
		font-size: 90% !important;
	}
	.site-logo {
		display: none;
	}
}
/* Site Title END */

/* Site Tagline START */
/* NOTE: Set Tagline to <h5 data-text="DELIVER">DESIGN | CREATE | DELIVER</h5> */
h5:after{
	content:attr(data-text);
	color: var(--accent);
	transform:translateX(-100%);
	position:absolute;
}
/* Site Tagline END */

Then within the WordPress backend at Settings > General I have the following:

<h5 data-text="DELIVER">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DESIGN | CREATE | DELIVER</h5>

The only reason I did it this way is because of how I am targeting the last word of the tagline with data-text="DELIVER". If I can move the above H5 to my style.css then I would prefer this if possible but didn’t know how..

Ok. So WP shouldn’t really accept HTML in that field, as its content is output inside the following HTML

<p class="site-description">Your tagline here</p>

And you cannot output a <h5> tag inside a <p> tag, it’s semantically incorrect and the browser repairs that code by ejecting the H5 out of the P tag. As a related note: H5 is a Section Heading, SEO audits will flag it being there as it breaks section hierarchy.

So instead of adding HTML in that field , you can modify the Themes HTML using the Filter Hooks in the themes code. Heres the necessary PHP Snippet to add the data-text property to the site-description HTML:

add_filter('generate_site_description_output', function(){
    return sprintf(
        '<p data-text="DELIVER" class="site-description"%2$s>%1$s</p>',
        html_entity_decode( get_bloginfo( 'description', 'display' ) ), // phpcs:ignore
        'microdata' === generate_get_schema_type() ? ' itemprop="description"' : ''
    );
});

I’m currently on my phone at the min so won’t be able to add the snippet and experiment until later today. However thank you for the explanation. I knew what I wanted to achieve and obviously managed to fudge it in a hacks kinda way haha.

Seems we may have discovered a bug with WordPress too if the tagline shouldn’t be able to accept html!

As for getting this to work as intended then I’m assuming I’ll have to also adjust my CSS too, making sure it’s pointing to a paragraph tag as opposed to the H5 one and also set a font size too?

Hi David,

With your function and a few minor tweaks to the CSS it now works exactly as required without the need to add any CSS to the WordPress Tagline field from the admin backend.

My SEO lives to see another day ??

Thank you so very much (again).

Now with the issue that has been highlighted with the Tagline field being able to accept code. Do you think this needs mentioning in the WordPress forums to suggest this vulnerability be fixed?

Bri

I’ve just had a thought, as this is not going to be needed anywhere else other than the Tagline, rather than having to use the code you provided to change the HTML for the Tagline to include content:attr(data-text); I guess I could just use the following:

p.site-description:after{
	content: "DELIVER";
	color: var(--accent);
	transform:translateX(-100%);
	position:absolute;
}

What do you think, is this a better approach?

To be honest, i didn’t look at what you were using the data-text attribute for. If its there just to add some style to the last word then i would probably inject the HTML i require using the generate_site_description_output hook:

add_filter('generate_site_description_output', function(){
    return sprintf(
        '<p class="site-description"%1$s>DESIGN | CREATE | <span class="highlight">DELIVER</span></p>',
        'microdata' === generate_get_schema_type() ? ' itemprop="description"' : ''
    );
});

In there we bake in the actual HTML with the markup for the last word: <span class="highlight">DELIVER</span>

Which you can then style without all the fuss:

.site-description .highlight {
	color: #f00;
}

If of course you need the :pseudo element for some specific CSS effect then, go for it