I managed to review this theme. There are a couple of small issues that should be fixed before we submit this theme to the official WonderCMS repository.
1. There are two versions of jQuery in the theme.
- <script type="text/javascript" src="
http://code.jquery.com/jquery-1.4.4.min.js"></script>
- <script src="
https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
FIX: There should be one library of jQuery to avoid any conflicts and additional page loading times. Remove one library?
2. There are hard coded icons included in the theme. If you remove them, the theme will be 100% usable and doesn't need editing when the users install it for the first time.
Code: Select all
<!-- Add font awesome icons -->
<center>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-vk"></a>
<a href="#" class="fa fa-skype"></a>
</center>
FIX: You can add the icons code to the theme READ ME file, and somebody can add them to the theme if they want to.
Below is a cleaned up theme.php with all of the issues above FIXED + code clean up (spaces to tabs, translated "Back to top" to english, and removed russian comments in the code). I also added an additional comment in theme.php. I also added "integrity" hashes to the included files (CSS and JS).
Fixed theme.php:
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<link href="themes/black/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?=wCMS::get('config','siteTitle')?> - <?=wCMS::page('title')?></title>
<meta name="description" content="<?=wCMS::page('description')?>">
<meta name="keywords" content="<?=wCMS::page('keywords')?>">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin="anonymous">
<link rel="stylesheet" href="<?=wCMS::asset('css/style.css')?>">
<?=wCMS::css()?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
</head>
<body>
<?=wCMS::alerts()?>
<?=wCMS::settings()?>
<nav class="navbar navbar-default">
<div class="container">
<div class="col-sm-5 text-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMobile">☰</button>
<a href="./"><h3><?=wCMS::get('config','siteTitle')?><span class="navbar" id="logo"></h3></a>
</div>
</div>
<div class="col-sm-7 text-center">
<div class="collapse navbar-collapse" id="navMobile">
<ul class="nav navbar-nav navbar-right">
<?=wCMS::menu()?>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="col-xs-12 col-sm-8">
<div class="whiteBackground grayFont padding20 rounded5">
<?=wCMS::page('content')?>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="visible-xs spacer20"></div>
<div class="blueBackground padding20 rounded5">
<?=wCMS::block('subside')?>
<br>
<!-- Add font awesome between these comment blocks -->
<!-- Add font awesome icons HERE -->
</div>
</div>
</div>
<footer class="container-fluid">
<div class="padding20 text-right">
<?=wCMS::footer()?>
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
<?=wCMS::js()?>
<?=wCMS::js()?>
<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">Back to top</span></div>
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(1000);
$("a.fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});
</script>
</body>
</html>
All you have to do is:
1. Save this theme.php again with the code below (ZIP it again as a release, like the first time here:
https://github.com/turboblack/black/releases).
2. Add the social icons HTML to the READ ME file (users can add them manually, I removed them from the theme.php to make it 100% usable without having to edit theme.php since first install).
3. Test the theme to see if everything works - because I removed one jQuery library (removed the 1.4.4 version). If it doesn't work, I will provide another fix.