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>
Related
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:
I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.
That is my easy component:
<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>
After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.
I hope somebody can explain what I have to do to make it work.
Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:
Remove the scoped portion of your <style> block. I don't really recommend this.
Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>
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
I am building an extension which give user notifications using the createHTMLNotification call, but I am having some trouble figuring out the relevant size restrictions to avoid getting ugly black horizontal and vertical scrollbars (On Ubuntu 12.04 Linux at least).
Does anybody have any pointers to documentation giving some hints about what maximum sizes I should be aiming for, hopefully cross-platform?
maximum size on Windows Version 20.0.1132.47 (stable 144678) is 300 by 160 pixels.
Experiments on my own laptop running Chrome on Linux Version 21.0.1145.0 dev give me a maximum size of 284 by 144 pixels before scrollbars appear. I have no idea whether this is system specific or not, but assuming Chrome supports native notifications for at least some platforms that have them, I guess putting too much effort into pixel perfect notifications may not guarantee nice results.
As for making sure the scrollbars do not appear inside the notification, there is another small challenge as well (which maybe is not be related to the notification API at all); setting the height and max-height (and similarily for the width) does not cut it on it's own.
In my case I needed to style a list of items in a notification, and what I ended up doing was using the following html code:
<html>
<head>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .73em;
}
div#note {
overflow: hidden;
height: 144px;
max-height: 144px;
width: 284px;
}
div.noteline {
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.2em;
}
</style>
</head>
<body>
<div id=\"note\">#{params.html}</div>
</body>
</html>
My template references (#{params.html}) is basically populated with rows containing :
<div class="noteline">Some possibly large line that would overflow item 123</div>
I am trying to style the master page in Sharepoint Foundation 2010. I"m using the nightandday master and styles.
The design has no ribbon and I just need to turn it off. Just plain old off. When I set the ribbon div to display: none, the entire top banner disappears.
I'm not a sharepoint dev and am lost in general. Is there an easy way to just hide/get rid of the ribbon? Nothing fancy about permissions required--just needs to be always gone.
The CSS classes you want to look at are;
<style type="text/css">
div#s4-ribbonrow.s4-pr.s4-ribbonrowhidetitle { height:43px !important }
/*.ms-cui-ribbon { display:none; }*/
.s4-ribbonrowhidetitle s4-notdlg noindex { height: 43px !important; }
.s4-title h1 a,.s4-title h2 a,.s4-title h2 { font-size: small; }
.ms-pagetitleareaframe table { background: none; }
#s4-leftpanel-content { display:none !important; }
#s4-titlerowhidetitle { display:none !important; }
.s4-ca { margin-left:0px !important; margin-right:0px !important; }
</style>
You should be able to use the information in this article to get you started.
http://www.endusersharepoint.com/2010/11/09/hiding-the-sharepoint-2010-ribbon-from-anonymous-users/
In case someone has been struggling with this issue. Hiding the Ribbon may cause some further issues (http://social.msdn.microsoft.com/Forums/en-US/9422aa0f-5010-4691-a0ab-25e7aca6b478/issue-with-div-s4workspace-and-scroll-bar)
Especially if you will include your own header and hide the Ribbon.
A quick workaround is using css. #s4-workspace will still receive the correct height & scrollbar won't be an issue as well as the ribbon will be hidden.:
body #s4-ribbonrow {
height: 0px !important;
min-height: 0px !important;
}
As documented in the linked page of knight0323's answer, the ribbon can be hidden by editing v4.master and wrapping the ribbon div with <SharePoint:SPSecurityTrimmedControl/>:
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
<!-- Ribbon code appears here... -->
</div>
</SharePoint:SPSecurityTrimmedControl>
Unfortunately on my system this has a side-effect where the page's scroll-bar starts misbehaving. This appears to be a result of a dependency between the ribbon and the s4-workspace div. So to resolve this I moved <SharePoint:SPSecurityTrimmedControl/> in from the ribbon div to wrap the <div id="s4-ribboncont"> and added the following markup near the top of v4.master:
<style type="text/css">
#s4-ribbonrow { display: none; }
</style>
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<style type="text/css">
#s4-ribbonrow { display: block; }
</style>
</SharePoint:SPSecurityTrimmedControl>
The effect of this is that the ribbon is hidden by default but sufficient markup remains in the DOM so the page continues to behave correctly. For administrators, the ribbon is displayed normally.
In case anybody else is struggling with this, here are full instructions to do this without breaking the scroll bar or losing the title bar area, or any other oddities:
Hiding a Sharepoint 2010 ribbon that does not lose the titlebar area