bartik subtheme and css

I want to make some modifications to the bartik theme i am using D8 (like changing the logo position,etc) i created a subtheme named it “mytheme” following the instruction i found here:

https://www.drupal.org/docs/8/theming-drupal-8/creating-a-drupal-8-sub-theme-or-sub-theme-of-sub-theme

So, first I created the mytheme.info.yml file containing:

name: mytheme type: theme base theme: bartik description: subtheme for bartik core: 8.x libraries:   mytheme/global-styling regions:   header: Header   primary_menu: 'Primary menu'   secondary_menu: 'Secondary menu'   page_top: 'Page top'   page_bottom: 'Page bottom'   highlighted: Highlighted   featured_top: 'Featured top'   breadcrumb: Breadcrumb   content: Content   sidebar_first: 'Sidebar first'   sidebar_second: 'Sidebar second'   featured_bottom_first: 'Featured bottom first'   featured_bottom_second: 'Featured bottom second'   featured_bottom_third: 'Featured bottom third'   footer_first: 'Footer first'   footer_second: 'Footer second'   footer_third: 'Footer third'   footer_fourth: 'Footer fourth'   footer_fifth: 'Footer fifth' 

Next i created the mytheme.libraries.yml containing the following:

global-styling:   css:     theme:       css/style.css: {} 

i went to appearance and enabled “mytheme” as default, went back to site, looks identical to how bartik was so far so good

my problem now is, how do i move on with the customizations i want to do?

i created a folder called: “css” in “mytheme” directory, inside the css folder i created a blank file called “style.css” and there i wrote the first modification i want to do

.region-header .site-branding {     float: none;     text-align: center; } 

When i go back to site i see no difference, the logo remains on the left like it was on bartik

Can somebody help please?

I am not sure how to proceed and if what I did by creating a css folder, etc is the right way.

Thank you.

How to keep my Bootstrap sub-theme without using the CDN?

I created a sub-theme bootstrap version of CDN.

I based on “Journal” version “3.3.6” and I personalized my style.css file with 900 lines.

enter image description here

https://bootswatch.com/

I no longer wish to use the CDN, but I like to keep my current theme “Journal” and my custom style sheet.

How can I do this without using “less”?

What I want is to work with CSS

I asked this question several weeks ago but I still have not found a solution :

Install without Bootstrap CDN

enter image description here

Zuzuesque thank you your solution works, but I am having display problem :

  • I no longer have the “glyphicons”

  • The menu bar is not displayed correctly

  • The admin menu is hidden by the menu bar

How do I correctly implement hook_bootstrap_colorize_text() to alter button colors in a Bootstrap sub-theme?

I have read similar questions on here, but I’m still struggling for an answer for this.

I’m trying to implement hook_bootstrap_colorize_text() to alter button colors in a Bootstrap sub-theme.

I would like to add some specific text items to the array that dictates how the buttons are colorizes. For example, I have some buttons that have the “btn-default” class, and I would like to indicate specific texts to which should have “btn-success” or “btn-warning” instead.

The bootstrap.api.php describes this process:

/**  * Allows sub-themes to alter the array used for colorizing text.  * …  * @see _bootstrap_colorize_text()  */  function hook_bootstrap_colorize_text_alter(array &$  texts) {    // This matches the exact string: "My Unique Button Text".    $  texts['matches'][t('My Unique Button Text')] = 'primary';    // This would also match the string above, however the class returned would   // also be the one above; "matches" takes precedence over "contains".   $  texts['contains'][t('Unique')] = 'notice';    // Remove matching for strings that contain "apply":   unset($  texts['contains'][t('Apply')]);    // Change the class that matches "Rebuild" (originally "warning"):   $  texts['contains'][t('Rebuild')] = 'success'; } 

Therefore, I have attempted to implement the following code in my sub-theme (methodsTheme) template.php file without success.

<?php // Implements hook_bootstrap_colorize_text_alter() to alter button colors.   function methodstheme_bootstrap_colorize_text_alter(array &$  texts) {     $  texts['matches'][t('Request Rotation')] = 'success';     $  texts['contains'][t('Notify')] = 'success';     $  texts['contains'][t('Set')] = 'success';     $  texts['contains'][t('Mark')] = 'success';     $  texts['contains'][t('Assign')] = 'success';     $  texts['contains'][t('Report')] = 'warning';     $  texts['contains'][t('Request')] = 'info';   } ?> 

I’ve also tried:

<?php // Implements hook_bootstrap_colorize_text_alter() to alter button colors.   function methodstheme_bootstrap_colorize_text_alter(&$  texts) {     $  texts['matches'][t('Request Rotation')] = 'success';     $  texts['contains'][t('Notify')] = 'success';     $  texts['contains'][t('Set')] = 'success';     $  texts['contains'][t('Mark')] = 'success';     $  texts['contains'][t('Assign')] = 'success';     $  texts['contains'][t('Report')] = 'warning';     $  texts['contains'][t('Request')] = 'info';   } ?> 

And, I’ve also tried:

<?php // Implements hook_bootstrap_colorize_text_alter() to alter button colors.   function methodstheme_bootstrap_colorize_text_alter(&$  texts) {     $  texts = array(       'matches' => array(         t('Request Rotation') => 'success',       ),       'contains' => array(         t('Notify') => 'success',         t('Set') => 'success',         t('Mark') => 'success',         t('Assign') => 'success',         t('Report') => 'warning',         t('Request') => 'info',       ),     );   } ?> 

And, yes, after each attempt, I’m clearing the caches to see if the changes to the code are implemented to the desired result. However, I’m still emptyhanded. I’m placing the template.php file in my sites/all/themes/methodstheme/templates folder. The sub-theme was already established and working well (i.e., it is set-up properly, I believe).

I’m using Drupal 7.64 (with install profile varbase, but I’ve mostly removed all usage of the varbase profile and modules) and latest version of Bootstrap 3 theme as the base theme.

Can anyone offer some help or suggestions on what the issue may be?

{{ directory }} in Twig template in base theme breaks subtheme

Given a base theme called parent that is a child of stable, and a sub-theme called child whose base theme is parent, a Twig template implemented in the parent theme renders the wrong value for {{ directory }} variable.

  1. In the parent theme, add a node.html.twig template with the following content:

    {# contents of parent/templates/node.html.twig #} file is themes/custom/parent/templates/content/node.html.twig<br> directory is: {{ directory }} 

    Leave node.html.twig unimplemented in child theme, so that it inherits from parent.

  2. Set default theme to child.
  3. Visiting node/1 will print:

    file is themes/custom/parent/templates/content/node.html.twig directory is themes/custom/child 

In theory, step 3 should produce a value of themes/custom/parent for the directory variable, otherwise, how can you depend on that variable to reference URLs of additional assets from the parent theme?

As I understand it, this basically means that you cannot use {{ directory }} to reference any static assets in a base or parent theme, such as the path to an image icon, or using the {{ source() }} Twig function to insert an inline SVG. In my case, I’m trying to do just this:

{{ source(directory ~ '/images/svg/resources.svg') }}

But I get: Twig_Error_Loader: Template “themes/custom/child/images/svg/resources.svg” is not defined. Obviously, that file only exists in the parent theme.

Possibly this should be filed as a bug on drupal.org but wanted to check here first if this is already known and/or to award some karma points for a successful workaround.

New sub-theme not showing in appearance

I am working with Drupal’s Open social framework where in I copy socialblue theme so that i can do my modifications in the new theme. I followed the below steps, cleared cache, yet I am not able to see my new theme in admin/appearance section.

Steps I followed:

1) I duplicated the theme socialblue (html/profiles/contrib/social/themes/socialblue) to newtheme (html/profiles/contrib/social/themes/newtheme)

2) I did a search (socialblue) and replace (newtheme) inside of “newtheme” directory

