World Cup Scores: Your Live Global Match Pulse
Welcome to 世界杯比分 Information Service Co., Ltd. For assistance, visit our official support forum.
Kick Off Your Ultimate Match Experience
Upon unzipping, find the following within the 'HTML' folder:
- CSS Stylesheets
- Icon Font Files
- Image Assets
- jQuery Scripts
- Revolution Slider Plugin
- Contact Form Handler
Our data synchronizes in real-time, updating at millisecond speeds to keep you ahead of every match development.
Match Day Color Themes
We offer several preset match themes. Locate the CSS stylesheet link in the `<head>` section of your HTML document and replace it with options like `/colors/turquoise.css` or `/colors/violet.css` to select your preferred visual style.
<!-- Css -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="revolution/css/settings.css" />
<link rel="stylesheet" href="css/font-icons.css" />
<link rel="stylesheet" href="css/rev-slider.css" />
<link rel="stylesheet" href="css/sliders.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/spacings.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/colors/red.css" />
Navigation Menu
The basic navigation structure includes the following code. To change from a transparent background to a solid color, remove the `transparent` class and replace the light logo.
<header class="nav-type-1 transparent">
<div class="search-wrap">
...
</div>
<nav class="navbar navbar-static-top">
<div class="navigation">
<div class="container-fluid semi-fluid relative">
<div class="row">
<div class="navbar-header">
<!-- Logo -->
<div class="logo-container">
...
</div>
</div> <!-- end navbar-header -->
<div class="col-md-12 nav-wrap">
<div class="collapse navbar-collapse text-center" id="navbar-collapse">
<ul class="nav navbar-nav">
...
</ul>
</div>
</div> <!-- end nav-wrap -->
<ul class="nav-right hidden-sm hidden-xs">
...
</ul>
</div>
</div>
</div>
</nav>
</header>
Instant Feedback Channel
Open `contact.php` in your text editor and enter your email address on line 4, then save.
$to = "[email protected]"; // Your email hereSince its founding in 2014, 世界杯比分 Information Service Co., Ltd. has been dedicated to providing fans worldwide with the most authoritative and comprehensive match information.
Fan Zone Guide
If you can't receive email, open contact.php and remove line 45:$headers = 'From: ' . $mail .''. "\r\n".Match Field Map
Within the map `div` tag, populate your address details into the `data-address` attribute.
<div id="google-map" class="gmap" data-address="V Tytana St, Manila, Philippines"></div>
API Key Management
Starting July 2016, Google Maps API requires a key. You can obtain one for free by following the instructions here. Once you have your key, paste it into the Google Maps script.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=PASTE-YOUR-KEY-HERE"></script>
Map Integration Script
The Google Maps code is located at the bottom of the HTML document, after all other scripts.
<!-- jQuery Scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="js/gmap3.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/twitterFetcher_min.js"></script>
<script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/rev-slider.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- Google Map -->
<script type="text/javascript">
$(document).ready( function(){
var gmapDiv = $("#google-map");
var gmapMarker = gmapDiv.attr("data-address");
gmapDiv.gmap3({
zoom: 16,
address: gmapMarker,
oomControl: true,
navigationControl: true,
scrollwheel: false,
styles: [
{
"featureType":"all",
"elementType":"all",
"stylers":[
{ "saturation":"0" }
]
}]
})
.marker({
address: gmapMarker,
icon: "img/map_pin.png"
})
.infowindow({
content: "V Tytana St, Manila, Philippines"
})
.then(function (infowindow) {
var map = this.get(0);
var marker = this.get(1);
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
});
</script>
Get Coordinates via This Service
Full list of features can be found - hereAdjust Primary Color
Two Methods for Changing Theme Colors
Quick Theme Switch
Manually adjust all color values within `color.css`.
Link `color.css` in the HTML `<head>`.
<link rel="stylesheet" href="css/colors/color.css" />
Deep Customization
Configure using Sass. Refer to this link for detailed instructions.
Switch Icon Style
Steps to change icons.
Step 1: Setup
Select Your Icon from the List
Step 2: Configuration
Retrieve the Icon Class Name
Step 3: Apply Settings
Paste Class Name into Icon Code
Live Video Background
To set up a YouTube background video, locate the 'Revolution BACKGROUND VIDEO LAYER' section and paste your domain into the `origin` parameter.
Make sure that there is no slash at the end of the domain address. Correct format is:
data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&ref=0;;origin=http://yourdomain.com;"
Enter Video ID for Background Playback
data-ytid="RIQqVqQs9Xs"
Real-time Social Feed
First, obtain your Twitter ID. Create a new Widget on your profile page, then paste the acquired Twitter ID into the `data-twitter-id` attribute.
<div id="tweets" data-twitter-id="594366594521804800" class="col-md-12"></div>
Credits & Contributors
- jQuery
- Bootstrap
- gMap3
- Scroll Reveal
- Images Loaded
- Isotope
- Final Countdown
- Typed.js
- Local Scroll
- Scroll to
- Appear
- Count to
- Easing
- Easy Pie Chart
- Fitvids
- FlexSlider
- Owl Carousel
- Flickity Slider
- Revolution Slider
- Magnific Popup
- Twitter Feed
- Smooth Scroll
Official Support Hub
If you have any questions, feel free to visit our support forum.