jmjf

I decided to test this.

I created a new post and made it a Gallery format. I clicked Add Media and added four images. I add metadata to three of them (caption, description, alt text) and one of them no metadata beyond the default title attribute. I clicked “Insert into Post” on the Add Media dialog. The four images showed up inline in the post space on the post editor with captions showing where I’d said captions or nothing on the image without a caption. I published the post. Viewed on my test site, the gallery post shows in the blog list with a slider that includes the four images with title and caption (from image metadata) in the overlay.

When I select the post (displaying single, not the post list), the images show up inline in the post with captions, no slider.

I added The Bootstrap Gallery Widget to the sidebar and told it to use Gallery Test (the name of the post above) and saved it. I refreshed the page and the gallery widget appeared with four pictures in a slider showing captions (just like in the post list).

If you can’t duplicate that behavior, then something is wrong. I recommend you pull a fresh version of the-bootstrap and replace your existing copy to be safe.

(FWIW, I’m using the-bootstrap 2.1.0 pulled from github with Bootstrap 2.3.1 and some other customizations, but I haven’t done anything with images or the gallery before now. The only thing I’ve done that might be affecting the above is added the clearfix class to widgets by default. This causes the gallery widget to change vertical size based on the image in the slider. Otherwise, I can’t think of anything I’ve changed that might affect this.)

Meanwhile, the following may be useful.

You say there’s nothing in source for the gallery widget. The gallery widget is coming from inc/the-bootstrap-gallery-widget.php. If that’s blank, something is wrong with your copy of the-bootstrap. The file is not blank as far back as 1.7.1 on github, so it should be there whether you got 2.0.1 from www.ads-software.com or pulled code from github.

On page source for the web page you should see something like this. (I recommend Firefox and Firebug or Chrome and Firebug so you can jump straight to the right place in the HTML and see it nicely formatted.)

<div id="sidebar-gallery-slider" class="carousel slide">
<div class="carousel-inner">
<figure class="item"> (img, caption, etc.)
<figure class="item"> (img, caption, etc.)
<figure class="item active"> (img, caption, etc.)
<figure class="item"> (img, caption, etc.)
</div>
<a class="carousel-control left" data-slide="prev" href="#sidebar-gallery-slider">?</a>
<a class="carousel-control right" data-slide="next" href="#sidebar-gallery-slider">?</a>

The gallery in the post list is coming from partials/content-gallery.php because index.php is calling get_template_part( ‘/partials/content’, get_post_format() );. The single post is coming from single.php which uses ‘single’ instead of calling get_post_format, which gets it partials/content-single.php. That’s why single returns images inline in my test. If you can get the test I described working, you should be able to write modify single.php (in a child theme) or content-single.php (in a child theme) and get a slider for gallery post types if that’s what you prefer.

Hopefully that helps. If not, please put up a test site and post a link to it here.

A couple of other notes re: FontAwesome.

If you aren’t comfortable compiling LESS (if you’re looking at js, you probably are), you have a couple of options. You can simply inject the stylesheet for FA after bootstrap.min.css. See https://fortawesome.github.io/Font-Awesome/#integration for an example of this and wp_enqueue_style in WP Codex.

Alternatively, you can go to bootswatchr.com and create a custom version of Bootstrap without sprites.less–just discovered this today. (bootswatchr.com, Start Creating in the hero unit, wait for the js to load and initialize, Settings tab, set Exclude Icons to show Exclude, get the css, replace in the-bootstrap/css, then inject FA’s stylesheet as above) This option reduces the size of your bootstrap css by not loading the default icon styles that you won’t need with FA.

Note that bootswatchr only generates the CSS (or variables.less), so it uses Twitter Bootstrap 2.3.0 (unless you select a different version in Settings). BS 2.3.1 is a set of js-only fixes, so doesn’t affect bootswatchr. Also bootswatchr generates bootstrap and bootstrap-responsive in a single css file. You can empty bootstrap-responsive.min.css or you can wp_dequeue_style( ‘twitter-bootstrap-responsive’ ); so it isn’t included on the page at all. (You’ll want to wrap the dequeue in a function and add_action( ‘init’, ‘function_name’ ); after the function.)

