Member_2_7966113
asked on
Fade Out Bottom of Text
Hello Experts,
I currently use Joomla 3.4 to create my website www.keylooplabs.com. I’m trying to create an effect where the bottom of the page seems to fade out.
As I’m a complete novice to CSS, Scripting and Html I found a ready made solution here. https://css-tricks.com/examples/FadeOutBottom/. The Example seems to fit my needs.
I think I have managed to tweak the script.css file to work for me, however I’m having a problem with the index.html file. Basically, in the index.html file is following code that makes this work..
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#bottom_fade {
background: none;
filter:progid:DXImageTrans
left: 0px;
height: 200px;
position: absolute;
bottom: -18px;
width: expression(document.body.c
}
html, body {
height: 100%; overflow: auto;
}
</style>
<![endif]-->
</head>
<body>
<div id="page_wrap">
The problem is I don’t know where to place the above code? I can’t find the index.html file for my site. Is there somewhere else where I need to place this code?
I have done a lot of research and there is a bunch of code on the web that will achieve this requirement e.g. http://jsfiddle.net/ShinyMetilda/kb4fL/1/, however due to my lack of experience with coding and this sort of thing, but I wouldn’t know where to start. Which is why I thought that tweaking the example would be better.
Any help would be greatly appreciated.
Cheers
Cpatte7372
I currently use Joomla 3.4 to create my website www.keylooplabs.com. I’m trying to create an effect where the bottom of the page seems to fade out.
As I’m a complete novice to CSS, Scripting and Html I found a ready made solution here. https://css-tricks.com/examples/FadeOutBottom/. The Example seems to fit my needs.
I think I have managed to tweak the script.css file to work for me, however I’m having a problem with the index.html file. Basically, in the index.html file is following code that makes this work..
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#bottom_fade {
background: none;
filter:progid:DXImageTrans
left: 0px;
height: 200px;
position: absolute;
bottom: -18px;
width: expression(document.body.c
}
html, body {
height: 100%; overflow: auto;
}
</style>
<![endif]-->
</head>
<body>
<div id="page_wrap">
The problem is I don’t know where to place the above code? I can’t find the index.html file for my site. Is there somewhere else where I need to place this code?
I have done a lot of research and there is a bunch of code on the web that will achieve this requirement e.g. http://jsfiddle.net/ShinyMetilda/kb4fL/1/, however due to my lack of experience with coding and this sort of thing, but I wouldn’t know where to start. Which is why I thought that tweaking the example would be better.
Any help would be greatly appreciated.
Cheers
Cpatte7372
David Johnson, CD
you need to recode it in php
There are several ways to do this. The easiest would be to add the CSS to your template's stylesheet and include it as normal - my recommended method. Another way would be to edit the template to include it forcibly in the HEAD element. You could also create a module to introduce the style into the rendered page.
All of these methods demand you have some basic familiarity with Joomla. Do you have any experience dealing with Joomla's templates?
All of these methods demand you have some basic familiarity with Joomla. Do you have any experience dealing with Joomla's templates?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This appeared to work the best. Thanks