asked on

How Change Position of Script in Joomla

Hello Experts,

I have applied the following script to my article

<div class="sidebar-box">
      <p>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      <p class="read-more"><a href="#" class="button">Read More</a></p>
    </div>

Open in new window

I have also applied the following script to my template CSS.

.sidebar-box {
max-height: 120px;
position: relative;
overflow: hidden;
}
.sidebar-box .read-more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0; padding: 30px 0;

/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to bottom, transparent, black);
}

See my link here
http://www.keylooplabs.com/index.php/workbooks/riverbedv2/exercise-1/introduction#

Everything appears to working ok. However, you will notice the faded section is at the bottom. Can someone show me to make the fade appear in the middle?

I tried changing the following to middle but it didn't work

top: 0;

Cheers

Carlton

Member_2_7966113

ASKER

This may be trickier than I thought, because the page isn't text, its an image.Therefore, I will probably need to tweak the css in fade the actual page not text. Is that possible?

Member_2_7966113

ASKER

OK I have found the answer to problem with the image.

I need to include the following code in the article:

<div id="container">
    <div id="contents">
       <img src="http://fillmurray.com/375/375">
    </div>
    <div id="gradient">
    </div>
</div>

Open in new window

And the following code in the CSS

#container {
    position:relative;
    padding:50px;
    margin:50px;
}
#contents {
    background:white;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:300px;
    background: none;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

}

Open in new window

Can someone show me how to fade the page from the middle of the article instead of at the end?

Cheers

Member_2_7966113

ASKER

OK, I figured it out. I simply change 80% to 50%. Can someone show me how to add text to the fade section?

Member_2_248744

Greetings Member_2_7966113, , I am glad that u now have the gradient fade 2 white display as u need it. And you now ask about - "add text to the fade section", since the " Fade Section" seems to be the div with id as "gradient", text is placed there with the usual inclusion as -

<div id="gradient">text
</div>

But I am confident, that you need a special positioning for one or many text "overlays" for your image of the face? as you already have "Layers" here with your id="container" as position: relative , you can ADD as many other "Layers" as you need over the image with additional <div> as position: absolute;

maybe code like this?

<style>
#container {
    position:relative;
    padding:50px;
    margin:50px;
}
#contents {
    background:white;
}
#eyeLeft {
    position:absolute;
    z-index:3;
    color: red;
    left: 150px; top: 191px
}
#eyeRight {
    position:absolute;
    z-index:3;
	color: red;
    left: 250px; top: 180px
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:300px;
    background: none;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

}

</style>

<div id="container">
    <div id="contents">
       <img src="http://fillmurray.com/375/375">
    </div>
    <div id="eyeLeft">text</div>
    <div id="eyeRight">here</div>
    <div id="gradient">
    </div>
</div>

Open in new window

Member_2_7966113

ASKER

Slick, I have just tried your suggestion, and it is exactly what I needed thank yoiu

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Member_2_7966113

ASKER

Slick, that's amazing the possibilities are endless. Thank you