backdrop-contrib / bootstrap_lite Goto Github PK

Not being sure whether this is an issue with the Bootstrap Lite theme, or with Backdrop core, I'm posting this issue here, hoping someone can help.

I did a fresh Backdrop install with "Bootstrap Lite" as a parent theme, and then created a child theme, following the official guide from the Backdrop Docs: https://api.backdropcms.org/creating-sub-themes

It's all working generally well, but my custom theme css ("style.css") is being loaded before the default 'bootstrap.min.css' and the 'overrides.css' from the "Bootstrap Lite" theme.
The resulting loading order is:

• Child Theme CSS
• Bootstrap CSS
• Parent Theme CSS

This seems wrong to me because it's very hard to override any CSS rules like that. I probably did something wrong in the child theme, but didn't find any way how to change this.

Another small issue (probably connected to the first, so I'll post it here, too):
When logged in as admin, there are two separate menu entries for the theme settings in the "Design" menu - one called "Child theme settings" and one called "Bootstrap Lite settings". Changing the "Child Theme" settings doesn't have any noticable effect, but changing the "Bootstrap Lite" settings is working even for the child theme.
So in my opinion the "Child Theme settings" entry should not be there, but again, I didn't find a way to disable this. Is there a way to configure this in the child theme settings? Or is it a bug in Backdrop or "Bootstrap Lite"?

It appears that work was started on support for 4.0 Bootswatch themes. I rolled that back and opened a new feature branch to begin work on this support.

Every page crashes immediately upon installing this theme, with error Fatal error: Uncaught Error: Unsupported operand types in C:\wamp64\www\backdrop\core\includes\common.inc on line 3955. This is resolved by adding an empty attributes key to any external css file added in hook_css_alter(), so example:

    $css[$cdn] = array(
      ...
      'weight' => -2,
      'attributes' => array(),
    );

I've noticed that dialogs load differently in this theme for some reason. If I create a link that launches a dialog, the X to close the dialog doesnt appear. And its not a CSS issue: the HTML is different, except on the Layouts block add page. To test switch your admin theme to this theme, then go to admin/structure/layouts/manage/dashboard and open a dialog. The X is there. Now try admin/config/content/formats/filtered_html and click one of the "configure" buttons. No X. Youll find that if you crate your own link

    $output['custom_link'] = array(
      '#type' => 'item',
      '#markup' => l( t('Title'),  'a/path',  array(
          'attributes' => array(
            'class' => array('use-ajax'),
            'data-dialog' => TRUE,
            'data-dialog-options' => json_encode(array('dialogClass' => 'custom-dialog')),
          )
        )
      ),
    );
    backdrop_add_library('system', 'backdrop.dialog.ajax');

then the X is also missing (the button is there and is clickable, but the background is missing). I cant figure why, nor can I see what Layout links do differently. Inspect the button and the HTML is different.

The Bootswatch page is basically empty, because the API URL it's trying to call is old and doesn't work anymore. The current API URL is: https://bootswatch.com/api/4.json

Since this theme is still fairly unstable and officially in "beta" mode. Here is my thought, let's be relatively liberal in cutting new beta release while we try to get this theme stable.

I'm thinking that I'll issue a new release as often as weekly, as long as there are any changes. Hopefully, this will help us get more eyes on the code and more testing done.

Anyone using on production should be cautious about implementing these updates. But if you are able, please do test them.

I'm looking for input (atten @bugfolder) on when you think we should go ahead and call this stable.

(Also, I welcome feedback on this rough plan.)

I wish starterkits can be added to the Bootstrap Lite for those who want to create a sub theme, especially for the beginner, at least include the CDN to begin with. Thanks !

We were discussing the fact that the Bootswatch options in Bootstrap Lite are pretty hidden and difficult to find, especially if you don't know what you are looking for. A user suggested that we move this tab on the settings page to the top to make it much easier for new users to the theme to notice these options. In some ways, for anyone using Bootstrap Lite without a sub-theme, this is the most important setting.

Related to: backdrop-contrib/bootstrap5_lite#7

Bootstrap_lite and Bootstrap5_lite suffer an issue pertaining to the styling and markup of the <header> element.

In short, if you add "Header block" to the Header theme region in Layouts, you get a nice bootswatch styled header as expected.

Now add another block to the Header theme region, say "Page Title block" and you'd expect it to appear in the same <header> tag, but this is not the case. Oddly a second <header> tag is output.

Themes that behave as expected (a single header tag with consistent classes/styling)- Basis, Shasetsu, Cleanish and D7/Bootstrap.

Looking at examples on https://getbootstrap.com/ I was unable to find one with multiple header tags.

It seems fairly obvious any blocks in the Header theme region, added in Layouts, should output within a single <header> page element.

Email fields in webform do not get the form-control class. Need to add the following to the template.php.

Created pull-request #43

There's nothing in the README about who is maintaining this theme.

Originally it was @Gormartsen but I believe he's moved on to other things. He can confirm if he'd like anyone to take this over.

This setting should be initialized in the .info file, otherwise, its corresponding radio button is left empty after enable-and-set-default of the theme.

See backdrop-contrib/bootstrap5_lite#27 for the same issue.

PR to follow.

In working on an issue for Bootstrap 5 Lite (adding bundled libraries), I ran into two points that affect both modules.

Add documentation of icons to README

BSL uses the Bootstrap 3 library but also provides the FontAwesome 4 library of icons. BS3 has its own set of icons, so when both BS3 and FA4 are enabled, there's multiple ways to get similar icons. This could be confusing to users, so I have added some discussion of this point to the README.

Reorganize bundled libraries

In the original implementation of the bundled libraries, the Bootstrap, Bootswatch, and FontAwesome CSS and JS files were woven into the theme's /css and /js directories (which also contained theme-specific files, e.g., overrides.css). If we ever decide to upgrade the bundled libraries, though, the new files will have to be similarly woven in. I think it will be cleaner to put Bootstrap, Bootswatch, and Font Awesome files into their own directories that are basically the same as their respective unzipped downloads, so that, in principle, we could upgrade a bundled library by just downloading the new library and dropping it into the appropriate place.

Since these directories now include the full downloads, they are larger than before; for example, they contain the unminified versions of the files. This makes the overall theme larger. In principle, we could go in and delete all the unminified files to reduce the size, at the cost of meaning that similar surgery would be needed any time a library is upgraded. We may also want to in the future give the user the option to use the unminified files for debugging purposes. So at this point, I'm inclined to leave the full libraries as they are.

PR to follow. Feedback welcome.

Considering that Bootstrap 3 reached EOL in 2019, there is the possibility that the CDN version might go away someday. We might consider adding an option to use a local version of the library bundled with the module. Since it's EOL, there will never be an update to the library, so we can rely on the bundled version being the last supported version.

BS3 is MIT license.

Original roadmap issues for 1.x-1.3.x called for adding the ability to have different container settings for different layouts. For example: fluid for Default Layout and fixed for Default Administrative Layout.

I've just taken over maintaining this theme, because I think it could be a very strong(er) contribution to the theme space for Backdrop CMS and it hasn't gotten any attention for a long time. With the inclusion of the Bootswatch themes, it also helps us with some of the goals we've defined for the Ready 2 Wear initiative. (Bootswatch feature has been broken in recent releases).

The last release for this theme was in Dec 2016. This theme is already the most popular theme for Backdrop CMS, despite the numerous bugs that made it difficult to use out of the box.

My goals for this theme are to make it much more useful out of the box, without a sub-theme. But, I think it might also be very nice to have a starter kit included with this theme for those who intend to sub-theme it.

Here is are some ways to help.

1. Bug reports and pull requests. Help me identify things that are broken and not usable out of the box. Let's get these simple things fixed.

2. Help with the structure of the theme. I'd love feedback from experienced front-end developers on how to improve the bones of this theme, that could include rewriting CSS if necessary.

3. Help defining the purpose of "Bootstrap Lite" or the mission statement. Since taking over this theme, I'm not sure exactly the role intended by the original maintainer. However, based upon the name alone of the theme and it's condition upon taking it over, it was my impression that it is intended to be a relatively light weight theme good for sub-theming. Based upon the inclusion of Bootswatch, I think it must also have been intended to be useful out of the box for simple sites. I assume that the intention is to rely on Bootstrap as much as possible with as few overrides as possible. Does this make sense?

The versioning of this theme is a little unusual for Backdrop projects. I don't see many BETA releases listed on BackdropCMS.org. But, since there are a number of obvious bugs and past versions have been listed as BETA, I'm going to stick with that designation now to indicate that it's not entirely stable. I went ahead and cut a new release with some simple css fixes to problems that seemed pretty obvious to me. I think that this theme is much more usable today than it was yesterday, but there are still some easy to find problems that need attention.

I hope to get a stable version 1.x out very soon and then focus any larger changes on a version 2.x, so folks can use 1.x without fear of breaking.

I welcome your input.

I have created a sub theme, enabled and set as default. I tried to make some changes e.g. change container type to "fluid" and selected a different Bootswatch theme. When I save, the settings page remain unchanged. However, if I go to the front end, the theme does show the changes I made. Any idea?

Please correct the packaging error so that this Theme appears in
https://backdropcms.org/themes

I forgot to rename repository title before transfer.
Please update it to "Bootstrap-lite - Backdrop bootstrap based theme"

No nav ,navbar etc. classes defined for the menu in the header block:

<header class="l-header" aria-label="Site header" role="banner">
<div class="contextual-links-region block block-system-main-menu block-menu">
<div class="contextual-links-wrapper contextual-links-processed">
<div class="block-content">
<ul class="menu">
<li class="first leaf active">
etc.

Original roadmap for 1.x-1.3.x called for improvements to tooltips and popovers to integrate with Backdrop.

I've noticed that out of the box, this theme doesn't seem to handle second level menu items very well. Rather it causes a weird jump or glitch. You can see this on http://themeswitcher.simplo.site/ if you select Bootstrap Lite and then navigate to any second level item in the main navigation.

Is this something that we can safely fix without breaking old sites that might have already fixed this on their own?

You can test this on any site, by simply adding a second level menu item.

I believe that I've seen this problem on Backdrop sites I've found in the wild.

1. I took the latest dev version of Bootstrap and applied to a basic site.
2. I then created a custom layout for posts using Moscone Flipped layout
3. When I visit the default post included with core, Bootstrap is not working.

I replaced dev branch with last stable release and it works fine. Something in this release broke this page.

Any plans for a branch with bootstrap 4?

See line 18 - "bootstrap.admin.js" (generate 404)

I created a theme based on bootstrap_lite and cannot get nested menu item to render in my theme or the latest bootstrap_lite version.

I’ve attached screen shots that show the primary menu configuration, the rendered menu, and the HTML. The Accommodations page in this example is published. The parent menu item, About Us, has Display as expanded selected. The Accommodations menu item should appear in the nav bar under About Us, but does not.

Some of the apparently available Bootswatch themes are not available. This is because they are not supported by Bootswatch 3.x and appear to require 4.0, which this theme does not support.

We should only show the options to select themes that are available. Since the theme currently only supports 3.x, we should only show themes available in 3.x.

Example: It appears that Sketchy is available with Bootswatch lite, but Sketchy is only available for 4.0 (https://www.bootstrapcdn.com/bootswatch/) not 3.0 (https://www.bootstrapcdn.com/legacy/bootswatch/)

When I change the container type from fixed to fluid, it doesn't appear to cascade down to the regions properly. Even though the theme sets the container-fluid class properly on the page level and region level container divs, it also includes the container class. This results in the width being limited at the region level, even though it isn't at the page level.

FYI

Steps to reproduce

1. Create sub theme from bootstrap_lite
2. Enable and make default
3. Change settings on the settings bar
4. Save
5. Check the form where you changed it

Expected result: Setting is saved
Actual result: Setting is not saved. Settings changed are only retained in the parent theme.

I know how to fix. Pull request to follow shortly.

Howdy,

I am testing Backdrop with the Bootstrap Lite theme as a replacement (upgrade) for an existing Drupal 7 that uses the D7 Bootstrap 3 theme.

Overall the content transition works fine, but I have noticed that the image fields are not responsive in Bootstrap Light (unless I am missing something).

For now I have added the following code to my sub-theme template.php:

function global_image($variables) {
  return '<img class="img-responsive"' . backdrop_attributes($variables['attributes']) . ' />';
}

The above works fine, but I was wondering if this is the correct solution to this issue.
(If it is, perhaps this can be added to the theme by default)

I noticed that the container class becomes assigned to the main element by JavaScript. This sometimes causes the content to load on the left and then jump to the center as soon as the js code is executed.

The original Bootstrap templates do not require JavaScript to render the layout correctly. Is JavaScript used in bootstrap_lite because of a limitation of the Layouts system in Backdrop? Can this be fixed?

If only the Logo option is checked in Configure block "Header block", the logo (default backdrop in my case) is not showing. This issue disappears if I use Bartik.

Hi there, just thought I'd like you know your demo link isn't working in case you weren't aware. :)

I'm having a little trouble theming a node/add page and haven't figured out how to create a page template override to try to add classes myself. In D7 project/bootstrap I could move the page.tpl.php file into my subtheme and get my hands on the output. Perhaps someone could help me to override the template and even better the maintainer improving the out of box classes.

Here's the current body classes:
page logged-in cyborg navbar-is-static-top has-flexbox form-single-submit-processed

What I hoped to see and what I had in D7 project/boostrap:
page page-node page-node-add page-node-add-registration
(it's a page, it's a node page, it's a node add page, it's a node add page specifically for registration content type)

It's also nice to have the url components added as a body class:
For instance a view "mysite.com/people/developers" would get both "people" and "people-developers" classes added to the body tag

Lastly, it's also useful to have user roles in addition to "logged-in" added as classes. logged-in administrator

Options include:
Logo upload
favicon upload
Show/hide primary nav
Show/hide secondary nav
Show/hide site title

If a site has a slogan, it does not display very well. It displays outside of the header. See screenshot:

I recommend that we modify the template to better display the site slogan. I'm not sure if we can make the change in the 1.x-1.x branch?

Are we planning on a 1.x-2.x branch?

@bugfolder

This is a follow-up to Backdrop core issue backdrop/backdrop-issues#6180, where the same problem afflicts Basis theme (and so the same solution will probably work here).

The problem is that Views dropbuttons ihave bad widths and text alignment. The width of the dropbutton changes when clicked on; it can extend outside of its enclosing table cell; and the text alignment of the individual entries is right-justified (should be left).

The attached View creates two pages at paths admin/dropbutton-test (which will render in Seven) and dropbutton-test (which will render in Bootstrap Lite if that's the default theme).

Here's the Bootstrap Lite version. Observe that the dropbutton extends outside of the table and the elements are incorrectly right-justified:

Here's the Seven version, which renders correctly.

Here's the View that demonstrates it.

views.view.dropbutton_test.json.txt

Env: backdrop 1.4.2 , Bootstrap lite 1.x-1.3.5-beta1
I am using fixed width (1170px) in the theme tweak.

The max-width css definition for .container in
http://ta-camp.de/core/modules/layout/css/grid-flexbox.css
constrains the with. See http://ta-camp.de/node/1537

This does not happen with the (old) flexbox layout. See http://ta-camp.de/