With your help I successfully changed the header background color and text color. But now the client wants to add a JPG to the header. Can I customize the Origami header to add a graphic to the existing text? Ideally both the image and the text would show up, although the image is small and would appear on the left side of the text.
I know I could use a single header image that included both the image and the text but that would be very small on the phone screens.
Thanks for any suggestions.
Joe
Hi Joe
The first thing you will need to do is add a child theme for your site. The easiest way I have found of doing this is to use this plugin.
https://wordpress.org/plugins/child-theme-configurator/
When activated create a child-theme and make sure to click the option to copy parent theme menus, widgets and customizer options, or you will need to re-add them manually. After creating it click the files tab at the top and select the ‘parts/logo.php’ file and click ‘add to selected theme’.
Once you have this then go to Appearance->Editor and select the logo.php file from your child theme for editing.
Locate this section
<a href="<?php echo esc_url( home_url( '/' ) ) ?>" title="<?php echo esc_attr( get_bloginfo( 'description' ) ) ?>" class="logo-link"> <?php if( get_header_image() ) : origami_header_image(); ?> <?php else : ?> <h1 class="logo"><?php bloginfo('name') ?></h1><br/> <h3 class="logo"><?php bloginfo('description') ?></h3> <?php endif; ?> </a>Directly underneath this add this code
replacing the src with the path to your image file. This can be found by navigating to media and editing the image in question. The path is displayed in a meta box on the right hand side.
One done just save the page and it’s ready to use.
Let us know how you get on
Magus
Hi Joe
Just re-read the original question. The above will give you a layout like the original site. To add one to the left we will need to add the code in a different manner. To add to the left of the existing header we would need to add the following code to the top of the logo.php file
We can the adjust the positioning of the text and image into it’s correct positions by adding custom CSS.
Magus
Thanks for the update Magus. This is progress, but not what they were looking for. This puts the new graphic outside and above the black header with white letters. Instead, I would like for the new graphic (images/ANGEL.PNG) to appear on the left side of the header bar, and embedded inside the black header bar, not above it on the page.
Your thoughts?
-Joe
Hi Joe
The above code was just to get the image to appear in the header. Now we can position it correctly.
Please try adding the following to Appearance-> Custom CSS
.header-image { position: relative; display: block; margin-top: 50px; float: left; margin-left: 50px; z-index: 9; }let us know how you get on
Magus
Thank you Magus, that was exactly what I was hoping to see. This thread can be marked as resolved.
Joe
Oops, I spoke too soon. It looks great on the static front page, but the logo does not show up on any of the other pages on the site. I can see a placeholder appear in the right spot in the header when the pages start loading, then the placeholder disappears and the logo is not visible.
Hi Joe
You will need to put the full path to the image in the page code. You currently have a relative path so it is getting lost when you navigate away from the main page. You should just be able to put a forward slash in front of the image URL
‘/images/angel.png’
Magus
When I add a single slash, the icon disappeared from the front page header. When I added two dots and a slash, as in “../images/ANGEL.PNG” the icon showed up on every page except the front page. Is there a way to keep it as a relative reference and get it to work on all pages?
Hi Joe
Not when you are working from a subdirectory of your site. When the site goes live on its own domain you will be able to use the single forward slash
Magus
Thanks for the update Magus. I appreciate the help and reminders of all the HTML stuff I should remember but didn’t. I put the full path to the old site’s image file into the new site’s logo.php and it’s working correctly now on all pages. The full path ought to keep working even after the site goes live on its own domain.
I think this issue can be marked as resolved. This time for sure.
Joe
Hi Joe
Glad to be of help. That should be right providing the images folder remains when the new site is transferred.
If you need any more help please feel free to start a new support thread.
Magus