[Support request] Questions about formatting header icon, logo, title, tagline

[Alan Stancliff]

I began a site some time ago using the Atahualpa theme, which is quite outdated. So I decided to use GeneratePress. I am using a local wampserver to do this development.

Here is a screen capture of the Atahualpa theme header. Please note the size of the site title, site tagline, and the logo, which I am using as a full banner (or do they call that a hero?).

Also note that the site icon is positioned just to the left of the site title and the tagline and in line with them. I would like to implement these features in the GeneratePress theme

I tried to replicate Atahualpa theme layout in the GeneratePress theme. I am using a child theme. Here is a screen capture of my efforts so far.

So here are my questions:

1. How can I get the site title and tag lines to be larger and responsive in the various screen sizes using the GeneratePress theme?
2. How can I place that little site icon to the left of the site title and the tagline in the GeneratePress theme as they were in the Atahualpa theme?
3. Is it possible to place the site title and tag lines, and an icon to the left of those in GeneratePress while maintaining the same proportions, i.e. proportional, perhaps by using some kind of CSS code using percentages or EM units?

Cheers

[David]

Hi there,

1.in Customizer > Typography -> Add Typography you have the options to select the Site Title and Site Description.

2. Try adding this PHP Snippet to add the site icon in.

add_filter('generate_site_branding_output', function($html){
	$icon = get_site_icon_url(150);
    $html = '<img class="header-icon" src="' .$icon . '" alt="your alt text" width="80" height="80"/>' . $html;
    return $html;
});

3. Add this CSS to your site:

.site-branding-container {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
}
.header-icon {
	margin-right: 10px;
}
.site-logo {
	margin-top: 10px;
	order: 10;
	flex: 1 0 100%;
}

[Author]

Posts