Site Title and a Logo at the same time?

Hey Ric

Good to hear from you again.

As you’ve probably guessed this isn’t possible from within regular theme settings. I’ve got a child theme for you, it’s mostly ready to go.

1. Where should the site title be positioned relative to the logo?
2. Are you using the sticky header? If so, must both be included in the sticky header?

Hi Andrew, thanks for your reply…

1. Answer: Square Logo to the Left of the Site Title.

Currently I am messing with the style.css

– h1.site-title font from Muli to Times New Roman
– font size from 2.57143em to 2.3em
– .site-branding-container{ max-width from 35% to 60%

The above is to accommodate a long site name without going to another line… and no room for logo… I may have to combine a jpg logo with site name.

2. Yes, using sticky header, but not that important for sticky header use. If using sticky header, would like Logo and Site Title together.

Thank your for your reply today… what time zone are you in? Do you check the forum everyday? First time here… I have no clue.

Ric.

Hi Ric

Thanks for your feedback.

All WordPress themes overwrite when updating. As a result it’s important to not make any changes to theme files. What we ideally need to do now is move your style.css changes over to Simple Custom CSS plugin. That will free you up to run the next Ultra update when it ships. I’ll try help with that.

1. Install Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/
2. Go to Appearance > Custom CSS and insert:

/* Container Width */

.container {
  max-width: 960px;
}

/* Site Branding Container */

.site-header .site-branding-container {
	max-width: 60%;
}

/* Main Menu Container */

.main-navigation {
  max-width: 40%;
}

/* Site Title */

.site-header .site-branding h1.site-title {
	font-size: 2.3em;
	font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
}

These are the modifications you’ve mentioned. If you’ve made other changes, they will also need to be stored at Appearance > Custom CSS.

I’ll get that child theme ready for you now.

I’m in Cape Town, South Africa at GMT+2. I’m here as much as possible 🙂 Let me know if anything else comes up.

The following child theme adds a site title before the logo:

http://purothemes.com/main/wp-content/uploads/2015/05/ultra-child-ric-special-01.zip

Download the ZIP to your desktop. Login to WordPress, go to Appearance > Themes > Add New: Upload Theme > Install and activate.

If you need to adjust the margin between the site title and logo, go to Appearance > Editor > style.css and edit the margin-right on line 20. Appearance > Editor is safe to use in conjunction with a child theme. Both style.css in a child theme and Appearance > Custom CSS are upgrade safe locations to store edited CSS.

Let me know if I can explain anything further 🙂

Hi Andrew,

I have both hard coded style.css and used Simple Custom CSS already as per your previous suggestions from your forum. Simple Custom CSS works well.

Thank you for the child theme. I will give it a try today. Very much appreciated. Yes, I am familiar with Theme updates that wipe out changes in the original css but just wanted to identify and see if I can customize Ultra first.

Ric.

Hi Ric

Thanks for the feedback. Ok great, as long as you’re aware of how updates work then you’re good to go!

Let me know how you come along.

Hi Andrew,

I also have a same request but I need to put the logo before the title and tegline.
I am using ultra theme with the ultra child theme.
Could you guide me please what I should change.

Thanks in advance,

Fen

Hi Fen

Thanks for reaching out.

Are you using the child theme I created for Ric? If so, go to Appearance > Editor and edit header.php. Find the start and end of the site-branding-container div and highlight it. Replace it with the following:

			<div class="site-branding-container">
				<div class="site-branding">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
						<?php ultra_display_logo(); ?>
					</a>				
					<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
					<?php if( get_bloginfo('description') && siteorigin_setting('header_tagline') ) : ?>
						<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
					<?php endif; ?>
				</div><!-- .site-branding -->
			</div><!-- .site-branding-container -->

I’ve swapped the site title and logo around. Let me know how you come along 🙂

Hi Andrew,

Many thanks for your quick response and solution.
Unfortunately when I use your new code, the logo on top and the tile show under the logo not beside the logo.
Is that possible create like table, logo on the left column 1, and title one column 2 row 1 and tagline on column 2 row 2
So the logo and title+tagline will be display side by side.

Thanks again for your help.
I really like your theme, its simple and elegant.

Fen.

Sorry about that. We’re all good in header.php. Let’s go to Appearance > Editor > style.css and after “Theme cusotmization starts here” replace everything with:

/* Site Title Additional: This child theme renders the site title and logo together */

.site-header .site-branding a,
.site-header .site-branding h1.site-title {
	display: inline-block;
	vertical-align: middle;
}

.site-header .site-branding a {
	margin-right: 10px;
}

Let me know how that goes. We’ll make adjustments from there 🙂

Hi Andrew,

By modified the style.css, now I cant see the tile, it only display picture + (empty, no title) and under the picture the tagline.
My page title actually a bit long, so I add the code below using custome CSS:
.site-header .site-branding-container {
max-width: 65%;
}

/* Main Menu Container */
.main-navigation {
max-width: 35%;
}

Not sure if that impact the other or not.

Thanks,

Fen

Hi Andrew,

It look like it cause by the max-width, since the title a bit long, 65% not able to handle that, I increase it to 70% and now the title show properly.
Is that possible to show the tagline inline with the TITLE? currently it show under the logo.
Thanks again for your support,

Fen.

Thanks for the update. My style.css now look as follows:

/* Site Header */

.site-header .site-branding a,
.site-header .site-branding .site-title-wrapper {
	display: inline-block;
	vertical-align: middle;
}

.site-header .site-branding a {
	margin-right: 10px;
}

.site-header .site-branding-container {
	max-width: 70%;
}

/* Main Menu */

.main-navigation {
	max-width: 30%;
}

My header.php site branding container div looks as follows, note the new wrapper I added:

			<div class="site-branding-container">
				<div class="site-branding">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
						<?php ultra_display_logo(); ?>
					</a>	
					<div class="site-title-wrapper">		
						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
						<?php if( get_bloginfo('description') && siteorigin_setting('header_tagline') ) : ?>
							<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
						<?php endif; ?>
					</div><!-- .site-title-wrapper -->
				</div><!-- .site-branding -->
			</div><!-- .site-branding-container -->

Let me know how that goes.

This reply has been marked as private.

Hi Fen

Sorry this is taking so long! The following is what I see in my demo:

Layout

Is the above image the layout you want?

Sticky

Do you have the sticky header enabled? If so, what layout do you want to see when the header becomes sticky?

Child Theme

Any chance you could send through a zipped copy of your child theme? If you work a little with FTP or your Hosting File Manager then this is relatively quick, if not then it could be a mission.

You can find your child theme on your server at /wp-content/themes/ultra-child and could email it me on [email protected].

Thanks 🙂