Moving the Logo

[shorthills]

First let me tell you how please I am with your theme. The documentation and your online videos are excellent — so please keep up the great work!

I am trying to move the logo for this theme from the center to the left side of the page. I’m quite comfortable doing it with CSS, but I wanted to ask you first if there was a pre-built module to do that — that I might have missed.

Thanks
Oh, and your video about the child theme was great — I would put it in BIG LETTERS somewhere that your theme requires the css. to be edited in the assets folder as opposed to the “Standard” child theme style.css. I would have missed that entirely if I hadn’t watched your video. And on that subject, as long as I based everything off of the child theme you created as a baseline (thanks, by the way), then I should be ok with upgrades? Correct?

Thank you!

Topic

[Jason Bobich]

Hello,

I am trying to move the logo for this theme from the center to the left side of the page. I’m quite comfortable doing it with CSS, but I wanted to ask you first if there was a pre-built module to do that — that I might have missed.

No, in this theme there’s no option for that. So, you’d just want to tackle it from your custom CSS as you were suggesting.

I would put it in BIG LETTERS somewhere that your theme requires the css. to be edited in the assets folder as opposed to the “Standard” child theme style.css.

In the next theme update, I’ve got style.css enqueue’d at a position where people could put overriding styles in it (if they wanted) — So hopefully this will make things less confusing.

[seeded]

Hi Jason – If I did want to move the logo to the left how would I go about it? I am not too familiar with css but am willing to try…

Caroline

[Jason Bobich]

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

#branding .header_logo { text-align: left; }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[seeded]

Thanks Jason! Will give it a go

[shorthills]

yes — but all changes should be made to the css file in root of the child theme, OR to /assets/css/custom.css? I think the video said “custom.css” but I want to make sure.

I’d also like to add a phone number to the top right. Should I copy header.php to the child theme and make my HTML edit there( (e.g. inserting the phone number with a div and/or a new .css class). And the of course style it in the child theme .css file as described above?

Thanks!

[Jason Bobich]

yes — but all changes should be made to the css file in root of the child theme, OR to /assets/css/custom.css? I think the video said “custom.css” but I want to make sure.

In the particular way the sample Child theme included with the theme is setup, the custom CSS would go in /assets/css/custom.css.

I’d also like to add a phone number to the top right. Should I copy header.php to the child theme and make my HTML edit there( (e.g. inserting the phone number with a div and/or a new .css class). And the of course style it in the child theme .css file as described above?

It’s actually better to avoid copying header.php to your Child theme because this file tends to change often with theme updates. Instead it’s better to hook your content in with theme’s action hook system from the functions.php file of your Child theme.

http://dev.themeblvd.com/tutorial/actions/

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

Example:

function my_header_addon(){
	?>
	your html here...
	<?php
}
add_action( 'themeblvd_header_addon', 'my_header_addon' );

[shorthills]

Thanks, Jason. The example and the links to the support pages are very helpful!

[shorthills]

And in terms of styling it, to not run into a problem with updates, should I just add a new div to my new HTML with classes as needed? I don’ want to get in the way of the framework.

Thank you again!

[Jason Bobich]

I don’t want to say it’s impossible there could be some new CSS rule added at some point that may conflict in some way. But as long as your CSS is in your custom.css file and your PHP is in your functions.php, you shouldn’t really have any problems with updates.

[Author]

Replies