I have this 2 option copy from fonts.google.com
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#200;300;400&display=swap" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#200;300;400&display=swap');
</style>
I want to keep this font, but also to copy into my file.css in order to make a class, such as this one?
.doneazab {font-family: sans-serif;color: #343434;}
So, how can I transform that google font style link into a class?
You’ll want to set the font-family, like this:
.doneazab {
font-family: "Source Sans Pro", sans-serif;
color: #343434;
}
If you visit the URL you’re loading from Google Fonts, you’ll see that it’s a CSS file with #font-face declarations. All those declarations define the font-family name as Source Sans Pro, which make it possible for you to reference that name elsewhere in your CSS.
This is also shown underneath the other code snippet for link or #import on Google Fonts, ex:
Related
Docsify uses prismjs to syntax highlighting. I have tried to insert styles in the index.html but nothing is taking effect (I can modify the font-size with effect in chrome dev tools)
Have tried something like this.
<style>
code[class="lang-python"] {
font-size: 0.5rem;
}
</style>
</head>
See here for the docsify doc of syntax highlighting. I think this should just be direct itnerfacing with prismjs unless docsify is doing something else there.
https://docsify.js.org/#/language-highlight?id=language-highlighting
you can use
<style>
code[class="lang-python"] {
font-size: 0.5rem !important;
}
</style>
I'm using Docusing php api to create and send documents to sign, but when I try to insert an image (I'm using HTML document) the document show's the signer only a white square with the text:
The linked image cannot be displayed. the file may have been moved, renamed, or deleted. Verify that the link points to the correct file and location.
Of course I check the image link several times, I changed the image to another server, try different formats, etc...
Any suggestions??
My HTML goes like:
return <<<HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
</head>
<body>
<img style="display: block; margin-left: auto; margin-right: auto;" src="/documents/logo.png" alt="" width="250" height="100" />
<p style="font-family: Garamond; text-align: center; font-size: 14pt; line-height: 0.1;"><strong>Document title</strong></p>
and then the rest of the document.
The only way to add an image to an htlm source doc used for DocuSign is to include it, inline, within the html. In the same way, any CSS must also be inline.
Use a dataurl with an img tag. It works fine.
If you want an embedded image I would suggest that it's inline in the HTML, or you can use PDF or Word or some other format that doesn't require the other file to be loaded.
the DocuSign system cannot load that file and in any case would "flatten" your HTML into a PDF anyway (unless you use responsive signing).
I am using primefaces schedule, i want to change the color of event header which is saved in DB,
scheduleEvent.setStyleClass(".event-consultation .fc-event-skin .fc-event-head");
using this class i want to change the background-color property with the color saved in DB. how can i change color got from db here?
I don't try it, but I guess the following should work:
<style type="text/css">
.yourclass .fc-event-inner{
background-color: #{yourBackBean.backGroundProperty};
}
</style>
....
scheduleEvent.setStyleClass("yourclass");
This way, you specify in-page CSS style that set as color-background the value of a backBean property that you previously loaded from DB.
Of course, you can create an application scope backBean and hardcode the EL in an external CSS file. Your choice.
Hope it helps!
Edit to clarify
You have to put the <style> html node inside <h:head>. I just tested it in a project to change background color of a <p:menuBar> this way:
<h:head>
... some stuff of mine, not relevant
<style type="text/css">
.ui-menubar,.ui-menu-child,.ui-menu {
background: #{sessionBean.bckgColor} !important;
}
</style>
</h:head>
And it works like a charm. I don't know what css style do you have to adapt to custom the event component of <p:schedule>, I am telling you how to write a custom CSS reading values from DB or whatever, using EL.
Maybe you need to use !importan css attribute to override original values as I did.
Is there a way to add a google font into an internal css? Like for profile layouts?
I've tried embedding all three of these, but I can't get it to change the look of the font on my layout. Does google font work for internal css or only external?
<style>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
#import url(http://fonts.googleapis.com/css?family=Dancing+Script);
</style>
The Google Fonts link needs to be embedded in the head element of an HTML or XHTML document. The thing to understand is that Google Fonts are handled through a Content Delivery Network (CDN). That means that Google hosts the fonts for you.
Here is an example they give on their website:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
You can reference the Google Fonts in an external stylesheet instead of internally as shown here.
In richfaces has rich:inputNumberSpinner. It has two class following:
.rf-insp-inc {
background-image: url("/test/facesx/rfRes/spinnerArrowTop.png?v=4.2.0.Final&db=eAH7z8DAAAAEAAEA&ln=org.richfaces.images");
}
and
.rf-insp-dec {
background-image: url("/test/facesx/rfRes/spinnerArrowBottom.png?v=4.2.0.Final&db=eAH7z8DAAAAEAAEA&ln=org.richfaces.images");
}
It's quite small if I test it on my Ipad. I want it's more bigger, so How can I override background-image of rich:inputNumberSpinner ?
I already put my background-image in my xhtml file but nothing change, what's wrong or missing ?
<style type="text/css">
.rf-insp-inc{background-image: url(../../pics/icon_up.jpg);}
</style>
Thanks
there are many useful tips on creating mobile applications with RichFaces 4 in Getting Started With Mobile RichFaces document. You could use mobile-optimized skin (see step 3).
Another solution might be using !important in your CSS definition:
<style type="text/css">
.rf-insp-inc{background-image: url(../../pics/icon_up.jpg) !important;}
</style>
Regards,
Palo