Header

  • Author
    Posts
  • #136142
    kenwilkey
    Member

    Can I add a graphic to the header? I would like to use a large black space to the right of my logo and navigation bar and insert one graphic there. Is this possible? Thanks.

    Ken

    The blog I need help with is: (visible only to logged in users)

    #136152
    slobodanboba
    Theme Author

    You could use custom CSS code:

    #header {
        background-image:url("FULL_URL_TO_IMAGE");
        background-size: cover;
    }

    Change the FULL_URL_TO_IMAGE with the actual URL to the image ( you can upload in the WP media library ). The second rule ( background size ) is to make the image cover the entire width.

    You can also add this code to make sure the background behind the centered area ( logo + nav ) remains black:

    #header .wrapper {
        background: #000;
    }
    #136174
    kenwilkey
    Member
    Original poster

    Ok, I loaded the code in the CSS and added a URL to the image, it is not working properly, I see a portion of the graphic on each end of the header, and nothing else. All I want to do is put a graphic in the area to the right of the nav bar and logo that is currently a large black empty space.

    #136176
    slobodanboba
    Theme Author

    Can you send over the URL to the image/graphic you want to show, seeing it will help me understand how you want to show it on the page.

    #136177
    kenwilkey
    Member
    Original poster

    The graphic is being designed and not done yet. I used a graphic that was in the WP media library as a test. As I said, I could see a white bar on each end of the header but nothing else.

    Ken

    #136199
    slobodanboba
    Theme Author

    Hi Ken,

    Ok, so please ask the designer when the graphic is done to make a screenshot of the website and put the graphic on top of it where it’s supposed to be. That way I can know exactly what’s needed and we’ll sort it out.

    #136200
    kenwilkey
    Member
    Original poster

    Yes, will do. Should be soon.

    Ken

    #136408
    slobodanboba
    Theme Author

    Hi Ken,

    Just checking up to see if there’s any news on this.

    #136616
    kenwilkey
    Member
    Original poster

    Yes, hi I have the graphic and the screenshot. I will want to change the graphics and not use just one, so I will need to know how to do this. How do I attach the screenshot to this reply?

    Thanks.

    Ken

    #136617
    kenwilkey
    Member
    Original poster
    #136629
    slobodanboba
    Theme Author

    Hi,

    Looks more like a banner ad. Does it need to be clickable? If so then just a background image to the header won’t work out, so we’ll need to figure out a different solution.

    #136630
    kenwilkey
    Member
    Original poster

    Eventually I would like it to be clickable. For now if you can just tell me how to put the banner in the header that will be good. I would like the option of putting the banner there sometimes and not having a banner other times.

    #136668
    kenwilkey
    Member
    Original poster

    Will you be able to do this for me? Please let me know and let me know a date when you can complete.

    Thanks.

    Ken

    #136671
    slobodanboba
    Theme Author

    Hi,

    Sorry for the delay, it’s my birthday today so work is going a bit slower.

    Since it’ll eventually need to be clickable and also we need to avoid it overlapping with the logo it means that a background image won’t work out.

    I don’t think we’re allowed to make a specific area in the theme for ads since WordPress.com wants to handle those, you as a business account owner are probably allowed to add custom ads. So we’ll add an option that allows custom HTML in the area on the right of the logo. That will allow you to add the banner.

    The update will be submitted Wednesday morning and then goes through review by the WordPress.com team, will let you know as soon as it’s released and the HTML code you need.

    #136672
    kenwilkey
    Member
    Original poster

    Great news!

    And HAPPY BIRTHDAY!!

    I appreciate all your help.

    Many Thanks.

    Ken

    #136704
    slobodanboba
    Theme Author

    Thank you Ken.

    I’ve submitted the update, will let you know as soon as I hear back from the WordPress.com theme review team.

    #136712
    slobodanboba
    Theme Author

    Hi Ken,

    Haven’t heard back from them yet. Can you check WP admin > Appearance > Customize > Theme Options. Is there an option called “Header Custom Content”?

    #136713
    kenwilkey
    Member
    Original poster

    I did what you said but there is no “header Custom Content” option. All I see is “Slider Autoplay” “Slider Navigation” and “Featured Category”

    #136717
    slobodanboba
    Theme Author

    Yeah, still not reviewed/approved by the WordPress.com team. Will keep you informed.

    #136801
    slobodanboba
    Theme Author

    Got an answer, it was not approved ( they are a bit strict ). So let’s go with a different approach, with JavaScript since you can’t edit the PHP/HTML on a WordPress.com website

    You’ll need this plugin for JavaScript https://wordpress.org/plugins/custom-css-js/

    First the CSS:

    #header-custom-content {
    	overflow: hidden;
    	text-align: right;
    	padding: 10px 0;
    }
    
    #navigation {
    	clear: both;
    }

    And the JavaScript:

    The forum strips the HTML so here it is

    Replace LINK_URL and IMAGE_URL with the URLs you need. For the image just upload the image to the media library and use that URL.

  • The topic ‘Header’ is closed to new replies.