Home
Article section style

How to add v1.4 article section style in Median UI v1.6

Median UI v1.4 style in v1.6

Hello everyone, Welcome to Shiva Technic World! You might be like Median UI v1.4 article section style that was cool and you might be thinking is it possible to add it in Median UI v1.6? and my answer is yes it is possible to add in Median UI v1.6 by changing/adding some things to CSS, Don't have any CSS knowledge? Don't worry I will give you complete CSS for the Median UI v1.4 style that has already been edited. So without wasting any time let's check how to add it!

How to add v1.4 style in Median UI v1.6?

  • First, go to your Blogger dashboard
  • Then go to Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find /* Article Section */ and replace the CSS from /* Article Section */ to /* Thumbnail */ CSS end with below gave CSS
    • /* Article Section */ .onIndx .blogPts, .itemFt .itm{display:flex;flex-wrap:wrap;align-items:center;position:relative; width:calc(100% + 20px);left:-10px;right:-10px} .onIndx .blogPts >*, .itemFt .itm >*{flex:0 0 calc(50% - 20px);width:calc(50% - 20px); margin-bottom:0;margin-left:10px;margin-right:10px} .onIndx .blogPts >*{background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:10px;margin-bottom:20px;padding:10px 10px 45px;position:relative} .onIndx .blogPts .pTag{padding-bottom:0} .onIndx .pTag .pInf{display:none} .onIndx .blogPts .pInf{position:absolute;bottom:15px;left:15px;right:15px} .onIndx .blogPts{align-items:stretch} .onIndx .blogPts.mty{display:block;width:100%;left:0;right:0} .onIndx .blogPts.mty .noPosts{width:100%;margin:0} .onIndx .blogPts div.ntry{padding-bottom:0;flex:0 0 calc(100% - 20px)} .blogPts .ntry.noAd .widget, .Blog ~ .HTML{display:none} /* Blog title */ .blogTtl{font-size:14px; margin:0 0 30px;width:calc(100% + 16px);display:flex;justify-content:space-between;position:relative;left:-8px;right:-8px} .blogTtl .t, .blogTtl.hm .title{margin:0 8px;flex-grow:1} .blogTtl .t span{font-weight:400;font-size:90%; opacity:.7} .blogTtl .t span::before{content:attr(data-text)} .blogTtl .t span::after{content:''; margin:0 4px} .blogTtl .t span.hm::after{content:'/'; margin:0 8px} /* Thumbnail */ .pThmb{flex:0 0 calc(50% - 12.5px);overflow:hidden;position:relative;border-radius:10px; margin-bottom:20px; background:var(--transB)} .pThmb .thmb{display:block;position:relative;padding-top:52.335%; border-radius: 10px; color:var(--fontC); transition:var(--trans-1)} .pThmb .thmb amp-img{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;max-height:108%;text-align:center;transform:translate(-50%, -50%)} .pThmb div.thmb span::before{content:attr(data-text); opacity:.7; white-space:nowrap} .pThmb:not(.nul)::before{position:absolute;top:0;right:0;bottom:0;left:0; transform:translateX(-100%); background-image:linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 20%, rgba(255,255,255,.6) 60%, rgba(255,255,255, 0)); animation:shimmer 2s infinite;content:''} .pThmb.iyt:not(.nul) .thmb::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,.4) url("data:image/svg+xml,<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="%23fff" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L14.05 6.1999L17.14 7.9799C20.97 10.1899 20.97 13.8099 17.14 16.0199L14.05 17.7999L10.96 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999Z"></path></svg>") center / 35px no-repeat; opacity:0;transition:var(--trans-1)} .pThmb.iyt:not(.nul):hover .thmb::after{opacity:1}
    .drK.onIndx .blogPts >*{background:var(--darkBa)}
  • Then save HTML

    • Conclusion

    Hope this How to add v1.4 article section style in Median UI v1.6 article will useful to you, if you have any doubts related to this article ask me in the comment. Do share with your friends. Thanks for visiting, Have a nice day!