I am using materializecss framework for my website. I am using a scrollspy function for the navigation bar. But I want to change the default color of red to white and change from vertical line to a horizontal line underneath nav links.
Now I have this
What I want is
JS code for scrollspy function.
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
I don't know which specific classes to change.
If you don't want to use a side table of contents on your website, you can change the css for the table-of-contents class.
Go to the materialize.css file, and find the following code:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-left: 2px solid #ea4a4f;
}
Then you can replace it with this:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-bottom: 2px solid white;
}
To see the results, you have to link the materialize.css file instead of materialize.min.css in your html. In a production environment, you will need to minimize the modified materialize.css file.
Maybe it's a little late, but I hope it will help.
of-content class, you can add css like this
nav ul li a.active {
border-bottom: 1px solid #333;
}
means, when element a is active, it will give border-bottom
Related
I am building a website using vue.js have many users, and i need to add option for each user to change his store page style like background and button colors ,and so on..
so what are the steps i need to follow to build it using vue.js?
.column {
display: table-cell;
float: left;
width: 10%;
padding: 11px;
border-bottom: 0.5px dashed #ccc;
border-right: 0.5px dashed #ccc;
page-break-inside: avoid;
}
hint: style changes no need to be huge or applied directly , i am thinking of make separated page for style sitting , and when save data it will apply to the target page .
and thank you all..
I am currently using Visual Studio Code to develop a web application and I have 3 files
index.html, styles.css and app.js
Currently in my html, I am creating a navbar based on ul and li
whereas in my app.js, I am also using ul li to create a list to show values pulled from my database.
My issue is, in my css, this styles meant for my app.js only, is appearing for my index.html li items as well. I understand why it is happening, but I am unsure of how to fix this.
li{
padding: 20px;
background: #f6f6f6;
font-size: 20px;
color: rgb(0, 0, 0);
position: relative;
border-bottom: 1px solid #e6e6e6;
height: 80px;
}
As shown, this li css is affecting the li inside of the navbar, and the li in the list displayed on the body
Would appreciate any help, thanks.
Here is my html navbar codes
<header>
<img class = "logo" src="images/logo.jpg" height = "50">
<h1 style="color:rgb(0, 0, 0);font-size:30px">Physics Tutor Portal</h1>
<nav>
<ul class = "nav_links">
<li><button>Unknown Questions</button></li>
<li><button>Manage Quiz</button></li class = "test">
<li><button>Quiz Statistics</button></li class = "test">
<li><button>Feedbacks</button></li class = "test">
</ul>
</nav>
</header>
css is always applied to html, you can only design or change the color of a html tag.
Your javascript file will generate a list li in your case but that just means that he's gonna be added to the current html so it's potentially going to be altered by your css.
And this is indeed the case because you stipulate a rule with li {} which means that all the lion your page will be affected, even the ones generated by javascript.
To avoid this you will need to update your html structure to make your css more precise. For example: your generated list will be encapsulated in a ul tag, the list is here to 'manage the quizz' (if I understood you correctly). So you can simply add an id to this ul like <ul id="quizzManager">. You will be able able now to write css only for li who are children from a ul with the id quizzManager just like that:
ul#quizzManager li {
padding: 20px;
background: #f6f6f6;
font-size: 20px;
color: rgb(0, 0, 0);
position: relative;
border-bottom: 1px solid #e6e6e6;
height: 80px;
}
In this case, all li that are not in a ul#quizzManager will not be affected by this css.
I have a wordpress website and I have a button in the header menu which is called 'Join as a tradesperson'.
http://prntscr.com/px7mdt
It has a green border and white background and the text is black.
I wanted the background of the button to change to green (color: #25ad00) and the text to change to white (color: #fff) when I hover over it.
I have added the following code to custom css is the dashboard:
body #menu-item-1847 a{
color:#000;
}
#menu-item-1847 a{
font-weight: 700;
border: 2px solid #25ad00;
border-radius: 5px;
padding: 2px 20px
}
#menu-item-1847 a:hover {
color: #fff;
background-color: #25ad00;
}
...but now when I hover over the button the background turns green but the text remains black:
http://prntscr.com/px7o9u
I was jut wandering what is wrong with the code as I thought the
#menu-item-1847 a:hover {
color: #fff;
...would change the color of the text to white when I hover over it?
Thank you
It's all about your DOM's CSS specificity you can make your code working without adding !important.
Just increase the CSS specificity. (share your HTML I will explain you this with CSS specificity)
Please read about CSS specificity. Using !important is not good practice. It is not clean code. Go through these articles.
Don't use !important instead increase CSS specificity
Is Using !important is a right choice?
To overwrite existing CSS, add !important like this:
#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}
You can using !important statement like this.
(If you specified the selector correctly, if not, double check the selector #menu-item-1847)
#menu-item-1847 a:hover {
color: #fff!important;
}
It means, something like:
Use me, if there is nothing important else around!
I am not sure why I am having such troubles with this. I have browsed Jquery's slider css file and found the class name of the handles. .ui-slider-handle and it even says in the API docs that is the name of it Slider API doc link, but whenever I add background or background-color and give it a color, it does nothing. The same thing for trying to get the handles to cover the entire bar.
I created a demo page on a site I have to show what I am trying to do. Demo page
.ui-slider-handle {
height: 100%;
color: #000;
margin: 0;
}
Also if someone doesn't mind. I am trying to make the words "Budget" appear in the red part (the budgeted range), but when I applied this: <div class="ui-slider-range">Budget</div> into my html, the word Budget shows to the far left of the slider. The html is like this:
<div id="slider-range">
<div class="ui-slider-range">Budget</div>
</div>
.ui-slider-range {
background: red;
text-align: center;
}
How can I add the background-color to the slider handles and add the word "budget", so that it is in the middle of the red area?
To change ui-slide-handler color, try:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: yellow !important;
}
This is the rule to be overwritten.
The original rule is the following:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
It's very easy to see all the rules that apply to any element in the page using browser dev tools element inspector.
Your rule isn't specific enough based on the existing rules that have higher specificity with selectors like:
.ui-widget-content .ui-state-default
/* and */
.ui-slider-horizontal .ui-slider-handle
A simple way to make more specific for one instance would be to use your ID of main widget in selector
#slider-range .ui-slider-handle
Or for more broad reaching use.... copy the most specific selector and use that. Last rule in page with same selector takes precedence
I am using jQuery UI Autocomplate plugin as it is on the first example. I also have jQuery UI Theme style sheet referenced for other plugins.
This is the input I am using with that:
CSS:
div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}
div.paddedInput input {
border: 0px;
width: 100%;
outline:none;
}
HTML:
<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
Here is my situation:
As the above div element serves as an input element (on the style perspective), the autocomplete list looks a little awkward because it sets itself for the input element.
I dug the source code which jQuery UI is creating for the autocomplete function and there is ui-autocomplete style class but as I said but I couldn't figure auto what should I override.
Any thoughts?
UPDATE:
Here is the jsfiddle sample:
http://jsfiddle.net/tugberk/YxRYe/4/
If you want to overwrite your style, you can use !important keyword as this code
div.paddedInput input {
border: 0px!important;
width: 100%;
outline:none;
}
I guess the main question here is why you would have the outer div element serve as an input element from a style perspective in the first place.
If this is not a requirement, just do this. Otherwise we'll have to use JS to set the width of the dropdown to the width of the div and adjust the position of the dropdown. A rather hacky solution i.m.o. I am not aware of a way to specify what element the dropdown should attach to since this is rarely what you want.