Joomla fade background from white to black on first load - joomla

Currently I'm working on a black background joomla website. In template 'index.php' < head > i have < style type="text/css">html, body { background-color: #000000; } </style> & this changes the background to black & ensures no flashes to white on page refresh etc., but the initial change from white to black is very sudden.
I'm looking for an simple, elegant solution that on first load fades the background color from white to black, thereafter background remains black.
To achieve this I've used the following in the 'index.php' found in Joomla root (not the template index.php) - I place it before the php in that file - effect looks cool and works fine :
< html >< head >< style type="text/css">html, body {background-color: black;-webkit-animation-name: backcolor;-webkit-animation-duration: 6s;animation-name: backcolor;animation-duration: 6s;
}
#-webkit-keyframes backcolor {
from {background-color: white;}
to {background-color: black;}
}
#keyframes backcolor {
from {background-color: white;}
to {background-color: black;}
}
}
< / style >< / head >< body >< / body >< / html >
... starts the fade in then runs joomla php, page builds as fade progresses etc. - all good.
But, of course, with every page request the includes 'index.php' in the URL it switches the background back to white then runs the fade in to black again.
So I've been think about how to use the existence / or not of the Joomla session cookie as a simple way of determining whether or not to run the fade in.
The idea is that on first load the root 'index.php' file won't yet have have created and set the session cookie.
So if I could then cook up some sort of php 'if' statement to place at the very top of that root 'index.php' file like " 'get session cookie' -> No session cookie : Run the fade in -> if there is a session cookie : Don't run the fade in ".
Could this work ? Any ideas on how to code this or any other simple alternative approach to the problem would be appreciated.
Cheers PaulZero

Related

Adding title slide image to RMarkdown slides with reveal.js

I'm trying to figure out how to include centered background images on title slides using reveal.js slides while writing in RMarkdown a la http://rmarkdown.rstudio.com/revealjs_presentation_format.html
The test deck I have is as follows
---
title: "Attempt"
css: style.css
output: revealjs::revealjs_presentation
---
## Will this work
- Did the title slide have an image?
with style.css as
.title {
background-image: url(http://img1.wikia.nocookie.net/__cb20100706023807/familyguy/images/c/c7/Tauntaun.png);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
}
Note, .title is the only thing that will show any images at all on the title slide. I've tried a few other combinations based on what I've seen on SO and other places.
.section .reveal .state-background based on Rstudio 0.98.1028 add background image only to title slide
.title-slide based on Adding an image to title slide using slidify
None of these work. Am I missing something? Perhaps is there a magic YAML option I've left out?
OK, here's the easy answer. Essentially, make a blank title and then have an image as your data background on your title slide. You can do anything else you want on said title slide as well. I use divs to put a nice big title in the middle of the slide.
---
title:
output: revealjs::revealjs_presentation
---
## {data-background="http://img1.wikia.nocookie.net/__cb20100706023807/familyguy/images/c/c7/Tauntaun.png"}

Font change, could not find why

the site : http://academie-igs.com/?lang=fr. Look at the menu (french first menu) it's called : "environment de travail". when hover on, the word wrap and go to another line...
I use firebug to check the style sheet, take screen capture that i check in Photoshop. I cannot see the problem... why it append?
I don't know what do that behavior. Can you point me where to look ?... it's a mystery for me right now !
The issue was with spacing.
Line 104 on superfish.css, replace with the following:
.sf-menu li li a:hover {padding:8px 5px 8px 17px; background:#353535; background:-moz-linear-gradient(center top , #4C4C4C, #313131) repeat scroll 0 0 transparent; color:#fff !important; outline:0; background: -webkit-gradient(linear, left top, left bottom, from(#4C4C4C), to(#313131));}
You had too much spacing on the right of it on hover on the padding property that was causing the text to wrap downward.

Tween max opacity in ie8

I'm trying to use tween max and superscroll script, to handle opacity of my content while scrolling.
This works like a charm in chrome, safari, ff, ie9 and ie10.
However, I have an issue with ie8.
You can see the problem in this page : http://www.promenade-sainte-catherine.com/localisation
When scrolling down in ie8, the menu on the left changes its color to become white. This is okay, and once the animation is finished, it becomes green again.
This is my css :
body #menuGaucheContainer #menuGauche .logoPSC {
position: relative; zoom:1;}
/* line 270, sass/partial/_global.scss */
body #menuGaucheContainer #menuGauche .logoPSC #log1, body #menuGaucheContainer #menuGauche .logoPSC #log2 {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
position: absolute;
top: -109px;
left: 75px; }
And this is the tweenmax call
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#img2Localisation'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#log2'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
If I remove the "filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);" line. Then it works good, but nothing have an opacity of zero at the beginning of the page.
If I add css:{opacity:X, alpha:X}, nothing changes,
If I change {css:{opacity:0}} to {css:{alpha:0}}, it kind of works, but I still have some issues.
Does anyone have any idea ?
Thanks
I also had this issue with a new version of Greensock, and it's not because the plugin, but because of CSS. The error is in the beginning statement:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
While this is perfectly ok if you don't want to support IE7, it will break TweenMax's animation rules. The fix is to add the IE5-IE7 css rule, even if you won't support IE7 in general:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
It looks like you're using a VERY old version of the GreenSock files (TweenMax). You should definitely update - that may fix the problem right there. http://www.greensock.com/?download=GSAP-JS Otherwise, try tweening to opacity:0.99 instead of 1 solves things for you. But again, I'm pretty sure that updating will help because if my memory serves correctly, this particular scenario had a workaround applied in a TweenMax update a while back.

IE7 alpha filter cascading to all the other elements... how to stop it?

I have this page where my container have a background image using
background-color:rgba(255, 255, 255, 0.76);
*background-color:#fff;
*opacity: 0.8;
*filter: alpha(opacity = 80);
in Mozilla works ok; shows the translucent background and the elements inside completely opaque; but in IE7 the transparency inherits to all other elements. I've tried making a new container inside the container giving
*opacity:1, *alpha(opacity=100), *zoom:1, *filter:none
and stuff but nothing seems to work...
You have to use a semi-transparent background-image, it will work in every browser (except IE6...)
This is happening because you are using the opacity and filter css tags, which will be inherited by child elements.
Try using the following:
.element{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
.element *{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1.0;
opacity:1.0;
}
This should select all child elements and set their opacity to 100% and should work in all browsers

css: set image-width inside of paragraph with specific width?

hey guys,
somehow i can't find the solution for my little problem.
i have a paragraph setting with a max-width of 630px.
in some cases i have images within one of those paragraphs - and in this case i want the image to act normal -> without any max-width setting.
.post-body p {
width:99%;
max-width: 630px;
}
.post-body p img{
max-width:100% !important;
}
is it even possible to have the image larger than the max-width setting that's set to it's parent? do i need to use javascript (jquery)?
thank you for your help.
Unless you're modifying the image width some other way, as long as you don't do anything to the image it will display at full size.
See here: http://jsfiddle.net/WrfQQ/
I didn't bother declaring any CSS for the image, so it, by default, will show up at full size. (Please note, for the sake of testing I decreased the width of the p to 100px)
As I can see the problem is that you put a MAX-width to the img... you have to code the relative width... so:
.post-body p img{
position: relative;
width: 100%;
}
if you want it in jQuery the code is the below:
$('.post-body p img').width() == $('.post-body p').width();

Resources