I have this defined in my app.scss
.fas {
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
font-weight: 900;
}
and am trying to use an icon like this
<Button class="btn fas" text=""></Button>
in my app. which renders as
from my reading this should work, but I am obviously missing some config item.
Any ideas what I could be missing?
I've had more luck using the following format of the code when using icon fonts.
const icon = String.fromCharCode(0xf095);
<Button class="btn fas" [text]="icon"></Button>
I took time learning how to theme bootstrap using SASS. Steps were as follows:
In my project directory at command line ran npm install bootstrap --save
Then I wrote to main.scss file with
$theme-colors: (
"primary": #9b2335,
"secondary": #696969,
"success": #d9596c,
"info": #d02f47,
"warning": #e38291,
"danger":#de6e7e,
"light": #d9d9d9,
"dark": #333333
);
#import "node_modules/bootstrap/scss/bootstrap";
At command line ran sass main.scss main.css
And with that I would expect ALL theme colors to be overwritten. Please note, all of my custom $theme-color variables are a hue in either the red or gray family. Nothing about those color values is blue. However, the border around my navbar toggle button is blue when focused (see pic). Why did it not change to one of my custom theme colors? I did look through _variables.scss but nothing obvious jumped out at me.
The html for my page was copied from the bootstrap album example, but the important part I think is this:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
What Sass am I missing here to override ALL colors?
that's the default bootstrap focus color from ("_reboot.scss"):
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
if you want to set a color from your theme you have to override it. f.e.:
button:focus {
outline: 5px auto map-get($theme-colors, "primary");
}
I am trying to get the effect shown here https://www.kogevitamins.com/
Where you hover over the "learn more" link to get the opacity of the image to also change.
Thanks.
Edit:
Right now I have
for HTML
<img src="/images/pill.png" alt="description" id ="image" />
<p> Daily Essentials </p>
<a id ="button" href="#">Learn More</a>
For jquery
$("#button").hover(function(){
$("#image").animate({opacity:1},300);
}).mouseout(function(){
$("#image").animate({opacity:0.6},300);;
});
It doesn't seem to work so far
Edit:
I have the following code recently updated but the hover on effect doesn't work for me. Heres a link to the thing I'm trying to get to work http://maninkorean.com/
<div class ="product-content">
<img class="imgClass" src="/images/pill.png" alt="description" />
<p> Daily Essentials </p>
<a id ="button" href="#">Learn More</a>
</div>
$("a#button, img").hover(function(){
$("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
$("img.imgClass").animate({opacity:0.6},300);;
});
img.imgClass{
opacity: 0.6
}
#button {
padding: 10px 24px;
background:#F15951;
border: medium none;
border-radius: 3px 3px 3px 3px;
color:white;
margin-top:50px;
margin-bottom:50px;
font-weight: bold;
}
You should be able to do this using jQuery with the following code:
$('#id of link you want to use to change opacity').hover(function() { $('#id of image that you want to change opacity of').css({ 'opacity' : 0.25 }); });
Combine JQuery and CSS3's opacity features to wire up an "OnHover" event to the images that changes the opacity of the said image.
http://www.css3.info/preview/opacity/
Unless you want to see through those images and show background pattern, there is no need to deal with opacity.
Even though you can prepare semitransparent version of image and change src attribute in onMouseOver event.
But you can achieve the same effect by simply putting a div with 1-pixel semitransparent background above selected image.
Using CSS opacity will cut off older browsers.
Hi You can easily do this by css, with somethings like this:
.img {opacity:0.4; /*some more css*/ } /* (opacity:) is now supported by all browsers */
.img:hover {opacity:0.98; /* Some more css be creative... */ }
That's all!
Here's some html, css, jquery that shows how to do it:
<div></div><a>Hover On Me</a>
div{
width:300px;
height:300px;
display:block;
background:red;
opacity: 0.6
}
a{
display:block;
margin-top:20px;
width:100px;
padding:5px;
height:20px; border-radius:5px;
background:yellow;
}
$("a").hover(function(){
$("div").animate({opacity:1},300);
}).mouseout(function(){
$("div").animate({opacity:0.6},300);
});
http://jsfiddle.net/Rd5Yy/2/
It looks like in the specific example you cite, they've used CSS3 transitions. See here for a tutorial: http://www.w3schools.com/css3/css3_transitions.asp
In a nutshell using these you can do all kind of funky effects without any javascript. CSS3 is supported by modern browsers (but is pretty cutting edge as web technologies go) and isn't yet a W3C standard.
This code should do what you wanted to do (I tested it against your HTML):
$(document).ready(function() {
$("#button").hover(function(){
$("#image").animate({opacity:0.6},300);
}).mouseout(function(){
$("#image").animate({opacity:1},300);;
});
});
Okay, I just checked out your page. Firstly, it looks like jQuery is not working through the $ on your site, so you'll need to either troubleshoot that, or use it by jQuery instead. I pasted this code in on the JavaScript console on your site and it works:
jQuery("a#button, img").hover(function(){
jQuery("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
jQuery("img.imgClass").animate({opacity:.6},300);;
});
edit: Looks like you got it working as I was typing up this response
I want to put "5px padding" for my banner in a module. I have made a template with artisteer. Simply I have added a module calling "top" in my index.php file like this:
<div class="logo_custom">
<jdoc:include type="modules" name="logo" />
</div>
It appears the banner with "padding:0 0;". How can I put a 5px padding for my banner? I have tried with div, calling a class with css file. But doesn't work. If anyone has any idea please share it with me.
Thanks in advance. Sorry for my poor English.
.logo_custom { padding: 5px; }
I am currently working with a page that has a few hidden divs, being called on to be displayed later.
This is the code I have on the page itself causing the problem.
<div align="center" id="check">
Block of plain text right here.<br />
Checking...<br />
<img src="http://sw6.us/template/images/loading.gif" /><br />
<?php
require("databasetest.php");
?>
echo "check_data shown";
</div>
This code here is what I have modifying the "check" div on a style page
.check {
padding-top: 25px;
padding-left: 0px;
color: white;
align: center;
display:none;
}
As you can see the div is instructed to be hidden on page load via the style code. Everything is hidden except for the picture.
I don't believe the PHP is the issue because I included an echo displaying text which is properly hidden along with the HTML before it. I also took out that require command and the image was still not hidden. The image being a .GIF is not the issue either, I have tried using a .png and got the same problem!
Thanks for the help! It is greatly appreciated!