WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] changeing cirlcles into hearts/diamonds (22 posts)

  1. reddbonetv
    Member
    Posted 4 months ago #

    hello, i have a few things i need help with.

    A. im trying to change the circles in this theme to hearts and diamond shapes but i have no idea where to start, im new to this and this is my first site im building on my own so bare with me. i have a child theme in place already, can someone help me please?

    this is the site i found the shapes on: CSS Shapes

    i would like them the heart and cut diamond shape, like one heart then one diamond and so on.

    here is my site: my site

    B. how do i center header and make it fit a larger image, like a banner size.

    C. how do i make width of page smaller and add a background?

    D. how do i make the words only appear over the circles when hovered on?

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    The easiest option you have to change the shapes is to create an image of the shape, then apply that through a background to each <article> element.

  3. reddbonetv
    Member
    Posted 4 months ago #

    can you please explain in detail what you mean ... as i stated above im new to this so your speaking in tongues to me right now. lol thanks it will be much appreciated.

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    Which part are you stuck with, creating the image?

  5. reddbonetv
    Member
    Posted 4 months ago #

    yes, do you mean like edit the photo with photoshop into a heart/diamond shape? and when you say "apply that through a background to each <article> element." what do you mean?

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    do you mean like edit the photo with photoshop into a heart/diamond shape?

    Yeah create them at a ratio of 360x360 so that they can be increased in size if necessary without turning pixelated (in case someone increases the text size).

  7. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    Once you've made the images create an "img" folder in your Child Theme and put your images in there.

    Then you can reference them in your Child Theme style.css file, e.g:

    .hentry.no-thumbnail {
     background: url(img/heart.png) no-repeat;
     background-size: cover;
    }
  8. reddbonetv
    Member
    Posted 4 months ago #

    okay so i've made the image into the desired shape and i made a image.php file in my child theme.

    now i've copied and paste the code you gave me above but nothing happened... im i suppose to add something else?

  9. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    The above code was an example.
    Are you sure you mean you created a image.php file?

  10. reddbonetv
    Member
    Posted 4 months ago #

    yes i created a image.php file in my child theme.

  11. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    The image should be of a file type of "png", "jpg" or "gif", and not "php".

    That image should go in your Child Theme, in a folder named "img" (create that folder if you haven't it).

  12. reddbonetv
    Member
    Posted 4 months ago #

    yes, that's what i meant sorry about that, i made a png image file and made a image.php folder in my child theme. or is it just img?

  13. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    or is it just img?

    It's this.

    The folder should be named "img".

  14. reddbonetv
    Member
    Posted 4 months ago #

    ok i've done that ... what code would i use to change the circles into hearts and diamonds?

  15. reddbonetv
    Member
    Posted 4 months ago #

    i figure it out. ( :

  16. reddbonetv
    Member
    Posted 4 months ago #

    i figured it out but the only thing is wrong is the heart doesn't not hold the whole shape... any tweak i can add?

  17. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    Add this:

    .blog .hentry a .attachment-post-thumbnail {
     border-radius: 0;
     -webkit-border-radius: 0;
    }
  18. reddbonetv
    Member
    Posted 4 months ago #

    at the end of style.css file?

  19. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    Yeah :) Your Child Theme style.css file.

  20. reddbonetv
    Member
    Posted 4 months ago #

    thanksssssssss!!!!

  21. reddbonetv
    Member
    Posted 4 months ago #

    wait .. the shape still changes when you hover over it, the circle still shows. ):

  22. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    Instead of this:

    .blog .hentry a .attachment-post-thumbnail {
     border-radius: 0;
     -webkit-border-radius: 0;
    }

    Try this:

    .blog .hentry a:hover img,
    .blog .hentry a .attachment-post-thumbnail {
     border-radius: 0;
     -webkit-border-radius: 0;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.