[Resolved] Post labels like this in GP possible?

Home Forums Support Post labels like this in GP possible?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1040154
    Philip

    Hello,

    the site wowhead.com is using those little “news category labels” in the upper left corner of their news posts. Is it possible to create something like this within GP?

    Thanks

    #1040246
    David
    Staff
    Customer Support

    Hi there,

    it would require some custom CSS and maybe some use of GP hooks. Do you have a site setup with post displaying category terms that we could take a look at? Then we could advise better

    #1040754
    Philip

    Hello,

    this is an old site for testing purposes with some posts added and the WP categories shown.

    http://www.philip-palzer.de

    #1041182
    David
    Staff
    Customer Support

    Real tricky but can you give the tests posts a featured image.
    Then in Customizer > Layout > Blog
    Set Featured image above title and Align Left. Then set featured image size so it sits to the side.

    Then i can take a look and see what can be done.

    #1052981
    Philip

    Hello, gave some of the example posts some test images.
    Thanks a lot!

    #1053049
    David
    Staff
    Customer Support

    Try this CSS:

    .separate-containers .inside-article {
        position: relative;
        overflow: hidden;
    }
    
    .separate-containers .inside-article .cat-links a {
        font-size: 16px;
        display: block;
        width: 200px;
        position: absolute;
        top: 100px;
        left: -25px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -ms-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
        background-color: blue;
        color: #fff !important;
        line-height: 50px;
        text-align: center;
    }
    #1053359
    Philip

    Hi David,

    this works like a charm. Thanks a lot!
    The GP-support is absolutely fantastic.

    #1053680
    David
    Staff
    Customer Support

    Awesome – glad to be of help

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.