I'm working on a wordpress plugin and I'd like to put a custom icon in the main wordpress admin menu.
I've seen other plugins do this, the icons are grey. When you mouse over the item in the menu, the text and icon turn blue. If you are on that plugin's page, the text and icon are white.
I've created a custom icon as an svg (I'm new at svg though). I've set the fill to black, as I read about doing (somewhere on the internet), and added the menu icon like:
function admin_menu() {
add_menu_page('MyPlugin Plugin admin', 'MyPlugin', 'manage_options', 'MyPlugin-plugin', null, 'data:image/svg+xml;base64, ' . base64_encode(file_get_contents(RPP_PLUGIN_DIR . 'assets/image/dashicon.svg')));
add_submenu_page('MyPlugin-plugin', 'MyPlugin Plugin Settings', 'Settings', 'manage_options', 'MyPlugin-plugin', [$this, 'page_settings']);
add_submenu_page('MyPlugin-plugin', 'MyPlugin Plugin Guide', 'Guide', 'manage_options', 'MyPlugin-plugin-guide', [$this, 'page_guide']);
}
The icon appears in the admin menu as black, and doesn't change color when hovered nor selected.
I don't know if I have the code wrong, or if I need something other than a black shape in the svg file.
I haven't been able to find any documentation on how this works or what is required - can you help with an explanation and solution? What do I not understand? :)
Thanks,
Chris
edited - based on the link provided by O. Jones in the comments below, I tried simplifying the svg file, by simplifying in inkscape and then minimizing and removing everything that I could while keeping the svg working.
The icon still only displays in black though, wordpress is not doing the grey/blue/white overlay.
Here's the svg:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="black" d="M7.701 10.271l3.667-3.178c.405.617 1.366 1.274 1.417 1.866l-3.552 3.078-1.531-1.767zm.497 1.818l5.218-1.019c.092.622.711 1.556.485 1.991l-5.074.991-.629-1.963zm3.781-6.913l.875-3.294 1.578.424-.875 3.294-1.578-.424zm-6.55 6.267l1.167-5.11c.596.316 1.676.364 1.956.855l-1.13 4.951-1.992-.695zM3.353 7.026l.814-3.693c.518.283 1.896.013 1.741.73L5.17 7.41l-1.817-.384zm8.679 7.76l3.868 1.298c-.276.505-.298 1.52-.73 1.713l-3.728-1.251.591-1.76zM4.978 13.9l5.089 1.121c-.268.726-.218 1.949-.675 2.38l-4.945-1.089.531-2.411zm-3.208-.732l2.021-4.176c.589.389 1.732.58 1.989 1.087l-1.956 4.043-2.053-.954zm-.279 1.178l4.929-1.911c.189.782.933 1.81.767 2.435l-4.775 1.852-.921-2.376zm13.086-6.181h4.294v2.07h-4.294v-2.07z"/>
</svg>
I still don't understand what the:
"Then you will have to hardcode each style into the path, rather than using the tag. For each path, work out which classes apply to the path from the tag, and add the CSS from those classes into the path."
from the instructions on that link means, maybe that still needs to be done?
Related
I want to create some links and hover effects inside a svg image. So, I created some custom transparent areas inside one svg image, in an online images editor, in order to do that. But when I try to apply some links in those custom areas, as show below, it does not work. How can I make it work?
<body>
<svg>
<defs></defs>
<!-- custom ellipse which the link does not work -->
<a href="some-link.com">
<ellipse />
</a>
<!-- normal path from the svg image, which the link work -->
<a href="some-link.com">
<path></path>
</a>
<!--rest of the image with many paths-->
<path></path>
</svg>
</body>
The ellipse element seems to be invalid. And since the markup has an error, it might affect even the functionality of the parent element.
The self-closing tag should have the slash at the end (since SVG is based on more strict XML) like below:
<ellipse />
Does this change solve the problem with the link?
In our project we are calling all the icons like this:
<svg focusable="false" aria-hidden="true" class="icon icon--extra-small ">
<use xlink:href="#icon-search" href="#icon-search"></use>
</svg>
Right now we are loading all the icons in a hidden div at the footer of the document.
Is there a way to use an external source for the svg without having to rewrite all the icons?
I assume JavaScript is acceptable for your project. Here is an option that you could choose to do.
Create another file called svg-icons.js or anything really.
Add <script type="text/javascript" src="svg-icons.js"></script> below the closing </body> tag.
In that file, add something along the lines of:
document.querySelector('.my-icon').innerHTML = '<svg focusable="false" aria-hidden="true" class="icon icon--extra-small "><use xlink:href="#icon-search" href="#icon-search"></use></svg>';
Then whenever you want to use that icon in your html, add a div or span (according to your needs) with the same class:
<div class="my-icon"></div>
The component is fairly small, so I don't suggest doing this. Additionally, if you are using JQuery, you could look into $.load(). That will help a lot when starting to use the same components across the entire website.
stack community,
I couldn't find a solution to this issue yet and I hope someone can help me.
I have a WordPress-Website which is using a theme, so far everything works seamlessly. However, the "footer" of this website is not a Widget, I added the content on every page manually. I know it is a pain to adjust stuff, but for this project, it was a fast solution.
My issue is the following:
I am using social media icons as buttons and they are linked. The links work fine on a desktop (using Chrome and Safari) and on Google's "Developer Tools" window with the different selection of screen sizes. For example, if I select "iPhone" the links work. But as soon as I open the site on my actual phone, I cannot click on them, they aren't working.
Why is this and how can I fix it?
Here are some screenshots:
Here is the html code shown for the facebook icon in Google Dev Tools with CodePen:
<div class="wpb_wrapper"><div class="btn-align-center">
<a href="https://www.facebook.com/iamviola.de/" class="default-btn-shortcode dt-btn dt-btn-l fadeIn animate-element animation-builder full-width-btn vc_custom_1523221889433 animation-triggered start-animation" target="_blank" id="default-btn-7"><span>
<svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-2x" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
<!-- <i class="fab fa-facebook-f fa-2x"></i> -->
</span></a>
</div></div>
Codepen HTML for facebook icon
The thing is, I can click on every other link on my website apart from these icons. I never had this issue before.
Thank you for your help!
The first things I would check on mobile are the target areas for your icon links, and if there might be another (invisible) element that is on top of these links.
For the first question, temporarily edit your css and add a background color to the anchor tags of your social media links, and check if these target areas are where you expect them to be.
For the second question, using inspector, examine elements close to the social media links, looking for something that might be on top of your links.
If you don't have any joy, you could share a link to your site so others can help.
Good luck!
I'm currently working on a svg and I was wondering if it was possible to easily pop a tooltip while hovering some elements.
I discovered that the attribute title is available while used like this :
<path>
<title>Custom title</title>
</path>
I then thought about customizing the title element, so that it might spawn quicker, with a different background etc ...
So I tried different things like :
path[title]:hover:after { instructions }
But unfortunately it doesn't seem to work.
Does someone knows an easy way to customize title from path elements ?
Thank you for your help.
Second edit (ARRGGHH!):
The website: http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip shows how to do styling of tooltips like you wanted.
EDIT:
For SVG tooltips for a path, it is like this:
<path d="M150 0 L75 200 L225 200 Z">
<title>This is a traingle</title>
</path>
Hope this works and it does because I tested it.
===========
If you want a tooltip on an image element do this:
<img title="tooltip text"></img>
It is the same for other things too.
Also, when you put brackets in the css, that is to put:
path[attribute=value]
So you would want:
path title:hover:after {
// styling
}
I am glad to help. Hope this works!
Okay so i just started a Tumblr blog the other day, and when i was editing the profile page i had happily found a edit with HTML button, and i thought wow now i can finally loose this (image below) that's intruding on my theme.
So, I hit CTRL + F to find code relating to the shape, and found that the shape was actually a fill rather than a preset image, so i entered the hex code for a transparent black #00000000), but to no avail, it didn't work, and after about an hour or so of scouring the web, I decided to reach out, and was possibly hoping that someone with HTML experience could help, anyways here's the code
Right the background you should be able to change within your template settings as this is just a background you need to change. This is not something within the HTML template - I am not sure how to change background in Tumblr but look within profile or theme settings, widgets or block.
Use inspect element and you will see this:
.header-image.cover {
background-image: url(http://static.tumblr.com/d3c51755c609fd193d623381320efcb6/kcvyami/oSJnx6juu/tumblr_static_tumblr_static_jqy1bj0w774s0o04wc4wsskc_focused_v3.gif);
}
The image that you are looking for is found here:
http://static.tumblr.com/d3c51755c609fd193d623381320efcb6/kcvyami/oSJnx6juu/tumblr_static_tumblr_static_jqy1bj0w774s0o04wc4wsskc_focused_v3.gif
If you're looking to delete the doge image, then delete this from the HTML:
<figure class="avatar-wrapper animate">
<a href="/" style="background-image: url(http://33.media.tumblr.com/avatar_e1fbc1eda419_128.png)" class="user-avatar">
<img src="http://33.media.tumblr.com/avatar_e1fbc1eda419_128.png" alt="" class="print-only invisible">
</a>
</figure>