• cielle

    (@cielle)


    I want to add a small loveheart, ( I already have the image, it will be just like the favicon i have added to my site already… ) to the left of my “site title”… I am very new at this and need step by step help please! but i learn fast and have some htlm and css experience…

    the website we are talking about is http://www.heartonmysleeve.com and i want to add a red loveheart exactly to the left of the title…

    I hope i am being clear, thank you so much in advance for your help…

    Warm Wishes,

    Xenia

Viewing 15 replies - 1 through 15 (of 27 total)
  • jack randall

    (@theotherlebowski)

    right next to the website name at the top of the page? if so you’d be best off creating a logo image with the site name and the love heart image all in one.

    lockettpots

    (@lockettpots)

    Or you could use a heart image as a background to your H1 tag

    h1.vcard{
       background-image: url('path/to/your/little/heart/image') no-repeat top left;
    }

    to save having title as an image. You may have to add some padding-left to get it to suit

    Thread Starter cielle

    (@cielle)

    theotherlebowski, thank you for your reply, you are perhaps right and i may have to do that indeed but i was hoping for a simpler solution perhaps…

    lockettpots, thank you, are you saying i should add that code to the .css file? It also doesn’t have a h1.vcard value already but i guess you are saying i can just add that… I will try and let you know…. I am wondering what the chances are that it will line up correctly… I hope it will work…

    thank you both for your help so far…

    lockettpots

    (@lockettpots)

    Yes just add the h1.card rule to your stylesheet. You can tweak the position by using something like

    h1.vcard{
      background-image: url('path/to/your/image') no-repeat 2px 2px;// Try different values here
      padding-left: 5px; //adding some breathing space between the heart and the tex
    }
    Thread Starter cielle

    (@cielle)

    Hey Lockettpots, i did add that to my style sheet and uploaded the image to the “images” folder of the theme but it is not showing up at all…

    When you say ‘path/to/my/image’ , I am not sure if i have put the path in correctly…

    This is what i added to my style sheet:

    h1.vcard{
    background-image: url(‘/images/red-heart.png’) no-repeat top left;
    }

    and as said, the .png image is uploaded to the “images” folder of my theme…

    Thank you!

    jack randall

    (@theotherlebowski)

    try getting rid of the 1st / from the image path…

    Thread Starter cielle

    (@cielle)

    also, this text in in my header.php:

    <h1 class=”vcard author”>/” title=”Home” class=”fn”><?php bloginfo(‘name’);?></h1>

    Do i need to do something with this as well or leave it as is?

    thank you!

    jack randall

    (@theotherlebowski)

    it seems to be missing something… can you copy and past the whole line and paste into backticks?

    lockettpots

    (@lockettpots)

    You may need the full path to the image something like

    http://heartonmysleeve.com/wp-content/themes/yourthemename/images/red-heart.png

    depending on your directory structure

    Thread Starter cielle

    (@cielle)

    thank you, did that, it is still not working…

    Could you kind people please check the css, it is exactly this:

    h1.vcard{
    background-image: url(‘images/red-heart.png’) no-repeat top left;
    }

    should it be “h1.vcard author{” etc….. ? and do i need commas or something between all these elements?

    The header php code is exactly

    <h1 class=”vcard author”>/” title=”Home” class=”fn”><?php bloginfo(‘name’);?></h1>

    ( don’t know why it didn’t paste fully above! )

    THANK YOU!

    Thread Starter cielle

    (@cielle)

    <h1 class="vcard author"><a href="<?php echo get_option('home'); ?>/" title="Home" class="fn"><?php bloginfo('name');?></a></h1>

    Thread Starter cielle

    (@cielle)

    now, i get what backticks are!

    jack randall

    (@theotherlebowski)

    get rid of the / after

    <?php echo get_option('home'); ?>

    and before “title

    and see if that helps…

    Thread Starter cielle

    (@cielle)

    i just did this

    h1.vcard{
       background-image: url('http://www.heartonmysleeve.com/wp-content/themes/manifest_v1.1/images/red-heart.png') no-repeat top left;
    }

    and done nothing with the header.php and it is still not working… πŸ™

    lockettpots

    (@lockettpots)

    OK
    Can you leave it with me for a little while while I eat and I’ll get back to you.

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘want to add small image to the left of my "site title". Theme: Manifest 1.01’ is closed to new replies.