Foros de discusión

RE: Styling of tabs in Liferay 6

Edward Coyle, modificado hace 13 años.

Styling of tabs in Liferay 6

New Member Mensajes: 18 Fecha de incorporación: 8/10/10 Mensajes recientes


Hi all, please riddle me this...

I'm attempting to style the tabs in the manage pages dialog for a theme I'm building. Please refer to the image I've posted above. Do you see that black arrow? I've scoured the base 7cogs theme pretty extensively, and I cannot seem to find this file, or find the markup that is producing this arrow. Can someone please give me some insight as to where I can find this arrow graphic and the HTML/CSS that produces it, so that I can modify it?

Thank you!
Edward Coyle, modificado hace 13 años.

RE: Styling of tabs in Liferay 6

New Member Mensajes: 18 Fecha de incorporación: 8/10/10 Mensajes recientes
So... does anyone actually assist people on these forums?
thumbnail
Jonathan Neal, modificado hace 13 años.

RE: Styling of tabs in Liferay 6

Junior Member Mensajes: 66 Fecha de incorporación: 29/08/07 Mensajes recientes
People help people all the time on these forums. You posted this on Friday and now it's Monday. I spent my freetime elsewhere, how about you? ;)

The style you want to change is .aui-tab-active:after. The original style is located in a portal css.jsp file and not the theme, as it is a core liferay component and not specifically part of any theme.
Edward Coyle, modificado hace 13 años.

RE: Styling of tabs in Liferay 6

New Member Mensajes: 18 Fecha de incorporación: 8/10/10 Mensajes recientes
Thank you for your answer, Jonathan. I really appreciate it.

Sorry for the strong-sounding post, but I've posted here a number of times in the past few months with seemingly simple problems, and never got a response until just now. I'm trying to learn how to develop Liferay themes for a job I am currently working at, and I'm just finding it extremely difficult because of the severe lack of documentation and/or community behind the newer Liferay products. Being a web designer by trade and working with other CMSes in the past, I can honestly say this one is one of the most difficult to design for. My apologies for taking out my frustration here.
thumbnail
Jakub Biernacki, modificado hace 13 años.

RE: Styling of tabs in Liferay 6

Junior Member Mensajes: 82 Fecha de incorporación: 12/08/09 Mensajes recientes
Edward Coyle:
Thank you for your answer, Jonathan. I really appreciate it.

Sorry for the strong-sounding post, but I've posted here a number of times in the past few months with seemingly simple problems, and never got a response until just now. I'm trying to learn how to develop Liferay themes for a job I am currently working at, and I'm just finding it extremely difficult because of the severe lack of documentation and/or community behind the newer Liferay products. Being a web designer by trade and working with other CMSes in the past, I can honestly say this one is one of the most difficult to design for. My apologies for taking out my frustration here.


Edward, I have had the same experience, the community isn't really as active as we would all hope, I have tried by posting here, as well as places that are very active with programmers / developers like http://stackoverflow.com.

As far as your question, what I would suggest is loading up Firefox with Firebug, and inspecting the element you see, it will show you HTML markup, as well as CSS and image locations. Enjoy that should let you 'grab' the things you need to replicate the look/style.
thumbnail
James Falkner, modificado hace 13 años.

RE: Styling of tabs in Liferay 6

Liferay Legend Mensajes: 1399 Fecha de incorporación: 17/09/10 Mensajes recientes
Jakub B:
Edward Coyle:
Thank you for your answer, Jonathan. I really appreciate it.

Sorry for the strong-sounding post, but I've posted here a number of times in the past few months with seemingly simple problems, and never got a response until just now. I'm trying to learn how to develop Liferay themes for a job I am currently working at, and I'm just finding it extremely difficult because of the severe lack of documentation and/or community behind the newer Liferay products. Being a web designer by trade and working with other CMSes in the past, I can honestly say this one is one of the most difficult to design for. My apologies for taking out my frustration here.


Edward, I have had the same experience, the community isn't really as active as we would all hope, I have tried by posting here, as well as places that are very active with programmers / developers like http://stackoverflow.com.

As far as your question, what I would suggest is loading up Firefox with Firebug, and inspecting the element you see, it will show you HTML markup, as well as CSS and image locations. Enjoy that should let you 'grab' the things you need to replicate the look/style.


Hi all, I (and the rest of Liferay) really appreciate your continued interest and participation in the Liferay community. The last 12-18 months have seen a lot of growth in the number of developers and users of the product, and we are trying our best to match that in terms of community health. Many times you may not get a response due to any number of reasons, and I apologize for that. We're working on improving the situation with a bunch of different community activities (meetups, webinars, contests, etc) to encourage not just Liferay employees, but the whole of the community to be more active and help out where they can. The answers are out there, we just have to make it easier to connect the solutions to the problems. Of course, we're constantly improving documentation, bugfixing, etc, but there will always be those "other" kinds of questions for which official docs can't answer. So thanks again for contributing your thoughts and ideas, and helping us make the community even stronger.
thumbnail
James Falkner, modificado hace 13 años.

Message board improvements

Liferay Legend Mensajes: 1399 Fecha de incorporación: 17/09/10 Mensajes recientes
Splitting and moving to the right subcat.

The new thread can be found at http://www.liferay.com/community/forums/-/message_boards/message/6814087.
thumbnail
Jonathan Neal, modificado hace 13 años.

RE: Styling of tabs in Liferay 6

Junior Member Mensajes: 66 Fecha de incorporación: 29/08/07 Mensajes recientes
Jakub B:
I would suggest is loading up Firefox with Firebug, and inspecting the element you see, it will show you HTML markup, as well as CSS and image locations. Enjoy that should let you 'grab' the things you need to replicate the look/style.


While Firebug is indeed awesome, it should be noted that the Firebug inspector will not reveal styles added with pseudo :before and :after selectors, which is why Edward was having trouble discovering this particular markup.

/* This style can be discovered with the Firebug inspector */

.my-arrow {
	background: red;
}

/* This style can not be discovered with the Firebug inspector */

.my-arrow:after {
	background: blue;
	content: '-';
	display: block;
}
thumbnail
Milan Palian, modificado hace 13 años.

RE: Styling of tabs in Liferay 6

Junior Member Mensajes: 43 Fecha de incorporación: 10/12/09 Mensajes recientes
Jonathan Neal:

While Firebug is indeed awesome, it should be noted that the Firebug inspector will not reveal styles added with pseudo :before and :after selectors, which is why Edward was having trouble discovering this particular markup.


True, however, in this case, the downward pointer color can be changed in the theme, by editing the following in custom_common.css:

.aui-tab-active:after {
...
	border-color: #333 transparent transparent;
...
}
Smilelws2010 lwz, modificado hace 12 años.

RE: Styling of tabs in Liferay 6

Regular Member Mensajes: 160 Fecha de incorporación: 16/12/10 Mensajes recientes
HI Milan,

I know the last post in this thread is quite a back.

I have a quick question. I need to remove the said down arrow in the image given in the first post. I tried a few things based on the following piece of code, but in vain.


.aui-tab-active:after {
...
border-color: #333 transparent transparent;
...
}

can anyone help.