Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Jakob Lenfers

    (@jakob42)

    If you send me a couple css files, I’ll add some kind of theme chooser in the future. But I personally don’t see any use in it, since it needs to be adapted to the blog anyways. Also I’m bad with design.

    Thread Starter Faisal Humayun

    (@fhumayun)

    Hey Jakob –
    It’s not too difficult to have a fairly attractive design.
    For example, I used this site https://www.bestcssbuttongenerator.com/
    to create the buttons you can find with posts used at https://seekeraftertruth.com

    Here’s a sample:

    /* a single button */
    div.reaction_buttons .reaction_button {
    	-moz-box-shadow:inset 0px 0px 15px 3px #23395e;
    	-webkit-box-shadow:inset 0px 0px 15px 3px #23395e;
    	box-shadow:inset 0px 0px 15px 3px #23395e;
    	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #199e88), color-stop(1, #66d1df));
    	background:-moz-linear-gradient(top, #199e88 5%, #66d1df 100%);
    	background:-webkit-linear-gradient(top, #199e88 5%, #66d1df 100%);
    	background:-o-linear-gradient(top, #199e88 5%, #66d1df 100%);
    	background:-ms-linear-gradient(top, #199e88 5%, #66d1df 100%);
    	background:linear-gradient(to bottom, #199e88 5%, #66d1df 100%);
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#199e88', endColorstr='#66d1df',GradientType=0);
    	background-color:#199e88;
    	-moz-border-radius:17px;
    	-webkit-border-radius:17px;
    	border-radius:17px;
    	border:1px solid #1f2f47;
    	display:inline-block;
    	cursor:pointer;
    	color:#ffffff;
    	font-family:Trebuchet MS;
    	font-size:15px;
    	padding:6px 13px;
    	text-decoration:none;
    	text-shadow:0px 1px 0px #263666;
    }
    
    .myButton:active {
    	position:relative;
    	top:5px;
    }
    }
    /* the button while hovering over it
    div.reaction_buttons > .reaction_button:hover {
    
    }*/
    /* the button after voting */
    div.reaction_buttons > .voted, div.reaction_buttons > .voted:hover {
    	position:relative;
    	top:5px;
        bottom:10px;
    }
    /* number of votes including parantheses. */
    .reaction_buttons .reaction_button .count {
        color:#FFEB63;
        font-weight:normal;
        text-shadow:3px 0px 4px #86ae47;
    }
    /* number of votes in between the parantheses. */
    .reaction_buttons .reaction_button .count_number {
        color:#FFC000;
        font-weight:normal;
        text-shadow:3px 0px 4px #86ae47;
    }

    Although I must admit, I’ve not quite figured out how to get the hover/clicked effects yet. Any pointers would be appreciated ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Feature Request: Preset themes’ is closed to new replies.