{"id":16462705,"url":"https://github.com/alexstack/silverstripe-custom-bootstrap4-theme","last_synced_at":"2026-03-02T09:03:13.485Z","repository":{"id":56944860,"uuid":"196470850","full_name":"AlexStack/silverstripe-custom-bootstrap4-theme","owner":"AlexStack","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","archived":false,"fork":false,"pushed_at":"2019-07-17T23:10:40.000Z","size":284,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-27T10:00:41.683Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Scheme","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlexStack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-11T22:07:30.000Z","updated_at":"2020-03-05T20:48:00.000Z","dependencies_parsed_at":"2022-08-21T07:20:13.651Z","dependency_job_id":null,"html_url":"https://github.com/AlexStack/silverstripe-custom-bootstrap4-theme","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/AlexStack/silverstripe-custom-bootstrap4-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexStack%2Fsilverstripe-custom-bootstrap4-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexStack%2Fsilverstripe-custom-bootstrap4-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexStack%2Fsilverstripe-custom-bootstrap4-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexStack%2Fsilverstripe-custom-bootstrap4-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexStack","download_url":"https://codeload.github.com/AlexStack/silverstripe-custom-bootstrap4-theme/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexStack%2Fsilverstripe-custom-bootstrap4-theme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29996285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T11:12:06.675Z","updated_at":"2026-03-02T09:03:13.451Z","avatar_url":"https://github.com/AlexStack.png","language":"Scheme","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The bootstrap 4 basic theme for SilverStripe\n- Bootstrap 4.x CSS, Font Awesome 5.x, JQuery 3.x are included in the Page.ss\n- Bootstrap Navbar for menu link included\n- Mobile page friendly\n- Very easy to custom manually or with the [SilverStripe-All-in-One package](https://github.com/AlexStack/silverstripe-all-in-one#readme)\n\n\n# How to install the theme\n\n\n```bash\ncomposer require alexstack/silverstripe-custom-bootstrap4-theme\n``` \n\n# Mobile demo page \n!['demo-img-mobile'](docs/images/demo-page-mobile.png)\n\n# Desktop demo page \n!['demo-img'](docs/images/demo-page.png)\n\n# Start a website from scratch? Try our SilverStripe All-in-one manager package\n- It will allow you change themes in the settings from the admin without touch the themes.yml file\n- Easy to custom page top logo, copyright content at the bottom of every page, page content above nav bar, set different custom css file\n- [Click here to see the details of this SilverStripe-All-in-One package](https://github.com/AlexStack/silverstripe-all-in-one#readme)\n\n\n# How to enable the theme in SilverStripe 4.x\n\nEdit your `app/_config/theme.yml` change the 'old-theme' to 'silverstripe-custom-bootstrap4-theme':\n\n```yaml\nSilverStripe\\View\\SSViewer:\n  themes:\n    - 'silverstripe-custom-bootstrap4-theme'\n    - '$default'\n```\n\n# Can I custom all the .ss template file?\n- Yes, you have 100% control of all the files\n- After install, all the .ss template files will be installed at your-ss-project/themes/silverstripe-custom-bootstrap4-theme\n- And css/javascript files will copy to your-ss-project/public/_resources/themes/silverstripe-custom-bootstrap4-theme\n- You can ignore the css/javascript files in your-ss-project/themes/silverstripe-custom-bootstrap4-theme \n\n\n# How to set a footer for every page\n- First it will display the PageFooter in SiteConfig(settings)\n- Then it will display the content of the URL Segment is \"PageFooter\" of a page\n- !['page-footer-min'](docs/images/page-footer-min.png)\n- Do not forget to set this page NOT Show in menus\n- Silverstripe template Includes/PageFooter.ss codes are below:\n```php\n\u003c!-- PageFooter Start --\u003e\n\u003c% if $SiteConfig.PageFooter %\u003e\n    $SiteConfig.PageFooter\n\u003c% else %\u003e\n    \u003c% with $Page(\"PageFooter\") %\u003e\n        $Content\n    \u003c% end_with %\u003e\n\u003c% end_if %\u003e\n\u003c!-- PageFooter End --\u003e\n```\n\n# How to set a page top(above navbar) for every page\n- First it will display the PageTop in SiteConfig(settings)\n- Then it will display the content of the URL Segment is \"PageTop\" of a page\n- !['page-top-min'](docs/images/page-top-min.png)  \n- Do not forget to set this page NOT Show in menus  \n- Silverstripe template Includes/PageTop.ss codes are below:\n```php\n\u003c!-- PageTop Start --\u003e\n\u003c% if $SiteConfig.PageTop %\u003e\n    $SiteConfig.PageTop\n\u003c% else %\u003e\n    \u003c% with $Page(\"PageTop\") %\u003e\n        $Content\n    \u003c% end_with %\u003e\n\u003c% end_if %\u003e\n\u003c!-- PageTop End --\u003e\n``` \n\n# How to set up the navbar menu \n- It will loop $Menu(1) and display links and sub-child links\n- Document is here: https://getbootstrap.com/docs/4.1/components/navbar/\n- Silverstripe template Includes/Header.ss codes are below:\n```php\n\u003c% loop $Menu(1) %\u003e\n\u003cli class=\"nav-item \u003c% if $Children %\u003edropdown\u003c% end_if %\u003e \u003c% if $isCurrent %\u003eactive\u003c% end_if %\u003e\"\u003e\n    \u003c% if $Children %\u003e\n    \u003ca class=\"nav-link dropdown-toggle\" href=\"$Link\" id=\"drop{$ID}\" role=\"button\" \n    aria-haspopup=\"true\" aria-expanded=\"false\" data-toggle=\"dropdown\" \u003e\n        $MenuTitle.XML\n        \u003cspan class=\"icon d-none d-lg-inline icon-down-arrow\"\u003e\u003c/span\u003e\n        \u003cspan class=\"icon opener d-lg-none icon-down-arrow\"\u003e\u003c/span\u003e\n        \u003cspan class=\"sr-only\"\u003e(current)\u003c/span\u003e\u003c/a\u003e\n        \u003c% if $Children %\u003e\n        \u003cdiv class=\"dropdown-menu\" aria-labelledby=\"drop{$ID}\"\u003e\n        \u003c% loop $Children %\u003e\n            \u003ca class=\"dropdown-item\" href=\"$Link\"\u003e$MenuTitle.XML\u003c/a\u003e\n        \u003c% end_loop %\u003e\n        \u003c/div\u003e\n        \u003c% end_if %\u003e\n    \u003c% else %\u003e\n        \u003ca class=\"nav-link\" href=\"$Link\"\u003e$MenuTitle.XML\u003c/a\u003e\n    \u003c% end_if %\u003e\n\u003c/li\u003e\n\u003c% end_loop %\u003e\n``` \n\n\n# How to set up the logo for every page (top right)\n- It will display the TopLogo in SiteConfig(settings)\n- Silverstripe template Includes/Header.ss codes are below:\n```php\n\u003c% if $SiteConfig.TopLogo %\u003e\n    \u003cimg src=\"$SiteConfig.TopLogo.URL\" class=\"top-logo\" /\u003e\n\u003c% else %\u003e\n    \u003cimg src=\"https://via.placeholder.com/250x70/ebf0f5/000000/?text=Top+Logo\" class=\"top-logo\" /\u003e\n\u003c% end_if %\u003e\n``` \n\n# How to set up the BannerImage for every page (top right)\n- It will display the BannerImage in a page\n- Silverstripe template Includes/Header.ss codes are below:\n```php\n\u003c% if $Top.BannerImage %\u003e\n    \u003cdiv class=\"text-center top-banner\" style=\"background-image: url($Top.BannerImage.URL);\" \u003e\n    \u003c/div\u003e\n\u003c% end_if %\u003e\n```\n\n# How to set up a different .css file other than custom.css\n- It will display the CustomCssFile in SiteConfig(settings)\n- You can easily to change it via [SilverStripe-All-in-One package](https://github.com/AlexStack/silverstripe-all-in-one#readme)\n- Silverstripe template Includes/Header.ss codes are below:\n```php\n\t\u003c!-- Custom CSS --\u003e\n\t\u003c% if $SiteConfig.CustomCssFile != '' %\u003eCustomCssFile\n\t\t\u003c% require themedCSS($SiteConfig.CustomCssFile) %\u003e\n\t\u003c% else %\u003e\n\t\t\u003c% require themedCSS('custom') %\u003e\n    \u003c% end_if %\u003e\n```    \n\n# How to enable the theme in SilverStripe 3.x\n\n * 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`.\n \n * Add the following to your `mysite/_config.php` file.  Remove any existing `SSViewer::set_theme` lines.\n\n\t\tSSViewer::set_theme(\"silverstripe-custom-bootstrap4-theme\");\n\t\tHtmlEditorConfig::get('cms')-\u003esetOption('theme_advanced_styles', 'highlight=highlight;no-border=no-border,break=break');\n\n# License\n- BSD-3-Clause","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexstack%2Fsilverstripe-custom-bootstrap4-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexstack%2Fsilverstripe-custom-bootstrap4-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexstack%2Fsilverstripe-custom-bootstrap4-theme/lists"}