a:hover
{
text-decoration: none;
color: #F78888;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="z-index:100;width:210px;font-weight:bold;" id="mynav">
<div class="w3-container" style="color: white;">
<h3 class="w3-padding-64"><b>No<br>Name</b></h3>
</div>
<div class="w3-bar-block w3-padding-8" style="color: white;">
Courses
Exercises
Rubric
Students
AnyName
Contact
Logout
</div>
</nav>
I am using w3-CSS for my web page. While I apply the hover effect for the 'a' elements it is applying. I can't overwrite the predefined hover effect of the w3-css. I want to change thee text color while hovering the mouse.
That stylesheet you're using is littered with !important declarations including this one at line 144:
.w3-button:hover{color:#000!important;background-color:#ccc!important}
If you want to use a custom color you're unfortunately going to have to declare it the same way using !important. I never advise this if I can help it but, that stylesheet is garbage, so I'm afraid you're not left many choices.
Below is a sample showing this. (I had to add a few other non-relevant styles to get the markup to display in the snipped because nav was display:none. You can ignore those.
/* For demo only */
body {
background-color: #ddd;
}
nav.w3-sidebar.w3-top {
display:block;
background-color: #ccc;
}
/* override !important declarations from W3 stylesheet */
a.w3-button:hover {
color:red !important;
background-color:#ccc !important
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="z-index:100;width:210px;font-weight:bold;" id="mynav">
<div class="w3-container" style="color: white;">
<h3 class="w3-padding-64"><b>No<br>Name</b></h3>
</div>
<div class="w3-bar-block w3-padding-8" style="color: white;">
Courses
Exercises
Rubric
Students
AnyName
Contact
Logout
</div>
</nav>
Make a new class in your stylesheet, e.g:
.myCustomHoverColor:hover {
color: #78cc45 !important;
}
and add it as a class to your <a> element.
so your <a> would look like this:
Courses´
This worked for me:
<head>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<style>
.myCustomHoverColor:hover {
color: #78cc45 !important;
}
</style>
</head>
<body>
<nav class="w3-sidebar w3-collapse w3-top w3-large" style="background-color: gray; z-index:100;width:210px;font-weight:bold;" id="mynav">
<div class="w3-container" style="color: white;">
<h3 class="w3-padding-64"><b>No<br>Name</b></h3>
</div>
<div class="w3-bar-block w3-padding-8" style="color: white;">
Courses
Exercises
Rubric
Students
AnyName
Contact
Logout
</div>
</nav>
</body>
.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
Courses
By removing the .w3-hover-white from the a element and gave my own userdefined style.
a:hover
{
text-decoration: none;
background-color: white;
color: #F78888;
}
Related
.lo:link, .lo:visited {
color: #0060b6;
text-decoration: none;
background-color: transparent;
}
<div class="row">
{% for project in projects %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="{{ project.image.url }}" height="250" width="348">
<div class="card-body">
<h4><a class="lo" href="{{ project.url }}">{{ project.title }}</a></h4>
<p class="card-text">{{ project.description }}</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
{% endfor %}
</div>
I'm trying to change the stuff in the <a> tag so it's not blue and highlighted.
CSS links are in the right order - bootstrap first, then my own.
I've also tried adding !important after each CSS property doesn't work.
I'm using the Django block content method to have header and footer but that shouldn't make any difference.
You should use id instead of class, because id has a higher priority than class:
#lo:link, #lo:visited {
color: #0060b6;
text-decoration: none;
background-color: transparent;
}
Override the property this way:
.lo:link, .lo:visited {
color: #0060b6;
text-decoration: none;
background-color: transparent;
}
In bootstrap, <a> tag has its own rules which can be overridden easily.
a {
color: #007bff; /* change to the color you want */
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #0056b3; /* change me as you like */
text-decoration: underline;
}
Also, I gave it a try using your style.And it did work for me in a new project which means, you need to check what's preventing it from changing? maybe it's about the CSS specificity
SOLVED! thanks, I really did try everything for 4 agonizing days, it turns out it was in settings.py (using django) STATIC_URL was set to a specific directory so I just had to put my custom css in there, reference that in html and it worked
I am very new with CSS and I can't style my code well. How to set "font-size:30px;" for the text "font_30", and "font-size:3px;" for the text "font_3" in the code example?
<style>
.cl_30 {font-size:30px;}
.cl_3 {font-size:3px;}
</style>
<div class="cl_30">
<p class="cl_3">font_3</p>
font_30
</div>
What you've done is exactly correct. The font-size of 3px is quite small and easy to glance by, but the text is visible if you look closely.
<style>
.cl_30 {
font-size: 30px;
}
.cl_3 {
font-size: 3px;
}
</style>
<div class="cl_30">
<p class="cl_3">font_3</p>
font_30
</div>
I would like to remove gap between navbar and carousel in materialize design. I used vue component for each div and laravel as backend.
I use Sass for precompiler css. I had try to setting the margin body, margin for navbar, and margin for carousel through sass. Also I want to try to setting the margin through style scoped in vue component. But it didn't change , the gap still appears.
This is my code :
Navbar.vue
<template>
<nav class="white z-depth-1">
<img :src="'img/logo.png'" width="50px" height="50px" alt="Logo" style="margin-left:50px; margin-top:5px;">
<ul id="nav-mobile" class="right">
<li>
<div class="center row">
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input type="text" class="center" />
</div>
</div>
</div>
</li>
<li>artist</li>
<li>merchandise</li>
<li>about</li>
<li>login</li>
<li>register</li>
</ul>
</nav>
</template>
<script>
export default{}
</script>
carousel.vue
<template>
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img src="/img/carone.jpg"></a>
<a class="carousel-item" href="#two!"><img src="/img/cartwo.jpeg"></a>
<a class="carousel-item" href="#three!"><img src="/img/carthree.jpeg"></a>
<a class="carousel-item" href="#four!"><img src="/img/carfour.jpeg"></a>
</div>
</template>
<style lang="scss" scoped>
.carousel{
margin-top: -20px;
}
</style>
<script>
$(function(){
setInterval(function() {
$('.carousel').carousel('next');
}, 2000);
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true
});
});
</script>
App.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('carousel-component', require('./components/Navbar.vue'));
const app = new Vue({
el: '#app'
});
App.Scss
#import "~materialize-css/sass/components/color-variables";
#import "~materialize-css/sass/components/variables";
#import '~materialize-css/sass/materialize';
#font-face {
font-family: 'VojoCustomize'; /*a name to be used later*/
src: url('/fonts/GeosansLight.ttf');
}
nav ul li a{
color: $primary-color;
border-bottom-color: rgba(0,0,0,0);
font-family: VojoCustomize, sans-serif;
font-style: normal;
font-weight: bold;
}
.carousel{
max-height: 400px;
margin: 0 !important;
}
nav .input-field input[type='text'] {
height: 50px;
background-color: $primary-color;
margin-right: 30px;
border-radius: 10px;
margin-top: 5px;
width: 600px;
}
.yellow-primary-color{
color : $primary-color-dark;
}
.custom-textfield{
border-radius: 20px;
width: 100vw;
height : 50vh;
background-color: $primary-color;
}
Appear in browser
Sorry for my bad English. But, I'm really stuck. Please give me advise for this problem. Thank You.
To fix you should remove the bottom margin (added by Materialize-CSS) of the row class and the input element inside your nav.
The following css snippet should fix your problem:
/* remove input bottom margin */
nav .input-field input[type='text'] {
margin-bottom: 0;
}
/* remove .row bottom margin */
nav .row {
margin-bottom:0;
}
I was wondering is it possible to give each tooltip a different background color in materialize.css framework?
When the tooltip is activated I don't see any additional markup generated in the inspector, therefore can not target with CSS.
Tooltip color can be changed using css. You have to override default css as follow. Assign your color code to background-color in backdrop class.
<style>
.backdrop{
background-color: purple;
}
</style>
Following is sample working code snippet for 4 buttons which show tooltip.
<!DOCTYPE html>
<html>
<head>
<title>Tooltip</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS for tooltip-->
<style>
.backdrop{
background-color: purple;
}
</style>
</head>
<body class="row">
<div class="col s12" >
<div class="col s12"> <h4> Click following</h4> </div>
<!-- data-position can be : bottom, top, left, or right -->
<!-- data-delay controls delay before tooltip shows (in milliseconds)-->
<a class="btn tooltipped col s2" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"> Bottom</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="top" data-delay="150" data-tooltip="I am tooltip"> Top</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="left" data-delay="250" data-tooltip="I am tooltip"> Left</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="right" data-delay="550" data-tooltip="I am tooltip"> Right</a>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</body>
</html>
Tooltips appear like this in materialize:
I guess if you figure out the ID of the tooltip you want to change the background of you can do something like this: #TOOLTIP-ID.backdrop {background-color: red;}
You can customise a tooltip with the following css (Materialize 1.0.0)
.material-tooltip {
padding: 10px 8px;
font-size: 1rem;
z-index: 2000;
background-color: transparent;
border-radius: 2px;
color: #fff;
min-height: 36px;
line-height: 120%;
opacity: 0;
position: absolute;
text-align: center;
max-width: calc(100% - 4px);
overflow: hidden;
left: 0;
top: 0;
pointer-events: none;
visibility: hidden;
background-color: #323232;
font-family: "Roboto Mono";
font-size: 0.8em;
font-weight: 700;
}
To specify diffrent color for each tooltip you can do it like this:
while initializing tooltips add this function:
$('.tooltipped').tooltip({delay: 50}).each(function () {
var background = $(this).data('background-color');
if (background) {
$("#" + $(this).data('tooltip-id')).find(".backdrop").addClass(background);
}
});
and then on your tooltip specify it like this:
<a href="#!" class="tooltipped"
data-position="bottom"
data-delay="50"
data-tooltip="I'm a tooltip"
data-background-color="red lighten-3">
as you can see I'm changing the class attribute so you can use materialize-css colors
I solved it like this
$('.tooltipped').tooltip({delay: 50});
.material-tooltip .backdrop{
background-color: #DB0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<div class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip" >
Test Tooltip
</div>
For current version of materialize.css (1.0.0) you should style .material-tooltip and .tooltip-content
like this (sass):
.material-tooltip
background-color: white
border-color: gray
border-style: solid
border-width: 1px
.tooltip-content
padding: 3px
font-size: .8rem
background-color: transparent
color: #000
max-width: 250px
Updated Answer for 1.0
To style the tooltip's background etc:
.material-toolip {
background:#000;
}
To style the actual text within the tooltip use the following:
.material-tooltip .tooltip-content
{
font-size:12px;
}
After clicking on either right or left in this carousel, the button remains darker, even after you mouse off the elelemnt. I assume the reason is some sort of visited state, but looking at the CSS, I don't see anything relevant. Is there any way to prevent that effect?
I've written a JSFiddle to demonstrate it, and copied the HTML below.
<div class='container'>
<div class='row'>
<div class='carousel slide' data-interval='false' id='product-image-carousel'>
<!-- Wrapper for slides -->
<center class='carousel-inner'>
<div class='active item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
<div class='item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
</center>
<!-- Controls -->
<a class='left carousel-control' data-slide='prev' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' data-slide='next' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
<!-- Carousel -->
</div>
</div>
Quick workaround: Overwrite bootstrap's css.
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
opacity: .9;
filter: alpha(opacity=90);
}
Remove completely the :focus selector
You can use this workaround:
$(".carousel-control").focus(function(event){
$(this).blur();
});
It works for me.
Simply fix this with css , Decrease the opacity to this .carousel-control:hover, .carousel-control:focus classess , apply the below code your fiddle or your page you can see the difference , Thanks
#product-image-carousel a {
outline: none !important; /* this will remove the outline when we click the anchor tag */
}
.carousel-control:hover, .carousel-control:focus {
opacity: 0.5; /* this will remove the darker color on focus and hover */
}
jsfiddle Update
.carousel-control:focus {
outline: none;
opacity: 0.5;
}
.carousel-control:hover {
opacity: 0.8;
}