Simple way to change the kubrick’s header image.

  • Hi WP community,

    After wasting like 2 hours trying to figure out what was happening when i have changed the header image file by just renaming the CSS file, i have found an easy way to change it without issues.

    To fix the issue, i’ve created a new header-img.php file with the lines bellow:

    <?php
    header(“Location: header_filename.jpg”);
    ?>

    PS: The script header-img.php and the image file needs to be in ./wp-content/themes/theme-name/images/ folder.

    To hide the WP Blog’s title and description, i have put a new atribute in the div #headerimg (style.css):

    #headerimg {
    display: none;
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }

    Hope it help you all.

    Romulo B

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi, how do you create the file.

    I am still struggling to change my header image on the kubrick default.

    It does not load up when I change image name. File uploaded to theme images.

    Thanks

    Thank you very much …. its work perfectly fine…. ??

    please tell me 1 more thing how can i put sliced image in my header, it contains buttons with links.i save this sliced image in “httml and images”…

    Hey, thanks… I’m a very basic user and this really helped. Now I can see the .png I wanted, but another problem rose… It is not clickable so I cannot go back to the main page. So how do I do it for the image to be clickable and linkable?

    cheers.

    someone just answered this on another forum here

    replace the

    <div id=”logo”>

    with

    <div id=”logo” onclick=”location.href=’https://www.yourlinkhere.com/&#8217;;” style=”cursor: pointer;”>

    That will make the entire top section (the logo div) of your site go to wherever you set the link to.

    Hey not sure if you can help. But I did everything I want. Yet I would like to addm links to the header. For example upload a header with words like home, forecast, reports, etc, and be able to click them. Any ideas or ways around this?

    https://www.northeastsurfing.com/header.html

    I’m not sure if they can help, but I know that I can tell you a few things about what you want to do:

    1) What you want – a banner/header with clickable spots that link to places like home, forecast, etc – is called an image map

    2) What you need to do to insert the coding from the page that you just linked to, which is:

    <img src="/images/general/nes_header.gif" width="820" height="200" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
  <area shape="rect" coords="481,173,540,198" href="https://www.northeastsurfing.com/surfshops.htm" />
  <area shape="rect" coords="743,173,817,198" href="https://www.northeastsurfing.com/contact.htm" />
  <area shape="rect" coords="687,173,742,198" href="https://www.northeastsurfing.com/media.htm" />
  <area shape="rect" coords="627,173,686,198" href="https://www.northeastsurfing.com/surfspots.htm" />
  <area shape="rect" coords="542,173,624,198" href="https://www.northeastsurfing.com/surfschools.htm" />
  <area shape="rect" coords="197,173,274,198" href="https://www.northeastsurfing.com/surfreports.htm" />
  <area shape="rect" coords="425,173,480,198" href="https://www.northeastsurfing.com/links.htm" />
  <area shape="rect" coords="276,173,327,198" href="https://www.northeastsurfing.com/cams.htm" />
  <area shape="rect" coords="330,173,423,198" href="https://www.northeastsurfing.com/education.htm" />
  <area shape="rect" coords="1,173,50,198" href="https://northeastsurfing.com/" />
  <area shape="rect" coords="51,173,105,198" href="https://www.northeastsurfing.com/eventsnews.htm" />
  <area shape="rect" coords="107,173,195,198" href="https://www.northeastsurfing.com/forecast.htm" />
</map>

    into where your header image typically would go. Instead of being inserted as a background image where the image map can’t and won’t work, the header image will be an embedded image (like an image that shows up in a post you write) which will allow the header image work as an image map.

    3) Because your image map is not terribly complicated (the navigation/link bar is directly underneath and the shapes are all rectangular), I believe that the same effect could be achieved using plain old CSS, which will save both load time and perhaps, additional hassle.

    —

    Now, how exactly you do #2 depends on a few factors – the most important one being ‘Which theme are you using for your WP site?’

    Depending on how the theme author coded for the header to appear, what you’ll have to do to insert your own header where it needs to go will be different.

    So.

    What theme are you using? Kubrick? Something else? Got a link?

    Thanks for the information. If I could get it to work css would be better, yet if your first idea works as well that is fine. Let me know. I am using Kubrick. I am designing two differnt areas of wordpress, both links are below. Both are for different subjects. news / reports

    https://northeastsurfing.com/reports/

    https://northeastsurfing.com/news

    Hi,

    I changed the header-ing.php file to:
    <?php
    header(“Location: header_filename.jpg”);
    ?>
    I created a new kubrickheader.jpg image, but it doesn’t show. The header is blank now. I am wondering if you meant to add the code some place in the file instead of replacing the whole thing with it? (which is what I did)

    Could anyone clarify and help?

    Thanks in advance.

    Yol

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Simple way to change the kubrick’s header image.’ is closed to new replies.