Somehow my tumblr theme is overriding the formatting I have done to my texts posts (in html). It has decided to unbold everything that was bolded and make everything the same size, even though there was header text in the post. In tumblr itself you see it just like it was formatted to be seen, but in the tumblr theme (blog) everything appears the same format even though it isn't.
I know that there is a line of code inside of my theme overriding the formatting that has, but I have no clue where to find it or what to add to change it. If someone knows how I can change this I would appreciate the solution.
Maybe this is a little too basic but haven't found anything online about how to go around it.
Thanks in advance!
These images show How it looks in Tumblr and How it looks in the theme.
Use the "Custom CSS". It should override any CSS applied to the theme.
Go to the theme customization page (looks like; "www.tumblr.com/customize/yourBlogName")
Scroll to the bottom of the Customization section in the left. Click the "Advanced Options" now paste your CSS under where it says "ADD CUSTOM CSS".
Example; h2 { font-size: 1.5em; color: #6ca516 }
If that does not work use !important (like; font-size: 1.5em !important;). Change the number in font-size and color as you want.
Note:
It should override any CSS applied because in a Tumblr theme's HTML, {CustomCSS} (where all your "Custom CSS" goes) comes after all the other styles.
If you add your rules just before </style> in the theme's HTML, you will also override the styles applied before.
Related
When I create an R Markdown notebook in RStudio, the code chunks do all the usual text coloring of RStudio -- for example, comment lines and text constants in green, numerical constants in blue, etc. All the coloring still shows up nicely when I open RStudio's HTML preview window, and equally well when I view the HTML document in a browser.
Colors embedded in ggplot2 graphics objects in the same document are appearing equally successfully, up to this point (on-screen viewing of HTML).
However, when I send the HTML document to a printer from my Mac's browser, or when I use the Print dialog to export the HTML doc to PDF, all the text coloring disappears and everything is rendered in black text, even as the ggplot2 graphics colors are still completely successful in the printed output.
How can I recover the text coloring in printed output? Thanks.
(This is happening on a Mac laptop, just the same in Firefox and Safari.)
Editing 1 day later to add:
there's a symptom I hadn't noticed until after I applied #user2554330's initial solution. Hyperlinks in the markdown text (i.e., outside code chunks) get transformed into black text as well, and both the link text and the underlying URL get printed, unlike in the HTML output which is in color and shows only the text of the link.
I tried .hljs-link based on what I found at https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html, but it didn't seem to have any effect.
This is hard to fix.
The problem is that rmarkdown uses the bootstrap framework to set styles. That framework tries to standardize the display on different browsers; since browsers are really variable in how they handle printing, it chooses a very simple black on white style for printing text.
You can create a CSS file that overrides these choices, or you can edit the source to the bootstrap CSS file so that it doesn't do that. Both are hard.
The problem with creating your own CSS file is that you need to re-specify the colors for each different type of text, marking all of the choices as !important. rmarkdown has several different color schemes for highlighting code. The default one looks like this after editing:
.hljs-literal {
color: #990073!important;
}
.hljs-number {
color: #099!important;
}
.hljs-comment {
color: #998!important;
font-style: italic;
}
.hljs-keyword {
color: #900!important;
font-weight: bold;
}
.hljs-string {
color: #d14!important;
}
If you're using a different highlight style, you'll need to edit that one instead.
Save this in a file, e.g. style.css, then put this in your YAML header:
output:
html_document:
css: style.css
The alternative to this is to edit the bootstrap source so that it no longer forces the color to black. Look for the #media print sections, and edit those. The file to edit is
<rmarkdown dir>/rmd/h/bootstrap/css/bootstrap.min.css
(which is a minimized version of bootstrap.css, so it's hard to edit).
If you really know what you're doing, you can recompile the file with different options; I haven't tried that.
EDITED TO ADD:
If you also want URLs to appear in color, you'll need to do something similar for them: override the override. A simple version is
a {
color: #23527c!important;
}
which forces all links to be blueish. This isn't ideal; it doesn't let links change color when selected, so the original on-screen version of your document will be changed, not just the print version. I'm too lazy right now to figure out how to handle the color change.
To stop the URL from being appended, you want this text:
a[href]::after {
content: "";
}
This says that anchors with HREF elements should get an empty string appended. The standard bootstrap spec appends the extra text that you saw. This doesn't appear to need !important, since the standard one didn't use that.
Put both of these entries into your style.css file, and you should get your links in color when printing, without appending the URL.
I just stumbled across this question, while also checking out other relevant answers, so I think this SO answer fixes your hyperlink problem. TLDR: Add urlcolor: blue and possibly linkcolor:red to the documents yaml section at the top :)
I am working on this non-profit art site and could use some help. What I would like is to make the background color on the gallery lightbox less opaque and darker for better viewing experience. Please see https://www.openthesky.co.uk/finally-found.html and click one of the pictures for an example.
As the weebly editor does not give any options on this, I thought that it might be possible to do it via HTML, yet I haven't been able to find the element there. Any tips would be much appreciated!
Weebly has a common CSS Style Sheet for common element designs, so you likely will not see it in your Theme's design unless the designer added some customizations to the lightbox for your theme.
Add the following CSS to your Settings > SEO > Header (to add it to all the pages of your website).
<style>
.fancybox-overlay {
background: rgba(0,0,0,0.95) !important;
}
</style>
The 0,0,0 is the color(black), the 0.95 is the transparency(1 = solid and 0.01 = almost completely transparent) and "!important" will make sure your CSS is used as the background for the lightbox in place of the default design.
Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
I thought I was going crazy, but a colleague confirmed those gradients are there. How do I remove it?
This will only work on Desktops
On a site www.motosa.co.za - look just right of the Main Menu Bar, seems to be a gradient, darker from left to right?
Can you please help me find and fix the css that causes this. Assuming it is css causing it. It uses the Office theme on Themeforest, and I see those there on the demo as well and the author claims innocence.
Thank you in advance
Yeah I see there's a custom style that you've added
'body { background: #fff;}'
But due to low specificity this is being overwritten by theme styles.
You either need to:
Go to your Theme Settings and find a background color and change it to #fff.
Or in your custom styles write:
body {
background: #fff !important;
}
I am working on editing our intranet site and basically all I am able to change is the CSS. Although I have gotten it to look like I want with these limitations, I have one little snag. If I was told correctly, the html is generated via a .aspx file, and in this html is the inline CSS applied to the navigation menu of
border-collapse: collapse;
When I preview it in Chrome and Firefox it works fine, but when I view it in IE10, the navigation is pushed to the left. If I disable it using the developer tools, it works fine, but I can't access the html since it is generated, so I can't, at lease as far as I know, create a rule that can trump it. I have zero experience with ASP, but I have opened the file and looked through it, but it's all greek to me. Any thoughts? TIA!
Use !important in your stylesheet to override the inline value, like this:
Inline style:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
Stylesheet:
div[style] {
background: yellow !important;
}
Note: This will result in a div with a yellow background, even though the inline style said for the background to be red.