Block inline-css from html and use gradient background from external css -


i'm not sure possible, have image stylized html. when got job, already.

and need change style, however, cannot touch html. needs stay is.

i've tried 

background-image: none;

but then, gradient background css didn't work well.

i'll show html , css

here @ codepen

https://codepen.io/anon/pen/vzqrve

div.mh-container ul.mh-menu {    position: relative;    float: left;    background: none;    padding-left: 250px !important;  }    div.mh-container ul.mh-menu:after {    content: "";    clear: both;    display: block;    overflow: hidden;    visibility: hidden;    width: 0;    height: 0;  }    div.mh-container ul.mh-menu li {    float: left;    margin: 0;    font-size: 11px;    font-weight: normal;    padding: 0;    position: relative;  }    div.mh-container ul.mh-menu li:first-child {    margin: 0;  }    li[id^="mh-li-"] {    min-width: 138px;  }    div.mh-container ul.mh-menu > li {    background: none;  }    div.mh-container ul.mh-menu > li {    text-align: center;  }    div.mh-container ul.mh-menu > li > {    /* background-image: none !important; */    font-weight: 600;  }    div.mh-container ul.mh-menu > li {    /* display: inline-block;      color: #aeaeae;      padding: 12px 12px 12px 24px;      text-decoration: none;      background-position: 3px 50%;      background-repeat: no-repeat;      text-transform: uppercase;      text-align: left;*/      color: #161312;    text-decoration: none;    display: block;    padding: 10px 26px;    /* text shadow */    text-shadow: 0 1px 0 #4b433e;      /* gradient background */    background: #362f2c; /* old browsers */    background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); /* ff3.6+ */    background: -webkit-gradient(      linear,      left top,      left bottom,      color-stop(0%, #362f2c),      color-stop(100%, #282321)    ); /* chrome,safari4+ */    background: -webkit-linear-gradient(      top,      #362f2c 0%,      #282321 100%    ); /* chrome10+,safari5.1+ */    background: -o-linear-gradient(      top,      #362f2c 0%,      #282321 100%    ); /* opera11.10+ */    background: -ms-linear-gradient(top, #362f2c 0%, #282321 100%); /* ie10+ */    filter: progid:dximagetransform.microsoft.gradient(        startcolorstr='#362f2c',        endcolorstr='#282321',        gradienttype=0      ); /* ie6-9 */    background: linear-gradient(top, #362f2c 0%, #282321 100%); /* w3c */      /* border radius */    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;      /* box shadows */    -webkit-box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514;    -moz-box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514;    box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514;      /* transition effect */    -webkit-transition: 1s ease;    -moz-transition: 1s ease;    -o-transition: 1s ease;    -ms-transition: 1s ease;    transition: 1s ease;  }    div.mh-container ul.mh-menu > li a:hover {    color: #73635e;      /* text shadow */    text-shadow: 0 1px 1px #000;      /* gradient background */    background: #282321; /* old browsers */    background: -moz-linear-gradient(      top,      #282321 0%,      #362f2c 99%,      #362f2c 100%    ); /* ff3.6+ */    background: -webkit-gradient(      linear,      left top,      left bottom,      color-stop(0%, #282321),      color-stop(99%, #362f2c),      color-stop(100%, #362f2c)    ); /* chrome,safari4+ */    background: -webkit-linear-gradient(      top,      #282321 0%,      #362f2c 99%,      #362f2c 100%    ); /* chrome10+,safari5.1+ */    background: -o-linear-gradient(      top,      #282321 0%,      #362f2c 99%,      #362f2c 100%    ); /* opera11.10+ */    background: -ms-linear-gradient(      top,      #282321 0%,      #362f2c 99%,      #362f2c 100%    ); /* ie10+ */    filter: progid:dximagetransform.microsoft.gradient(        startcolorstr='#282321',        endcolorstr='#362f2c',        gradienttype=0      ); /* ie6-9 */    background: linear-gradient(      top,      #282321 0%,      #362f2c 99%,      #362f2c 100%    ); /* w3c */      /* transition effect */    -webkit-transition: 1s ease;    -moz-transition: 1s ease;    -o-transition: 1s ease;    -ms-transition: 1s ease;    transition: 1s ease;  }  ul.sub div.mh-row li {    text-transform: none;  }
<div class="mh-container" style="">    <ul id="mh-menu" class="mh-menu">      <li id="mh-li-mc" class="mh-dc-li">        <a id="mh-mc" href="#" class="mh-dc" style="background-image: url(https://uploaddeimagens.com.br/images/001/004/836/original/dom.png?1500668261); background-position: 2px 50%;">minha conta<span class="mh-dc-icon"></span></a>      </li>    </ul>  </div>

add !important style attribute override other styles so:

  background: linear-gradient( 45deg, blue, red ) !important;

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