Site logo

Archived topic

Sticky Posts Customization

23 replies · Started by Mr McMarry on July 14, 2018

Viewing posts 1–15 of 24

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

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?

ok

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.

and those top menu labels ? btw it worked perfect

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

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.

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.

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.

That link is 404ing

Got it :) :P

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

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

its not working

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.

Also used

This archived topic is closed to new replies.