Archive for the ‘ CSS ’ Category
Today I needed to find a way to style <a> tags that didn’t have href inside them.
You can do that with CSS3 as follows:
a:hover {background: yellow;}
a:hover:not([href]) {background: none;}
Examples below:
There are no more conditional selectors like we used to have in the past for IE6-9.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
To target Internet Explorer 10 & 11 browsers, you will need to use this format:
/* START IE10/11 ONLY */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
[CSS GOES HERE]
/* END IE ONLY */
}
Here are some lesser-know tricks for CSS dropshadows.
http://css-tricks.com/snippets/css/css-box-shadow/
You can create the following styles:
Using the following code:
<style type="text/css">
#example {
background: none repeat scroll 0 0 #ccc;
box-shadow: 5px 5px 5px #666;
height: 100px;
margin: 15px 0;
width: 100px;
}
#example2 {
background: none repeat scroll 0 0 #ccc;
box-shadow: 0 0 10px #000000 inset;
height: 100px;
margin: 15px 0;
width: 100px;
}
#example3 {
background: none repeat scroll 0 0 #ccc;
box-shadow: 0 8px 6px -6px black;
height: 100px;
margin: 15px 0;
width: 100px;
}
</style>
Here is some code I wrote to add a clickable triangle, and a custom background, to the ewea.org website to highlight the offshore event.
The HTML:
<div id="offshore-morph" style="position: absolute; top: 0; left: 0; z-index: 99999;"> <a title="Click to register for EWEA OFFSHORE 2013" href="/offshore2013/registration/?ref=morph"> <img src="http://www.ewea.org/uploads/pics/offshore-2013-morphing-corner.png"></a></div>
And some CSS:
body {background: url(http://ewea.org/uploads/pics/offshore-2013-morphing.jpg) 100% 0 no-repeat #005596; position: relative;}
This is the code I used to create the Offshore 2013 morphing on EWEA.org leading up to the offshore conference.
<div id="offshore-morph" style="position: absolute; top: 0; left: 0; z-index: 99999;"><a title="Click to register for EWEA OFFSHORE 2013" href="/offshore2013/registration/?ref=morph"><img src="http://ewea.org/uploads/pics/offshore-2013-morphing-corner.png"></a></div>
body {background: url(http://ewea.org/uploads/pics/offshore-2013-morphing.jpg) 100% 0 no-repeat #005596; position: relative;}
You will need to edit the main template file as follows:
[root@main]# cd /var/www/html/sites/www.ewea.org/fileadmin/templates/fluid/layouts [root@main layouts]# vi Home.html
For the EWEA 2014 venue map, we implemented a custom Google Map.
The settings we made were to the map position. marker position, marker type and info box:
<html>
<head>
<style type="text/css">
html, body {margin: 0; padding: 0; height: 100%;}
#infoContents {color: #000; font-family: "Franklin Gothic Medium", sans-serif; font-size: 13px; min-width: 150px; min-height: 100px; padding: 0 20px 0 20px;}
#infoContents h4 {padding: 0; margin: 1em 0 0.5em 0; color: #005596;}
#infoContents p {margin: 0; padding: 0;}
#infoContents small {margin: 10px 0 0 0; display: block;}
#infoContents small a {font-size: 10px; font-family: "Franklin Gothic Medium", sans-serif; color: #005596;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var spot = new google.maps.LatLng(41.354867,2.138019);
var mapCenter = new google.maps.LatLng(41.355600,2.138019);
var mapOptions = { center: mapCenter, zoom: 17, mapTypeId: google.maps.MapTypeId.SATELLITE };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var iconShadow = new google.maps.MarkerImage(
"http://www.google.com/mapfiles/ms/micons/msmarker.shadow.png",
new google.maps.Size(59,32),
new google.maps.Point(0,0),
new google.maps.Point(15,32));
var marker = new google.maps.Marker({
map: map,
position: spot,
icon: "http://www.google.com/mapfiles/markerA.png",
shadow: iconShadow
});
var infowindow = new google.maps.InfoWindow({
content: '<div id="infoContents"><h4>NORTH ENTRANCE</h4><p>Fira de Barcelona Gran Via<br />Carrer del Foc 31<br />08038 Barcelona, Spain<br /><small><a href="http://goo.gl/maps/GIytH" target="_blank">Go to street view</a></small></p></div>'
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 740px; height: 400px;"></div>
</body>
</html>This gives a result like this:
The latest version of Typo3 locks the frame of Quixplorer divs so you cannot resize the shape.
By editing this file:
/typo3/templates/template_page_backend.html
And adding:
###TITLE###
###META###
###CSS_INCLUDE###
###CSS_INLINE###
###JS_LIBS###
###JS_INCLUDE###
###JS_INLINE###
###HEADERDATA###
<!--###POSTJSMARKER###-->
<style type="text/css">
textarea {resize: auto;}
</style>
</head>
###BODY###
###JS_LIBS_FOOTER###
###JS_INCLUDE_FOOTER###
###JS_INLINE_FOOTER###
###FOOTERDATA###
</body>
</html>
I was able to unlock the resizing.
See official documentation here:
http://codex.wordpress.org/Function_Reference/wp_list_pages
This here is the most interesting part (towards the bottom):
They can be styled with CSS selectors:
.pagenav { … } /* the outermost list item; contains whole list */
.page-item-2 { … } /* item for Page ID 2 */
.page_item { … } /* any Page item */
.current_page_item { … } /* the current Page */
.current_page_parent { … } /* parent of the current Page */
.current_page_ancestor { … } /* any ancestor of the current Page */
In order to achieve an accordion menu effect for instance, the following CSS can be used:
.pagenav ul ul,
.pagenav .current_page_item ul ul,
.pagenav .current_page_ancestor ul ul,
.pagenav .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor ul ul {
display: none;
}
.pagenav .current_page_item ul,
.pagenav .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {
display: block;
}