[Resolved] Sticky Posts Customization

[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

[Tom]

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?

[Mr McMarry]

ok

[Tom]

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.

[Mr McMarry]

and those top menu labels ? btw it worked perfect

[David]

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;
}

[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.

[David]

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.

[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.

[David]

That link is 404ing

[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

[David]

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

[Mr McMarry]

its not working

[David]

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.

[Mr McMarry]

Also used

[Author]

Posts