3) I changed the names of the following files from “socialblue” to “newtheme”

newtheme.info.yml newtheme.libraries.yml newtheme.theme config/install/newtheme.settings.yml 

4) I created a /html/sites/default/services.yml file from default.services.yml and made the following changes

twig.config -> debug: true twig.config -> auto_reload: true twig.config -> cache: false 

5) html/profiles/contrib/social/themes/newtheme$ yarn install

6) html/profiles/contrib/social/themes/newtheme$ sudo npm install -g gulp-cli

7) html/profiles/contrib/social/themes/newtheme$ gulp

I do not get any error. I made sure that my newtheme.info file has name newtheme. I also copied this new theme in html/themes/custom/newtheme still no luck. Am I missing something?

Bootstrap sub-theme override CSS

I just set up an new Drupal 8 website. I was used to use CSS injector on Drupal 7, but since the module is not ready yet, and I thought I’d better start with subthemes, I tried to create a new Boostrap subtheme. I used the CDN method, activated it in my admin panel, but when I try to override CSS by creating CSS styles in css/style.css, nothing work. In Drupal 7 with CSS injector, my main difficulty was to find the proper class. So I tried a lot of different possibilities, copied/paste CSS from original files in Bootstrap. Nothing works.

Have anybody already tried to create a sub-theme with Bootstrap? Did overriding CSS work?

I looked at the CSS file link, it’s loading lumen theme nicely. I tried to change h2 color in this file: themes/bootstrap/css/3.3.5/overrides-lumen.min.css and it works…Clearly, seems that style.css is not used…

How to redefine / override the default breakpoints in a D7 Bootstrap subtheme (CDN)?

I have a Drupal 7 subtheme based on the Drupal Bootstrap theme CDN starterkit. I’m trying to change the default breakpoints, which I thought would be a simple, routine task, but I can’t find anything that works.

I’ve read this issue which shows that the theme supports the Breakpoints module. I’ve installed the Breakpoints module, followed the steps given, got confirmation in Drush and the Breakpoints module UI that my new breakpoints have been read from my .info file – but the columns in my Bootstrap subtheme ignore these and carry on using the built-in ones. I’ve cleared all browser and Drupal caches.

I can only assume that the “Breakpoints module support” means that it allows other modules (like Navbar etc) to listen to the custom breakpoints, whereas Bootstrap itself continues getting Bootstrap CSS files according to its built-in defaults.

I’ve also been through the Drupal Bootstrap documentation and can’t find anything about breakpoints at all. I only confirmed what the default Bootstrap breakpoints were through a comment in the above linked issue.

All I can think of is, to compile a version of the Bootstrap CSS with the breakpoints I want, upload it and use it instead of CDN as per “Using own Bootstrap 3 files in Bootstrap Drupal 7 theme”. I’m wary of this however because it seems like the theme PHP would expect different breakpoints to those defined in the theme CSS which sounds like a recipe for strange bugs further down the line. I’d prefer to override some setting or, failing that, function in the theme so that it gets the configuration I want from the CDN and isn’t expecting a different configuation.

[UPDATE] I’ve tried this and it does seem to work, although at first I thought it hadn’t because I’d misread how the Bootstrap compiler used minimum and maximum values. It feels like a very “against the grain” bodge though, and I won’t be surprised if it causes problems later, which is why I’m not posting it as an answer.


How can I customise the pixel values for the xs, sm, md and lg Bootstrap breakpoints in a Drupal 7 Breakpoints based subtheme in a clean way that is consistent between front end and back end?