notifications-portlet span8 breaks my theme

[Moisés Belda, modifié il y a 9 années.]

I'm trying to implement a boostrap based theme.

My problem is that notification-portlet has the next css code:

/* ---------- Layout ---------- */

.span1, .span2, .span3, .span4, .span5, .span6 {
	.notifications-portlet {
		.user-notifications-sidebar, .user-notifications-list-container {
			margin-left: 0;
			width: 100%;
		}
	}
}
.span8 {
	width: 70%;
}

This span8 breaks all my theme code, because notification-portlet css is rendered the last of included css. Also this css don't have any prefix or suffix, then is applied to entire portal and breaks any responsive css.

Anyone knows what is the reason to that css fix? Is it possible to owerwrite with a theme?

[Ahmed bouchriha, modifié il y a 9 années.]

Hi

I checked the notification-portlet code (webapps/notifications-portlet/notifications/css/main.css ) and did not find such code
can you precise from where this code is coming.

Regards

[Moisés Belda, modifié il y a 9 années.]

Hi

Here the code => https://github.com/liferay/liferay-plugins/blob/master/portlets/notifications-portlet/docroot/notifications/css/main.css#L563

Commit => https://github.com/liferay/liferay-plugins/commit/dac2ea7a10dde1b33489eef698570da163745281

Thank you in advance!

[Ahmed bouchriha, modifié il y a 9 années.]

Hi,

Yes i see its wrong to style a generic selector like .span8 without a wrapper but i can understand it since it still in dev stage.

anyway you can fix the problem by bringing all the definitions of the .span8 selectors on the bootstrap.css to your custom.css and adding !important
something like this :

.notifications-portlet {
 .span8 {
    width: 620px !important;  
}
.row-fluid .span8 {
      width: 65.95745% !important;  
      *width: 65.90426% !important;  
}
....
}

But since probably this rule will be removed from the notifications portlet css file i advice you to either desactivate the portlet temporally until its fixed or
redeploy it from source after removing the .span8 rule.


Regards

[Moisés Belda, modifié il y a 9 années.]

Css file was not introduced only in dev stage. It was introduced in liferay 7 branch, but is present on liferay 6.2 GA3 bundle

The " !important" fix is not a sollution for me, because I have several span8, because I 'm implementing a responsive theme with a lot of span8 defined device based.

Thanks for your tips.

Regards

[Mark Fitzgerald, modifié il y a 9 années.]

Is there a reason why you can't add more specificity to the CSS rules? You should be able to use the ".row-fluid .span8" designation without needing the "!important" flag added to it.

[Moisés Belda, modifié il y a 9 années.]

It would be a huge work....if I have to change the theme's css.

I'm implementing a liferay theme with a html + css bootstrap based template. It has a lot of span8 (for responsive variations) that I should need to modify .
I think not-wrapped span8 used in notifications-portlet is incorrect, because is loaded after all theme css, not wrapped with a class, and it can't be overwrited by the theme (or hook), because is a external portlet that is included with the bundle.

I have opened a Jira for this issue => https://issues.liferay.com/browse/LPS-53735