Skip to content
Snippets Groups Projects
Commit a34bc885 authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #2946014: Removed [Vartheme] from Varbase core code, and have it as stand-alone theme

parent 08daeeea
No related branches found
No related tags found
No related merge requests found
Showing
with 0 additions and 725 deletions
<!-- @file Instructions for subtheming using the LESS Vartheme Subtheme. -->
<!-- @defgroup subtheme_less -->
<!-- @ingroup subtheme -->
# LESS VARTHEME_SUBTHEME
Below are instructions on how to create a Vartheme Sub theme using a LESS
preprocessor.
- [Prerequisites](#prerequisites)
- [Additional Setup](#setup)
- [Override Styles](#styles)
- [Override Settings](#settings)
- [Override Templates and Theme Functions](#registry)
## Prerequisites
- Read the @link getting_started Getting Started @endlink documentation topic.
- You must understand the basic concept of using the [LESS] CSS pre-processor.
- You must use a **[local LESS compiler](https://www.google.com/search?q=less
+compiler)**.
- You must use the [Bootstrap Framework Source Files] ending in the `.less`
extension, not files ending in `.css`.
## Additional Setup {#setup}
Bootstrap library: Download and extract the **latest** 3.x.x version of
[Bootstrap Framework Source Files] into your new sub-theme. After it has been
extracted, the folder should read `./VARTHEME_SUBTHEME/bootstrap`.
Bootstrap RTL library: Download and extract the **latest** 3.x.x version of
[Bootstrap Framework Source Files for Right to left] into your new sub-theme.
After it has been extracted, the folder should read
`./VARTHEME_SUBTHEME/bootstrap-rtl`.
{.alert.alert-warning} **WARNING:** Do not modify the files inside of
`./VARTHEME_SUBTHEME/bootstrap` directly. Doing so may cause issues when
upgrading the [Bootstrap Framework] in the future.
## Override variables.
The `./VARTHEME_SUBTHEME/less/variables.less` file is generally
where you will the majority of your time overriding the variables provided by
the [Bootstrap Framework].
## Mixins.
The `./VARTHEME_SUBTHEME/less/mixins.less` Vartheme custom mixins.
The `./VARTHEME_SUBTHEME/less/base/bootstrap.base.less` file is nearly an exact
copy from the [Bootstrap Framework Source Files]. The only difference is that it
injects the `variable-overrides.less` file directly after it has imported the
[Bootstrap Framework]'s `variables.less` file. This allows you to easily
override variables without having to constantly keep up with newer or missing
variables during an upgrade.
The `./VARTHEME_SUBTHEME/less/base/vartheme.base.less` file contains various
Varbase and Vartheme overrides to properly integrate with the
[Bootstrap Framework]. It may contain a few enhancements, feel free to edit
this file as you see fit.
The `./VARTHEME_SUBTHEME/less/base/VARTHEME_SUBTHEME.base.less` file contains
various Varbase and Vartheme
overrides to properly integrate with the [Bootstrap Framework]. It may contain
a few enhancements, feel free to edit this file as you see fit.
Following the SMACSS-style categorization of its CSS/LESS rules:
## Base — CSS/LESS reset/normalize plus HTML element styling.
* The `./VARTHEME_SUBTHEME/less/base/bootstrap.base.less` file contains
Bootstrap base.
* The `./VARTHEME_SUBTHEME/less/base/vartheme.base.less` file contains
Vartheme base, which Bootstrap overrides
* The `./VARTHEME_SUBTHEME/less/base/VARTHEME_SUBTHEME.base.less` file contains
VARTHEME_SUBTHEME base overrides over Vartheme and Bootstrap.
##Layout — macro arrangement of a web page, including any grid systems.
* The `./VARTHEME_SUBTHEME/less/layout/edge2edge.layout.less` file contains
Vartheme Edge to Edge layout for content.
## Component — discrete, reusable UI elements.
* The `./VARTHEME_SUBTHEME/less/component/bs-callouts.component.less` file
contains Bootstrap callouts component.
* The `./VARTHEME_SUBTHEME/less/component/outside-in.component.less` file
contains Outside-in component.
* The `./VARTHEME_SUBTHEME/less/component/navbar.admin.component.less` file
contains Vartheme navbar for administration.
* The `./VARTHEME_SUBTHEME/less/component/navbar.component.less` file contains
Vartheme navbar.
## State — styles that deal with client-side changes to components.
## Theme — purely visual styling (“look-and-feel”) for a component.
* The `./VARTHEME_SUBTHEME/less/theme/header.theme.less` file contains
VARTHEME_SUBTHEME header styling.
* The `./VARTHEME_SUBTHEME/less/theme/footer.theme.less` file contains
VARTHEME_SUBTHEME footer styling.
* The `./VARTHEME_SUBTHEME/less/theme/content.theme.less` file contains
VARTHEME_SUBTHEME content styling.
## Override Theme Settings {#settings}
Please refer to the @link subtheme_settings Sub-theme Settings @endlink topic.
## Override Templates and Theme Functions {#registry}
Please refer to the @link registry Theme Registry @endlink topic.
[Bootstrap Framework]: http://getbootstrap.com
[Bootstrap Framework Source Files]: https://github.com/twbs/bootstrap/releases
[LESS]: http://lesscss.org
# VARTHEME_SUBTHEME global styles library.
global-styles:
css:
base:
css/base/VARTHEME_SUBTHEME.base.css: {}
theme:
css/theme/header.theme.css: {}
css/theme/content.theme.css: {}
css/theme/footer.theme.css: {}
# VARTHEME_SUBTHEME global (RTL) styles library.
global-styles-rtl:
css:
base:
css/rtl/base/VARTHEME_SUBTHEME-rtl.base.css: {}
theme:
css/rtl/theme/header-rtl.theme.css: {}
css/rtl/theme/content-rtl.theme.css: {}
css/rtl/theme/footer-rtl.theme.css: {}
# VARTHEME_SUBTHEME global scripts library.
global-scripts:
js:
js/script.js: {}
# VARTHEME_SUBTHEME Varbase Bootstrap Paragraphs colors theme.
vbp-colors:
css:
theme:
css/theme/vbp-colors.theme.css: {}
# VARTHEME_SUBTHEME better login theme.
#betterlogin:
# css:
# theme:
# css/theme/betterlogin.theme.css: {}
# VARTHEME_SUBTHEME Vartheme styles library.
vartheme-styles:
css:
base:
css/base/vartheme.base.css: {}
# VARTHEME_SUBTHEME Vartheme (RTL) styles library.
vartheme-styles-rtl:
css:
base:
css/rtl/base/vartheme-rtl.base.css: {}
# VARTHEME_SUBTHEME Bootstrap global styles library.
bootstrap-styles:
css:
base:
css/base/bootstrap.base.css: {}
# VARTHEME_SUBTHEME Bootstrap global (RTL) styles library.
bootstrap-styles-rtl:
css:
base:
css/rtl/base/bootstrap-rtl.base.css: {}
# VARTHEME_SUBTHEME Bootstrap global scripts library.
bootstrap-scripts:
js:
bootstrap/js/affix.js: {}
bootstrap/js/alert.js: {}
bootstrap/js/button.js: {}
bootstrap/js/carousel.js: {}
bootstrap/js/collapse.js: {}
bootstrap/js/dropdown.js: {}
bootstrap/js/modal.js: {}
bootstrap/js/tooltip.js: {}
bootstrap/js/popover.js: {}
bootstrap/js/scrollspy.js: {}
bootstrap/js/tab.js: {}
# bootstrap/js/tooltip.js: {}
bootstrap/js/transition.js: {}
# ------------------------------------------------------------------------------
# Vartheme custom theme, layout, and components.
# ------------------------------------------------------------------------------
# Vartheme Bootstrap print theme library.
#bootstrap-print:
# css:
# theme:
# bootstrap-print/css/bootstrap-print.css: {}
# bootstrap-print/css/bootstrap-print-sm.css: {}
# Vartheme Bootstrap print (RTL) theme library.
#bootstrap-print-rtl:
# css:
# theme:
# bootstrap-print/css/rtl/bootstrap-print-rtl.css: {}
# bootstrap-print/css/rtl/bootstrap-print-rtl-sm.css: {}
# Vartheme Bootstrap no spacing layout library.
#bootstrap-no-spacing:
# css:
# layout:
# bootstrap-no-spacing/css/bootstrap-no-spacing.css: {}
# Vartheme Edge to Edge layout library.
#edge2edge:
# css:
# layout:
# css/layout/edge2edge.layout.css: {}
# Vartheme Bootstrap Callouts component library.
#bs-callouts:
# css:
# component:
# css/component/bs-callouts.component.css: {}
# Vartheme Outside in component library.
#outside-in:
# css:
# component:
# css/component/outside-in.component.css: {}
# Vartheme Navbar Administration component library.
#navbar-admin:
# css:
# component:
# css/component/navbar.admin.component.css: {}
# ------------------------------------------------------------------------------
# Bootstrap starterkit components.
# ------------------------------------------------------------------------------
# Vartheme Bootstrap AJAX (throbber) styles component library.
#ajax:
# css:
# component:
# css/component/ajax.component.css: {}
# Vartheme Bootstrap Alert styles component library.
#alert:
# css:
# component:
# css/component/alert.component.css: {}
# Vartheme Bootstrap Visual styles for fields component library.
#field:
# css:
# component:
# css/component/field.component.css: {}
# Vartheme Bootstrap File (and Image Widget) styles component library.
#file:
# css:
# component:
# css/component/file.component.css: {}
# Vartheme Bootstrap Filter styles component library.
#filter:
# css:
# component:
# css/component/filter.component.css: {}
# Vartheme Bootstrap Form styles component library.
#form:
# css:
# component:
# css/component/form.component.css: {}
# Vartheme Bootstrap Icon styles component library.
#icon:
# css:
# component:
# css/component/icon.component.css: {}
# Vartheme Bootstrap Navbar styles component library.
#navbar:
# css:
# component:
# css/component/navbar.component.css: {}
# Vartheme Bootstrap Node styles component library.
#node:
# css:
# component:
# css/component/node.component.css: {}
# Vartheme Bootstrap Panel styles component library.
#panel:
# css:
# component:
# css/component/panel.component.css: {}
# Vartheme Bootstrap Progress bar styles component library.
#progress-bar:
# css:
# component:
# css/component/progress-bar.component.css: {}
# Vartheme Bootstrap Table drag styles component library.
#table-drag:
# css:
# component:
# css/component/table-drag.component.css: {}
# Vartheme Bootstrap Tabs component library.
#tabs:
# css:
# component:
# css/component/tabs.component.css: {}
# Vartheme Bootstrap Toolbar module styles component library.
#toolbar:
# css:
# component:
# css/component/toolbar.component.css: {}
# Vartheme jQuery UI autocomplete widget style overrides component library.
#autocomplete:
# css:
# component:
# css/component/autocomplete.component.css: {}
core: 8.x
type: theme
base theme: vartheme
name: 'Vartheme Sub-Theme (LESS)'
description: 'Uses the Bootstrap framework LESS source files and must be compiled (not for beginners).'
package: 'Varbase'
regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
hero_slider: 'Media Hero Slider'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
libraries:
# Bootstrap styles and scripts libraries.
- VARTHEME_SUBTHEME/bootstrap-styles
- VARTHEME_SUBTHEME/bootstrap-scripts
# VARTHEME_SUBTHEME custom Vartheme styles and scripts libraries.
- VARTHEME_SUBTHEME/vartheme-styles
# VARTHEME_SUBTHEME global styles and scripts libraries.
- VARTHEME_SUBTHEME/global-styles
- VARTHEME_SUBTHEME/global-scripts
# VARTHEME_SUBTHEME Varbase Bootstrap Paragraphs colors theme.
- VARTHEME_SUBTHEME/vbp-colors
# VARTHEME_SUBTHEME Better Login theme.
# - VARTHEME_SUBTHEME/betterlogin
# OPTIONALLY: You can choose to remove Vartheme base theme stylesheets and/or
# Javascript files.
libraries-override:
# Comment lines to keep using libraries from vartheme.
bootstrap_library/bootstrap-cdn: false
bootstrap_library/bootstrap: false
bootstrap_library/bootstrap-dev: false
vartheme/bootstrap-styles: false
vartheme/bootstrap-scripts: false
vartheme/global-styles: false
vartheme/global-scripts: false
# Comment lines to use (RTL) libraries from vartheme.
vartheme/bootstrap-styles-rtl: false
vartheme/global-styles-rtl: false
VARTHEME_SUBTHEME/bootstrap-styles-rtl: false
VARTHEME_SUBTHEME/vartheme-styles-rtl: false
VARTHEME_SUBTHEME/global-styles-rtl: false
# VARTHEME_SUBTHEME Varbase Bootstrap Paragraphs colors theme.
varbase_bootstrap_paragraphs/vbp-colors: VARTHEME_SUBTHEME/vbp-colors
vartheme/vbp-colors: VARTHEME_SUBTHEME/vbp-colors
# vartheme/betterlogin: VARTHEME_SUBTHEME/betterlogin
# Uncomment lines to replace, exclude css and js files from vartheme.
# You will need to copy less/css files from Vartheme to use theme for the
# overriden library.
# ------------------------------------------------------------------------------
# vartheme/bs-callouts: VARTHEME_SUBTHEME/bs-callouts
# vartheme/outside-in: VARTHEME_SUBTHEME/outside-in
# vartheme/edge2edge: VARTHEME_SUBTHEME/edge2edge
# vartheme/navbar-admin: VARTHEME_SUBTHEME/navbar-admin
# ------------------------------------------------------------------------------
# vartheme/ajax: VARTHEME_SUBTHEME/ajax
# vartheme/alert: VARTHEME_SUBTHEME/alert
# vartheme/field: VARTHEME_SUBTHEME/field
# vartheme/file: VARTHEME_SUBTHEME/file
# vartheme/filter: VARTHEME_SUBTHEME/filter
# vartheme/form: VARTHEME_SUBTHEME/form
# vartheme/icon: VARTHEME_SUBTHEME/icon
# vartheme/navbar: VARTHEME_SUBTHEME/navbar
# vartheme/node: VARTHEME_SUBTHEME/node
# vartheme/panel: VARTHEME_SUBTHEME/panel
# vartheme/progress-bar: VARTHEME_SUBTHEME/progress-bar
# vartheme/table-drag: VARTHEME_SUBTHEME/table-drag
# vartheme/tabs: VARTHEME_SUBTHEME/tabs
# vartheme/toolbar: VARTHEME_SUBTHEME/toolbar
# vartheme/autocomplete: VARTHEME_SUBTHEME/autocomplete
ckeditor_stylesheets:
- css/base/bootstrap.base.css
- css/base/vartheme.base.css
- css/base/VARTHEME_SUBTHEME.base.css
- css/theme/content.theme.css
- css/component/alert.component.css
- css/component/icon.component.css
- css/component/node.component.css
- css/component/bs-callouts.component.css
- css/layout/edge2edge.layout.css
<?php
/**
* @file
* VARTHEME_SUBTHEME.
*
* Have custom alteration over the theme layer.
*/
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function VARTHEME_SUBTHEME_theme_suggestions_page_alter(array &$suggestions, array $variables) {
if ($node = \Drupal::routeMatch()->getParameter('node')) {
if(is_numeric($node)) {
$node = \Drupal\node\Entity\Node::load($node);
}
if($node instanceof \Drupal\node\NodeInterface) {
array_splice($suggestions, 1, 0, 'page__' . $node->bundle());
}
}
}
/**
* Implements hook_preprocess_page().
*/
function VARTHEME_SUBTHEME_preprocess_page(&$variables) {
$variables['logo_print'] = \Drupal::request()->getBaseUrl() . '/' . drupal_get_path('theme', 'VARTHEME_SUBTHEME') . '/logo-print.png';
}
Download Bootstrap RTL less source code, make sure the version of bootstrap rtl
does match the the bootstrap library.
https://github.com/morteza/bootstrap-rtl/
Download The latest Bootstrap less source code form:
http://github.com/twbs/bootstrap/
make sure there is a matching version of Bootstrap RTL, if there is not one
downgrade bootstrap version until there is a one matching Bootstrap RTL latest
version.
# Default settings should not be located here. This file is only used to
# override existing settings. If your theme is the one that introduces a new
# theme setting, it should use the Drupal Bootstrap base theme's
# @BootstrapSetting annotation discovery process. This ensures that sub-theme
# settings are inherited from base themes themes properly and to determine when
# a setting should be saved to config as "overridden".
#
# @see \Drupal\bootstrap\Plugin\SettingBase
# @see \Drupal\bootstrap\Plugin\SettingInterface
# @see \Drupal\bootstrap\Plugin\SettingManager
# @see \Drupal\bootstrap\Plugin\Form\SystemThemeSettings
# @see \Drupal\bootstrap\ThemeSettings
# Disable the CDN provider so compiled LESS source files can be used.
cdn_provider: ''
modal_enabled: 0
forms_smart_descriptions: 0
langcode: en
status: true
dependencies:
module:
- system
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_branding
theme: VARTHEME_SUBTHEME
region: navigation
weight: -5
provider: null
plugin: system_branding_block
settings:
id: system_branding_block
label: 'Site branding'
provider: system
label_display: '0'
use_site_logo: true
use_site_name: false
use_site_slogan: false
visibility: { }
langcode: en
status: true
dependencies:
module:
- system
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_breadcrumbs
theme: VARTHEME_SUBTHEME
region: header
weight: -4
provider: null
plugin: system_breadcrumb_block
settings:
id: system_breadcrumb_block
label: Breadcrumbs
provider: system
label_display: '0'
visibility: { }
langcode: en
status: true
dependencies:
module:
- system
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_content
theme: VARTHEME_SUBTHEME
region: content
weight: -5
provider: null
plugin: system_main_block
settings:
id: system_main_block
label: 'Main page content'
provider: system
label_display: '0'
visibility: { }
langcode: en
status: true
dependencies:
content:
- 'block_content:basic:b858d97d-eaa5-4cfe-af6f-b92c21bbca95'
module:
- block_class
- block_content
theme:
- VARTHEME_SUBTHEME
third_party_settings:
block_class:
classes: ''
id: VARTHEME_SUBTHEME_copyright
theme: VARTHEME_SUBTHEME
region: footer
weight: -5
provider: null
plugin: 'block_content:b858d97d-eaa5-4cfe-af6f-b92c21bbca95'
settings:
id: 'block_content:b858d97d-eaa5-4cfe-af6f-b92c21bbca95'
label: Copyright
provider: block_content
label_display: '0'
status: true
info: ''
view_mode: full
visibility: { }
langcode: en
status: true
dependencies:
config:
- system.menu.footer
module:
- system
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_footer
theme: VARTHEME_SUBTHEME
region: footer
weight: -5
provider: null
plugin: 'system_menu_block:footer'
settings:
id: 'system_menu_block:footer'
label: 'Footer menu'
provider: system
label_display: '0'
level: 1
depth: 0
visibility: { }
langcode: en
status: true
dependencies:
module:
- help
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_help
theme: VARTHEME_SUBTHEME
region: help
weight: -5
provider: null
plugin: help_block
settings:
id: help_block
label: Help
provider: help
label_display: '0'
visibility: { }
langcode: en
status: true
dependencies:
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_local_actions
theme: VARTHEME_SUBTHEME
region: header
weight: -3
provider: null
plugin: local_actions_block
settings:
id: local_actions_block
label: 'Primary admin actions'
provider: core
label_display: '0'
visibility: { }
langcode: en
status: true
dependencies:
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_local_tasks
theme: VARTHEME_SUBTHEME
region: header
weight: 0
provider: null
plugin: local_tasks_block
settings:
id: local_tasks_block
label: Tabs
provider: core
label_display: '0'
primary: true
secondary: true
visibility: { }
langcode: en
status: true
dependencies:
config:
- system.menu.main
module:
- system
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_main_menu
theme: VARTHEME_SUBTHEME
region: navigation_collapsible
weight: -5
provider: null
plugin: 'system_menu_block:main'
settings:
id: 'system_menu_block:main'
label: 'Main navigation'
provider: system
label_display: '0'
level: 1
depth: 2
visibility: { }
langcode: en
status: true
dependencies:
module:
- system
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_messages
theme: VARTHEME_SUBTHEME
region: header
weight: -2
provider: null
plugin: system_messages_block
settings:
id: system_messages_block
label: 'Status messages'
provider: system
label_display: '0'
visibility: { }
langcode: en
status: true
dependencies:
theme:
- vartheme
- VARTHEME_SUBTHEME
id: VARTHEME_SUBTHEME_page_title
theme: VARTHEME_SUBTHEME
region: header
weight: -1
provider: null
plugin: page_title_block
settings:
id: page_title_block
label: 'Page title'
provider: core
label_display: '0'
visibility: { }
# Schema for the theme setting configuration file of the THEMETITLE theme.
VARTHEME_SUBTHEME.settings:
type: theme_settings
label: 'VARTHEME_SUBTHEME settings'
If using Method 1, this folder is where the output from the compiled LESS files
should be generated. If using the LESS module, this folder can be ignored or
removed.
If using Method 2, edit the style.css file to your liking.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment