styling jsf tag in css file

Question

I have a web project. I have no trouble when styling html tags, div or class. But when I style a JSF tag (graphicImage) it doesn't work.

It doesn't work neither like this :

graphicImage{
width:280px;
height:130px;
margin-left:10px;}

nor:

h:graphicImage{
width:280px;
height:130px;
margin-left:10px;}

How can I style with external css? Can you please help me?

h:graficImage might me in your code. You have to style what it renders. Or add inline style attribute — Gerardo BLANCO, Apr 19 '18 at 17:36
Of course I use h:graphicImage tag in xhtml file. And I want to style this tag.. — codergirrl, Apr 19 '18 at 17:38
Yes, but what does it render on your client? Do you have a live preview — Gerardo BLANCO, Apr 19 '18 at 17:39
Please take a step back and learn what JSF is and does before trying things... It effectively just renders HTML — Kukeltje, Apr 19 '18 at 17:40
Yes the photo is on the web site with its size. (really big). not the size I wrote in css — codergirrl, Apr 19 '18 at 17:42
is it something like that what you say h|graphicImage{...} it doesn't work too. — codergirrl, Apr 19 '18 at 17:48
@MrListener: NOOOOOOO. nothing css namespace related. The server-side xhtml is client-side totally different. There it is pure html. Look at the generated html client side and style that.. . — Kukeltje, Apr 19 '18 at 21:37
@Kukeltje Sorry. I deleted my comments now. But you would've got my attention sooner if you'd spelled my username correctly! I never got a notification about this one. — Mr Lister, Apr 20 '18 at 08:32

Kukeltje · Answer 1 · 2018-04-20T06:55:27.980

2

You DON'T style jsf xhtml tags. You style the client-side html. Take a browser developer tool and inspect the source of what is in the browser. A JSF h:graphicImage client-side side is an <img> tag. Style that.

img {
   width:280px;
   height:130px;
   margin-left:10px;
}

But you can of course use the style and styleClass as well

edited Apr 20 '18 at 06:55

answered Apr 19 '18 at 21:41

Kukeltje

12,223
4
24
47

score 1 · Accepted Answer · answered Apr 20 '18 at 03:36

1

Maybe you can do at the tag itself, by using style attribute.

<h:graphicImage style="width:280px;
                height:130px;
                margin-left:10px;"/>

or might be like this.

<h:graphicImage styleClass="testStyle"/>

.testStyle
 {
    width:280px;
    height:130px;
    margin-left:10px;
 }

answered Apr 20 '18 at 03:36

drs

54
3

Sure but that does not explain the error in thinking in the question and hence the reason for the question. Using a (styleClass) is available all over the internet – Kukeltje Apr 20 '18 at 06:37

styling jsf tag in css file

2 Answers2