• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

having a flip animation on the genesis logo

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › having a flip animation on the genesis logo

This topic is: not resolved

Tagged: animate, custom, Logo

  • This topic has 1 reply, 2 voices, and was last updated 5 years, 9 months ago by Victor Font.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 5, 2017 at 6:15 am #207349
    glenkg
    Participant

    Hi,

    I was wondering if I can put a flip animation on the genesis logo (the logo that you can choose under customizer within WordPress.

    This is the effect I would like to add if possible.. https://davidwalsh.name/demo/css-flip.php

    The code was also given with it here: https://davidwalsh.name/css-flip

    Now, I am not very good with the "how" and the "where", but I think the html has to be added to the header.php file, right?

    div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    	<div class="flipper">
    		<div class="front">
    			<!-- front content -->
    		</div>
    		<div class="back">
    			<!-- back content -->
    		</div>
    	</div>
    </div>

    I think the "flip-container" has to be changed in "custom-logo"? So where and how do I add this? in the function.php or the (copied version in the child theme of the header.php?

    Maybe one of you know and is willing to send me in the right direction with this, because I can't seem to figure it out.

    Thanks,

    Kevin

    June 5, 2017 at 7:02 am #207350
    Victor Font
    Moderator

    It's a little more complicated than it may seem. Logos in Genesis themes are added as background images to a link element. A background image does not respond to a hover effect. You have to move the image to the foreground and wrap it in a link. The only way to do this is writing custom code.

    This will get you started in the right direction: https://victorfont.com/genesis-seo-schema-site-logo/

    This has not been tested with Genesis 2.5 and it may need some tweaking. Good luck!


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble