Comments (14)
from bootstrap_lite.
Hi, thanks for the quick response!
Well, I'm not sure how much I can help with it myself. I'm a rather experienced Drupal developer, but this is my first Backdrop project - so at the moment I'm a bit stuck with where to start debugging.
If you don't have too much time at the moment, maybe you can point me into the right direction, and I can try to work on it myself.
Best regards!
from bootstrap_lite.
@sternhagel Welcome to backdrop!
For theme settings, I assume there is a need to do something with
https://github.com/backdrop-contrib/bootstrap_lite/blob/1.x-1.x/theme-settings.php
specialy with:
theme_get_setting('bootstrap_lite_container', 'bootstrap_lite'),
For my subtheme I created (copypaste) this file and used next line:
theme_get_setting('bootstrap_lite_breadcrumb_home', 'flame'),
instead of provided. flame
is a name of subtheme.
So I assume that bootstrap_lite/theme-settings.php need to be modified to know that it serve subtheme settings instead of forcing bootstrap_lite settings.
Try to check default backdrop theme to see how it has been done there.
for my subtheme style.css I added next code to flame/template.php
/**
* Implements hook_css_alter().
*/
function flame_css_alter(&$css) {
// Add overrides.
$theme_path = backdrop_get_path('theme', 'flame');
$override = $theme_path . '/css/style.css';
$css[$override] = array(
'data' => $override,
'type' => 'file',
'every_page' => TRUE,
'media' => 'all',
'preprocess' => TRUE,
'group' => CSS_THEME,
'browsers' => array('IE' => TRUE, '!IE' => TRUE),
'weight' => -1,
);
}
Again it's hacking the order I assume.
Maybe we need to change weight value in this code
bootstrap_lite/template.php
/**
* Implements hook_css_alter().
*/
function bootstrap_lite_css_alter(&$css) {
$theme_path = backdrop_get_path('theme', 'bootstrap_lite');
if ($bootstrap_cdn = theme_get_setting('bootstrap_lite_cdn')) {
// Add CDN.
if ($bootswatch = theme_get_setting('bootstrap_lite_bootswatch')) {
$cdn = '//netdna.bootstrapcdn.com/bootswatch/' . $bootstrap_cdn . '/' . $bootswatch . '/bootstrap.min.css';
}
else {
$cdn = '//netdna.bootstrapcdn.com/bootstrap/' . $bootstrap_cdn . '/css/bootstrap.min.css';
}
$css[$cdn] = array(
'data' => $cdn,
'type' => 'external',
'every_page' => TRUE,
'media' => 'all',
'preprocess' => FALSE,
'group' => CSS_THEME,
'browsers' => array('IE' => TRUE, '!IE' => TRUE),
'weight' => -2,
);
// Add overrides.
$override = $theme_path . '/css/overrides.css';
$css[$override] = array(
'data' => $override,
'type' => 'file',
'every_page' => TRUE,
'media' => 'all',
'preprocess' => TRUE,
'group' => CSS_THEME,
'browsers' => array('IE' => TRUE, '!IE' => TRUE),
'weight' => -1,
);
}
if ($font_awesome = theme_get_setting('bootstrap_lite_font_awesome')) {
$awesome = 'https://maxcdn.bootstrapcdn.com/font-awesome/' . $font_awesome . '/css/font-awesome.min.css';
$css[$awesome] = array(
'data' => $awesome,
'type' => 'external',
'every_page' => TRUE,
'media' => 'all',
'preprocess' => FALSE,
'group' => CSS_THEME,
'browsers' => array('IE' => TRUE, '!IE' => TRUE),
'weight' => -2,
);
}
}
Try it out, let me know the result.
If you find a way to fix, drop PR here. I would really appritiate that!
Your drupal developer skils should be enough to digg it out!
There is no so much difference drom Drupal 7.
from bootstrap_lite.
I could reproduce the issue. As you know, there is an empty css/style.css
in the parent theme. If you put something in this file, it also appears to load before the Bootstrap CSS, just the same issue as when you use the sub-theme.
In contrast, css/overrides.css
of the parent theme loads correctly after the Bootstrap CSS. I couldn't find css/overrides.css
in the .info
file though. @Gormartsen Have you declared it otherwise?
from bootstrap_lite.
@olafgrabienski Yes.
check file: bootstrap_lite/themplate.php
/**
* Implements hook_css_alter().
*/
function bootstrap_lite_css_alter(&$css) {
...
);
// Add overrides.
$override = $theme_path . '/css/overrides.css';
$css[$override] = array(
'data' => $override,
'type' => 'file',
'every_page' => TRUE,
'media' => 'all',
'preprocess' => TRUE,
'group' => CSS_THEME,
'browsers' => array('IE' => TRUE, '!IE' => TRUE),
'weight' => -1,
);
So basically we do have issue with proper weight management.
from bootstrap_lite.
@Gormartsen Thanks for your feedback! So far I'm not experienced in using CSS overrides, so no idea which weight values would make more sense in bootstrap_lite/template.php
. If needed, I'll use your Flame sub-theme workaround in the meantime.
from bootstrap_lite.
@Gormartsen Thanks for looking into this.
Your workaround to call hook_css_alter
in the child theme's template.php
is definitely working for me - although I had to set the weight to something positive to get the right order.
But still I wouldn't know what to change in bootstrap_lite's template.php
- according to the API docs, default weight for a CSS file should be 0, so files with negative weight should get loaded before any CSS loaded without explicit weight setting. So for me it makes sense to give the parent theme CSS files a negative weight - I couldn't find out yet why it's not working. I found this documentation page quite useful though:
https://api.backdropcms.org/api/backdrop/core%21includes%21common.inc/function/backdrop_add_css/1
I thought about reimplementing the whole thing without using hook_css_alter
, using backdrop_add_css
instead, but didn't have the time yet.
For the issue with the theme settings, I don't really get the idea of it. I looked into all the backdrop core themes, but none of them really uses theme settings at all - so I just don't understand how theme settings are being "handed over" from child theme to parent theme (or the other way round?). I hope to have some more time soon to look into it, or maybe find something in the docs.
For the time being I'm quite happy with your workaround with an additional template.php
.
from bootstrap_lite.
I'm having the same issue, my parent (Bootstrap Lite) theme's CSS is not being overridden by my subtheme CSS files which I've declared in my "mytheme.info" file:
stylesheets[all][] = css/suboverride.css
Does anyone know how to fix this?
from bootstrap_lite.
Yes, I fixed it with the workaround described in my last comment.
To be more specific, you need a file called template.php
in your subtheme directory. In this file put something like this:
<?php
/**
* Implements hook_css_alter().
*/
function NAMEOFYOURSUBTHEME_css_alter(&$css) {
// Add overrides.
$theme_path = backdrop_get_path('theme', 'NAMEOFYOURSUBTHEME');
$override = $theme_path . '/css/suboverride.css';
$css[$override] = array(
'data' => $override,
'type' => 'file',
'every_page' => TRUE,
'media' => 'all',
'preprocess' => TRUE,
'group' => CSS_THEME,
'browsers' => array('IE' => TRUE, '!IE' => TRUE),
'weight' => 1,
);
}
Replace "NAMEOFYOURSUBTHEME" with the machine name of your theme (e.g. "mytheme" in your example).
This worked for me.
from bootstrap_lite.
ok great thanks for that @sternhagel I'll give that a go
from bootstrap_lite.
I was helping someone debug this issue in their bootstrap_lite
sub-theme today, and I believe the issue here is that adding CSS files via hook_css_alter()
isn't the right way to do it (it seems that the weight value has no effect, presumably because that hook is called too late...?).
I believe what this theme needs to do to allow sub-themes to override bootstrap.min.css
is add the CDN-CSS via backdrop_add_css()
in something like template_preprocess_page()
instead.
from bootstrap_lite.
I just ran into this. The root cause is that there is an undocumented 'every_page_weight'
key that needs to be added in backdrop_lite_css_alter()
. Specifically, add
'every_page_weight' => -1,
to each of the CSS additions in backdrop_lite_css_alter()
. That will fix the problem. I will create a PR with the fix.
Here's why.
The function backdrop_add_css()
sets the value of this key. It's used to achieve the sort order in the documentation for the 'weight' key. If CSS is added via hook_css_alter()
, implementations need to set this key to -1 if 'every_page' => TRUE
and +1 otherwise, to match the behavior of backdrop_add_css()
.
The documentation for hook_css_alter()
should probably call out the need for implementers to set this key, since it's not documented elsewhere.
from bootstrap_lite.
from bootstrap_lite.
So, I'm not 100% sure how to test this quickly, but I have some faith that @bugfolder understands the problem. I'm going to merge this into 1.x-1.x for testing. I'd love to have someone confirm that this works before the next release. Hopefully, fairly soon.
@BWPanda - Do you have any thoughts on this change?
from bootstrap_lite.
Related Issues (20)
- Release Plans HOT 4
- Move the Bootswatch tab on the theme settings to top HOT 4
- Consider providing a local copy, rather than the CDN HOT 6
- Roadmap issues: tooltips and popovers
- Roadmap issues: Different container settings for different layouts
- Fatal error on PHP 7 HOT 6
- JQuery UI issue HOT 3
- Subtheme doesn't save settings HOT 1
- Missing config options vs D7's bootstrap theme HOT 1
- Missing body classes HOT 6
- Header region abnormal output HOT 2
- Email element in webforms do not get the form-control class.
- Issue with drop down menus jumping HOT 4
- Bootstrap broken when using custom template and bundled version of Bootstrap HOT 3
- Poor handling of site Slogan HOT 1
- Reorganize libraries, expand documentation of icons HOT 4
- Question about (lack of) responsiveness with image fields HOT 7
- Front Page with new content type
- Views dropbuttons have bad widths and text alignment HOT 3
- Initialize the bootstrap_lite_bootswatch setting in .info file.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap_lite.