How can I override skin's settings through code?

How can I override skin's settings through code? - javascript

I have a Firefox extension that changes a browser's tab color like this:
tabBrowser.tabContainer.childNodes[i].style.backgroundColor = "#8f8";
This code works fine in my development profile, but in the working profile I have a theme installed (Noia 2.0 eXtreme), that sets its own appearance for the tabs, so my code can not change the tab's color. Is it possible to override the theme's settings through the code?
I just do not get it. I have found the skin's CSS file, it seems pretty simple.
tab {
-moz-appearance: none;
padding: 1px 5px 2px 7px;
border-top: 1px solid;
border-right: 2px solid;
border-left: 1px solid;
-moz-border-top-colors: #FFFFFF;
-moz-border-right-colors: #808080 #404040;
-moz-border-left-colors: #FFFFFF;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
background-color: #CDCED3;
color: #606060;
min-height: 20px !important
}
tab[selected="true"] {
margin-top: 0;
padding: 1px 7px 4px 9px;
font-weight: bold;
background-image : url("chrome://browser/skin/icons/Bookmark-background.png") !important;
border-bottom: 1px solid;
-moz-border-bottom-colors: #FFFFFF;
color: #000000;
}
tab:hover {
color: #000000 !important;
}
Setting
tabBrowser.tabContainer.childNodes[i].style.setProperty("background-image", "none", "important");

according to https://developer.mozilla.org/en/DOM/CSSStyleDeclaration you could use:
tabBrowser.tabContainer.childNodes[i].style.setProperty("background-color", "#8f8", "important");

Related

Some bug in html,css file

