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

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more