├── images └── readme.md ├── .gitignore ├── scss ├── _homepage.scss ├── custom.scss ├── _variables.scss ├── _footer.scss ├── _common.scss └── _header.scss ├── docs └── images │ ├── demo-page.png │ ├── page-top-min.png │ ├── demo-page-mobile.png │ └── page-footer-min.png ├── templates ├── Includes │ ├── BreadCrumbs.ss │ ├── Navigation.ss │ ├── SideBar.ss │ ├── PageTop.ss │ ├── SidebarMenu.ss │ ├── Footer.ss │ └── Header.ss ├── Layout │ └── Page.ss └── Page.ss ├── javascript └── custom.js ├── code-of-conduct.md ├── .editorconfig ├── css ├── custom.css └── dark.css ├── composer.json ├── LICENSE └── README.md /images/readme.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | images/.DS_Store 2 | css/.DS_Store -------------------------------------------------------------------------------- /scss/_homepage.scss: -------------------------------------------------------------------------------- 1 | body.home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /docs/images/demo-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexStack/silverstripe-custom-bootstrap4-theme/master/docs/images/demo-page.png -------------------------------------------------------------------------------- /scss/custom.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "common"; 3 | @import "header"; 4 | @import "footer"; 5 | 6 | @import "homepage"; 7 | -------------------------------------------------------------------------------- /templates/Includes/BreadCrumbs.ss: -------------------------------------------------------------------------------- 1 | <% if $Level(2) %> 2 | 5 | <% end_if %> 6 | -------------------------------------------------------------------------------- /docs/images/page-top-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexStack/silverstripe-custom-bootstrap4-theme/master/docs/images/page-top-min.png -------------------------------------------------------------------------------- /docs/images/demo-page-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexStack/silverstripe-custom-bootstrap4-theme/master/docs/images/demo-page-mobile.png -------------------------------------------------------------------------------- /docs/images/page-footer-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexStack/silverstripe-custom-bootstrap4-theme/master/docs/images/page-footer-min.png -------------------------------------------------------------------------------- /javascript/custom.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | $('.top-nav .dropdown-toggle').click(function () { 3 | location.href = $(this).attr('href'); 4 | }); 5 | }); -------------------------------------------------------------------------------- /code-of-conduct.md: -------------------------------------------------------------------------------- 1 | When having discussions about this module in issues or pull request please adhere to the [SilverStripe Community Code of Conduct](https://docs.silverstripe.org/en/contributing/code_of_conduct). 2 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | end_of_line = lf 4 | indent_size = 4 5 | indent_style = space 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | 9 | [{*.yml,package.json}] 10 | indent_size = 2 11 | 12 | 13 | -------------------------------------------------------------------------------- /templates/Includes/Navigation.ss: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /templates/Includes/SideBar.ss: -------------------------------------------------------------------------------- 1 | <% if $Menu(2) %> 2 |
3 | <% with $Level(1) %> 4 |

5 | $MenuTitle 6 |

7 | 10 | <% end_with %> 11 |
12 | <% end_if %> 13 | 14 | -------------------------------------------------------------------------------- /scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $active-color: #E9B530; 2 | $main-bg-color:#1E437B; 3 | $sub-title-color:#CCCCCC; 4 | $gray-color:#6A6666; 5 | $black-color: #3F3E3E; 6 | $red-color:#CA4B3A; 7 | $white-color: #FFFFFF; 8 | $mobile-width: 960px; 9 | 10 | $nav-link-color:#616161; 11 | $nav-bottom-line-color: #4D6B92; 12 | $nav-bar-height: 96px; 13 | $nav-bar-current-bg-height: 8px; 14 | -------------------------------------------------------------------------------- /templates/Includes/PageTop.ss: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | <% if $SiteConfig.PageTop %> 5 | $SiteConfig.PageTop 6 | <% else %> 7 | <% with $Page("PageTop") %> 8 | $Content 9 | <% end_with %> 10 | <% end_if %> 11 | 12 |
13 |
14 | -------------------------------------------------------------------------------- /scss/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | color: $white-color !important; 3 | background-color: $main-bg-color; 4 | padding: 50px 0; 5 | 6 | a { 7 | text-decoration: underline; 8 | color: #f3ebeb; 9 | 10 | &:hover { 11 | color: $active-color; 12 | } 13 | } 14 | 15 | .copyright { 16 | display: none; 17 | margin: 50px 0; 18 | color: #627888 !important; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /css/custom.css: -------------------------------------------------------------------------------- 1 | .top-nav{ 2 | padding:0 !important; 3 | } 4 | 5 | .top-nav .member{ 6 | display:none; 7 | } 8 | 9 | .top-nav .dropdown:hover .dropdown-menu { 10 | display: block; 11 | } 12 | .top-nav .dropdown > .dropdown-toggle:active { 13 | pointer-events: none; 14 | } 15 | 16 | .page-top p{ 17 | margin-bottom: 0; 18 | } 19 | 20 | .page-top-content{ 21 | text-align: right !important; 22 | } 23 | 24 | .top-logo{ 25 | max-height:120px; 26 | } 27 | .carousel-item img{ 28 | max-height:500px; 29 | } -------------------------------------------------------------------------------- /templates/Includes/SidebarMenu.ss: -------------------------------------------------------------------------------- 1 | <%--Include SidebarMenu recursively --%> 2 | <% if LinkOrSection = section %> 3 | <% if $Children %> 4 | <% loop $Children %> 5 |
  • 6 | 7 | $MenuTitle.XML 8 | 9 | 10 | <% if $Children %> 11 | 14 | <% end_if %> 15 | 16 |
    • 17 | <% end_loop %> 18 | <% end_if %> 19 | <% end_if %> 20 | -------------------------------------------------------------------------------- /css/dark.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | background-color: #c0c0c0 !important; 4 | } 5 | 6 | .top-nav{ 7 | padding:0 !important; 8 | } 9 | 10 | 11 | .top-nav .member{ 12 | display:none; 13 | } 14 | 15 | .top-nav .dropdown:hover .dropdown-menu { 16 | display: block; 17 | } 18 | .top-nav .dropdown > .dropdown-toggle:active { 19 | pointer-events: none; 20 | } 21 | 22 | .page-top p{ 23 | margin-bottom: 0; 24 | } 25 | 26 | .page-top-content{ 27 | text-align: right !important; 28 | } 29 | 30 | .top-logo{ 31 | max-height:120px; 32 | } 33 | .carousel-item img{ 34 | max-height:500px; 35 | } -------------------------------------------------------------------------------- /templates/Includes/Footer.ss: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /templates/Layout/Page.ss: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    4 |
    5 | <% if $MenuTitle != 'Home Page' && $MenuTitle != 'Home'%> 6 |
    7 |

    $Title

    8 |
    9 | <% end_if %> 10 |
    $Content
    11 |
    12 | $Form 13 | $CommentsForm 14 |
    15 | 16 |
    17 | 18 |
    19 |
    20 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alexstack/silverstripe-custom-bootstrap4-theme", 3 | "description": "The bootstrap 4 basic theme for SilverStripe. - Bootstrap 4.x CSS, Font Awesome 5.x, JQuery 3.x are included in the Page.ss - Bootstrap Navbar for menu link included - Mobile page friendly - Very easy to custom", 4 | "type": "silverstripe-theme", 5 | "keywords": ["silverstripe", "theme"], 6 | "license": "BSD-3-Clause", 7 | "authors": [ 8 | { 9 | "name": "Alex", 10 | "homepage": "https://github.com/AlexStack/silverstripe-custom-bootstrap4-theme" 11 | } 12 | ], 13 | "require": { 14 | "composer/installers": "*", 15 | "silverstripe/framework": ">=3.5" 16 | }, 17 | "extra": { 18 | "expose": [ 19 | "css", 20 | "images", 21 | "javascript" 22 | ] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012, Alex, 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 5 | 6 | * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 7 | * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the 8 | documentation and/or other materials provided with the distribution. 9 | * Neither the name of Alex nor the names of its contributors may be used to endorse or promote products derived from this software 10 | without specific prior written permission. 11 | 12 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 13 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE 14 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 15 | GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, 16 | STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY 17 | OF SUCH DAMAGE. -------------------------------------------------------------------------------- /scss/_common.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: $white-color; 3 | font-family: Roboto; 4 | font-weight: 300; 5 | 6 | .container { 7 | max-width: 100%; 8 | padding: 0; 9 | } 10 | 11 | .row { 12 | margin: 0; 13 | } 14 | } 15 | 16 | .main-content { 17 | background-color: white; 18 | padding-bottom: 4rem; 19 | 20 | .heading-holder { 21 | padding-top: 5rem; 22 | padding-bottom: 2rem; 23 | color: $gray-color; 24 | 25 | h2 { 26 | //height: 50px; 27 | color: #252525; 28 | font-family: Roboto; 29 | font-size: 39px; 30 | font-weight: 300; 31 | line-height: 46px; 32 | 33 | } 34 | 35 | .content { 36 | 37 | color: #616161; 38 | font-family: Muli; 39 | font-size: 20px; 40 | font-weight: 300; 41 | line-height: 30px; 42 | 43 | } 44 | } 45 | } 46 | 47 | a { 48 | color: $nav-link-color; 49 | 50 | &:hover { 51 | color: #1E437B; 52 | } 53 | 54 | &.current { 55 | color: #1E437B; 56 | font-weight: bold; 57 | } 58 | } 59 | 60 | 61 | 62 | // gallery image modal lightbox 63 | 64 | .ekko-lightbox-nav-overlay { 65 | position: absolute; 66 | top: 46%; 67 | width: 100%; 68 | } 69 | 70 | .ekko-lightbox-nav-overlay a { 71 | color: #cccccc; 72 | font-size: 2rem; 73 | } 74 | 75 | .ekko-lightbox-nav-overlay a:first-child { 76 | padding-left: 0.5rem; 77 | } 78 | 79 | .ekko-lightbox-nav-overlay a:last-child { 80 | position: absolute; 81 | right: 2.5rem; 82 | } 83 | -------------------------------------------------------------------------------- /templates/Page.ss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <% base_tag %> 5 | <% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> » $SiteConfig.Title 6 | 7 | 8 | 9 | $MetaTags(false) 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | <% if $SiteConfig.CustomCssFile != '' %> 23 | <% require themedCSS($SiteConfig.CustomCssFile) %> 24 | <% else %> 25 | <% require themedCSS('custom') %> 26 | <% end_if %> 27 | 28 | 29 | dir="$i18nScriptDirection"<% end_if %>> 30 | 31 | 32 | <% include Header %> 33 | 34 | 35 |
    36 | $Layout 37 |
    38 | 39 | 40 | 41 | <% include Footer %> 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | <% require themedJavascript('custom') %> 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /templates/Includes/Header.ss: -------------------------------------------------------------------------------- 1 |
    2 | <% include PageTop %> 3 | 82 | <% if $Top.BannerImage %> 83 |
    84 |
    85 | <% end_if %> 86 |
    87 | -------------------------------------------------------------------------------- /scss/_header.scss: -------------------------------------------------------------------------------- 1 | header { 2 | background: url("/resources/themes/tpl/images/top-banner-bg.jpg") no-repeat; 3 | -webkit-background-size: cover; 4 | -moz-background-size: cover; 5 | -o-background-size: cover; 6 | background-size: cover; 7 | 8 | .navbar { 9 | box-shadow: unset; 10 | -webkit-box-shadow: unset; 11 | padding: 0 1rem; 12 | //text-transform: uppercase; 13 | font-size: 16px; 14 | height: $nav-bar-height; 15 | background-color: white !important; 16 | 17 | .member { 18 | display: none; 19 | } 20 | 21 | a.navbar-brand { 22 | background: url("/resources/themes/tpl/images/-logo.png") no-repeat; 23 | width: 255px; 24 | height: 71px; 25 | margin-left: 20px; 26 | } 27 | 28 | .nav-item.dropdown .nav-link { 29 | color: $active-color; 30 | } 31 | 32 | .nav-link { 33 | font-weight: 300; 34 | padding: 0 20px; 35 | color: $nav-link-color !important; 36 | height: $nav-bar-height - $nav-bar-current-bg-height; 37 | margin-top: $nav-bar-current-bg-height; 38 | line-height: $nav-bar-height - 3*$nav-bar-current-bg-height; 39 | background-color: $white-color; 40 | } 41 | 42 | .nav-item.current { 43 | background-color: $main-bg-color; 44 | 45 | .nav-link { 46 | color: $active-color; 47 | } 48 | } 49 | 50 | 51 | 52 | .search-icon i { 53 | font-size: 1rem; 54 | padding-left: 1rem !important; 55 | } 56 | 57 | // mobile version 58 | @media only screen and (max-width: $mobile-width) { 59 | padding: 0; 60 | 61 | .navbar-toggler { 62 | padding: 0 5px; 63 | } 64 | 65 | button { 66 | margin-right: 15px; 67 | } 68 | 69 | a.navbar-brand { 70 | //margin: 25px 0 25px 20px; 71 | } 72 | 73 | .navbar-collapse { 74 | background-color: $main-bg-color; 75 | border-top: $nav-bottom-line-color 1px solid; 76 | width: 100%; 77 | padding: 1rem; 78 | z-index: 999; 79 | } 80 | 81 | a.nav-link { 82 | padding-left: 2rem; 83 | } 84 | } 85 | } 86 | 87 | 88 | .top-banner { 89 | height: 250px; 90 | border-top: $nav-bottom-line-color 1px solid; 91 | -webkit-background-size: cover; 92 | -moz-background-size: cover; 93 | -o-background-size: cover; 94 | background-size: cover; 95 | 96 | h2 { 97 | color: $active-color; 98 | padding-top: 70px; 99 | padding-bottom: 20px; 100 | } 101 | 102 | h5 { 103 | margin-bottom: 0; 104 | color: $sub-title-color; 105 | 106 | span { 107 | display: inline-block; 108 | padding-left: 10px; 109 | } 110 | } 111 | 112 | a { 113 | color: $sub-title-color; 114 | 115 | &:hover { 116 | color: $active-color; 117 | } 118 | } 119 | 120 | // mobile version 121 | @media only screen and (max-width: $mobile-width) { 122 | //display: none; 123 | height: 180px; 124 | } 125 | } 126 | 127 | .top-search-bar { 128 | height: 106px; 129 | padding-top: 40px; 130 | display: none; 131 | 132 | background-color: #06243a; 133 | 134 | input[type="text"] { 135 | background: transparent; 136 | border: none; 137 | width: 99%; 138 | color: white; 139 | 140 | &:focus { 141 | outline-style: none; 142 | } 143 | } 144 | 145 | i { 146 | font-size: 1.2rem; 147 | color: white; 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The bootstrap 4 basic theme for SilverStripe 2 | - Bootstrap 4.x CSS, Font Awesome 5.x, JQuery 3.x are included in the Page.ss 3 | - Bootstrap Navbar for menu link included 4 | - Mobile page friendly 5 | - Very easy to custom manually or with the [SilverStripe-All-in-One package](https://github.com/AlexStack/silverstripe-all-in-one#readme) 6 | 7 | 8 | # How to install the theme 9 | 10 | 11 | ```bash 12 | composer require alexstack/silverstripe-custom-bootstrap4-theme 13 | ``` 14 | 15 | # Mobile demo page 16 | !['demo-img-mobile'](docs/images/demo-page-mobile.png) 17 | 18 | # Desktop demo page 19 | !['demo-img'](docs/images/demo-page.png) 20 | 21 | # Start a website from scratch? Try our SilverStripe All-in-one manager package 22 | - It will allow you change themes in the settings from the admin without touch the themes.yml file 23 | - Easy to custom page top logo, copyright content at the bottom of every page, page content above nav bar, set different custom css file 24 | - [Click here to see the details of this SilverStripe-All-in-One package](https://github.com/AlexStack/silverstripe-all-in-one#readme) 25 | 26 | 27 | # How to enable the theme in SilverStripe 4.x 28 | 29 | Edit your `app/_config/theme.yml` change the 'old-theme' to 'silverstripe-custom-bootstrap4-theme': 30 | 31 | ```yaml 32 | SilverStripe\View\SSViewer: 33 | themes: 34 | - 'silverstripe-custom-bootstrap4-theme' 35 | - '$default' 36 | ``` 37 | 38 | # Can I custom all the .ss template file? 39 | - Yes, you have 100% control of all the files 40 | - After install, all the .ss template files will be installed at your-ss-project/themes/silverstripe-custom-bootstrap4-theme 41 | - And css/javascript files will copy to your-ss-project/public/_resources/themes/silverstripe-custom-bootstrap4-theme 42 | - You can ignore the css/javascript files in your-ss-project/themes/silverstripe-custom-bootstrap4-theme 43 | 44 | 45 | # How to set a footer for every page 46 | - First it will display the PageFooter in SiteConfig(settings) 47 | - Then it will display the content of the URL Segment is "PageFooter" of a page 48 | - !['page-footer-min'](docs/images/page-footer-min.png) 49 | - Do not forget to set this page NOT Show in menus 50 | - Silverstripe template Includes/PageFooter.ss codes are below: 51 | ```php 52 | 53 | <% if $SiteConfig.PageFooter %> 54 | $SiteConfig.PageFooter 55 | <% else %> 56 | <% with $Page("PageFooter") %> 57 | $Content 58 | <% end_with %> 59 | <% end_if %> 60 | 61 | ``` 62 | 63 | # How to set a page top(above navbar) for every page 64 | - First it will display the PageTop in SiteConfig(settings) 65 | - Then it will display the content of the URL Segment is "PageTop" of a page 66 | - !['page-top-min'](docs/images/page-top-min.png) 67 | - Do not forget to set this page NOT Show in menus 68 | - Silverstripe template Includes/PageTop.ss codes are below: 69 | ```php 70 | 71 | <% if $SiteConfig.PageTop %> 72 | $SiteConfig.PageTop 73 | <% else %> 74 | <% with $Page("PageTop") %> 75 | $Content 76 | <% end_with %> 77 | <% end_if %> 78 | 79 | ``` 80 | 81 | # How to set up the navbar menu 82 | - It will loop $Menu(1) and display links and sub-child links 83 | - Document is here: https://getbootstrap.com/docs/4.1/components/navbar/ 84 | - Silverstripe template Includes/Header.ss codes are below: 85 | ```php 86 | <% loop $Menu(1) %> 87 |
  • 88 | <% if $Children %> 89 | 95 | <% if $Children %> 96 |
    97 | <% loop $Children %> 98 | $MenuTitle.XML 99 | <% end_loop %> 100 |
    101 | <% end_if %> 102 | <% else %> 103 | $MenuTitle.XML 104 | <% end_if %> 105 |
    • 106 | <% end_loop %> 107 | ``` 108 | 109 | 110 | # How to set up the logo for every page (top right) 111 | - It will display the TopLogo in SiteConfig(settings) 112 | - Silverstripe template Includes/Header.ss codes are below: 113 | ```php 114 | <% if $SiteConfig.TopLogo %> 115 | 116 | <% else %> 117 | 118 | <% end_if %> 119 | ``` 120 | 121 | # How to set up the BannerImage for every page (top right) 122 | - It will display the BannerImage in a page 123 | - Silverstripe template Includes/Header.ss codes are below: 124 | ```php 125 | <% if $Top.BannerImage %> 126 |
    127 |
    128 | <% end_if %> 129 | ``` 130 | 131 | # How to set up a different .css file other than custom.css 132 | - It will display the CustomCssFile in SiteConfig(settings) 133 | - You can easily to change it via [SilverStripe-All-in-One package](https://github.com/AlexStack/silverstripe-all-in-one#readme) 134 | - Silverstripe template Includes/Header.ss codes are below: 135 | ```php 136 | 137 | <% if $SiteConfig.CustomCssFile != '' %>CustomCssFile 138 | <% require themedCSS($SiteConfig.CustomCssFile) %> 139 | <% else %> 140 | <% require themedCSS('custom') %> 141 | <% end_if %> 142 | ``` 143 | 144 | # How to enable the theme in SilverStripe 3.x 145 | 146 | * Download and copy the theme into the `themes/` directory of your SilverStripe project. If you've named it correctly, there should be a directory called `themes/silverstripe-custom-bootstrap4-theme`. 147 | 148 | * Add the following to your `mysite/_config.php` file. Remove any existing `SSViewer::set_theme` lines. 149 | 150 | SSViewer::set_theme("silverstripe-custom-bootstrap4-theme"); 151 | HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles', 'highlight=highlight;no-border=no-border,break=break'); 152 | 153 | # License 154 | - BSD-3-Clause --------------------------------------------------------------------------------