Current page highlight for links in shortcode listing
-
Can one create css for shortcode “menu” listing which shows posts with a certain tag, similar to how it can be done when creating a navigation menu widget? For example, I created a navigation menu for all the scenes of episode 101 of Manifest TV show. Then using the following CSS code, the current page link would be highlighted.
#nav_menu-6 .current-menu-item a {
color: red;
}Check out the shortcode listing on the following page. Using shortcodes is a whole lot easier than creating menus. But I would also like to have the current page be highlighted.
https://manifest828.wordpress.com/2018/09/25/101-8-police-precinct-changes/
I would appreciate any help, thanks.
The blog I need help with is: (visible only to logged in users)
-
Hey again!
Just trying to make sure I fully understand what you are looking to achieve. From what you’ve mentioned I gather you would like to have to current item “active” from the “Episodes 101 Scenes” shortcode sidebar list highlighted as a different color?
Let me know if that is correct and I would be happy to look into solution for accomplishing this.
Cheers
-
-
Okay, so the following would be the typical pseudo class selector that would allow you to style the item of a particular list set when selected and active.
However, I am unable to test this accurately within Inspect wether the styling takes effect. Please test the following CSS out and let me know if it works as it should:
#custom_html-2 a:active { color: red; }Cheers
-
nope. that did not work. (for the time being, I will leave it in the css. not sure if that helps you or not.
-
Hi there,
Thanks, I appreciate you leaving the CSS in for me to view – definitely helps.
It is odd because I can see that with this code in place the posts lists seems to make an attempt to use it, I see that on click the list item will flash red momentarily but then return to black and back to blue almost as if it is reseting each time an item is clicked.
If this is the case this may be some sort of built in disconnect between the display posts lists within the widget, the websites CSS, and the actual page that is currently displaying. However I find it unusual because the following, very similar coding seems to work no troubles:
#custom_html-2 a:visited { color: red; }The only problem with this is that it is not exactly what you are looking to acehive – it will instead show every list item that has been clicked and visited, not just the one that is currently active.
Another alternative to replace the original with and test, which is more inline with the CSS for the main menu current items active would be the following:
#custom_html-2 .current-menu-item>a { color: red; }Although I have a feeling that this may return the same results. I will continue to look into alternatives and for efficiency we can tag modlook as well so staff can take a look into some options on there end.
Cheers
-
Just as a summary for staff,
We are attempting to have the Display Posts Shortcodes list entitled “Se1 Ep1 Scenes” that is currently embedded in the right sidebar here:
https://manifest828.com/2018/09/25/101-8-police-precinct-changes/
have it’s currently active list item display highlighted in a different color.
The following CSS is in place in attempt to do so:
#custom_html-2 a:active { color: red; }Although, this code seems to take effect momentarily – as you can see the list item flicker red on click, it does not seem to hold.
Is it at all possible to make this happen?
-
-
I’ve confirmed with another co worker that it’s not going to be possible to do this with CSS based on the configuration of the widget.
The
:activepseudo selector is for modifying the active state of a link. Mainly while the link is being clicked, so it won’t work. -
Well ok. I was beginning to suspect that. I would also guess that any formatting of the links would be impossible, too.
So, maybe I want to use the navigator menu widget instead, even though that will require a lot more work. That way I can have the current page highlighted, and format the links so they appear as buttons in the navigation menu.
But I will need help with that.
Any thoughts?
Thanks again for both of your’s help :)
-
Check out the shortcode listing on the following page. Using shortcodes is a whole lot easier than creating menus.
Hi there,
If you use a menu widget for this, you”d be able to style the current page with CSS.
The menu system adds a specific class (.current-menu-item) that the shortcode doesn’t.
That class can then be targeted with CSS.
-
If you create then navigation menu you want, then add it to a widget area, I can post the CSS you’ll need.
-
Awesome, thanks. I created nav_menu-8. It’s below the shortcode menu. Notice I have the current page highlighted.
https://manifest828.com/2018/09/25/101-8-police-precinct-changes/
Here is the CSS code I already started.
#nav_menu-8 {
font-weight: 400;
line-height: 1.5;
padding: 1.5em 0 0;
}#nav_menu-8 .current-menu-item a {
color: red;
}What I need help with is making the menu look like a button navigation menu with button hover capabilities, etc. If you can just get me started, I can then tweak it to my liking.
I would appreciate any help you can give me.
-
You can add a background colour to the link to make it look more link a button. All the values below can be changed to whatever colors you prefer:
#nav_menu-8 .current-menu-item a { background: #a3eeff; border-radius: 10px; padding: 3px; }For the hover state:
#nav_menu-8 .current-menu-item a:hover { background: #f5afbb; color: #008000; text-decoration: underline; transition: all .15s linear; } -
Thanks, I made some tweaks. For right now using simply black and white color.
1. What about extending bkg color all the way across the line?
2. Getting rid of the
- wrap, and having separator lines?
3. Any other ideas?
Thanks again.
- wrap, and having separator lines?
-
-
For 1, please try using:
#nav_menu-8 .current-menu-item { background: #000000; padding-top: 1px; }When you say “separator lines”, do you mean you want a border on the current menu item or all menu items?
If that’s not what you mean, can you post a link to an example site using “separator lines” that you’d like to replicate?
When you say you want to remove the bullets, do you want to remove them from all items in that navigation widget, or just the current menu item?
-
-
@staff there appears to be some HTML errors in this comment that’s messing up the page layout. Can you fix it?
-
To remove the bullets, please use:
#nav_menu-8 ul { list-style: none; }For borders, the CSS below will add a border to the bottom of each menu item. If this isn’t what you’d like, please let me know. The size and colour value for the border can be changed to whatever you prefer.
#nav_menu-8 ul li { border-bottom: 1px solid #ccc; }
- The topic ‘Current page highlight for links in shortcode listing’ is closed to new replies.
WordPress.com Forums 