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
Vanilla 2.6 is here! It includes security fixes and requires PHP 7.0. We have therefore ALSO released Vanilla 2.5.2 with security patches if you are still on PHP 5.6 to give you additional time to upgrade.

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.