How edit CSS?

Question

I'm trying to show only the button add and the uploaded picture below the button, but it doesn't matter what I do in my CSS, the table generated by richfaces is always the same:

This is my form using richfaces:

<ui:define name="content">
        <h:form>
            <h:panelGrid>
                <rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp"  ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" >
                    <a4j:ajax event="uploadcomplete" execute="@none" render="info" />
                </rich:fileUpload>

                <h:panelGroup id="info">
                    <h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" />
                    <rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row">
                        <a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" />
                    </rich:dataGrid>

                    <br />
                    <a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" />
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
    </ui:define>

And this is how is generated :

form

I want something more simple 'cause in another moment I will some jQuery slider plugin. But I can't disappear with this table generated by richfaces. And yes skins are disable in my richfaces configuration:

update Following the suggestion my CSS look like this now:

    <style>
    div div.rf-fu { border: 0px; width: 85px; }
    div div.rf-fu-hdr { border: 0px; }
    span span.rf-fu-btn-clr { border: 0px; }
    span.rf-fu-btns-lft{ width: 85px; }
    span.rf-fu-btns-rgh{ display: none; }
    div div.rf-fu-lst { display:none; }
    </style>

And now my add.. file button looks like:

enter image description here

These post was very useful too:

Should I use 'border: none' or 'border: 0'?
Inner div has borders - how to override with a class on an outer div?

Have you tried overriding richfaces css using the classes generated for richfaces elements ? — dShringi, Apr 17 '13 at 03:34
Using `!important` is a bad practice and should always be considered a last resort ! Refer: http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css — dShringi, Apr 17 '13 at 12:02

score 5 · Accepted Answer · answered Apr 17 '13 at 12:17

5

You can use Adrian's answer to override richfaces css however you don't need to use !important to override richfaces css. Just use selector specificity to override the css applied by richfaces.

For Instance in case where you are using important, apply the css as:

div div.rf-fu-lst { display:none } and it will work for you.

answered Apr 17 '13 at 12:17

dShringi

1,497
2
22
36

I have fixed my answer with your recommendations. Thank you very much! – Adrian Mitev Apr 17 '13 at 13:50

Adrian Mitev · Answer 2 · 2013-04-17T13:50:02.790

I'm currently doing this for my project. You have to override the richfaces css in your stylesheet like this:

.rf-fu, .rf-fu-hdr {
    float: left;
    width: auto;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.rf-fu-btn-cnt-add {
    paddin-left: 0;
    cursor: pointer;
}

.rf-fu-btn-add {
    margin: 0;
}

.rf-fu-btns-rgh, .rf-fu-lst {
    display: none;
}

.rf-fu-btns-lft {
    width: 100%;
}

How edit CSS?

2 Answers2