Archived topic
Sticky Posts Customization
23 replies · Started by Mr McMarry on July 14, 2018
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]-->
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