YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar ali.magomadov asked

[Tutorial] Custom 404 page for Yootheme Pro

<!DOCTYPE html>  
<html lang="ru-ru" dir="ltr">  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <base href="DOMEN" />  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <title>404 Error</title>  
    <link href="/templates/yootheme/css/theme.css" rel="stylesheet" type="text/css" id="theme-style-css" />  
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>  
    <script src="/templates/yootheme/vendor/assets/uikit/dist/js/uikit.min.js" type="text/javascript"></script>  
    <script src="/templates/yootheme/js/theme.js" type="text/javascript"></script>   
</head>  

<body class="">  
    <div class="uk-section-default uk-position-relative uk-light">  

<!-- Link to the background image so that you can download http://teplic.tmweb.ru/images/yootheme/products-header.jpg -->  

        <div style="background-image: url(/images/yootheme/products-header.jpg);"  
        class="uk-background-norepeat uk-background-cover uk-background-center-center uk-section uk-flex uk-flex-middle" uk-height-viewport="offset-top: true">  
            <div class="uk-width-1-1">  
                <div class="uk-container uk-position-relative">  
                    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">  
                        <div class="uk-width-1-1@m uk-first-column">  
                            <h1 class="uk-text-left@m uk-text-center uk-heading-hero uk-scrollspy-inview uk-animation-slide-left-medium">404</h1>  
                            <h6 class="uk-text-left@m uk-text-center uk-heading-primary uk-scrollspy-inview uk-animation-slide-left-medium">Page<br class="uk-visible@s">not found!</h6>  
                            <div class="uk-text-left@m uk-text-center uk-text-lead uk-scrollspy-inview uk-animation-slide-left-medium">  
                                The requested page was not found, or an error occurred!<br class="uk-visible@s">You can go back, or use the site search.</div>  

<!-- Search Form -->  
                            <div class="uk-text-left@m uk-text-center uk-scrollspy-inview uk-animation-slide-left-medium">  
                                <div class="uk-flex-middle uk-child-width-auto uk-grid-medium uk-flex-left@m uk-flex-center uk-grid" uk-grid="">  
                                    <form id="ID" action="/index.php" method="post" role="search" class="uk-search uk-search-large">   
                                        <span uk-search-icon="" class="uk-search-icon uk-icon"></span>  
                                        <input name="searchword" placeholder="Поиск" class="uk-search-input" type="search">  
                                        <input name="task" value="search" type="hidden">  
                                        <input name="option" value="com_search" type="hidden">  
                                        <input name="Itemid" value="101" type="hidden">  
                                    </form>  
                                </div>  
                            </div>  
                            <!-- Buttons  -->  
                            <div class="uk-text-left@m uk-text-center uk-scrollspy-inview uk-animation-slide-left-medium">  
                                <div class="uk-flex-middle uk-child-width-auto uk-grid-medium uk-flex-left@m uk-flex-center uk-grid" uk-grid="">  
                                    <div class="el-item uk-first-column">  
                                        <a class="uk-button uk-button-secondary" href="#">  
                                            <span uk-icon="forward" class="uk-icon"></span>  
                                            <span class="uk-text-middle">Home</span>  
                                        </a>  
                                    </div>  
                                    <div class="el-item">  
                                        <a class="uk-button uk-button-secondary" href="javascript:history.go(-1)">  
                                            <span uk-icon="reply" class="uk-icon"></span>  
                                            <span class="uk-text-middle">Back</span>  
                                        </a>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  

</body>  

</html>  

and all this must throw in templates/system/error.php advance making the backup of this file
Image
Here's how it happened
Demo

  • Joomla
  • Showcase
  • YOOtheme Pro

Edited

3 Answers

0

Avatar thomas.p Support answered

Thanks for sharing. Also note that the tag Showcase has been added recently. :)

0

Avatar ali.magomadov answered

<head>    
    <meta charset="utf-8">    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <base href="DOMEN" /> 

NEED TO CHANGE YOUR DOMAIN
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>404 Error</title>
<link href="/templates/yootheme/css/theme.css" rel="stylesheet" type="text/css" id="theme-style-css" />
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/templates/yootheme/vendor/assets/uikit/dist/js/uikit.min.js" type="text/javascript"></script>
<script src="/templates/yootheme/js/theme.js" type="text/javascript"></script>
</head>

Edited

Know someone who can answer? Share a link to this question via email or twitter.