Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
PBS_IC786PBS_IC786 

styles question for VF

Code:
<apex:page controller="cMainMenu" sidebar="false" showheader="false" standardstylesheets="false">
<style>
body .h1 {
font-size:14;
font-weight: bold;
font-family:Arial;
}
</style>
<h1>Visualforce Test</h1><br/><hr/>
</apex:page>


what is wrong with this picture?  I do not get an error but the text "Visualforce Test" does not come up in Arial font at the size I specified so how can I control the style of the text contained in the <h1> tag?"
Ron HessRon Hess
looks like a styles problem

try this, i removed the . in .h1 and it worked

<style >
body h1 {
font-size:14;
font-weight: bold;
font-family:Arial;
}
</style>
PBS_IC786PBS_IC786
Thank you Ron...that worked...would have been tough to figure that out if you didn't answer...I appreciate it

Now I will have to sharpen my CSS skills and get to work...
PBS_IC786PBS_IC786
new question...

How do I handle the commandbutton component in VF?

Code:
combtn {
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
background-color:blue;
border-top:1px solid #5C5D61;
border-right:1px solid #5C5D61;
border-bottom:1px solid #5C5D61;
border-left:1px solid #5C5D61;
}

<apex:commandButton title="Back" action="{!stepMainMenu}" value="Back: Main Menu" style="combtn" />

<apex:commandButton title="Back" action="{!stepMainMenu}" value="Back: Main Menu" styleclass="combtn" />
 
Neither of the 2 tags work for the referenced inline style indicated in the code box...they do nothing to my commandbutton.  How can I manipulate the style of the commandbutton?
jwetzlerjwetzler
I would suggest finding a good CSS overview.  You use the '.' for classes and and do not use the '.' when you're referencing tags.  so h1 { font-weight:bold } will be applied to all h1 tags.  But .combtn { font-weight:bold } can be referenced as a class (or in Visualforce's case, styleClass) on any of your elements.  The style attribute is for inline styles.

Let me mention a caveat however:
commandButton is special in that it gets salesforce styling by default if you have your header turned on (and in the upcoming release it will also check for standardStylesheets="false" on your page component).  If you have standardStylesheets="false" and showHeader="false" then you don't need to worry about this.  But otherwise, even if you are correctly referring to your stylesheet, you might not see some of your styling being applied.  Whatever styles you're referencing in your class should override that same value in our button class, but for example, our buttons use a background-image attribute.  So you will probably want to include background-image: none; in your combtn class as well.

I've mentioned it several times on the forums but it bears mentioning again: the firebug extension for Firefox has been such a staple in my development when it comes to debugging style issues (and javascript!), so I would definitely recommend it once you get more comfortable with CSS.  I think that will help you if you run into an issue with style overrides.


Apologies if that seems daunting.  If you're using our header, I would get your page working and looking right without first, and then add the header back in later.

Jill
PBS_IC786PBS_IC786
Jill,

Thank you very much for the detailed explanation.  I really appreciate your help.  I am getting a better understanding of how this all works now...

Also, I definitey agree that firebug is an amazing tool.