Need help? Check out our Support site, then

Pictorico - replace site title with an image

  1. i have enhanced CSS enabled.

    I would like to replace the bland textual area that appears in the top left corner with an image that contains my logo and the site title.

    Any advice / sample CSS code on how to do this would be really appreciated.

    bonus question: can I also use to CSS to remove or overlay the search box? My site is extremely visual, and this functionality to me is unnecessary and takes up space I could otherwise use more creatively.

    Many thanx in advance for any advice!

    The blog I need help with is

  2. That's absolutely possible.

    This code will remove the the search box:


    If you could post a link to the image you'd like to appear in place of the text-title of your site, I'll provide the code you need. That way I can text to make sure it works before I recommend it to you.

  3. thx for the search related css
    i tried it and it works!
    now ideally i would like to use this available space for a text widget that contains scrolling text (it appears at the bottom of the page currently)
    is this possible? (i can makes the scroll box smaller of course) i just need to know how to position the widget where the search box was

    2. the image that I would like to replace the site title with is here

    i can change its dimension to suit any height or width contrainsts necesary

    alternatively, if the widget cannot go in the search box area, maybe i could use both spaces for a large size version of the image

    many many thanks for your help[!

  4. It's not possible to create a widget area by using CSS--sometimes you can move things around a little bit, but I at least don't know how to move a widget from the footer into the header.

    That having been said, this code replaces the text header with your image.

        height: 200px;
        width: 600px;
        max-width: 50% !important;
        background: url('')!important;
        background-size: 200px 200px !important;
        border-right: none !important;

    Note: I have this set up to repeat the image you gave me, just to show you how you could fill up the whole space with your logo. If you created an image that is 200px tall and 600 px wide we can replace the existing logo with that image and it won't repeat.

    Hope that helps!

  5. thx this worked like a dream (I changed the image size as you indicated to make it non repeating).

    However, a new problem came up:

    now when you click on the logo from another page or post deeper into the blog, you are not returned automatically to the home page.

    Is there a solution to this? Again, many many thx!!!!

  6. another related quirk. this is on a Samsung android galaxy S5 chrome browser.

    the text to the right of the logo in the title area does not display when holding the phone in portrait mode.

    only the first letter of each line displays when holding the phone in landscape mode.

    this is probably a deep tech support issue, but just thought i would mention it. again, many thanks.

  7. Let's try this to make it possible for people to click the logo to get back to the home page.

    Change this piece of code from before:


    to this:

        opacity: 0;

    Assuming you didn't remove the site-title from your customize page, this should work. if it doesn't, try this instead:

        opacity: 0 !important;

    Basically this puts the site title, which was clickable back in place, but makes it transparent so it won't interfere with your image.

    The other problem is a responsiveness issue. We'll need to make some adjustments to the header code I gave you earlier, but I'll need to mess with it a bit. I'll get back to you as soon as I can.

  8. thx Liz that works very nicely. only one thing tho: u have to click somewhere on the top half of the image for it to work.

    my conclusion is that the site-title takes up only a portion of the virtual container or class that "encloses" that 600px x 200px area wher I place the image. I will try to find the name of the super class that contains .site-title and somehow figure out the CSS to make the rest (or bottom half) of the half clickable -- if that is the way to do this.

    Similarly, I have to find the name of the super class that contains the menu bar on the right. I looked through the source code and was able to find the menu class, and thus was able to color the menu by yellow doing this

    /* Color Menu box */
    .menu-new-menu-container {
    background-color: #FFFFB2;

    now I need to find the super class or container that defines the area that the menu is in (it is currently a white rectangle) and have an image (which would be an actual picture of my store) become the background on top of which sits the menu bar.

    Is this possible to do?

    I really appreciate all your fantastic help, it has been invaluable in helping me try to customize the header of this theme and debug some of the functionality that is not working quite just right. Many many thx!

  9. figure out the CSS to make the rest (or bottom half) of the half clickable -- if that is the way to do this.

    The easiest thing is to make the font for the site title huge like this:

    .site-title {
    font-size: 100px;
  10. Here's some new stuff to try. This gives you the option to have a header all the way across your page (so you can incorporate a photo of your shop if you'd like) and moves the navigation below your header. It should also help some with the issues on smaller screens, but my guess is we'll have to do a bit more tweaking on that.

        float:none !important;
        max-width: 100% !important;
        height: 50px;
        text-align: left !important;
       min- height: 200px;
       max-width: 100%!important;
       float: none !important;
        background: url('')!important;
        background-size: cover !important;
        border-right: none !important;

    just remove the whole site-branding section from before and replace it with the code above.
    If any of this doesn't work, let me know the old code we put in there is interfering a bit with my test so I'm not 100% sure this will work as expected.

  11. i thought i would give something like this a shot

    .main-navigation {
    background-image: url('');
    background-size: 500px 200px !important;

    hoping that main navigation is the class that contains the menu bar and defines the white space to right. unfortunately this is totally useless as it do not work. i have to teach myself what that tool is that tell me the layout of a page and the right class name for each section.

    anyway, having failed with this experment, i will attempt your code.

    again many thanks!

  12. In this particular case, the white area you were trying to target didn't really have it's own designation. It was included in the "site-branding" area but because the previous code limited the width of "site-branding" to 50% is was effectively no mans land :)

  13. WOW this is really cool
    i have to change the size of the image i uploaded (it is 936 x 200)
    so i have to fiddle around some

    the height and length are a little off and i am not exactly sure what the length of the header image should be

    anyway this is really great. once again thanks liz

    i will check how it looks on the android then play with header image till i get the size right then i will check the functionality more closely

    i like for example that anywhere you click on the header image gets you back to the hp!!!

  14. the header looks fine now but unfortunately does look that great on an android smartphone. for some reason the logo is huge. but on a regular desktop it looks great!

  15. Try adding this .site-branding--I think it will help some on big screens and transitioning to small screens.

    max-height: 200px;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    If it still looks wonky on your android (and I kinda think it will) I think we should create an alternate header for phones and tablets and assign it with a media query.

  16. sorry about the typo earlier, i meant it did not look great on my samsung galazy, tho it was fine on my comp.

    now testing the new code....

    completely awesome code -- it centers the header on the middle smartphone screen, and what you see is the parrot logo, which is perfect.

    you only see part of the blue promo screen on the left and the store pic on the right, but that is absolutely fine, no problem. swiping left or right did not result in my being able to see the full header, but i expected that.

    it looks like i need to do some homework learning about media queries. if there is a book you recommend about learning advanced css techniques, please let me know via email if you don't mind, as you obviously know your stuff. i really would like to know how this all works, and be able to figure things out instead of having to ask all the time!

    so i guess this resolves this matter, and now i just have to wait to hear from tech support why there are missing cells in the 2 or 3 column layout for a gallery page.

    thx again liz, you have been very helpful! i will leave this as unresolved for another day, then close the thread.

  17. uh oh. i spoke too soon. all is well on the desktop browsers, but the menu got screwed up on the android. you have to tap the pancakes icon, and then all you get is the Canvases option, but not the other choices, such as Threads. You do get the Canvases sub-option, tho.

    boy this is turning into a really advanced tutorial in CSS tips and tricks!

    any thoughts re this latest issue?

  18. If you want to learn more about doing your own CSS, I highly recommend this course: I had very, very rudimentary CSS skills (if you could even call them that) when I took it 2 months ago and it was exactly what I needed to start really understanding how CSS worked. I've learned a lot since I took the course just from helping out in the forums, but the foundation this course provided was key to making that learning "stick."

    Best of luck with your site!

  19. okay it looks like i will have to figure out how to fix the menu problem on the smartphone. thanks for your help with everything else tho!

  20. Actually, I have one more idea. Try changing this line in site.branding

    background-size: cover !important;

    to this:

    background-size: 100% !important;

  21. thx liz i will try this later a little later today!

  22. i made the change that you suggested and it solved some problems but added new ones. They dont call it cascading for nuttin'.

    i think part of the problem is the gigantic size of the post titles that is throwing everything off on a smartphone screen.

    so your change made the entire header visible but now it looked tiny in comparison to the now gigantic looking post titles. it is a matter of perspective, so either i override the theme's default size title after a media query for smartphones or just stick with "cover" and live with with part of the header not being visible.

    another thing that happened is that the slider kind of went of of whack and appear in the middle of the menu options which now suddenly appeared out of nowhere.

    as an aside, it is quickly becoming apparent that this rudimentary editor can quickly get out of hand. there should be some way to create files that address different aspects of what one is trying to do, and keep related things together each in its own file, then just do Includes like you do in regular programming. i can see how this Editor For Dummies approach can quickly become impractical, and I certainly wish there were a syntax checker, and missing element finder, etc, in other words a regular editor, without one having to go outside of the WP environment to parse the text for errors.

    Moreover, I find that not having inline debugging to be a problem, as I would like to step through the execution while in WP, and see the problems as they occur, and fix them on the fly. I realize I can do this outside of the WP environment using the Chrome dev tools etc, but you have to keep going in and out of the WP env and this is rather clunky.

    Moreover, I cannot seem to find anywhere where it officially specifies what in the CSS3 specification is supported, and what isn't so sometimes when you get that blank stare from the WP preprocessor, that is to say, when you write code and nothing happens, you have no idea if
    a) it is a syntax error
    b) a semantic one
    c) an external file is missing or referenced incorrectly
    d) or you are trying to use css3 functionality that is unsupported

    what I am trying to do with this blog is create a nice and simple retail catalog blog, one that can flip though pages and pages with beautiful images without the use of js. I found example code that does this correctly without the use of js, but when I port it to WP, and make appropriate but simple mods, nothing happens, and i have no idea why.

    This is probably due to my own inexperience, although I am slightly familiar with programming basics in languages such as C or even C++, but also, I think, and to be fair, it is also a function of a possibly deliberate decision on the part of WP to keep this editor very simple and with a small footprint, as it where.

    So I am plan out of luck trying to quickly isolate why it is my functionally crucial CSS3 driven catalog does not work. I shall post the relevant code it in the CSS section... where everyone can see it and maybe tell me why this does not work. that would be really helpful.

    as for the smartphone issue, I am going to have at some point do media queries but this is difficult to do all this when one is not a programmer and also trying to run a startup retail biz!!!

    at any rate, this is how it is, and I really do appreciate all your help. thank you, liz.

Topic Closed

This topic has been closed to new replies.

About this Topic