Bootstrap 2.3.2 in Liferay 6.2 issues

Message Boards

Umesh Kumar, modified 9 Years ago.

Bootstrap 2.3.2 in Liferay 6.2 issues

New Member Posts: 8 Join Date: 9/2/13 Recent Posts

I have doubt to implement bootstrap 2.3.2 in liferay 6.2.
actually i implemented it by removing root_css_class from portal_normal.vm, all custom things are working fine but liferay functionality like dockbar, iframe popup is not working fine.
Suggest me proper way so that liferay and custom functionaliy will not break.

Marcos Castro, modified 9 Years ago.

RE: Bootstrap 2.3.2 in Liferay 6.2 issues

New Member Posts: 11 Join Date: 6/16/14 Recent Posts

Hi,
What based-theme are you using for your theme?
'_styled' should be enough to use correctly bootstrap 2.3.2 and liferay dockbar controls.

In the following link you can see interesting things about creating themes:
https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/themes-and-layout-templates

Regards,

Umesh Kumar, modified 9 Years ago.

RE: Bootstrap 2.3.2 in Liferay 6.2 issues

New Member Posts: 8 Join Date: 9/2/13 Recent Posts

Hi Marcos,
Thanks for reply.
I used _styled theme as parent theme like
<property name="theme.parent" value="_styled" />

still i am not getting docbar properly and specially all liferay model popup (Dialog) is not closing (x link is not working).
i removed $root_css_class from html tag in portal_normal.vm file
so my all custom css with bootstrap is working fine but i am not getting dockbar and liferay pop up properly
if i put $root_css_class then mine custom css is not working, its overriding by liferay aui.css file
tell me the best solution please.

Marcos Castro, modified 9 Years ago.

RE: Bootstrap 2.3.2 in Liferay 6.2 issues

New Member Posts: 11 Join Date: 6/16/14 Recent Posts

"root_css_class $" and "$ css_class" are very important because they provide a lot of information from the navigator, 'signed-in' or not, 'public-page' or not, and essential classes of liferay needed to work correctly, like class 'aui'.

The best way is overwrite the styles you need in your custom.css over class '.aui':

.aui {
	#wrapper {
		#banner {
		}

		#content {
		}

		#footer {
		}
	}
}

If you don't want the essential styles from theme _styled, you can use theme-based _unstyled

Umesh Kumar, modified 9 Years ago.

RE: Bootstrap 2.3.2 in Liferay 6.2 issues

New Member Posts: 8 Join Date: 9/2/13 Recent Posts

Hi Marcos,
Thank you very much for this suggestion, sure i will include both css classes.
still i am having some doubt, please clear it.
liferay already using bootstrap 2.3.2 css/fonts library, is it required to include same library once again in our theme diffs folder.
and i have buttons (portlet code) and navigation where i putted my custom css but those css is not working, its overriding by aui.css
1 .aui {
2 #wrapper {
3 #banner {
4 }
5
6 #content {
7 }
8
9 #footer {
10 }
11 }
12}
Please explain it by one example so that it will be clear for me?????????

Marcos Castro, modified 9 Years ago.

RE: Bootstrap 2.3.2 in Liferay 6.2 issues

New Member Posts: 11 Join Date: 6/16/14 Recent Posts

Hi!

The bootstrap's base font library is in your theme in directory:
css/aui/*.*

And the aui.css situated in 'css/' imports the bootstrap basefile and others custom vars:

$FontAwesomePath: "aui/alloy-font-awesome/font" !default;

@import "aui/alloy-font-awesome/scss/variables";
@import "aui/alloy-font-awesome/scss/mixins-alloy";
@import "aui/alloy-font-awesome/scss/path-alloy";

.aui {
	@import "aui_variables";

	$iconSpritePath: '../images/aui/glyphicons-halflings.png' !default;
	$iconWhiteSpritePath: '../images/aui/glyphicons-halflings-white.png' !default;

	@import "aui/bootstrap";
	@import "aui_custom";
	@import "aui/responsive";
	@import "liferay_custom";

	@import "aui/alloy-font-awesome/scss/core";
	@import "aui/alloy-font-awesome/scss/bootstrap";
	@import "aui/alloy-font-awesome/scss/extras";
	@import "aui/alloy-font-awesome/scss/icons-alloy";
	@import "aui/alloy-font-awesome/scss/icons-alloy-extra";

	background-color: $bodyBackground;
	color: $textColor;
	font-family: $baseFontFamily;
	font-size: $baseFontSize;
	line-height: $baseLineHeight;
	margin: 0;
}

If you need changes some bootstrap's value, first you can try look for in those vars, if you don't find the value that you need, always you can modify the SASS files situated on /aui/ directory.
Of course all files that you need modifier should be in the directory _diffs/