Liferay 7.2 - Change CSS for Search Container

RE: Liferay 7.2 - Change CSS for Search Container

2019-09-03T09:40:44Z

Hi Mohammed,

I was not able to change the background color of the td elements. I noticed that my main.scss was opening the text editor of my PC. I changed to main.css and the file is opening in the IDE now. Looks now that my css changes are taking effect, could be a problem loading the scss file? I have the following working on my css:

.search-container thead {
&nbsp;&nbsp; &nbsp;display: none;
}

.search-container td {
&nbsp;&nbsp; &nbsp;border: none;
}

.search-container td:first-child {
&nbsp;&nbsp; &nbsp;width: 5%;
}

.search-container td:last-child {
&nbsp;&nbsp; &nbsp;width: 95%;
}

RE: Liferay 7.2 - Change CSS for Search Container

2019-09-03T07:07:14Z

HI,

I am successfully hiding the thead of the Search Container, but for some reason I can't change anything else. What would be the correct way to edit the appearance of the Search Container?

What exactly your not able to change ?

Liferay 7.2 - Change CSS for Search Container

2019-09-02T12:22:48Z

Hi,

I have the following Search Container on my view.jsp:

<liferay-portlet:renderurl varimpl="iteratorURL">
&nbsp; &nbsp; <portlet:param name="mvcPath" value="view.jsp" />
</liferay-portlet:renderurl>

&lt;% List<myobject> myObjects = (List<myobject>) request.getAttribute("objects-list"); %&gt;
<liferay-ui:search-container cssclass="search-container" delta="10" deltaconfigurable="true" emptyresultsmessage="Empty results!" total="<%= myObjects.size() %>">
    <liferay-ui:search-container-results results="<%= ListUtil.subList(myObjects, searchContainer.getStart(), searchContainer.getEnd()) %>" />
&nbsp; &nbsp; <liferay-ui:search-container-row classname="MyObject" modelvar="myObject">
&nbsp; &nbsp;     <liferay-ui:search-container-column-image name="Avatar" src="${myObject.avatar}" />
&nbsp; &nbsp; &nbsp; &nbsp; <liferay-ui:search-container-column-text name="Name" property="name" />
&nbsp; &nbsp; </liferay-ui:search-container-row>
&nbsp; &nbsp; <liferay-ui:search-iterator />
</liferay-ui:search-container></myobject></myobject>

And in my META-INF -> resources -> css I have the following main.scss file:

.search-container thead {
&nbsp; &nbsp;&nbsp; &nbsp;display: none;
}

I am successfully hiding the thead of the Search Container, but for some reason I can't change anything else. What would be the correct way to edit the appearance of the Search Container?