• Resolved faceyourfearuk

    (@faceyourfearuk)


    I’ve removed the search box from the right-hand side of the header and I’d like to replace it with an image (the cost and duration of the course). I thought about copying and realigning the code for my logo but it’s a smart widget, I think.

    Would anybody be able to tell me the code that I would need to insert please? https://173.254.28.95/~faceyour/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Michael

    (@alchymyth)

    Thread Starter faceyourfearuk

    (@faceyourfearuk)

    I’m using the Site 5 Webfolio theme. I’d imagine I’m just missing a short, generic piece of code. Please let me know if you need any more information.

    Michael

    (@alchymyth)

    have you tried to add the imgage code into the same location where you have removed the searchbar code?

    general linked image html code:

    <a href="https://linkurl.com"><ing src="https://imageurl.jpg" /></a>

    https://www.w3schools.com/tags/tag_img.asp
    https://www.w3schools.com/tags/tag_a.asp

    Thread Starter faceyourfearuk

    (@faceyourfearuk)

    Thanks for that. I think what has confused me is that the rest of the code for the header doesn’t seem to reference a file. For example:

    #logo {
    
    	position:absolute;
    
    	top:2px;
    
    	left:0px;
    
    	color:#FFF;	
    
    }
    
    #logo a img{
    
    	border:none;
    
    	vertical-align:middle;
    
    	margin-right:20px;
    
    }
    
    #logo a {
    
    	font-size:40px;
    
    	font-weight:bold;
    
    	color:#ddd;
    
    }
    
    #logo h1 {
    
    	margin:0;
    
    	padding:0;
    
    	font-weight:bold;
    
    }
    
    #logo a:hover {
    
    	text-decoration: none;
    
    }
    
    #logo span {
    
    	font-size:11px;
    
    	padding-top:8px;
    
    	text-transform: uppercase;
    
    	color:#888;
    
    	display:block;

    Maybe I need to do what you suggest but reference the library, like this:

    #site5top a {
    
    	display:block;
    
    	width:197px;
    
    	height:22px;
    
    	text-indent:-9999px;
    
    	background:url(library/images/site5_top.png) 0 0 no-repeat;
    Michael

    (@alchymyth)

    what you posted is all css code;

    you will need to edit header.php of your theme to add the image.

    Thread Starter faceyourfearuk

    (@faceyourfearuk)

    I’ve inserted the code:

    <img src="url(library/images/image3037.png)"  width="95" height="67" position:absolute; top:2px; right:0px;>

    A box has appeared on the website but I haven’t referenced the image properly because it’s coming up with a cross. I also haven’t positioned it correctly, since it’s high in the top left instead of above the menu on the right.

    Thread Starter faceyourfearuk

    (@faceyourfearuk)

    I’ve figured out the path for the file. I just need to sort out the alignment now, thanks.

    Thread Starter faceyourfearuk

    (@faceyourfearuk)

    Would you have any idea how I could align the two images? I’ve tried a few things but the image doesn’t move vertically with any of them.

    Michael

    (@alchymyth)

    can you specify how you want the right image to be aligned?

    at the moment, it is at the right, at the top, so the yellow writing looks centered vertically.

    Thread Starter faceyourfearuk

    (@faceyourfearuk)

    I added some extra space on the image itself to pad out the top. That’s resolved now, thanks.

    I’d like to add in a drop down menu but the default has a high transparency meaning that the slider shows through. I can’t see anywhere in the code to change that. Should I start a new thread for this?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Adding image to template header’ is closed to new replies.