Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
After February 6, this site will no longer have Facebook, Twitter, or OpenID sign-in options. Read our announcement about social media SSO support in 2.8 for more info.

Make sure you have a current, valid email address set in your profile and set a password so you can login without it. If you get locked out after that time, you can choose "Forgot Password" to fix it as long as a valid email is on your account.

CSS-only solution for the circle

This discussion is related to the Discussion Alert addon.
jackmaessenjackmaessen ✭✭✭
edited March 2016 in Feedback

I made a css-only solution for the blank and red circle instead of the .png files
In the css i did some modifications:

.Alertcss {
  /*This is a trasnparent png. Visual created by border. Change png to have other visual*/
  /*background: url('InformOff32x32.png');
  background-repeat: no-repeat !Important;*/
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid lightgrey;
  /*font-size: 0.001px;*/
  color: rgba(0, 0, 0, 0) !important;
  float: right;
  margin: 2px 0px 0px 14px;

}
.Alertcss.on {
  /*background: url('AlertOn16x16.png'); 
  border-width: 0px;*/

  /* CSS-ONLY; red cirle without border*/
  width:16px;
  height: 16px;
  background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
        border: none !important;
}
/* CSS-ONLY; Exclamation in the circle*/
.Alertcss.on:after {
  position: absolute;
  content: "!";
  margin: -24px 0 0 6px; /* positioning in the circle*/
  font-weight: bold;
  color: #fff;


}

.Informcssoff {
   /*Trasnparent placeholder - keeps evrything aligned*/
  /*background: url('InformOff32x32.png');*/
  background-repeat: no-repeat !Important;
  width: 16px;
  height: 16px;
  font-size: 0.001px;
  color: rgba(0, 0, 0, 0) !important;
  float: right;
  margin: 2px 0px 0px 14px; 
}
.Informcsson {
  /*background: url('AlertOn16x16.png');*/
  width:16px;
  height: 16px;
  background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
  background-repeat: no-repeat !Important;
  width: 16px;
  height: 16px;
  font-size: 0.001px;
  color: rgba(0, 0, 0, 0) !important;
  float: right;
  margin: 2px 0px 0px 14px; 
}

.Optionscss {
  /*Uncomment the following two lines to add an icon to the toggle menu*/
  /*background: url('AlertToggle.png');         
    text-indent: 12px; */
  background-repeat: no-repeat !Important;
  background-size: 24px;
  font-size: 10pt; 
}
.Optionscss.on {
   background: url('AlertToggle.png');          /*Remove background if you dislike the image in the menu*/
}
hgtonightsubdreamer

Comments

Sign In or Register to comment.