- This topic has 38 replies, 3 voices, and was last updated 9 years, 4 months ago by Andrew Misplon.
Tagged: Site Title Logo ultra
- AuthorPosts
- May 19, 2015 at 3:11 am #1549
rictansParticipantHello again,
Can I have a Site Title and a Logo at the same time?Thanks,
RicMay 19, 2015 at 1:46 pm #1558
Andrew MisplonKeymasterHey 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?May 20, 2015 at 8:20 am #1559
rictansParticipantHi 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.
May 20, 2015 at 9:58 am #1564
Andrew MisplonKeymasterHi 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.
May 20, 2015 at 10:06 am #1566
Andrew MisplonKeymasterThe following child theme adds a site title before the logo:
https://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 🙂
May 20, 2015 at 5:30 pm #1567
rictansParticipantHi 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.
May 20, 2015 at 5:39 pm #1569
Andrew MisplonKeymasterHi 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.
May 22, 2015 at 2:17 pm #1583
FenParticipantHi 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
May 22, 2015 at 4:11 pm #1584
Andrew MisplonKeymasterHi 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 🙂
May 24, 2015 at 3:32 pm #1597
FenParticipantHi 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.
May 24, 2015 at 3:49 pm #1598
Andrew MisplonKeymasterSorry 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 🙂
May 24, 2015 at 4:00 pm #1599
FenParticipantHi 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
May 24, 2015 at 4:04 pm #1600
FenParticipantHi 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.
May 24, 2015 at 4:12 pm #1601
Andrew MisplonKeymasterThanks 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.
May 24, 2015 at 4:36 pm #1602
FenParticipantThis reply has been marked as private. - AuthorPosts
You must be logged in to reply to this topic.