Recent Topics

Fix for Bootstrap Sidebar?

Started by on Jan 18, 2016 – Contents updated: Oct 20, 2016

Jan 18, 2016 12:55    

In it's default state...I can't get the Sidebar to load properly on single blog posts...

http://www.cybermidi.com/news/index.php/blog/MIDI-101/don-t-dismiss-the-mighty

It loads down the page after the post instead of to the right of the post.

Please advise where to place div or table data to fix

Thank you

Jan 18, 2016 17:10

@bloggerboy I see the sidebar as expected at a >= 992px resolution (see screenshot below).

On smaller resolutions, the sidebar goes below the post due to the responsive design of the skin. So, if you want a different behaviour, you will need to customise your css.

You can find the same default behaviour in this page: http://demo2.b2evolution.net/stable/index.php/a/

Jan 18, 2016 17:53

Thank you

By the way, right before the comments is this error:

Notice: Undefined index: infoend in /#####/news/inc/_core/ui/forms/_form.class.php on line 303

(#= real path)

Any ideas?

Jan 18, 2016 18:37

The send comments appears for logged in users only

Jan 19, 2016 18:54

I don't know if "BOOTSTRAP" is a defunct skin...I don't see it at all in the latest release. I really like the look but it appears it is gone.

I see bootstrap-blog, forum, etc..but no plain Bootstrap. And your fix for infoend is for bootstrap_blog.

That was the skin that was causing the errors. And by the way, the comment form submit showed on Firefox, not Chrome

Jan 20, 2016 06:10

@bloggerboy yes, you're right, the Bootstrap skin has evolved to bootstrap_blog, bootstrap_forums, bootstrap_gallery, bootstrap_main and bootstrap_manual. As the plain bootstrap skin is not supported anymore, it shouldn't be used in productions sites.

As it is not clear to me, what skin are you currently using in your upgraded 6.6.7 site?

Regarding the comment form, maybe you can test disabling AJAX forms: http://b2evolution.net/man/collection-cache-settings

Jan 20, 2016 14:08

No problem with the comment form on bootstrap_main. It was the plain bootstrap which i uninstalled.

Now I just need to fix the header as I want it running across full as I had in bootstrap.

But just getting comfortable with this upgrade. Appreciate the work and it looks like it is easier to customize than previous versions.

Jan 21, 2016 11:49

Hey there,

To fix your problem, you can either override bootstrap classes with the '!important' tag, or customize bootstrap css via their website, or directly in bootstrap.min.css

But if I understand your issue, I think you don't even have to add css. If you use bootstrap grid system correctly, you should be able to fix it using the original classes. For instance if I want a right sidebar to stay on the right whatever the screen resolution is, I'll have to set a col-xs-10 div next to a col-xs-2 div for instance, and that'll do the trick.

Hope it helps,

Jan 22, 2016 01:38

I think i got it, but still getting used to this update. I copied Bootstrap_blog to my own template just so it won't be overwritten Where is the CSS file to edit?

I want to remove the PAGE_Top and increase the header to full width.

Inspecting the CSS, it is pointing to /rsc/css/bootstrap min css. ?

thanks

Jan 22, 2016 06:29

@bloggerboy, @masdigbord is right about your initial question regarding the sidebar. You can keep it on any resolution using the bootstrap's grid system. You will find the containers (main content and sidebar) at index.main.php.

Regarding the styles, yes, the skin uses the main bootstrap built-in styles but you can find overrides in the file /skins/[your-skin]/style.css. This skin uses less as css pre-processor, so the recommended way to introduce changes is: 1) modify the .less file and 2) compile it again to get the .css and .min.css. This guide might help: http://www.hongkiat.com/blog/less-basic/

However, although it's not too complicated, if don't want to play around with less, you can make your own css override file and include it in the skin. Just create a file custom.css (you can use any name) with all your css customization and include a require_css('custom.css', true); inside the _skin.class.php file of your skin, just below this line:

// Skin specific initializations:

As a side note, did you check our amazing skin development primer (http://b2evolution.net/man/skin-development-primer) ?

Jan 22, 2016 16:01

Thanks guys for the help.

Adding a custom.css seems to work, even if it isn't the prettiest of css formating.


.col-md-pull-4 {
    right: 0 !important;
 }
.col-md-8 {
    width: 100% !important;
}

.col-md-push-8 {
    left: 0% !important;
}
.col-md-4 {
    width: 100%!important;
}

I am going to disable the sitewide header, but can you tell me why CYBERMIDI appears twice?

CYBERMIDI CYBERMIDI PRACTICAL MIDI

http://www.cybermidi.com/news/index.php/blog/

Jan 23, 2016 10:09

@bloggerboy if that CSS works as you expected, great!

I didn't find any repeated CYBERMIDI in that page. Where is it exactly?

Jan 23, 2016 15:01

Cool, thank you.

Well done on the improved interface. I had thought of switching to Wordpress because it was so difficult to customize.

But my links are well indexed so I'm not touching anything.

In addition, customizing here is actually easier than customizing templates in WP.

Keep up the good work.


Form is loading...

blogging software – This forum is powered by b2evolution CMS, a complete engine for your website.