5.CSS code sample

■Notes on using sample code
The custom CSS function that can be used from the theme customization screen has a character limit of 500 characters, so you cannot insert long CSS. Therefore, if you use the code sample below, you will need to create CSS assets and call the assets from Shopify code editing.
　
① When opening the list of articles, add a red badge to unread articles

■Code sample

.monjia_notify-notification-midoku::after { content:'';
 position:absolute;
 top:-3px;
 right:-3px; background: #cc0000; width:20px; height:20px; border-radius:100%;
 }

 

② Label the article list as unread/read

■Code sample

.monjia_notify-notification-content { background:#fff!important; padding-right:4em!important;
 }
 .monjia_notify-notification-kidoku .monjia_notify-notification-content { background:#ddd!important;
 color:#888!important;
 }
 .monjia_notify-notification-kidoku a, .monjia_notify-notification-kidoku a:visited {
 color:#888!important; }
 .monjia_notify-notification-midoku::after { content:'unread';
 position:absolute;
 top:10px;
 right:10px; padding:.35em 1em; font-size:12px; color:#fff; background: #000;
 }
 .monjia_notify-notification-kidoku::after { content:'read';
 position:absolute;
 top:10px;
 right:10px; background: #eee; padding:.35em 1em; font-size:12px; color:#aaa;
 }

 

③ Add a blue circle mark to unread messages (like an iOS mail app)

■Code sample

.monjia_notify-notification-midoku::after { content:'';
 position:absolute;
 top:35px;
 left:20px; background: #0079fc; width:15px; height:15px; border-radius:100%;
 }
 .monjia_notify-notification-content { padding-left:3em!important;
 box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.1); }


Return to manual top