Sean RamseyHi there,
The theme is great. I was hoping for some help adding my website’s logo to the header of the main page.
My website is: http://www.rotobreakfast.com hosted through GoDaddy. My logo is added to the “Media” library. The URL is: http://rotobreakfast.com/wp-content/uploads/2014/04/RotoBreakfastLogo.png
Essentially, I prefer the flat theme. I think it is really sharp and I like the way it looks. I am hoping to replace the square center image with my logo (keeping it around that same size or a little larger), remove the Site Title and the square around the site title, and move the tagline and button beneath the logo. Would this be possible? Could anyone at DW help me with this? I have created a Child theme and have tried a few things to make it work but I have limited experience with editing .php and HTML.
Let me know what other questions I can answer or if this is even possible. I greatly appreciate the help!
Dominic Hello Sean !
To resolve this issue, you can do as the following:
1. Install the Jetpack by WordPress.com plugin.
2. Setting Jetpack then enable the Custom CSS feature.
3. Move through Appearance > Editor Css, add the following code:
.style-flat .banner hgroup:after {
background: url("http://rotobreakfast.com/wp-content/uploads/2014/04/RotoBreakfastLogo.png") repeat scroll 0 0 / 100%;
height: 280px;
transform: rotate(45deg);
width: 280px;
}
Hope this helps !
Sean RamseyThank you for the quick response, Dominic. I have Jetpack and I had the Edit CSS already activated so I was able to pretty easily add in the code you provided.
I added the code in between the /* and */ within the CSS editor. I saved the changes and they appeared to publish successfully but no changes appeared on my site. I double-checked the url and it appeared to be correct. Perhaps the issue is that my Child Theme has a style.css? It doesn’t have anything custom in it but I believe that I had to have that css in order for the child theme to work. Any ideas?
DominicHi Sean !
Please send me username & password of your site (via private answer) for further checking.
Regards,
Hi Sean !
I have helped resolve this issue, please check your site now.
Regards,
Wow! It is so close! A few final questions/requests:
Any way you could rotate the logo so it is centered (it is a little askew right now and when I set the 45 degree rotate to “none” or “0” it doesn’t seem to make a difference)? After the logo is rotated, it would be best if the transparency/overlay of the logo could be removed.
After that, any way you could remove the “RotoBreakfast” script and the white box around the script? I know how to remove the script, but the white box would require css manipulation, I believe.
Last thing, then, would be to move the logo up a few centimeters and move the tagline and “Read More” down a few centimeters so that there isn’t any overlap. Would that be possible?
Actually, as I think about this, the last consideration would have to be mobile. The background image (currently the blue square) does not appear on mobile so if the above changes are made, the mobile version of the site may just show the tagline only. Something to think about.
What do you think? Again, so appreciative of the help. Is there any place i can reimburse you for your assistance?
Hi Sean !
To resolve all the requirements in the site, you can add the following code to the Editor CSS.
.banner .page-title {
text-indent: -9999px;
background: url(http://rotobreakfast.com/wp-content/uploads/2014/03/RotoBreakfastLogoSmall.png);
width: 250px;
height: 250px;
border: none !important;
}
.style-flat .banner hgroup:after{
display: none;
}
Hope this helps !
Perfect!!! Thank you so much. I am very appreciative
Please login or Register to submit your answer