html - How do I replace list bullets with image icons in a WordPress 4.8.1 sidebar widget? -
i have used both example methods here in html5 file successfully. (i have plain html5 file example demonstrates i'm not yet allowed post more 2 links.)
neither of these methods work correctly in wordpress 4.8.1 sidebar widget html.
i using wordpress 4.8.1 , new custom html sidebar widget comes wordpress 4.8.1. trying unordered list uses different image icon each list item instead of bullet.
in 1 website, tried putting each icon in list item using following html:
<ul class="follow"> <li style="list-style-type: none;"><img style="display: inline; text-align: left; vertical-align: middle; padding-right: 10px;" src="http://stcwdc.org/images/chapter_logo_54pxtype-28x28.png" alt="small chapter logo" width="28" height="28" /><a href="http://events.stcwdc.org/">chapter events , news</a></li> <li style="list-style-type: none;"><img style="display: inline; text-align: left; vertical-align: middle; padding-right: 12px;" src="http://stcwdc.org/images/twitter-letter-icon-28x28-1.png" width="28" height="28" alt="follow on twitter" /><a href="https://twitter.com/stcwdc" rel="nofollow">twitter</a></li> <li style="list-style-type: none;"><img style="display:inline; text-align:left; vertical-align:middle; padding-right:12px;" src="http://stcwdc.org/images/in.jpg" width="28" height="28" alt="join our group on linkedin" /><a href="https://www.linkedin.com/groups?gid=156478" rel="nofollow">linkedin group</a></li> </ul>
but, except top 1 in list, gives me list both bullets , image icon in middle 5 list items though list-style-type:none. see 4th widget down "follow us" in sidebar @ competition website
in website tried different method. searched stackoverflow , found question , answer 2010/2012. tried code isn't working--i bullets instead of icons. see 6th widget down "follow us" in sidebar @ news , events website perhaps because of newer wordpress, css, , new custom html widget? model using (different list style image each li)
this html using:
<ul class="follow"> <li class="chapicon"><a href="http://events.stcwdc.org/">chapter events , news</a></li> <li class="twittericon"><a href="https://twitter.com/stcwdc" rel="nofollow">twitter</a></li> <li class="linkedinicon"><a href="https://www.linkedin.com/groups?gid=156478" rel="nofollow">linkedin group</a></li> <li class="pinteresticon"><a href="https://www.pinterest.com/stcwdcmb/" rel="nofollow">pinterest page</a></li> <li class="rssicon"><a href="http://events.stcwdc.org/feed">rss events feed</a></li> <li class="rssicon"><a href="http://wdcb.stcwdc.org/stc_washington_dc_chapter.xml">rss wdcb site feed</a></li> <li style="list-style-type: square;">join our <a href="http://wdcb.stcwdc.org/prof-dev/networking/lists/list-annc/">announcement list</a></li> <li style="list-style-type: square;">join our <a href="http://wdcb.stcwdc.org/prof-dev/networking/lists/list-chat/">chat list</a></li> </ul>
this css using:
aside.widget_custom_html div.custom-html-widget { color: #333; margin: 9px 0 10px 9px; padding: 8px; overflow:hidden; } aside.widget_custom_html div.custom-html-widget ul li { color: #2222ac; /*----dark blue. ----*/ background-color: transparent; text-decoration: none; } aside.widget_custom_html div.custom-html-widget ul li a:visited { color: #981b1e; /*----secondary-red-darkest. ----*/ background-color: transparent; text-decoration: underline; text-decoration-style: wavy; text-decoration: #981b1e wavy underline; /* ignored in css1/css2 uas */ } aside.widget_custom_html div.custom-html-widget ul li a:hover, aside.widget_custom_html div.custom-html-widget ul li a:focus; { color: #5b616b; /*--- coal-blue-light ----*/ background-color: transparent; text-decoration:underline; text-decoration-style: dotted; text-decoration: #5b616b dotted underline; /* ignored in css1/css2 uas */ } aside.widget_custom_html div.custom-html-widget ul.follow { display: inline; padding-top: 2px; } aside.widget_custom_html div.custom-html-widget ul.follow li { list-style-type: none; } aside.widget_custom_html div.custom-html-widget ul.follow li.chapicon { list-style-image:url('http://events.stcwdc.org/wp-content/uploads/chapter_logo_54pxtype-16x16.png'); list-style-position:outside; } aside.widget_custom_html div.custom-html-widget ul.follow li.twittericon { list-style-image:url('http://events.stcwdc.org/wp-content/uploads/twitter.gif'); list-style-position:outside; } aside.widget_custom_html div.custom-html-widget ul.follow li.linkedinicon { list-style-image:url('http://events.stcwdc.org/wp-content/uploads/in.jpg'); list-style-position:outside; } aside.widget_custom_html div.custom-html-widget ul.follow li.pinteresticon { list-style-image:url('http://events.stcwdc.org/wp-content/uploads/pinterest_logo.png'); list-style-position:outside; } aside.widget_custom_html div.custom-html-widget ul.follow li.rssicon { list-style-image:url('http://events.stcwdc.org/wp-content/uploads/rss.png'); list-style-position:outside; }
what need make either method work in latest wordpress 4.8.1 sidebar widget html?
Comments
Post a Comment