Support » Plugin: FL3R FeelBox » Size options

  • Resolved Hoek

    (@hoeczek)


    Hi

    Is there a option to change size of Feelbox?
    What options can be used in css editor?

    I just try it and when I click on some mood icon it start thinking and hang on this stage. When I refresh page it shows nothing changed and in statistic it count vote? any ideas? I turn off social share and result was the same.

    thanks
    hoek

    https://wordpress.org/plugins/fl3r-feelbox/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Armando “FL3R” Fiore

    (@armandofiore)

    In Custom CSS settings you can edit all CSS rules of FeelBox.
    #feelbox-widget set the width (100%).

    cool, Is there any list of all css rules for this plugin?

    how to solve that when I click on mood face is hang on loading
    like on screen below and nothing happens 🙁
    http://s11.postimg.org/ep5yy7lpf/Przechwytywanie.png

    Plugin Author Armando “FL3R” Fiore

    (@armandofiore)

    This is the 3.2 FeelBox CSS:

    @font-face {
    	font-family: 'robotomedium';
    	src: url('../webfont/roboto-medium-webfont.eot');
    	src: url('../webfont/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),  url('../webfont/roboto-medium-webfont.woff2') format('woff2'),  url('../webfont/roboto-medium-webfont.woff') format('woff'),  url('../webfont/roboto-medium-webfont.ttf') format('truetype'),  url('../webfont/roboto-medium-webfont.svg#robotomedium') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    #feelbox-widget {
    	font-family: 'robotomedium' !important;
    	text-decoration: none !important;
    }
    #feelbox-widget a {
    	text-decoration: none !important;
    	color: #333;
    }
    #feelbox-widget {
    	width: 100%;
    	line-height: 1em;
    	clear: both;
    	position: relative;
    	margin: 0 auto;
    }
    #feelbox-widget #lyr1 {
    	position: absolute;
    	background-color: #fff;
    	width: 100%;
    	height: 100%;
    	z-index: 10;
    	opacity: 0.85;
    	visibility: hidden;
    }
    #feelbox-widget #lyr2 {
    	position: absolute;
    	z-index: 20;
    	width: 100%;
    	height: 100%;
    	top: 10px;
    	text-align: center;
    	visibility: hidden;
    }
    #feelbox-widget #lyr2 #feelbox-bold {
    	font-weight: bold;
    	font-size: 1.4em;
    	line-height: 1.2em;
    	margin: 10px 0px 20px 0px;
    }
    #feelbox-widget #lyr2 #feelbox-s {
    }
    #feelbox-widget #total, #feelbox-widget #voted {
    	display: none;
    	text-decoration: none !important;
    }
    #feelbox-widget.voted li {
    	cursor: pointer;
    	text-decoration: none !important;
    }
    #feelbox-widget.voted li a {
    	cursor: pointer;
    	text-decoration: none !important;
    }
    #feelbox-widget .count {
    	visibility: hidden; /* position: absolute; */
    }
    #feelbox-widget #hdr {
    	background-color: #fff;
    	color: #333;
    	font-size: 1.2 em;
    	min-height: 30px;
    	border-radius: 0px !important;
    }
    #feelbox-widget #hdr #title {
    	float: right;
    	padding-right: 6px;
    }
    #feelbox-widget #hdr #title span {
    	background: url("../images/logo.png") no-repeat scroll 0 0 transparent;
    	display: block;
    	float: left;
    	margin-right: 8px;
    	margin-top: 2px;
    	min-height: 24px;
    	text-indent: -99999px;
    	width: 27px;
    }
    #paypal span {
    	background: url("../images/donate-paypal-frontend.png") no-repeat scroll 0 0 transparent;
    	display: block;
    	float: right;
    	padding-right: 4px;
    	margin-top: 2px;
    	min-height: 24px;
    	width: 24px;
    	color: transparent !important;
    }
    #feelbox-widget #hdr #s { /* padding-left: 6px; padding-top: 6px; */
    	display: block;
    	margin-left: 6px;
    	padding-top: 6px;
    	background: transparent;
    	width: auto;
    	color: inherit;
    }
    #feelbox-widget #bd {
    	position: relative;
    	clear: both;
    	margin-top: 0;
    	background-color: #fff;
    }
    #feelbox-widget #bd #loading {
    	top: 1px;
    	background: url("../images/loading.gif") center center no-repeat #fff;
    	height: 100%;
    	opacity: 0.9;
    	position: absolute;
    	text-align: center;
    	width: 100%;
    	z-index: 1;
    }
    #feelbox-widget ul {
    	width: 100%;
    	padding: 0px;
    	margin: 8px auto 0px auto;
    	text-align: center;
    }
    #feelbox-widget ul li {
    	width: 15%;
    	cursor: pointer;
    	display: inline-block;
    	padding: 0;
    	text-align: left;
    	zoom: 1;
    *display: inline;
    	margin: 0;
    }
    #feelbox-widget ul li #feelbox-cell {
    	margin: 5px 2px;
    	/*height: 75px;*/
    	height: 100%;
    	vertical-align: middle;
    	-moz-box-orient: vertical;
    	text-align: center;
    	position: relative;
    }
    #feelbox-widget ul li #feelbox-cell div {
    	height: 100%;
    	width: 100%;
    	margin: 0;
    	/* line-height: 1.25em; */
    }
    #feelbox-widget ul li #feelbox-cell span {
    	display: block;
    }
    #feelbox-widget ul li #feelbox-cell span.m {
    	font-size: 1.2em;
    	line-height: 0px;
    	padding-top: 0px;
    	text-transform: uppercase;
    	color: #333;
    	visibility: hidden;
    }
    #feelbox-widget ul li #feelbox-cell span.p {
    	font-size: 2.4em;
    	line-height: 28px;
    }
    #feelbox-widget ul li #feelbox-cell span.count {
    	position: absolute;
    	visibility: hidden;
    }
    .clearfix {
    	clear: both;
    }
    #feelbox-widget ul li #feelbox-cell .vftthx, #feelbox-widget ul li #feelbox-cell .vft.vftchoose {
    	font-size: 0.75em;
    	float: left;
    	width: 100%;
    	color: #666;
    }
    #sparkbardiv {
    	width: 98%;
    	margin: 0 auto;
    }
    .sparkbar {
    	height: 10px;
    }
    .sparkbar div {
    	float: left;
    	height: 5px;
    }
    .sparkbar div {
    	float: left;
    	height: 10px;
    	margin-left: -1px;
    }
    /* fascinated */
    #mdr-e1 {
    	background-image: url(../images/fascinated.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	background-size: contain;
    }
    #mdr-e1:hover {
    	background-image: url(../images/fascinated.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	background-size: contain;
    }
    #mdr-e1 .percent {
    	color: #bdc3c7;
    }
    .spark1 {
    	background-color: #bdc3c7;
    }
    /* happy */
    #mdr-e2 {
    	background-image: url(../images/happy.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	background-size: contain;
    }
    #mdr-e2 .percent {
    	color: #f1c40f;
    }
    .spark2 {
    	background-color: #f1c40f;
    }
    /* sad */
    #mdr-e3 {
    	background-image: url(../images/sad.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	background-size: contain;
    }
    #mdr-e3 .percent {
    	color: #27ae60;
    }
    .spark3 {
    	background-color: #27ae60;
    }
    /* angry */
    #mdr-e4 {
    	background-image: url(../images/angry.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	background-size: contain;
    }
    #mdr-e4 .percent {
    	color: #e74c3c;
    }
    .spark4 {
    	background-color: #e74c3c;
    }
    /* bored */
    #mdr-e5 {
    	background-image: url(../images/bored.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	background-size: contain;
    }
    #mdr-e5 .percent {
    	color: #3498db;
    }
    .spark5 {
    	background-color: #3498db;
    }
    /* afraid */
    #mdr-e6 {
    	background-image: url(../images/afraid.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	background-size: contain;
    }
    #mdr-e6 .percent {
    	color: #b967da;
    }
    .spark6 {
    	background-color: #b967da;
    }
    .p-0 {
    /*	color: #CCCCCC; */
    }
    #feelbox-widget p {
    	margin: 0;
    	padding: 0;
    }
    #feelbox-widget br {
    	display: none;
    }
    #feelbox-twitter-button {
    	background-image: url(../images/share-twitter.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	font-size: 2em;
    	color: transparent !important;
    	margin: 4px;
    	text-decoration: none !important;
    }
    #feelbox-facebook-button{
    	background-image: url(../images/share-facebook.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	font-size: 2em;
    	color: transparent !important;
    	margin: 4px;
    	text-decoration: none !important;
    }
    #feelbox-googleplus-button {
    	background-image: url(../images/share-googleplus.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	font-size: 2em;
    	color: transparent !important;
    	margin: 4px;
    	text-decoration: none !important;
    }
    #feelbox-twitter-button a {
    	outline: none !important;
    }
    #feelbox-facebook-button a {
    	outline: none !important;
    }
    #feelbox-googleplus-button a {
    	outline: none !important;
    }
    .percent {
    	margin-top: 100%;
    }
    .vftthx {
    	position: absolute;
    }
    #feelbox-social-media, a#feelbox-social-media {
    	text-decoration: none !important;
    }
    a#clr {
    	text-decoration: none !important;
    }
    .entry-content a {
    	border-bottom: 0px !important;
    }
    #feelbox-ifeel {
    }
    div#feelbox-s {
    	line-height: 24px;
    }
    
    /* fl3r: mobile <500px */
    
    @media (max-width: 500px) {
    div#feelbox-s {
    	font-size: 0.75em;
    }
    #feelbox-widget #hdr #title span {
    	background: url("../images/logo.png") no-repeat scroll 0 0 transparent;
    	display: block;
    	float: left;
    	margin-right: 8px;
    	margin-top: 2px;
    	min-height: 24px;
    	text-indent: -99999px;
    	width: 27px;
    }
    #feelbox-twitter-button {
    	background-image: url(../images/share-twitter.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	font-size: 1.5em;
    	color: transparent !important;
    	text-decoration: none !important;
    }
    #feelbox-facebook-button{
    	background-image: url(../images/share-facebook.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	font-size: 1.5em;
    	color: transparent !important;
    	text-decoration: none !important;
    }
    #feelbox-googleplus-button {
    	background-image: url(../images/share-googleplus.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	font-size: 1.5em;
    	color: transparent !important;
    	text-decoration: none !important;
    }
    }
    
    /* fl3r: mobile <400px */
    
    @media (max-width: 400px) {
    #feelbox-widget.small ul li #feelbox-cell span.m {
    }
    #feelbox-widget.small ul li #feelbox-cell span.percent {
    	font-size: 0.75em;
    }
    #feelbox-widget.small ul li #feelbox-cell .vftthx {
    }
    }

    For the infinite loading try to disable, if you can, all the other plugins.

    great, thanks for css
    I can’t turn off all my plugins, but I will make test environment and check it

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Size options’ is closed to new replies.