Pictorico – replace site title with an image

  • Author
    Posts
  • #2007686

    kerin2014
    Member

    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 needlepointlandstore.wordpress.com.

    #2007760

    lizthefair
    Staff

    That’s absolutely possible.

    This code will remove the the search box:

    .header-search{
        display:none;
    }

    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.

    #2007785

    kerin2014
    Member

    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

    https://needlepointlandstore.files.wordpress.com/2014/08/logo-with-white-background.png

    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[!

    #2007791

    lizthefair
    Staff

    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.

    .site-title{
        display:none;
    }
    .site-branding{
        height: 200px;
        width: 600px;
        max-width: 50% !important;
        background: url('http://needlepointlandstore.files.wordpress.com/2014/08/logo-with-white-background.png')!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!

    #2007809

    kerin2014
    Member

    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!!!!

    #2007810

    kerin2014
    Member

    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.

    #2007815

    lizthefair
    Staff

    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:

    .site-title{
        display:none;
    }

    to this:

    .site-title{
        opacity: 0;
    }

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

    .site-title{
        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.

    #2007817

    kerin2014
    Member

    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!

    #2007818

    lizthefair
    Staff

    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;
    }
    #2007864

    lizthefair
    Staff

    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.

    .main-navigation{
        clear:both;
        float:none !important;
        max-width: 100% !important;
        height: 50px;
        text-align: left !important;
    }
    .site-branding{
       min- height: 200px;
       max-width: 100%!important;
       float: none !important;
        background: url('http://needlepointlandstore.files.wordpress.com/2014/08/logo-with-white-background.png')!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.

    #2007869

    kerin2014
    Member

    i thought i would give something like this a shot

    .main-navigation {
    background-image: url(‘needlepointlandstore.files.wordpress.com/2014/08/npl-store-sign2.jpg’);
    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!

    #2007870

    lizthefair
    Staff

    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 :)

    #2007873

    kerin2014
    Member

    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!!!

    #2007879

    kerin2014
    Member

    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!

    #2007891

    lizthefair
    Staff

    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.

    #2007912

    kerin2014
    Member

    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.

    #2007913

    kerin2014
    Member

    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?

    #2007914

    lizthefair
    Staff

    If you want to learn more about doing your own CSS, I highly recommend this course: http://www.codecademy.com/en/tracks/web. 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!

    #2007916

    kerin2014
    Member

    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!

    #2007918

    lizthefair
    Staff

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

    background-size: cover !important;

    to this:

    background-size: 100% !important;

The topic ‘Pictorico – replace site title with an image’ is closed to new replies.