I just learned some HTML and css so I tried to make a simple website with it
using this code
why "problem solving" is pink, not blue?
it's not a real problem but I really didn't know how to solve it
this is the website i've made
<style>
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color: #17202A ;
}
h1{
color: #AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.x{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
</style>
and this is the css on it so what is the proplem ?

Your problem is that tag, used in links, when visited, by default is changed to pink.
In CSS when you use this to change a LINK in your comum state.
a {
color : blue;
}
Using this way, you will change HOVER state :
a:hover {
color : red;
}
This way, you will change VISITED state :
a:visited {
color : orange;
}
And This way, you will change ACTIVE state :
a:active {
color : pink;
}
Each CSS will apply CSS relative to the state of the link.
Try this to solve :
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color:#17202A;
}
h1{
color:#AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.x{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
/* This is the key */
a, a:hover, a:visited, a:active{
color:#0000ff;
}
<html>
<head>
<meta charset="UTF-8">
<title>Only a test</title>
</head>
<body>
<h1>Hello there!</h1>
<h2>Hello there!</h2>
<h2 class="x">Hello there!</h2>
<h3>Hello there!</h3>
<h4>Hello there!</h4>
<ul id="ul1"><li>Test</li></ul>
<ol id="ol1"><li>Test</li></ol>
<ul id="ul2"><li>Test</li></ul>
<ol id="ol2"><li>Test</li></ol>
<p id="p1">Test</p>
<p id="p2">Test</p>
Your link
</body>
</html>

This is due to the fact that all HTML links have 4 states.
link , visited , active and hover.
And for each of these states it takes a particular color in HTML by default. By default in normal state it appears blue.
If you want to override any of these you can use the CSS for that:
eg,
a:visited {
color:orange; /*or which ever color you need*/
}
a:hover {
color: red; /*your CSS value*/
}
Similarly for other two.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class = "xd"><h1>Things you must learn to be good at programming:</h1>
<ol class="ol1">
<li>Proplem Solving</li>
<p id ="p1">Problem solving consists of using generic or ad hoc methods in an orderly manner to find solutions to difficulties.</p>
<li style = "font-size:25px">Logical Thinking </li>
<p id ="p2">Logical thinking is the act of analyzing a situation and coming up with a sensible solution. Similar to critical thinking, logical thinking requires the use of reasoning skills to study a problem objectively, which will allow you to make a rational conclusion about how to proceed.</p>
<li>Mathematics</li><p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as numbers (arithmetic and number theory), formulas and related structures (algebra), shapes and spaces in which they are contained (geometry), and quantities and their changes (calculus and analysis). There is no general consensus about its exact scope or epistemological status.</p>
</ol>
<ul class="ul1"><h2>Things you must learn to be a good front-end developer:</h2>
<li>CSS</li>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<li>JavaScript</li>
<li>ReactFramework</li>
</ul>
<ol class="ol2"><h3>Things you must learn to be good at CSS:</h3>
<li>CSS specifity</li>
<li>Floats</li>
<li>Positioning</li>
<li>Display</li>
<li>Box Model</li>
<li>CSS Grid</li>
<li>Flex Box</li>
<li>Media Queries</li>
</ol>
<ul class="ul2"><h4>Things you must learn to be good at JavaScript:</h4>
<li>Basic Syntax</li>
<li>OOP</li>
<li>Dom manupilation</li>
<li>Ajax/Fetch Api/Promises</li>
<li>Asynchronous JS(Async/Await)</li>
<li>Scoping/Hoisting/Closures</li>
<li>Refrence/Value</li>
<li>JSON</li>
</ul>
</div>
</body>
<style>
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color: #17202A ;
}
h1{
color: #AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.xd{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
a:visited {
color: blue;
}
</style>
</html>

Changing the position of the React mention suggestion List

I am using react-mentions in my project for mentioning users.. The problem is My comment input is at bottom of the page.. The react-mentions show the suggestion when we type # in the bottom of the cursor. I want this list to be above the cursor...Can anyone help me?
I tried Editing the css, but my methods doesn't work.
This is the Css i am using
.mentions {
margin: 1em 0;
}
.mentions--singleLine .mentions__control {
display: inline-block;
/* width: 130px; */
}
.mentions--singleLine .mentions__highlighter {
/* padding: 1px; */
border: 2px inset transparent;
}
.mentions--singleLine .mentions__input {
/* padding: 1px; */
border: 2px inset;
}
.mentions--multiLine .mentions__control {
font-family: monospace;
/* font-size: 14pt; */
}
.mentions--multiLine .mentions__highlighter {
border: 1px solid transparent;
/* padding: 5px; */
/* min-height: 63px; */
}
.mentions--multiLine .mentions__input {
border: 1px solid silver;
/* padding: 9px; */
outline: 0;
}
.mentions__suggestions{
left: 0;
bottom: 100%;
width: 90%;
}
.mentions__suggestions__list {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.15);
left: 0;
bottom: 100%;
width: 90%;
/* font-size: 10pt; */
}
.mentions__suggestions__item {
padding: 5px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.mentions__suggestions__item--focused {
background-color: #cee4e5;
}
.mentions__mention {
position: relative;
z-index: 1;
color: blue;
text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
-1px -1px 1px white;
text-decoration: underline;
pointer-events: none;
}
This is the js code
<MentionsInput className="mentions" value={newComment} onChange={e => setNewComment(e.target.value)} >
<Mention
trigger="#"
data={tagUserList}
/>
</MentionsInput>
But the output is still like the same..The list is showing below the cursor
Please help me to solve the problem

You can use forceSuggestionsAboveCursor={true}
<MentionsInput
value={value}
onChange={onChange}
style={defaultStyle}
placeholder={"Mention people using '#'"}
suggestionsPortalHost={container}
forceSuggestionsAboveCursor={true}
>
<Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
</MentionsInput>
There is a demo page that shows how it works.
This code example can be found in their GitHub here
It's the middle one from BottomGuard's section.
You can also use allowSuggestionsAboveCursor={true}, which will use bottom only if there's space.

How can I keep tabs fix in their places?

Here is my code:
.sort_box{
padding: 25px 0px;
direction: rtl;
font-family: BYekan,'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title{
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a{
display: inline-block;
font-size: 14px;
padding: 10px 20px;
}
.sort_box_items a:hover{
text-decoration: none;
background-color: rgba(132,141,149,0.05);
border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);
color: black;
}
.sort_box_items .sort_active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-top: 3px solid #f48024;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
a{
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>
As you see, the hover of tabs which aren't active changes their position a bit. How can I keep them fix forever?

You should apply your borders to non-active tabs as well. You can either match a background color or make them transparent. This way there's no shifting in the elements height.
I've added the following lines to .sort_box_items a.
border: 1px solid transparent;
border-top-width: 3px;
From there it's a matter of adjusting the colors of the borders, no need to re-declare the width and style.
.sort_box {
padding: 25px 0px;
direction: rtl;
font-family: BYekan, 'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title {
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a {
display: inline-block;
margin-bottom: -1px;
font-size: 14px;
padding: 10px 20px;
border: 1px solid transparent;
border-top-width: 3px;
}
.sort_box_items a:hover {
color: black;
text-decoration: none;
background-color: rgba(132, 141, 149, 0.05);
border-color: rgba(228, 230, 232, 0.25);
}
.sort_box_items .sort_active {
border-color: #ccc;
border-top-color: orange;
border-bottom-color: white;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-color: #ccc;
border-top-color: #f48024;
border-bottom-color: white;
}
a {
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>

adding border is causing that:
remove following unless you really need it.
border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);

remove border: 1px solid rgba(228,230,232,0.25); from .sort_box_items a:hover
.sort_box{
padding: 25px 0px;
direction: rtl;
font-family: BYekan,'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title{
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a{
display: inline-block;
font-size: 14px;
padding: 10px 20px;
}
.sort_box_items a:hover{
text-decoration: none;
background-color: rgba(132,141,149,0.05);
border-top: 3px solid rgba(228,230,232,0.25);
color: black;
}
.sort_box_items .sort_active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-top: 3px solid #f48024;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
a{
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>

waves js wont initialize in a button that was created through jquery/javascript

I use this beautiful google inspire waves effect (called waves js). It works fine in all button but im having an issue where wave js dont work on a button that was created through jquery (refer to my snippets below). Any ideas, clues, suggestions, recommendations, help to make this work?
$(document).ready(function(){
Waves.attach('.waves_button');
Waves.attach('.green_button');
Waves.attach('.waves_button_checkbox', ['waves-circle', 'waves-float', 'waves-light']);
Waves.init();
$(".test").click(function(){
$("body").append('<button class="green_button">test 2</button>');
});
});
/* green button */
.green_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.green_button:disabled{background: #d9d9d9; border: none;}
/* green button hover */
.green_button:hover{outline: none;color:#ffffff;background:#659d24 !important;border-bottom: 3px solid #659d24 !important;}
/* gray button */
.gray_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #a3a1a1;
background: #b7b7b7;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* gray button when hover */
.gray_button:hover{outline: none;color:#ffffff;background:#a3a1a1 !important;border-bottom: 3px solid #a3a1a1 !important;}
/* yellowgreen button */
.yellowgreen_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #b2be5b;
background: #c6d465;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* yellowgreen button when hover */
.yellowgreen_button:hover{outline: none;color:#ffffff;background:#b2be5b !important;border-bottom: 3px solid #b2be5b !important;}
/* red button */
.red_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #de7171;
background: #f17a7a;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.red_button:hover{outline: none;color:#ffffff;background:#de7171 !important;border-bottom: 3px solid #de7171 !important;}
/* blue button */
.blue_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #00bceb;
background: #00ccff;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.blue_button:hover{outline: none;color:#ffffff;background:#00bceb !important;border-bottom: 3px solid #00bceb !important;}
/* all color buttons when active */
.green_button:focus, .green_button:active, .gray_button:focus, .gray_button:active, red_button:focus, red_button:active, yellowgreen_button:focus, yellowgreen_button:active, blue_button:active, blue_button:focus{outline: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fian.my.id/Waves/static/waves.min.js"></script>
<link href="http://fian.my.id/Waves/static/waves.min.css" rel="stylesheet"/>
<button class="green_button test">test</button>

it will work if you move the attach event ( Waves.attach('.green_button') ) after the append if the button like this:
$(".test").click(function(){
$("body").append('<button class="green_button">test 2</button>');
Waves.attach('.green_button');
});
I tested it and it work well.

This library doesn't work this way...
It doesn't "attach" to an active selector list, it attaches to the static list matching the selectors at the time the attach function is called.
You can remedy this simply by attaching each new button as well:
$(document).ready(function(){
Waves.attach('.waves_button');
Waves.attach('.green_button');
Waves.attach('.waves_button_checkbox', ['waves-circle', 'waves-float', 'waves-light']);
Waves.init();
$(".test").click(function(){
var newButton = $('<button class="green_button">test 2</button>');
$("body").append(newButton);
Waves.attach(newButton.get(0));
});
});
/* green button */
.green_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.green_button:disabled{background: #d9d9d9; border: none;}
/* green button hover */
.green_button:hover{outline: none;color:#ffffff;background:#659d24 !important;border-bottom: 3px solid #659d24 !important;}
/* gray button */
.gray_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #a3a1a1;
background: #b7b7b7;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* gray button when hover */
.gray_button:hover{outline: none;color:#ffffff;background:#a3a1a1 !important;border-bottom: 3px solid #a3a1a1 !important;}
/* yellowgreen button */
.yellowgreen_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #b2be5b;
background: #c6d465;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* yellowgreen button when hover */
.yellowgreen_button:hover{outline: none;color:#ffffff;background:#b2be5b !important;border-bottom: 3px solid #b2be5b !important;}
/* red button */
.red_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #de7171;
background: #f17a7a;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.red_button:hover{outline: none;color:#ffffff;background:#de7171 !important;border-bottom: 3px solid #de7171 !important;}
/* blue button */
.blue_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #00bceb;
background: #00ccff;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.blue_button:hover{outline: none;color:#ffffff;background:#00bceb !important;border-bottom: 3px solid #00bceb !important;}
/* all color buttons when active */
.green_button:focus, .green_button:active, .gray_button:focus, .gray_button:active, red_button:focus, red_button:active, yellowgreen_button:focus, yellowgreen_button:active, blue_button:active, blue_button:focus{outline: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fian.my.id/Waves/static/waves.min.js"></script>
<link href="http://fian.my.id/Waves/static/waves.min.css" rel="stylesheet"/>
<button class="green_button test">test</button>

Styling the typeahead.js list (the bootstrap way)

I'm trying to create an autocomplete text field using typeahead.js. The examples here show suggestion lists that are nicely formatted. However, when I use the same code, I only get a bland list of suggestions like so:
Please see this jsFiddle for the code.
I'm using Bootstrap with it. What do I have to do to get a list that is formatted the Bootstrap way?

It looks like the default output has no styling at all and the .tt class has to be used to style the list. I got the following code by inspecting the element I wanted, tweak to suit your needs.
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}
.tt-query {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}

Develop Reference

JavaScript is the programming language of the Web.

How can I override skin's settings through code? - javascript

according to https://developer.mozilla.org/en/DOM/CSSStyleDeclaration you could use: tabBrowser.tabContainer.childNodes[i].style.setProperty("background-color", "#8f8", "important");

Related

Some bug in html,css file

Changing the position of the React mention suggestion List

How can I keep tabs fix in their places?

waves js wont initialize in a button that was created through jquery/javascript

Styling the typeahead.js list (the bootstrap way)

Categories

Resources