Support » Theme: Spun » Manipulating circle text before/after hover

  • Resolved ericgrosz


    Hello all,

    I am having trouble figuring out what to change on my child theme to achieve the folowing goal:

    When a circle on the home page is not being hovered on, display only the first letter of the post title. This letter must be centered.

    When a circle on the home page is being hovered on, display the whole post title.

    Bonus: on hover, fade-out the text from the first phase and fade-in the text from the second phase.

    An image of what I have in mind: Link

    I took a look at the content-home.php file, but I’m not quite sure how this part interacts with the style.css file, if at all. I feel I’m on the right track. If this exact topic has been discussed already, I would appreciate it if you could shoot me a link to that thread.

    Thanks again!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Andrew Nevins


    Forum moderator

    Do you have a “js” folder in your Child Theme?

    Yup, I do!

    Moderator Andrew Nevins


    Forum moderator

    What’s in it?
    Also do you have a functions.php file, what’s in that?

    I haven’t altered anything in the js folder or in the functions.php file.
    However, my child theme now has both a js folder and a functions.php file (I’m adding files/folders to my child theme as we go, since I’m assuming that these files will be altered).

    the js folder contains 3 files: html5.js, keyboard-image-navigation.js, and toggle.js.

    the functions.php file has no new functions.

    Moderator Andrew Nevins


    Forum moderator

    Edit: Pastebin updated again.

    1. Create a new file in your “js” folder and call it “manipulate-circle-text.js”.
    2. Edit that “manipulate-circle-text.js” file you just created and add all of the code from this PasteBin page:
    3. Save that file
    4. Edit your “style.css” file in your Child Theme
    5. Add this style to your “style.css” file (of your Child Theme):
      .otherChars {
       position: absolute;
       left: -9999em;
    6. Edit your functions.php file of your Child Theme
    7. In your functions.php file (of your Child Theme) add this function:
      function mainScripts() {
       wp_enqueue_script( 'manipulateCircleText', get_stylesheet_directory_uri() . '/js/manipulate-circle-text.js', '', '1.0', true );
      add_action( 'wp_enqueue_scripts', 'mainScripts' );
    8. Save that file.

    I followed your steps and live previewed the modifications – just wanted to confirm that this method runs very well!
    Thank you so much for the help, Andrew. I really appreciate your work.



Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Manipulating circle text before/after hover’ is closed to new replies.