I am working with the WP Easy Poll plugin for a site where there people will vote for nominees in different categories. When you use this WP Easy Poll Plugin, you click on the Name of the Nominee and bars animate and show you the number of votes or you have an option to show a percentage of the votes counted. This is done through jquery and PHP.
I want people to be able to vote online but I don't want them to see whose winning until the awards are handed out. So I thought an easy fix would be to use an attribute selector to hide the number of votes but when I do that it hides both the name of the nominee and the votes. I can't just select one - can someone help? I tried everything :(
Here is the selector I tried to use to hide the "20%" next to Dikla Carmel:
div[data-myo-perc="yes"]{display:none;}
<div data-myo-poll-id="334" data-myo-clicked="yes" data-myo-option="0" data-myo-perc="yes" class="myo-poll-votes myo-poll-334 myo-poll-bar" id="myo-poll-334-votes-0" style="cursor: default;">Dikla Carmel 20%</div>
This did not work. It would take out both the nominee's name and the "20%". All I want to do is hide the "20%" until the day after the awards show and then the voters can go online and see by how much the winner won. The attribute for the name is id="myo-poll-340-votes-1" so I don't understand why it selects the name and percentage. I've tried everything. . .
div[data-myo-perc*="yes"]{display:none;} ---> No good
div[data-myo-perc^="yes"]{display:none;} ---> No good
div[data-myo-perc~="yes"]{display:none;} ---> No good
div[data-myo-perc$="yes"]{display:none;} ---> No good
I'm trying to do this for a client - but now I am starting to get confused and I have run out of ideas.
Can anyone help? I looked in the js. and css. files and nothing.
You can see the demo of the plugin here --> WP Polling Link Demo
You cannot isolate part of the text if it isn't selected. You need a way to target it.
jsFiddle here
This does what you are trying to achieve. It effectively hides the percentage, yet displays the name.
HTML
<div data-myo-poll-id="334" data-myo-clicked="yes" data-myo-option="0" data-myo-perc="yes" class="myo-poll-votes myo-poll-334 myo-poll-bar" id="myo-poll-334-votes-0" style="cursor: default;">Dikla Carmel<span>20%</span></div>
CSS
div[data-myo-perc="yes"] span {
display: none;
}
Related
As you can check in the following link
https://benetialingerie.gr/product-category/%ce%ac%ce%bd%ce%b4%cf%81%ce%b5%cf%82/
there are some color attributes.
In the following link, you can check a report via webaim with some accessibility errors.
https://wave.webaim.org/report#/https://benetialingerie.gr/product-category/men/?lang=en
Just because all colors are buttons too, I want to insert somewhere an alt txt or something which, if I understand right, points out that it is a link.
The error I got is:
Empty link
A link contains no text.
Due to my limited developing skills, I don't know where exactly I must edit the code. I found something relevant, a plugin called "Variation Swatches for WooCommerce".
Can anyone help me out fixing this?
Just add an aria-label to your link. It will not only make the WebAIM/WAVE report happy, it will also allow a screen reader to hear the color name when they navigate to the link.
<a aria-label="red" href="https://benetialingerie.gr/product-category/%ce%ac%ce%bd%ce%b4%cf%81%ce%b5%cf%82/?filter_color=%ce%ba%cf%8c%ce%ba%ce%ba%ce%b9%ce%bd%ce%bf" rel="nofollow" class="rtwpvs-term-span rtwpvs-term-span-color" style="background-color:#db100a;" role="link"></a>
Note that you have role="link" on the <a>. The default role of an <a> element is already a link so the role attribute is not needed.
Recent versions of Wordpress - possibly since version 5.8 - have these new options in the Post sidebar:
"Stick to the top of the blog" and "pending review" in particular are unnecessary for my sites, taking up unnecessary space and, most importantly, mental clutter in the eyes of clients and end users.
Is there a way to disable them, or failing that, just hide them?
Because the other elements have direct classes, I used a :not css statement (couldn't find a real programmatic solution)
.components-panel .edit-post-post-status > .components-panel__row:not(
.edit-post-post-visibility,
.edit-post-post-schedule,
.edit-post-post-author,
:last-child) {
display: none;
}
Every panel that has to be shown needs to be included in the ONE :not-statement, if separated to single listeners they would cannibalize themselves. The 'last-child' is the trash button, that has also not its own classname.
In Firefox, I wish to change the tab icon based on the url of the site -- is this possible?
The closest I've gotten is the following (in userChrome.css):
tab[label*="title of site"] .tab-icon-image { ..custom favicon... }
Which works! But as soon as you browse the rest of the site, as the page titles change, it no longer changes the icon, obviously.
I do not wish to use an extension, I'd like to achieve this in css or some sort of profile tweak, if at all possible.
Good news,
I was able to figure this out without the use of javascript:
tab[image*='sitename'] .tab-icon-image { ..custom icon.. }
Hope this helps anyone looking for this type of functionality :)
I have made a website for a basketball association. It has a number of teams that each have their calendars. You can see it here for instance this is team "Heren C". As you can see in the calendar below there are some home games and some away games. We also have "Heren A", "Heren B", "Junioren", "Cadetten", and so on...
Now, these calendars are all tables and I would like to color (in this example) "Heren C" and make it bold. I want to do this for all our teams, so without actually going through each table and change these text instances.
Just to be sure I will mention that it's a Wordpress site and that each team is a different page, so it's loaded with the same template each time. Maybe that can help for the code.
Hope you guys can help!
You can use CSS3 Attribute Selectors
a[href*="heren-c"] {
font-weight: bold;
}
the *= operator to make an attribute selector match elements that have an attribute which contains the specified value:
This isn't going to be possible purely in cross browser compliant CSS as there is nothing to hook into. Your best bet is going to be either Javascript or PHP search and replace, search for each term and replace with a <span class="aclass">term</span> or similar so you have a hook for the CSS.
PHP would be the more fool proof method but Javascript may be a simpler implementation.
If jQuery is allowed (which could really simplify the job in your case), you could try something like this:
$('table tr td:nth-child(4)').each(function() {
if($.trim($(this).text()) === 'Heren C') {
$(this).css('font-weight', 'bold');
}
});
I never used Wordpress, but I guess jQuery must be already loaded...
I have several large CSS files and making a change can sometimes take a few minutes just to find the right selector to change. I would like it if there was a nice ModX editor for CSS, but I haven't been able to find one. I am willing to settle for splitting up my files into parts, as long as my site still renders. Can I do that and how? If there is a nice editor (plugin?) instead, where can I find one?
I guess the real question is what kind of parts are acceptable for you. If you follow this question, you can begin the process of allowing ModX to manage your CSS. Once this happens, your options open considerably. Your CSS editing will then become easier and less time consuming depending on your level of expertise with ModX. This answer will be pretty simple, as it will show simply how to add a given selector as a resource. Other further development can be intuited from here, though.
CSS as a Resource
Once your CSS is being managed as a Resource (which takes about 15 minutes), you may utilize Templates, Template Variables, Chunks, Snippets and Plugins. Thisis actually pretty amazing, but setup can be a bit of a pain. You will basically be investing some time to save a lot of time in the future. The next logical step is split your Selectors accordingly, but you don't want to break what currently works. Having a fluid understanding of the getResources addon will be crucial to further development.
How to do it:
1. Create a new chunk
Click the Elements tab, and click "New Chunk". Name it "css-selector". Set the content to:
[[+pagetitle]] {[[+content]]}
It's as simple as that. Don't forget to click "Save"! This will let you set a Selector as a resource. It will use the title for the selector and content for the rules. You can forget about using those braces any more. Your new chunk will handle those from now on.
2. Adjusting your Template
Now, we just have to convince the template that it nows how to read parts, as well as not forget the whole. Open your CSS Stylesheet template (the one that says [[*content]] for its content). Adjust the code so that it has the following:
[[!getResources?
&parent=`[[*id]]`
&depth=`1`
&tpl=`css-selector`
&includeContent=`1`
&sortby=`menuindex`
&sortdir=`ASC`
&limit=`99`
]]
[[*content]]
Again, click "Save". Let me explain the Template real quick. If you have child, they'll get rendered first depending on their menu index. Further, it will render the contents of the document that are not children afterward. This will allow you to only make new resources for your most important selectors, while keeping the stuff that will never change in the main resource.
3. Create a new Template
This is so that your selectors don't do anything funny and just render the content. Create a new Template named "CSS Selector". Set its content to:
[[*content]]
4. Create a new Resource
Create a new Resource. Set the title to the selector for the css statement you want to manage. Then set the content to the rules without the braces. For instance, if your css statement is: div#header .logo {border:0;}, you'll set the title to div#header .logo and the content to border:0;. Set the resource alias to whatever you want. I use numbers for each one. Set the template to your new "CSS Selector". Important Now, set the Parent Document to your Stylesheet. Click Save.
5. Testing the Stylesheet
First, Right-click your new resource and choose "View Resource". This will just make sure that the statement was rendered correctly. It should simply say your rule in CSS format.
Next, Right-Click the Stylesheet resource and choose "View Resource". You should see the Selector at the top and all of the other rules below it.
Final Considerations
Observations
You'll notice that your child resources do not have to be changed to "CSS" for Document Type. Only the parent stylesheet has to be. This allows for some neat stuff as your expertise with ModX grows.
You can change the order of rules by simply changing the menu index of them.
The number of rules that can be done this way is based on the &limit variable in the getResources statement in your template. &limit applies to each stylesheet, so in this example you have 99 statements per stylesheet that may be separate resources.
A Note on Server Load
This will place load on the server as the number of resources goes up. For development, keep the "do not cache flag" (!) on your getResources statement. Once you are done, remove the exclamation mark and let it all be cached. This will save a ton of load.
Further Development
I added an isEnabled template variable to mine so I can turn on and off each rule as I pleased.
You may possibly begin to manage your CSS on the front-end utilizing FormIt.
Custom Manager Pages may even be a better option for you.
Further abstraction might allow you to create Groupings of statements for even further organization.