If you’ll set up a (test) site with un-minified bootstrap.js (just rename unminified to .min. so it will load) and give me a link to it, I’ll try to look at it in the Firebug console. Minified js is a mother to debug. ??

I started by wondering if your child theme was styling something in a way that caused this, but when I look through the css applied to your menu, very little is coming from your child theme. My current theory is that something is strange with your Javascript.

If you use a clean (fresh download) version of the-bootstrap on a fresh WP instance in your test environment and set up your menu structure, can you replicate this there?

Another thing I noted is that Konstantin’s example has real links under the top-level menu items, not # links. I don’t think this is your problem, but it’s another option to investigate if the clean install has the same problem.

Finally, note that on touch devices (tablets and phones, which is where you’d get the responsive menu) menus more than 2 levels deep don’t work. For example, when I open Konstantin’s example on my phone, I can touch Level 1 and get Level 2 showing, but if I touch Level 2, it collapses and I can’t get to Level 3. I can drop Parent Page and get a Child Page to show, but when I touch Child 1, I also end up selecting the Search box because it collapses after I select. Your mileage may vary, but if you’re going to have more than 2 levels (e.g. Bowling Fundraiser is 3 levels), what you’re getting is actually usable for touch devices, where what you’d get from the correct behavior would not be.

Also, FWIW, your “Welcome to EPX” block has issues on smaller screens. Shrink your browser window to 360px wide and you’ll see what I mean.

If you want to use FontAwesome, you may want to consider compiling your own version of bootstrap.min.css from the LESS and replacing the default iconfont with FontAwesome. It’s a simple swap documented on the FA site. This would eliminate your FA plugin and let you customize colors, etc. so you wouldn’t have to override colors in the child theme’s CSS. See bootswatchr.com for a WYSIWYG tool to write the variables.less file.

Hope something there is helpful.

I think if you exclude bootstrap-responsive.min.css from the header it should become fixed. There are a couple of ways to do this. The simplest (and a good way to test) is to simply rename the css file in the parent theme.

Hope that helps.

(Note, I believe mdo has said they’re eliminating the fixed grid in Bootstrap 3, so \you’ll need to stick with Bootstrap 2.3.1 or earlier. (I’m talking about the Bootstrap framework here, not Konstantin’s theme.))

I’m assuming you have single.php in your child theme.

I notice that it’s only single that shows this behavior. Other pages, etc. seem to work and pull in the correct format.

On the page that works, you’re getting bootstrap.css from your child theme. On the page that doesn’t, you aren’t. My guess is, something is going wrong in the header generation. How are you building your header? Are you getting the header differently in single vs. the pages that are working?

I overrode the parent bootstrap.css differently. I modified the parent theme to include a configuration option that tells it to get bootstrap (and js files) from the child theme. See these two pulls on Github if you’re interested. It may give you some ideas.

https://github.com/obenland/the-bootstrap/pull/44
https://github.com/obenland/the-bootstrap/pull/45

Maybe that helps debug.

I’ve swapped out the appropriate files on my test installation and it seems to be working. If you’d like to test your own site, you can download the default Bootstrap package and do the same.

But I should note, if you just want to add a new section, you can add_action your own customizer function with the new sections without removing the original and it will add your new sections.

I’ve made a couple of changes to the customizer, but I’ve done so by directly editing the parent code because I thought the changes are worth including in the-bootstrap proper and posted them against the theme on github. ??

But, if you don’t want to take that approach, it looks like the contents of the customizer are defined in theme-customizer.php in the_bootstrap_customize_register, which is followed by add_action( 'customize_register', 'the_bootstrap_customize_register' );

So I think you could write my_theme_customize_register in your child theme’s functions.php or in your child’s theme-customizer.php. This function, which would probably duplicate a lot of the_bootstrap_customize_register. Then do:

remove_action( 'customize_register', 'the_bootstrap_customize_register' );
add_action( 'customize_register', 'my_theme_customize_register' );

I haven’t tested that, but I’ve done similar things elsewhere in my child theme and those cases worked.

One of the challenges with hooking the customize_register function would be that you couldn’t modify the existing sections (at least, I don’t you can hook into the middle of an array declaration), only add a new section or new sections. It might be possible to make each section a separate function, which might let you replace individual sections by overriding the function (given proper “if exists” bracketing and if the admin side will allow child-theme function overrides). There could also be a function call at the end of customize_register that would allow you to override a default do-nothing function to add a new section (or new sections).

Thanks for the feedback. I checked out the blog page title in 2011 and it was as you say, so that design inconsistency is WP’s fault. ?? Meanwhile, I’ve customized my child theme to force a title on index.php.

I did some reading on post formats. On the one hand, I think what the WP guys are trying to do is good, but I’m uncertain how well it will work out. My opinion is that typography and design should hide behind content. Multiple formats on a single page makes the design visible. My solution was to keep the post’s outer structure consistent (because none of that is the post proper) and include the post format in the meta line to differentiate them. Content should make the different types obvious. At least, that’s what I believe. ??

I’m also kind of ambivalent to post formats because I wasn’t able to replace my custom post type (the primary use case for the site I’m building) with a taxonomy. Several articles suggested this would work, but I couldn’t get the formatting control I want to replace the custom post type. But that’s my problem. ??

Yes, this will probably be changed in the future to be consistent across index/single views.

Did that on my child. I’ll give you a pull on github when I get a chance (sometime in the next few days).

I inspected the page that works and the page that doesn’t work with Firebug. On the page that works, <body> takes up the whole page. On the page that doesn’t work, <body> is only the content area. So I suspect the problem is with the styles on <body>.

When I look at the styles on <body> with Firebug, I see .content {float:left;} coming from https://blog.greenlightmusic.com/?custom-css=1&csblog=1&cscache=6&csrev=9. Turning off the float makes the content center on the page.

Of course, I’ve never done anything like this myself. ??

@pgb, this is the top of my child theme’s css

/*
Theme Name: Custom Bootstrap
Theme URI:
Author: jmjf
Author URI:
Description: My customized version of The Bootstrap theme
Version:
Tags:
Text Domain: 

Template: the-bootstrap
*/

#page {background-color:#555;}

I added the #page setting to test the issue you describe. (I also change the size of h1-h6 in my child theme, among other changes.) When I reload the page after saving this, the content area is dark gray. I’m not sure what, but if you have something similar in your child theme’s style.css and it doesn’t work, my best guess is that something is configured strangely in your WordPress environment.

@malissas, The parent theme uses style.min.css, a minified version of style.css. But if you have to edit style.min.css, that suggests you aren’t using a child theme. Are you using a child theme or are you editing the-bootstrap directly?

That’s a feature of Twitter Bootstrap–it puts a border and boxshadow around .thumbnail class elements (according to what Firebug is telling me). So you’d need to style .thumbnail in your child theme’s CSS to have no border, border-radius, and probably no box-shadow.

@pgb, In your code sample, you’re still importing the parent theme’s style. As Konstantin explained, you don’t need to do that.

Please post a link to the site.

Recommendation: Get a web browser than can inspect elements on the page and show you the CSS tags in play on an element (Firefox can, I think Safari might, not sure about others). Ideally, get Firefox and Firebug. While Firefox’s default inspect was nice, Firebug has significantly improved my ability to understanding the page structure and test CSS and simple HTML changes before coding them into my child theme.

Firebug reveals that these elements are in <div class="form-allowed-tags control-group">. In Firebug, I added a rule for .form-allowed-tags to set display:none;. This section of the form disappeared. Changes made in Firebug are only to the page on screen (don’t actually affect your code), but prove what works. So, add .form-allowed-tags { display:none; } to your child theme’s style.css and the tags section should disappear.

FYI, comment_form() is a default WP function. the-bootstrap hooks into it with a set of functions in functions.php (search for the_bootstrap_comment_form and functions near it).

Hope that helps.