Hero Media Slider's height seems to be set to a default value of 600px. What would be an appropriate workaround to set that value to something else (e.g. 900px, 100%, etc)

Comments

walfarox’s picture

walfarox created an issue.

rajab natshah’s picture

Project: Varbase - The Ultimate Drupal CMS Starter Kit (Bootstrap Ready) » Varbase Media Hero Slider
Version: 9.0.0-rc1 » 9.0.x-dev
rajab natshah’s picture

Thank you, Wilfredo for filing this request.

You can create you own library in the theme using our source SCSS
https://git.drupalcode.org/project/varbase_heroslider_media/-/tree/9.0.x...

Varbase Hero slider media theme variables.
https://git.drupalcode.org/project/varbase_heroslider_media/-/blob/9.0.x...

// Custom Varbase Hero slider media variables.
// -----------------------------------------------------------------------------

// Text color.
$hero-title-text-color: #fff;
$hero-brief-text-color: #fff;
$hero-link-text-color: #fff;

// Font sizes with responsive sizes.
$hero-xlarge-title-font-size-xs: 3.3rem;
$hero-xlarge-title-font-size-sm: 3.3rem;
$hero-xlarge-title-font-size-md: 57px;
$hero-xlarge-title-font-size-lg: 57px;
$hero-xlarge-title-font-size-xl: 57px;

// Hero content style.
$hero-content-hover-opacity: 0.7;
$hero-content-background-color1: rgb(0,0,0);
$hero-content-background-color2: rgba(0,0,0,0.3);

// Empty hero background color.
$hero-empty-view-background: #e0e0e0;

// Gutter for arrow of navigation.
$hero-arrow-gutter: 0.63rem;

// Height for screen size and less.
$hero-min-height: 300px;
$hero-max-height: 300px;

// For screen size sm and more.
$hero-min-height-sm: 300px;
$hero-max-height-sm: 300px;

// For screen size md and more.
$hero-min-height-md: 600px;
$hero-max-height-md: 600px;

$hero-container-v-padding: 60px;

After changing and compiling the SCSS to CSS
you can have your custom library

# Vartheme BS4 Varbase Media Hero slider theme.
heroslider:
  css:
    theme:
      css/theme/varbase-heroslider-media.theme.css: {}

as in https://git.drupalcode.org/project/vartheme_bs4/-/blob/9.0.x/vartheme_bs...

And then

  # Heroslider: Uncomment the following to use varbase heroslider styling.
libraries-override:
   varbase_heroslider_media/general-styling: vartheme_bs4/heroslider

as in https://git.drupalcode.org/project/vartheme_bs4/-/blob/9.0.x/vartheme_bs...

If you are using Vartheme BS4 and generated a sub theme
you do have that ready for you to change in your sub theme
https://git.drupalcode.org/project/vartheme_bs4/-/blob/9.0.x/VARTHEME_BS...
https://git.drupalcode.org/project/vartheme_bs4/-/blob/9.0.x/VARTHEME_BS...
https://git.drupalcode.org/project/vartheme_bs4/-/blob/9.0.x/VARTHEME_BS...

Create a Vartheme BS4 sub theme ( Bootstrap 4 ) SASS

$ cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4/scripts
$ bash ./create-new-vartheme-bs4.sh "THEME_NAME"
rajab natshah’s picture

Component: Code » Documentation
Status: Active » Needs work

Needs:

  • ❌ Developer Documentation support on feature change/addition
  • ❌ User Guide Documentation support on feature change/addition