WordPress.org

Ready to get started?Download WordPress

Forums

want to add small image to the left of my "site title". Theme: Manifest 1.01 (28 posts)

  1. cielle
    Member
    Posted 3 years ago #

    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

  2. jack randall
    Member
    Posted 3 years ago #

    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.

  3. lockettpots
    Member
    Posted 3 years ago #

    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

  4. cielle
    Member
    Posted 3 years ago #

    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...

  5. lockettpots
    Member
    Posted 3 years ago #

    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
    }
  6. cielle
    Member
    Posted 3 years ago #

    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!

  7. jack randall
    Member
    Posted 3 years ago #

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

  8. cielle
    Member
    Posted 3 years ago #

    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!

  9. jack randall
    Member
    Posted 3 years ago #

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

  10. lockettpots
    Member
    Posted 3 years ago #

    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

  11. cielle
    Member
    Posted 3 years ago #

    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!

  12. cielle
    Member
    Posted 3 years ago #

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

  13. cielle
    Member
    Posted 3 years ago #

    now, i get what backticks are!

  14. jack randall
    Member
    Posted 3 years ago #

    get rid of the / after

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

    and before "title

    and see if that helps...

  15. cielle
    Member
    Posted 3 years ago #

    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... :(

  16. lockettpots
    Member
    Posted 3 years ago #

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

  17. cielle
    Member
    Posted 3 years ago #

    i got rid of the / you suggested and it is still not working...

  18. cielle
    Member
    Posted 3 years ago #

    yes of course lockettpots, thank you so much for your help... enjoy your meal! and thank you theotherlebowski as well!

  19. jack randall
    Member
    Posted 3 years ago #

    you may have been right earlier, try

    h1.vcard .author { etc...}

    you may need to be more specific with how deep your going into the element.

  20. lockettpots
    Member
    Posted 3 years ago #

    This worked on your site put at the end of your style.css file

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

    The problem is your image is much too big and you are only seeing the white bit at the top. The image needs to be less than 38px high because that is the approximate size of your site title

  21. cielle
    Member
    Posted 3 years ago #

    thank you theotherlebowski, i tried what you suggest, it is still not working and it is very frustrating...

  22. cielle
    Member
    Posted 3 years ago #

    oh that is brilliant Locketpotts!! I think this is going to work, silly me, blushing, thank you, will get back to you asap, hopefully with great news!

    xx

  23. cielle
    Member
    Posted 3 years ago #

    YAY, that worked, thank you so much! Big hug and kiss ♥, you are brilliant and such a sweety to help me...

    Now i will just play around with it as you suggested above, forgive my ignorance but if i wanted to move the heart along either to the left or the right how would i do that?

    xxx

    thank you also theotherlebowski for your help and interest...

  24. lockettpots
    Member
    Posted 3 years ago #

    Instead top and left (equals 0px 0px) use values (10px 10px for example)

    the first value moves it right and the second one moves it down.

    you can't move it to left because it would disappear out of the H1 'box' but if you add padding-right to the rule it will move the title to the right giving the impression that the heart has moved left

  25. cielle
    Member
    Posted 3 years ago #

    brilliant, thank you, i will look into that and get back to you if I may if i have any problems... I shouldn't do...

    I need to eat some food now myself... I hope you had enough to eat and enjoyed it or are enjoying it yourself...

  26. lockettpots
    Member
    Posted 3 years ago #

    Sorry it should be padding-left but I don't think this will work.

  27. lockettpots
    Member
    Posted 3 years ago #

    OK

    padding-left works
    try padding-left: 50px;

    So the whole rule now looks like

    h1.vcard{
       background:transparent url('http://heartonmysleeve.com/wp-content/themes/manifest_v1.1/images/red-heart.png') no-repeat top left;
       padding-left: 50px;
    }
  28. cielle
    Member
    Posted 3 years ago #

    brilliant, thank you so much, that looks perfect... I was playing around with all sorts of options but this one that you suggest now looks best finally I think...

    You are very sweet to help me so much... xx

Topic Closed

This topic has been closed to new replies.

About this Topic