[Resolved] Sticky Posts Customization

Home Forums Support [Resolved] Sticky Posts Customization

Home Forums Support Sticky Posts Customization

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #623471
    Mr McMarry

    Hey Guys:

    I want to edit the sticky class in the sticky post I want a trending icon with a grey background on the top right corner.

    we can take this as a demo : here

    and those new and hot label on top menu and etc

    #623709
    Tom
    Lead Developer
    Lead Developer

    You should be able to use a pseudo selector with the standard sticky class. Can you make one of your posts sticky so I can give you some example code?

    #623725
    Mr McMarry

    ok

    #623853
    Tom
    Lead Developer
    Lead Developer

    This should be a good starting point:

    .post.sticky:before {
        content: "";
        width: 50px;
        height: 50px;
        background: #ddd;
        border-radius: 50%;
        display: block;
        position:  absolute;
        top: 0;
        left: 0;
        visibility: visible;
        font-size:  inherit;
        line-height: 50px;
    }
    
    .post.sticky {
        position: relative;
    }

    Then you would put whatever text/icon in the content: "" area.

    #623979
    Mr McMarry

    and those top menu labels ? btw it worked perfect

    #624028
    David
    Staff
    Customer Support

    OK, using their method:

    Edit the navigation label for that menu item and add span tag for the label like so.

    Menu title<span class="label">New</span>

    and then this CSS:

    .main-navigation .label {
        position: absolute;
        z-index: 3;
        top: 0;
        right: -15px;
        padding: 0 4px;
        color: #fff;
        letter-spacing: 1px;
        font-size: 8px;
        border-radius: 2px;
        height: 12px;
        line-height: 12px;
        -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .3);
        box-shadow: 0 0 2px rgba(0, 0, 0, .3);
        background-color: #00a256;
        text-transform: uppercase;
        font-weight: 700;
    }
    #624252
    Mr McMarry

    Can i have that sticky post same as the menu label so that i can add trending categories and alt text ?

    Thank you David and Tom for helping.

    #624396
    David
    Staff
    Customer Support

    I am a little unclear as to what you mean. Can you explain a little more or provide an example for us to be clear.

    #624579
    Mr McMarry

    Let’s move over it’s not that necessary.

    Help me with this : Here

    i want to change that text and want to change all text like this.

    #624679
    David
    Staff
    Customer Support
    #624707
    Mr McMarry

    Got it ๐Ÿ™‚ ๐Ÿ˜›

    Ok as you can see in left sidebar of my any posts there is night mode which dont work in internet explorer so i want to disable it with this code which i put in funtion.php

    Want to remove that Night mode feature in Internet Explorer Global Versions.

    code:

    #borderless_size {
    	width:100%; height:70px;
    }
    
    .borderless_size {
    	display: none;
    }

    Java:

    <!--[if IE]>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    $('#borderless_size').addClass('borderless_size');
    });
    </script>
    <![endif]-->

    Article: https://stackoverflow.com/questions/3670138/how-to-detect-ie7-with-javascript-or-jquery-and-add-a-class-to-div

    #624900
    David
    Staff
    Customer Support

    That script needs to be enqueued by your child theme function file or code snippet. Alternatively you could use GP Hooks > WP_footer.

    #624910
    Mr McMarry

    its not working

    #625078
    David
    Staff
    Customer Support

    I am not sure about that script, its outputting as a comment and my IE machine is down at the moment. There is an alternative script provided on that link, might be worth investigating that method.

    #625094
    Mr McMarry

    Also used

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