Archive for the ‘ HTML ’ 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 */
}
This solution is to create a local HTML file from the dynamic www.ewea.org/navigation-file generated by Typo3, that can be rsync’d to other servers so that they may include it in their templates as local files, speeding up the page creation process (and bypassing a huge latency issue we had with the EWEA 2015 programme pages).
#!/bin/sh curl -L -o /var/www/html/sites/www.ewea.org/navigation http://www.ewea.org/navigation-file rsync -avze "ssh -p 10022 -i /root/.ssh/main_prv_key" /var/www/html/sites/www.ewea.org/navigation [email protected]:/var/www/html/ rsync -avze "ssh -p 10022 -i /root/.ssh/main_prv_key" /var/www/html/sites/www.ewea.org/navigation [email protected]:/var/www/html/ rsync -avze "ssh -p 10022 -i /root/.ssh/main_prv_key" /var/www/html/sites/www.ewea.org/navigation [email protected]:/var/www/html/
This is scheduled to run daily at midnight via cron
On the receiving server, the following code is then used to display the navigation on the website.
<div id="navigation">
<?php // INCLUDE EWEA MENU
include("/var/www/html/navigation");
?>
</div><!-- end #navigation -->
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
* {font-family: "franklin gothic book"; font-size: small;}
h2 {font-size: 150%;}
table,td,th {border-collapse: collapse; border: 1px dotted #afafff; padding: 3px 5px;}
th {background: #efefff;}
</style>
</head>
<body>
<?php
// STATE YOUR VARIABLES
////////////////////////////////////////////////////////////////////
$user = "annual2015";
$pass = "tuYPLUY44DxjRCNB";
$db = "annual2015";
$table = "wp_a15_fm_data_22";
$sql = "SELECT * FROM $table ORDER BY `timestamp` DESC LIMIT 0, 500";
// ESTABLISH THE CONNECTION
////////////////////////////////////////////////////////////////////
$cxn=mysqli_connect("localhost","$user","$pass","$db");
$cxn->set_charset("utf8");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($cxn,"$sql");
// GET NUMBER OF ATTENDEES
////////////////////////////////////////////////////////////////////
$rows = mysqli_num_rows($result);
printf("<h2>Current number of registered attendees: <span style=\"background: #ff0; font-size: 20px;\">%d</span></h2>",$rows);
// CREATE THE TABLE
////////////////////////////////////////////////////////////////////
echo "<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Job title</th>
<th>Organisation</th>
<th>Email address</th>
<!-- <th>Food requirements</th> -->
<th>Date registered</th>
</tr>\n";
while($row = mysqli_fetch_array($result))
{
echo " <tr>\n";
echo " <td>" . "<b>" . $row['text-56275de811d4e'] . "</b>" . "</td>\n";
echo " <td>" . "<b>" . $row['text-56275dea2cd60'] . "</b>" . "</td>\n";
echo " <td>" . $row['text-56275dfd39f14'] . "</td>\n";
echo " <td>" . $row['text-56275dfb697d7'] . "</td>\n";
echo " <td>" . "<a href=\"mailto:" .$row['text-56275df9b2872'] . "\">" .$row['text-56275df9b2872'] . "</a>" . "</td>\n";
// echo " <td>" . $row[''] . "</td>\n";
echo " <td>" . $row['timestamp'] . "</td>\n";
echo " </tr>\n";
}
echo "</table>";
// CLOSE THE CONNECTION
////////////////////////////////////////////////////////////////////
mysqli_close($cxn);
?>
</body>
</html>
There are three components to the system:
The first thing we need to do is build the form using the “WordPress Form Manager” plugin.
We create a form with the following fields: “Company name”, “Document title” and “Select document”. We also add a note field to display additional information about accepted file formats and file size, etc. Pay attention to the upload document section as to restrict the document types.
We also add a “Private Field” at the bottom of the “Form extra” tab. This is what our administrator will use to approve each press release.
Once you have created the form, add it to the exhibitor upload page with the following shortcode format:
[form form-XYZ]
We include a simple PHP script into the WordPress page to pull data off the database. The code I used can be obtained here.
To summarise, the script will need to be modified in the following places:
The administrator logs into WordPress and navigates to the Submission Data tab of the form being used.
Using the checkboxes and the “Edit selected” function from the dropdown list of actions, the admin can edit…
and approve each press release.
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:
At the end of a YouTube video, you might see a bunch of “related videos”.
When you embed a video on your website, the YouTube player may end up showing your user related videos that are distasteful or offensive.
In order to prevent this, we can actually turn off the feature.
All you need to do is add the text “?rel=0” to the URL being viewed or embedded.
<iframe width="640" height="480" src="//www.youtube.com/embed/bDVz4ZCA4a0?rel=0" frameborder="0" allowfullscreen></iframe>
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;
}