Adding image to my header (State of Mine theme)

  • Resolved Terry

    (@tjhoyt)


    13 years, 8 months ago

    I would like to add a couple of small images to my header. Can anyone help with the code? I know CSS and HTML, but not PHP.

    This is my home page – what I’d like to do is add a small image on the left and right of the center.

    https://www.practicalphilosophy.net

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

  • no need to touch php in this case.

    with your html knowledge you should be fine to locate a suitable location in header.php to add your html image code.

    just wondering where the stray css code comes from (?):

    <div id="header">
#headerimg { background: url('https://www.practicalphilosophy.net/wp-content/themes/state-of-mind/images/desertimage.jpg') no-repeat ;}

    something like this might work:

    <div id="header">
<img style="float:left; margin:30px 0 0 30px;" src='https://www.practicalphilosophy.net/wp-content/themes/state-of-mind/images/desertimage.jpg' />
<img style="float:right; margin:30px 30px 0;" src='https://www.practicalphilosophy.net/wp-content/themes/state-of-mind/images/desertimage.jpg' />

    change the image urls, and possibly extract and transfer the styles into style.css of your theme.

    Thread Starter Terry

    (@tjhoyt)

    Thanks very much for your help. I incorporated your code into the header in the <body> section, as follows. It’s been about four years since I’ve worked in CSS, and I don’t think I understood what you meant by “extract and transfer the styles into style.css of your theme”. I do see the “placeholders for the image, but not the image itself. They are in the “image” folder. You can look again at https://www.practicalphilosophy.net

    Thank you again – code follows.

    <body><div id=”wrapper”>

    <div id=”header”>
    <img style=”float:left; margin:30px 0 0 30px;” src=”images/desertimage.jpg” />
    <img style=”float:right; margin:30px 30px 0;” src=”images/platoarist.jpg” />

    <h1>“><?php bloginfo(‘name’); ?></h1>
    <div class=”description”>Philosophy for the good of the individual and society<?php bloginfo(‘description’); ?></div>
    <div class=”description”>Terence Hoyt, PhD, Philosophy, MA Economics, New Orleans, LA<?php bloginfo(‘description’); ?></div>

    </div>

    what you meant by “extract and transfer the styles into style.css of your theme”.

    as you atarted your question with this:

    I know CSS and HTML,

    i will not elaborate on my suggestion. basic css knowledge is a prerequisite for customizing wordpress themes.

    please use absolute file paths to the images – relative paths will not work in this situation.
    wordpress helps with the bloginfo() function to generate these paths, but you could also just use the ordinary https://www.practicalphilosophy.net/wp-content/themes/state-of-mind/images/desertimage.jpg absolute file paths:

    <img style="float:left; margin:30px 0 0 30px;" src="<?php boginfo('stylesheet_directory'); ?>/images/desertimage.jpg" />
<img style="float:right; margin:30px 30px 0;" src="<?php bloginfo('stylesheet_directory'); ?>/images/platoarist.jpg" />
    Thread Starter Terry

    (@tjhoyt)

    I solvel this. Thank you again! Yes – I realizd the PATHS were the problem.

    You can see if you’d like. Thank you for your time.

    practicalphilosophy.net

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding image to my header (State of Mine theme)’ is closed to new replies.

Tags