I am using the "JJ Social Slider" for Joomla to add Social Media Buttons. My problem is that the plugin automatically adds a chunk of inline CSS (see below) into my html page and I couldn't find a way how to prevent that or at least put it into an external CSS file. I would like to keep all CSS external.
Please help!
Inline CSS:
<style type="text/css">ul#jj_sl_navigation li a {background-color:#00c70a;text-align:left;color:#ffffff !important}ul#jj_sl_navigation .custom1 a:hover{background-color:#000000}ul#jj_sl_navigation .custom2 a:hover{background-color:#000000}ul#jj_sl_navigation .custom3 a:hover{background-color:#000000}ul#jj_sl_navigation .custom4 a:hover{background-color:#000000}ul#jj_sl_navigation .custom5 a:hover{background-color:#000000}ul#jj_sl_navigation {left:0;top:300px}ul#jj_sl_navigation li:hover {margin-left:0}ul#jj_sl_navigation li a {padding:11px 0 11px 10px;margin-left:-2px}ul#jj_sl_navigation .facebook a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/facebook-black.png)}ul#jj_sl_navigation .twitter a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/twitter-black.png)}ul#jj_sl_navigation .google a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/google-black.png)}ul#jj_sl_navigation .myspace a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/myspace-black.png)}ul#jj_sl_navigation .youtube a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/youtube-black.png)}ul#jj_sl_navigation .linkedin a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/linkedin-black.png)}ul#jj_sl_navigation .steam a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/steam-black.png)}ul#jj_sl_navigation .lastfm a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/lastfm-black.png)}ul#jj_sl_navigation .pinterest a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/pinterest-black.png)}ul#jj_sl_navigation .soundcloud a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/soundcloud-black.png)}ul#jj_sl_navigation .tumblr a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/tumblr-black.png)}ul#jj_sl_navigation .github a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/github-black.png)}ul#jj_sl_navigation .flickr a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/flickr-black.png)}ul#jj_sl_navigation .rss a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/rss-black.png)}ul#jj_sl_navigation .vimeo a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/vimeo-black.png)}ul#jj_sl_navigation .custom1 a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/icon.png)}ul#jj_sl_navigation .custom2 a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/icon.png)}ul#jj_sl_navigation .custom3 a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/icon.png)}ul#jj_sl_navigation .custom4 a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/icon.png)}ul#jj_sl_navigation .custom5 a {background-position:144px 50%;background-image:url(http://localhost/media/mod_social_slider/icons/icon.png)}h1,h2,h3,h4,h5,h6,.site-title{font-family:'Open Sans',sans-serif}body.site {border-top:3px solid #e0d319;background-color:#002ee6 }a {color:#e0d319}.navbar-inner,.nav-list >.active >a,.nav-list >.active >a:hover,.dropdown-menu li >a:hover,.dropdown-menu .active >a,.dropdown-menu .active >a:hover,.nav-pills >.active >a,.nav-pills >.active >a:hover,.btn-primary {background:#e0d319}.navbar-inner {-moz-box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1),inset 0 30px 10px rgba(0,0,0,.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1),inset 0 30px 10px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1),inset 0 30px 10px rgba(0,0,0,.2)}</style>
I am actually the developer of JJ Social Slider. The reason we do this is because this part of the CSS requires values that are based on parameter values and php variables cannot be called in a CSS file.
There are some methods to apply this as a separate file, however we used a style declaration for a cleaner coding flow
Related
I have a header that is spanning the full width (14 columns) of its div.page container. My Susy grid is 14 columns wide. So now when I try to click to inspect other page elements that are under the header element in Google Dev Tools, I simply can not. I can only access the header.
Below you can see the header which has a translucent pink background-color. Everytime I click one of the green divs up top, I hit the header.
What I would like is for that header to only span the first two left columns of the page. The problem is that I need to have a fixed position header which will contain my h1 title and nav so I need to have a new container context similar to what Eric Meyer did here
https://groups.google.com/forum/?fromgroups#!topic/compass-users/A2rFv2ihwas
I don't really see what I am doing wrong here. Is there no way around this?
My style.sass
#import compass
#import susy
#import normalize
/* Susy Settings */
$total-columns : 5
$column-width : 4em
$gutter-width : 1em
$grid-padding : $gutter-width
$tablet : 10
$desktop : 14
// Susy-grid-background override to draw out horizontal lines
=susy-grid-background
+grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)
$base-font-size: 18px
$base-line-height: 30px
+establish-baseline
ul
background-color: rgb(111, 50%, 250)
li
background: rgba(200,50,0,.2)
text-align: right
a
background: rgba(0,220,0,.2)
display: block
h1
+adjust-font-size-to(90px)
+adjust-leading-to(4, 90px)
+leader(2, 90px)
background: rgba(0,20,200,.3)
h1#logo
+adjust-font-size-to(30px)
+adjust-leading-to(2, 30px)
+leader(0, 30px)
h2
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: rgba(250,250,0,.2)
p
+leader(1)
+trailer(1)
background: rgba(0,220,0,.2)
.page, header, .pagenav, .main, .pagefoot
+transition(all .3s ease)
.page
+container($total-columns, $tablet, $desktop)
+susy-grid-background
/* BREAKPOINTS */
+at-breakpoint($desktop)
.page
+susy-grid-background
header
+container
+susy-grid-background
background: rgba(250,0,0,.2)
position: fixed
left: 0
right: 0
h1#logo a
+hide-text
float: right
+span-columns(2)
background: rgba(200,10,250,.1)
.pagenav
clear: both
float: right
+span-columns(2)
background: rgba(0,140,250,.3)
.main
+span-columns(12 omega)
+leader(2)
background: rgba(1,240,200,.3)
.tile
// +span-columns(4, 12)
+isolate-grid(4, 12)
+adjust-leading-to(9)
+trailer(1)
background: #0f6
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
.pagefoot
background: rgba(45,0,120,.3)
+span-columns(12,12)
UPDATE
I have tried Eric Meyer's suggestion of applying z-index:-1 to the header element to send it behind all my green divs. This allowed me to click my green divs just fine but now when I try to click on my nav links I hit the .page container. Then I tried applying z-index:2 to the .page container but that did not help. Not sure how to gain click access to the nav
Here is my new code:
#import compass
#import susy
#import normalize
#import base
$base-font-size: 18px
$base-line-height: 30px
+establish-baseline
ul
background-color: rgb(111, 50%, 250)
li
background: rgba(200,50,0,.2)
text-align: right
a
background: rgba(0,220,0,.2)
// display: block
h1
+adjust-font-size-to(90px)
+adjust-leading-to(4, 90px)
+leader(2, 90px)
background: rgba(0,20,200,.3)
h1#logo
+adjust-font-size-to(30px)
+adjust-leading-to(2, 30px)
+leader(0, 30px)
h2
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: rgba(250,250,0,.2)
p
+leader(1)
+trailer(1)
background: rgba(0,220,0,.2)
.page, header, .pagenav, .main, .pagefoot
+transition(all .3s ease)
.page
+container($total-columns, $tablet, $desktop)
+susy-grid-background
/* BREAKPOINTS */
+at-breakpoint($desktop)
.page
+container
+susy-grid-background
header
+container
+susy-grid-background
background: yellow
z-index: -1
position: fixed
left: 0
right: 0
h1#logo a
+hide-text
float: right
+span-columns(2)
background: rgba(200,10,250,.1)
.pagenav
clear: both
float: right
+span-columns(2)
background: rgba(0,140,250,.3)
.main
+span-columns(12 omega)
+leader(2)
background: rgba(1,240,200,.3)
.tile
+isolate-grid(4, 12)
height: 300px
+trailer(1)
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
margin: 10px
padding: 5px
.tile_use
#extend .tile_title
+adjust-font-size-to(20px)
+adjust-leading-to(1, 20px)
.pagefoot
background: rgba(45,0,120,.3)
+span-columns(12,12)
See the answers and comments on "A `position:fixed` sidebar whose width is set in percentage?".
z-index may be the best fix, but you also may be able to fix it by getting rid of the clearfix on the header - so it collapses around the floated elements inside it. That clearfix is happening in the Susy container mixin, so you would have to use set-container-width instead (along with auto-margins to center it in the window.
I have large css file that contains css rule format like this:
.rounded-block
{
border: 1px solid #c0c0c0;
width: 500px;
margin: 15px 0 15px 0;
}
I need format this file like this
.rounded-block{border: 1px solid #c0c0c0;width: 500px;margin: 15px 0 15px 0;}
How can I do this?I can do this in visual studio?
Edit:
I need that the other rule will be in another line
.rounded-block{border: 1px solid #c0c0c0;width: 500px;margin: 15px 0 15px 0;}
.anotherrule{margin: 15px;}
Check these URL for CSS beautifier and to optimize:
cssbeautify
fwpolice
In there you can define your own rule:
codebeautifier.
Quick question. You know when you open a new window & at the top of the page you see the tab for said window & you'll see whatever you typed in your title tag & you'll see a little image (website's logo). How do I place an image/logo in that little tab? Do I have to place an image link within my title tag or something?!
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Round Table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="RTH.css">
<script src="RTH.js"></script>
</head>
<body>
<H1> Come & take a seat at the Round Table B] </H1>
<p> "Where <i>REAL MUSIC</i> still exists"</p><br><br>
<ol type=I> <H2> <li>BEAT$</li>
<br><li>Music by Mercile$$</li>
<br><li>Spoken Word</li> <br>
<li>Tale$ of a Blind Sword$man</li> </H2> </ol><br><br><br>
<dt><i>RTH</i> consists of:</dt>
<dd>Show Luciano, Pistol McFly, Dior, YZ, & last but not least...Mercile$$</dd>
<p> thee music industry is DEAD !! i hope to bring restoration.<br>
~mercile$$</p><br>
<footer>© Round Table</footer>
</font>
</body>
</html>
& here's my CSS file:
body {
background-image: url("Round Table, Hoe II.jpg");
background-repeat: Repeat;
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: Red;
text-shadow: 1px 0 0 #CEA40C, 0 -1px 0 #CEA40C, 0 1px 0 #CEA40C, -1px 0 0 #CEA40C;
font-size: 25px;
margin: 0 auto;
text-align: center;
width: 700px;
}
h1 {
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: Red;
text-shadow: 2px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 2px 0 #CEA40C, 0px 0 0 #CEA40C;
margin: 0 auto;
text-align: center;
width: 700px;
}
i {
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: White;
text-shadow: 2px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 2px 0 #CEA40C, 0px 0 0 #CEA40C;
margin: 0 auto;
text-align: center;
width: 700px;
}
dt {
color: #1BD29B;
text-shadow: 4px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 4px 0 #CEA40C, 0px 0 0 #CEA40C;
font-size: 45pt;
padding: 10px;
}
dd {
color: White;
padding: 5px 10px 5px 10px;
background: #f03;
border: solid 2px #fff;
}
p {
padding: 5px 10px 5px 10px;
background: #f03;
border: solid 2px #fff;
}
footer {
}
its easy use this site to convert the image http://www.favicongenerator.com/
and then in the head, but change the name of ur image and path
<link rel="shortcut icon" type="image/png" href="img/logo-favicon.ico.png">
You need a square image or icon then put this code in your head
<link rel="icon" type="image/png" href="/path/image.png"/>
One important thing is to put your link between the head tags:
<html>
<head>
<link rel="shortcut icon" type="image/png" href="img/logo.ico">
</head>
.
.
.
</html>
I have spent much time on research on this topic and I'm not finding a solution for my particular problem even though I have come across similar issues but their solutions don't seem to fit mine. The issue I"m having does not exist in any non-IE browsers. The main navigation of the site I'm building (#mainNav) when I hover over the main a link to view the drop down, the the focus of the link seems to only be on the actual text. So, when I try to move the mouse down the list it gets no further than the main link text before the hand turns back to an arrow and the menu disappears. This is a CSS3 menu that is working on another site successfully in all browsers and there doesn't appear to be any IE fixes, so I grabbed the code and decided to use it for this site. Everything went well until I checked it in IE :/
These are the areas that I looked at (that normally are the issue in cases such as this): display-block (exists on all "a" tags), removed margins and increased padding (didn't help), assigned a height value (didn't help), increased line-height (nope). I read in other blogs that not having a background color on the link could be an issues (nope), also read that using a transparent 1px image would do the trick (nope). When I say "nope" that's assuming I incorporated the fix correctly.
I appreciate the help very much!
Here is the CSS:
/* //////// MAIN NAVIGATION //////// */
/* Reset */
#navMain,
#navMain ul,
#navMain li,
#navMain a {
border:none;
font-weight:normal;
margin:0;
outline:none;
padding:0;
z-index:1000;
}
/* Menu */
#mainNav-wrap {
width:100%;
height:47px;
float:left;
background:#00aeef;
border-top:#014964 1px solid;
box-shadow: 0px 2px 2px #999999;
}
#navMain {
/*height:40px;*/
width:960px;
position:relative;
z-index:500;
margin:0 auto;
}
#navMain li {
display:block;
float:left;
height:40px;
list-style:none;
/*padding:40px 8px 0 4px;*/
position:relative;
text-transform:uppercase;
}
#navMain li li {
text-transform:capitalize;
}
/* Links */
#navMain li a {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#fff;
display:block;
font-size:18px;
line-height:18px;
font-family:'Raleway', sans-serif;
padding:15px 19px;
text-decoration:none;
text-shadow:0px 1px 1px rgba(0,0,0,.1);
transition:color .2s ease-in-out;
-webkit-transition:color .2s ease-in-out;
-moz-transition:color .2s ease-in-out;
-ms-transition:color .2s ease-in-out;
-o-transition:color .2s ease-in-out;
}
#navMain li:first-child a {border-left:none;}
#navMain li:last-child a{border-right:none;}
#navMain li:hover > a {background:#565454;color:#fff200;}
/* Sub Menu */
#navMain ul {
background: #565454;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
position:absolute;
left: 0;
top: 46px;
opacity: 0;
filter: alpha(opacity = 0);
transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-webkit-transition: opacity .25s ease .1s;
min-width:200px;
}
#navMain ul.electronics {
min-width:350px;
}
#navMain li:hover > ul {opacity:1;filter: alpha(opacity = 100);}
#navMain ul li {
height:0;
overflow:hidden;
padding:0;
transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-webkit-transition: height .25s ease .1s;
}
#navMain li:hover > ul li {height:38px;overflow:visible;padding:0;}
#navMain ul li a {
border:none;
color:#fff;display:block;
font-size:18px;
margin:4px 4px;
padding:8px 14px 8px 14px;
white-space:nowrap;
width:200px; /* Stretches Submenu */
}
#navMain ul li:last-child {margin-bottom:6px;}
#navMain ul li:last-child a {border:none;padding:4px 14px 1px 14px;}
#navMain ul li a:hover {background:none;}
#navMain ul li span {white-space:nowrap;}
.navMain_buffer {height:8px;}
/* ////////// MAIN CONTENT /////////// */
Here is the HTML:
<div id="mainNav-wrap">
<ul id="navMain">
<li>ELECTRONICS
<ul class="electronics">
<li>HDTVs 19"-32"</li>
<li>HDTVs 37" and Up</li>
<li>Gaming Systems</li>
<li>Home Theater</li>
<li>Stereos and Home Theater Systems</li>
<li>Digital Cameras and Camcorders</li>
<li>Small Electronics</li>
</ul>
</li>
<li>Computers
<ul>
<li>Laptops</li>
<li>Tablets</li>
<li>Desktops</li>
<li>Computer Desks</li>
</ul>
</li>
<li>APPLIANCES
<ul>
<li>Washer and Dryers</li>
<li>Refrigerators</li>
<li>Freezers</li>
<li>Ranges</li>
</ul>
</li>
<li>Bedrooms
<ul>
<li>Bedroom Sets</li>
<li>Kid's Bedrooms</li>
<li>Mattresses</li>
</ul>
</li>
<li>Dinning Rooms</li>
<li>Living Rooms
<ul>
<li>Recliners</li>
<li>Sectionals</li>
<li>Living Room Sets</li>
<li>Accessories</li>
</ul>
</li>
</ul>
</div><!-- /END main-nav-wrap -->
I have the answer! It turned out that the element needed a z-index of -1000. That was causing my problem. So this is what needed to be added in my css:
html {
position:relative;
z-index:-1000;
}
In PyroCMS, I'm using the session:messages tag to display messages to the user. This is working well, but I'd like to add a close button to each message which requires placing a span within each message. For example:
<div class="alert success">
You have logged in successfully. <span class="close">X</span>
</div>
Each message is wrapped in a div, which is given a class by setting an attribute of the session:messages tag. There is no built-in way to specify the output. How can I override the messages() function in session.php, adding a new attribute to append this close button?
So far I have tried:
Copying system/cms/plugins/session.php to *addons/shared_addons/plugins/session.php* and modifying the messages() function. The core function is used, rather than the new plugin as I had hoped.
Copying the plugin as described above, and then changing it's class to My_Plugin_Session extends Plugin_Session in hopes that its functions would then override the core Plugin_Session class. No luck.
It's not possible to extend certain things that are in the core (e.g. libraries and helpers) - I think this applies to plugins too.
In this case, if I was you (and I may well have to do this for my next project as these closable alerts are typically in Twitter Bootstrap etc.) I'd just edit /system/cms/plugins/session.php directly and add the extra <span> for the close button to the success, notice and error conditionals ('if' statements).
On a typical site I can't think of a situation where you'd ever need some alerts displayed differently to others (other than different colours depending on the outcome of course, which you can do in the CSS using the class name).
Providing you're using Git (you've cloned or forked the official PyroCMS repository and made your own branch) you'll be absolutely fine with future updates - if in a future version the session plugin changes, any changes will just be merged into your code automatically, or if Git can't figure it out, it'll show you the differences and prompt you to fix it by hand.
Note - there are a couple of other solutions for this specific problem based on the admin interface (you may have noticed the flash messages there are closable).
You could create a partial - which can contain PHP, not just Lex tags - e.g. see /system/cms/themes/pyrocms/views/admin/partials/notices.php with something like this (edit as needed and duplicate for notice and error):
<?php if ($this->session->flashdata('success')): ?>
<div class="alert success">
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
PyroCMS admin actually uses liveQuery to append the close button <span> in the browser
Source: /system/cms/modules/wysiwyg/js/wysiwyg.js:
// Add the close link to all alert boxes
$('.alert').livequery(function(){
$(this).prepend('x');
});
I did this and it is working perfect no need other plugin than jQuery.
in the template layout add this:
{{ session:messages success="message success" notice="message info" error="message error" }}
JavaScript:
$(function() {
$('.message').prepend('<a class="baxclose" id="baxclose"></a>');
$('#baxclose').click(function(){
$('.message').fadeOut('slow');
});
});
and the CSS:
a.baxclose{
float:left;
width:30px;
height:30px;
background:transparent url(../img/close-icon.png);
margin-top: -30px;
margin-left: -30px;
cursor:pointer;
}
.message {
padding: 20px 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px;
-moz-box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
zoom: 1;
margin-bottom: 20px;
}
.message h3 {
margin-top: 0;
font-size: 12px;
font-weight: bold;
}
.message p {
margin-bottom: 0;
}
.message.info {
border: 1px solid #cadcea;
background-color: #cdf;
background-image: -o-linear-gradient(top, #eef, #cdf);
background-image: -ms-linear-gradient(top, #eef, #cdf);
background-image: -moz-linear-gradient(top, #eef, #cdf);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eef), to(#cdf));
background-image: -webkit-linear-gradient(top, #eef, #cdf);
background-image: linear-gradient(top, #eef, #cdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEFF', endColorstr='#CCDDFF');
color: #225b86;
text-shadow: 0 1px 1px #fff;
}
.message.error {
border: 1px solid #eeb7ba;
background-color: #fae2e2;
background-image: -o-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -ms-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -moz-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fae2e2), to(#f2cacb));
background-image: -webkit-linear-gradient(top, #fae2e2, #f2cacb);
background-image: linear-gradient(top, #fae2e2, #f2cacb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae2e2', endColorstr='#f2cacb');
color: #be4741;
text-shadow: 0 1px 1px #fff;
}
.message.success {
border: 1px solid #b8c97b;
background-color: #e5edc4;
background-image: -o-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -ms-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -moz-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e5edc4), to(#d9e4ac));
background-image: -webkit-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: linear-gradient(top, #e5edc4, #d9e4ac);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5edc4', endColorstr='#d9e4ac');
color: #3f7227;
text-shadow: 0 1px 1px #fff;
}
Instead of the button you use to remove, another option would be to create a fadeOut message on click event.
HTML:
<div id="msgAlert"> …session:messages goes here...</div>
JS:
<script type="text/javascript">
$('html').click(function() { $('#msgAlert').delay(5000).fadeOut('slow'); });
Having a click will fadeOut the session message after 5sec.