Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+2 votes
1.8k views
in Plugins by

3 Answers

0 votes
by
by
How can I do it?
0 votes
by
If you use mobile you need to change css a bit.
by
+1
What do I need to change in css,sir?
+1 vote
by

My q2apro-on-site-notifications-master css file,

.qa-nav-user {

 position:relative;

 white-space:normal;

}

#osnbox {

 position:relative;

 display:inline-block;

 text-align: left;

}

.nfyWrap {

 position: absolute;

 top: 31px;

 left: -280px;

 width: 260px;

 background: #fefefe;

 padding: 0;

 font-family: Arial,Helvetica,sans-serif;

 box-shadow: 4px 4px 7px #ababab;

 z-index: 999; 

}

.nfyWrap .nfyTop {

 font-size: 11px;

 line-height: 12px;

 padding: 5px;

 color: #333;

 background: #eaeaea;

 border: 1px solid #CCC;

 border-radius: 3px 3px 0 0;

}

.nfyWrap .nfyContainer {

 width: 100%;

 overflow-y: auto;

 padding: 0;

 height: 240px;

}

.nfyWrap .nfyFooter {

 padding: 5px;

 background: #fefefe;

 text-align: right;

 font-size: 10px;

}

.nfyWrap .nfyFooter a {

 color: #aaa;

 cursor: pointer;

}

.nfyWrap .itemBox, .nfyWrap .itemBox-new {

 width: 100%;

 float: left;

 margin: 0;

 padding: 3px 0px 12px 0;

 border-bottom: 1px dashed #CCC;

}

.nfyWrap .itemBox-new {

 background: #FE8;

}

.nfyWrap .itemBox:hover {

 background: #EEE;

}

.nfyWrap .itemBoxNew {

 background-color: #ffffe2;

}

.nfyWrap .nfyItemLine {

 display:inline-block;

 width: 210px;

 font-size: 12px;

 color: #555;

}

.nfyWrap .nfyItemLine a {

 font-size: 12px;

 color: #44A;

 text-decoration: none;

}

.nfyWrap .nfyItemLine p {

 display:inline-block;

 margin: 0 0 2px 0;

 line-height: 1.2;

}

.nfyWrap .siteLink {

 font-size: 9px !important;

 text-decoration: none;

 font-weight: normal !important;

 margin-bottom: 4px;

 display: inline-block;

}

.nfyWrap .nfyItemLine a:hover {

 color: #55F;

}

.nicon {

 display: inline-block;

 width: 16px;

 height: 16px;

 margin: 4px 4px 0 5px;

 vertical-align: top;

}

.nicon.nanswer {

 background:url(icons.png) no-repeat 0 0;

}

.nicon.ncomment {

 background:url(icons.png) no-repeat 0 -16px;

}

.nicon.nvoteup {

 background:url(icons.png) no-repeat 0 -32px;

}

.nicon.nvotedown {

 background:url(icons.png) no-repeat 0 -48px;

}

.nicon.nbestanswer {

 background:url(icons.png) no-repeat 0 -64px;

}

.nicon.nmessage {

 background:url(icons.png) no-repeat 0 -80px;

}

.nicon.nwallpost {

 background:url(icons.png) no-repeat 0 -96px;

}

.nfyWhat {

 padding-top:3px;

}

.nfyTime {

 color: #888;

 display:block !important;

}

.qa-history-event-nill {

 display: inline-block;

 width: 15px;

 height: 15px;

 overflow: hidden;

 border: 0;

 border-radius: 10px;

 box-shadow: 0 1px 1px #999;

 text-align: center;

 background-color: #999;

 font-style: italic;

 font-weight: bold;

 color: #FFF;

 cursor: pointer;

}

.osn-new-events-link {

 position: relative;

}

.osn-new-events-link:hover {

 text-decoration:none !important;

}

/* notifybub (N) */

.ntfy-event-new, .ntfy-event-nill {

 background-color: #FF5;

 color: #000;

 border: 1px solid #EEEE00;

 border-radius: 2px;

 cursor: pointer;

 font-size: 11px;

 font-weight: bold;

 padding: 3px 4px;

 vertical-align: top;

}

.ntfy-read, .ntfy-event-nill {

 background: #EEE;

 border: 1px solid #DDD;

 color: #555;

}

#nfyReadClose {

 float:right;

 cursor:pointer;

 color:#333;

}


/* snow flat theme */

.qam-account-items-wrapper #osnbox {

 float: left;

 margin-left:-30px;

}

.qam-account-items-wrapper .ntfy-event-new, .qam-account-items-wrapper .ntfy-event-nill {

 padding: 4px 7px;

}

.qam-account-items-wrapper .nfyWrap {

 left:-237px;

 top:30px;

}

.qam-account-items-wrapper .nfyWrap, .qam-account-items-wrapper .nfyWrap .nfyContainer p {

 /* disable snow flat's global border-box */

 box-sizing: content-box !important;

}


/* smartphones */

by
if you want to see login my site
https://www.ruyadaruya.com
by
it is still not working for me...please help
...