StudioPress

Forum navigation

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

Adding a triangle (css shape) to centric's home

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.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding a triangle (css shape) to centric's home

This topic is: not resolved

Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 13, 2015 at 11:35 am #156106
    Remco Heijnen
    Member

    Hi,

    I'm developing a site for a client. The design must have some colored horizontal sections with triangles on the border bottom pointing to the next section, A sort of callout box or tooltip. I'm new to CSS shapes and trying to figure out if I can implement this there on the centric theme's homepage.

    Can anybody advise me or point me in the right direction?

    Thnx!

    Remco

    June 13, 2015 at 12:27 pm #156113
    Tom
    Participant

    Hi Remco,

    There are a number of ways to do this. This first tutorial uses buttons created with an icon font to place downward-pointing arrows in each home section of Centric to assist in navigation to each subsequent section.
    http://keypresswp.com/all-home-widgets-scrolling-centric-pro/

    You could substitute CSS triangles for the icon font items using CSS generated by pages like this (or Google for similar):
    http://apps.eky.hk/css-triangle-generator/

    (I am somehow not surprised to find that... ) There are CSS tooltip generators to ease this task as well! 🙂
    http://www.cssportal.com/css-tooltip-generator/

    (Links are boxed to avoid the StudioPress forum spamtrap.)

    Choose your next site design from over 350 Genesis themes.
    [ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

    June 13, 2015 at 1:02 pm #156119
    Remco Heijnen
    Member

    Hi Tom,

    Thnx for your reply. The tooltip generator is nice. That helped. In the meantime I placed some html within the front-page template and that gave the effect I wanted. I experimented on my own site...

    I'm there, next step: the finishing touch.

    grtz

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