I am trying to implement a simple VF tabbed interface. I have uploaded a zip file containing a background image inside "images" folder and the required css as
<style type="text/css">body { background-image: url("images/back.jpeg") }
Following is how I implemented.
<apex:page id="thePage" sidebar="false" showHeader="false" tabstyle="Invoice_Statement__c" standardController="Invoice_Statement__c" standardStylesheets="false">
<apex:image url="{!$Resource.header}" width="1250" />
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>
<style type="text/css">
p { background-color: ;}
tabPanel{ background-color:blue;}
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgrey; color:black; background-image:none}
</style>
<apex:tabPanel switchType="client" selectedTab="name1" id="theTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
..
..
..
</apex:tabPanel>
</apex:page>
My problem is that background is not displaying. I followed this link--> http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_custom.htm
I have used
<apex:image url="{!$Resource...}" width="1250" />
and its working fine, but I'm unable to get a background image for my app. Any suggestions?
Thanks in advance
MnZ
It's not much different than how you are refering to the stylesheet stored in static resources.
<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>
You have to go by the same principle to add the reference to static resource in tour css. Catch point is that your style declaration needs to be on the VF page so that it gets rendered by the force.com server. Assuming your images forlder is in the myStyles zip file as static resource:
<style type="text/css">body { background-image: url("{!URLFOR($Resource.myStyles, 'images/back.jpeg')}") }
In your CSS file (inside the static resource) add "../" before images and add some styles:
body {
background: url("../images/back.jpeg") no-repeat top fixed;
background-size: 100%;
}
Related
I'm trying to print a page from my custom DNN module, without the persona bar, while logged in as an admin. I tried creating a custom skin but still can't prevent the persona bar menu titles from displaying on my print. I've posted this issue on the DNN community forum but never got any response.
This is working for me...
#personaBar-iframe{ display: none; }
iframe#personaBar-iframe{ display: none; }
.pb-scroll-wrapper{ display: none; }
.pb-scroll-wrapper iframe#personaBar-iframe.ipad{ display: none; }
I found this in DesktopModules\Admin\Dnn.PersonaBar\css\personaBarContainer.css.
Thanks VDWWD for steering me in the right direction.
The problem probably is that the Persona Bar is created within a Iframe with javascript. So if you hide the entire iframe during print it might work.
#media print {
#personaBar-iframe {
display: none !important;
}
}
The Persona Bar Iframe looks like this:
<iframe id="personaBar-iframe" allowtransparency="true" scrolling="false" src="/DesktopModules/admin/Dnn.PersonaBar/index.html?cdv=59" style="width: 80px;" frameborder="0"></iframe>
The files are located in folder \DesktopModules\Admin\Dnn.PersonaBar
I have a html page with this code
<p id="roonnameDiv" >{{chatRoom}}</p>
and an app.js with the following code . It reflects the value corrrectly but if I try to style it with color at runtime it doesnt not reflect on the html page
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.$parent.chatRoom.style = {"color":"green"};
I even tried using ng-color but in vain . Have head using html-unsafe tags t add html5 code to angular variables at runtime , perhaps I could use that to provide style of element but could not find any examples .
Essentially the requirement is of having various styled ( color ,size and fonts ) in roonnameDiv using angular framework
..................Edit .............................
I used the ngstyle as suggested by answers below
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.myStyle = {color: "green"};
however the output text was just plain grey . On exploring it thorugh chorome inspector , I found it is inheriting some styles through body.
Switching off the body color tag just turns the text black instead of green .
Following is the body
<body ng-app="xyz" ng-controller="AppController" class="ng-scope">
This is the body style
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
I want specific style class to apply for different text components without affetcting the overall body style . Could you suggest how to do so ?
You can use ng-style directive.
In Markup
<p id="roonnameDiv" ng-style="myStyle">{{chatRoom}}</p>
In controller
$scope.myStyle = {color: "green", background: "blue"} // Write all the required styles here.
More on ng-style directive at: https://docs.angularjs.org/api/ng/directive/ngStyle
try this
<p id="roonnameDiv" ng-style="chatRoom.style" >{{chatRoom}}</p>
please help me that how to put star mark as mandatory field for account number,type ,industry,as mention in the given code.As I already tried but it is coming on the top of the form.please help me.I have already created style class and fields in account object .
In Visualforce if you are using apex:inputField you can use the built in required attribute to render the appropriate red bar in the HTML/CSS. Most other input controls also have the same attribute. E.g.
<apex:inputText value="{!inputValue}" id="theTextInput" required="true"/>
You can also manually include the required elements to get the same effect.
<apex:outputPanel layout="block" styleClass="requiredInput" >
<div class="requiredBlock"></div>
<apex:inputField value="{!someBinding}" label="The Label"/>
</apex:outputPanel>
Incidentally, the Salesforce Stackexchange is a great place to ask Salesforce specific questions.
Here is the CSS to change the default 'red Bar' to 'red Asterisk' in front of each required field:
.requiredInput .requiredBlock {background-color: transparent; }
.requiredInput .requiredBlock::before { display: block; content: "*"; font-size: 1.5em; font-weight: bold; color: #c00; margin-left: -4px; margin-top: -2px; }
Add the above CSS in your page.
Hope this helps :)
I am trying to do a module with a datepicker inside an accordion.
problem is the datepicker popup box is not visible over the accordion.
here is a plunker showing the problem :
http://plnkr.co/edit/jBqU0LXQFcUuzQLency2?p=preview
any idea on how i could make the dialog window appear over the accordion module ?
edit: with bootstrap 3, this is working :
.panel-group .panel {
overflow: inherit;
}
Add this css after the bootstrap.css link can fix it. This will override the CSS relating to position for each accordion-body.
<style type="text/css">
.collapse {
position: inherit;
}
</style>
This works for me Bootstrap version 3:
.panel-body {
overflow: inherit !important;
}
my datepicker is in an accordion that is in a bootbox.
When running our Silverlight 3 application out-of-browser, startup takes a little time, but it's long enough to be noticeable. During this startup, the background of the window hosting the application displays an ugly white background color. When running in-browser, we have a splash screen, but that's loaded via JavaScript of course. How can I get a splash screen working for an out-of-browser Silverlight 3? Or if that's not possible, is there a way I can at least change the background color of the window?
I actually found a way to do this. Hooray! Much credit goes to the document found at this page. Note that we're distributing our application on disk; these instructions won't work for a Silverlight application installed by a user from the web.
It turns out that the Silverlight launcher loads an HTML page at the start. Where the application gets installed, there's an index.html file. The page contains an <object> tag similar to the one used to host Silverlight on the Web.
Unfortunately, this <object> does not support the Silverlight splash screen XAML or progress indicator, which I guess is to be expected since the XAP isn't being downloaded. Also, setting the background color of the page or of the <object> also doesn't seem to take effect. However, it turns out that it's just that Windows immediately starts drawing the plugin, so the default window color is shown while doing so.
To work around this, I set the visibility of the <div> that hosts the Silverlight to hidden. Then, at the bottom of the HTML, I added a <script> that sets a timer. When the timer fires, the visibility of the <div> is changed to visible, and the Silverlight object is given focus. Even if the timer is set to 1 millisecond, that allows the HTML's host a chance to do the initial drawing of the web page. That allows any content underneath the Silverlight to show up.
Here's my entire HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body { height: 100%; overflow: hidden; background-color: black; }
body { padding: 0; margin: 0; }
#silverlightControlHost
{
height: 100%; visibility: hidden; position: absolute;
}
#splashScreen
{
background-image: url('blah.png');
background-repeat: no-repeat;
width: 575px;
height: 330px;
top: 185px;
left: 212px;
color: white;
position: absolute;
font-family: Arial, Sans-Serif;
}
#loadingText
{
position: relative;
top: 165px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body scroll="no">
<div id="silverlightControlHost">
<object id='_sl' data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
<param name="source" value="offline://1931574666.localhost"/>
<param name="background" value="Black"/>
<param name="enableGPUAcceleration" value="True"/>
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
<div id="splashScreen">
<div id="loadingText">Loading. Please wait...</div>
</div>
<script>
setTimeout(
function() {
var ctrl = document.getElementById("silverlightControlHost");
ctrl.style.visibility = "visible";
document.getElementById('_sl').focus();
},
3000
);
</script>
</body>
</html>
Unfortunately, Silerlight 3 does not provide a way to customize this.