Apex Code Development You need to sign in to do that
Don't have an account?
adreamer Visual Force and CSS
Hi All,
The question relates to the use of custom CSS with Visual Force pages.
Say one starts off with an HTML page that includes forms and several other HTML tags, and uses a CSS to control the layout and page look-and-feel.
The idea is to convert the HTML/CSS combination into a Visual Force page.
We add the corresponding <apex:page> tags, replace the CSS references by the proper <apex:stylesheet> component pointing to the CSS in the static resources, etc.
We also replace the forms, input fields, etc. by the corresponding Visual Force components.
When it comes to applying the style to the now Visual Force components, we use the styleClass attribute of each of the Visual Force components. This is the cost/effective way to re-use the existing HTML/CSS design.
My question is whether there are any restrictions on how the CSS is defined. For instance, can the CSS include all the different types of selectors -e.g. type, ID, class, etc. ?
For instance, our CSS includes type selectors for the forms as follows:
orm.side { font-size:0.8em }
form.side fieldset { margin-top:5px }
form.side fieldset legend { font-size:1em; font-weight:bold; padding-bottom:5px }
form.side label { display:block; width:80px; height:10px; padding-top:5px }
form.side .complete { float:right; font-size:1.1em; font-weight:bold; display:block; width:193px; height:10px; padding-top:4px }
form.side input, form textarea, form select { float:right; clear:both; border:1px solid #A5B7E0; font-size:1em; padding:0.2em }
form.side input { width:186px }
form.side textarea { width:273px; overflow: auto }
form.side select { width:193px }
form.side select.day { clear:none; width:43px }
form.side select.month { clear:none; width:93px }
form.side select.year { clear:none; width:57px }
form.side input.button { width:100px; background-color:#f7a229; font-weight:bold; color:#333333; border:1px solid #a1a1a1 }
form.side error { display: block; clear:both; width: 185px; padding-left:86px; font-size:0.9em; color:#FF0000 }
Do we have to use CSS classes instead so that we can then use the styleClass attribute ?.
Or we also have ID selector such as:
#main_wrapper .inner { padding:10px 10px 13px 10px }
so do we have to supply the right ID to the Visual Force component where we use that style ?.
Generaly speaking, are there any guidelines for how to define a CSS that is compatible with Visual Force pages ?.
Thank you very much in advance,
Fernando
Well, many components have the styleClass attribute, which explicitly defines a class name for the component.
To do something with the id requires a bit more CSS magic. Supposing you have a regular HTML tag, like <p>, you could easily do
<apex:page> <style type="text/css"> #myTag {color: #FF00FF;}
</style>
<p id="myTag">Don't use this color on white.</p>
</apex:page>
Which makes sense. For Visualforce components, you may need to set an explicit attribute selector. See a list of selectors here. You can set the id string of many components; however, that id string sometimes becomes prepended with the id string of parent components. To work around this, you can define a rule for all names in a certain format. For example:
<apex:outputText id="myTag" value="The time right now is: {!NOW()}" />
The id of this tag is not myTag, but j_id0:myId . Your CSS should take this into consideration, and become:
<apex:page> <style type="text/css"> [id*=myId] {color: #FF00FF;} </style> <apex:outputText id="myId" value="The time right now is: {!NOW()}" /> </apex:page>
You can of course specify this in any number of ways, not the least of which by adding the specific HTML tag (like span[id*=myId]).
I hope this is the sort of answer you were looking for.
All Answers
Well, many components have the styleClass attribute, which explicitly defines a class name for the component.
To do something with the id requires a bit more CSS magic. Supposing you have a regular HTML tag, like <p>, you could easily do
<apex:page> <style type="text/css"> #myTag {color: #FF00FF;}
</style>
<p id="myTag">Don't use this color on white.</p>
</apex:page>
Which makes sense. For Visualforce components, you may need to set an explicit attribute selector. See a list of selectors here. You can set the id string of many components; however, that id string sometimes becomes prepended with the id string of parent components. To work around this, you can define a rule for all names in a certain format. For example:
<apex:outputText id="myTag" value="The time right now is: {!NOW()}" />
The id of this tag is not myTag, but j_id0:myId . Your CSS should take this into consideration, and become:
<apex:page> <style type="text/css"> [id*=myId] {color: #FF00FF;} </style> <apex:outputText id="myId" value="The time right now is: {!NOW()}" /> </apex:page>
You can of course specify this in any number of ways, not the least of which by adding the specific HTML tag (like span[id*=myId]).
I hope this is the sort of answer you were looking for.
Hi, thanks for this post.
I am trying to convert a CSS file to work in Sites based on your instructions below.
The [id* works fine for something like this:
#header { position: relative; height: 131px; background: #caced1 url(header.jpg) no-repeat center top; padding: 0; color: #fff; }
But I was wondering how I structure a CSS entry like this?
#header h1#logo-text a { position: absolute; margin: 0; padding: 0; font: bolder 55px 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -3px; color: #fff; text-transform: none; text-decoration: none; background: transparent; /* change the values of top and left to adjust the position of the logo*/ top: 18px; left: 35px; }
where the HTML is currently coded like this:
<h1 id="logo-text"><a href="index.html">Test Logo</a></h1>
Thanks!