• I have the Portfolio Press theme for my site. My header is plain black with my title to the left and menu buttons on the right.

    How do I had a jpg or png image to the left of my title that is already there?

    I am somewhat familiar with html and css and am aware I will probably have to use those avenues.

    Thanks.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi I don’t have an answer, but I would like to know the same thing.

    Installed portfolio press and trying make custom header with image embedded into it, but don’t want to use custom logo as it would replace my current written logo.

    For Twenty Eleven I believe it’s file functions.php that needs to be edited, Portfolio press does not have such definitions in it.

    I wanted to do this too… I haven’t had a chance to try, and I’m far from a CSS expert, but I am guessing that if you go into the style.css and edit the spot for the header background color to use an background image of your choosing, it should work. Here’s where I found to edit the header bg color:

    /* Branding */
    
    #branding {
    	position:relative;
    	display:block;
    	background:#900;
    	padding:30px 0 30px;

    And then I think in css the way to use an image would be something like this:

    background:#900 url(images/IMAGE_NAME.png);

    …and the image would go in the “images” folder inside the main theme folder.

    So far this is the only solution I’ve been able to find. I haven’t had a chance to try it yet because I haven’t created an image for the header yet – but if any of you have a chance to test it out, I’d love to hear your results.

    Tested. And works. I’ve successfully put a background image behind my header this way (simple gradient to test it out, nothing to write home about). With a little ingenuity, I should probably be able to get some sort of header image up there if I desire. Or at least something that looks a little bit more customized.

    I’d love to see/hear if any of y’all come up with something different!

    Mattchee, I can’t get this to work.

    Did you do this exactly:

    #branding {
    	position:relative;
    	display:block;
    	background:#900;
    	padding:30px 0 30px;
            background:#900 url(images/IMAGE_NAME.png);

    (Of course, replacing image path)

    I wonder why it won’t work for me…can you give a link to your site so I can Firebug it? Thanks.

    Hi Rat Fink,

    I don’t think I explained what I did as clearly as I thought. Instead of adding that whole line at the bottom, I meant to modify the line with the background color info on it.

    Here’s what mine looks like:

    #branding {
    	position:relative;
    	display:block;
    	background:#900 url(images/IMAGE_NAME.png);
    	padding:30px 0 30px;
    }

    See what I mean? The file path as I set it up here (exactly as shown above), has the background image located in the “images” folder of the portfolio press theme. So it’s located at:

    YOURDOMAIN.COM/wordpress-content/themes/portfolio-press/images/IMAGE_NAME.png

    I think if you want to have it elsewhere, you might have to write out the full url. IE – if it’s at “YOURDOMAIN.COM/IMAGES/IMAGE_NAME.png” you’ll have to put “https://www.YOURDOMAIN.COM/IMAGES/IMAGE_NAME.png” in place of “images/IMAGE_NAME.png”… if that makes any sense. I would just throw it in the “images” folder of the theme, at the very least to test it out, to keep it simple.

    Let me know if that works for you.

    Excellent, I will try this — thank you for responding!

    Hi Mattchee,

    I can’t seem to get this to work either. I’ve tried using the whole URL and still nothing shows. You said that I should put it in the ‘images’ folder of the theme – I just uploaded it to the Media > Library. Is there a separate images folder I have to put it in to get it to work? I copied the code you created exactly (with my URL of course) and I still can’t seem to get it to work ??

    Thanks!

    I haven’t personally tested out using the entire URL, I just assumed it should work.

    I would try putting it in the images folder inside the portfolio press theme folder (/wordpress-content/themes/portfolio-press/images/) and then use the CSS code as I show above, with your image name of course. And not try using the full URL, and see how that works. Use the code in my response to Rat Fink.

    Let me know how that works out for you!

    Hi Mattchee –

    Thanks for getting back to me. Do you know where I find the Images folder in the Portfolio Press theme? Is it in my dashboard? Sorry – I’m really lost.

    You can’t do it through your dashboard. You will have to access your hosting account using FTP.

    Somewhere on there should be a folder that holds your WordPress stuff (all set ups are different). If you can find a folder called “wordpress-content” (or sometimes it’s wp-content). Within that folder is a folder called “themes”. And within that folder is a folder called “portfolio-press”. Within THAT folder is a folder is a folder called “images” and that is where you want to put your image.

    If you do that in conjunction with the code I used inky response to rat fink, you should be good to go.

    It’s worth mentioning for everyone here, that if you ever upgrade portfolio press this will probably get wiped out. It’s really simple to put back in place, thoug, as long as you make sure and save a backup copy of your image. most people would probably recommend using a child theme, but as I qualified in my initial posts, I’m not an expert or a seasoned coder in any way (just an artist trying to tweak this theme to do what I want). I don’t really know how to do child themes, much less give anyone tips on it,

    Thanks Mattchee. I was thinking about it later and I figured that it was probably something I had to do in my hosting account. Thanks so much for all of your help – much appreciated!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to add picture in Portfolio Press header.’ is closed to new replies.