I am trying to apply the following style changes to the reddit widget:
1) Change font to Oxygen Mono (the !important override in CSS is not working for font, although it is working for link color)
2) Trim the top of the widget to eliminate the blue bar completely
3) Prevent widget_arrows.gif from being displayed in the widget.
Any ideas?
FIDDLE
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
html {
font-family:'Oxygen Mono', Tahoma, Arial, sans-serif;
}
#reddit {
width:900px;
margin:auto;
font:'Oxygen Mono' !important;
}
#reddit a:link, #reddit a:visited, #reddit a:hover, #reddit a:active {
color:gray !important;
}
Sure you can override a font, you just need to specify the correct format - if you change only the font family, use font-family. A simple look in the debug tools also showed this as "Rule ignored due to invalid property value".
As for the rest, just pick them out with the element inspector and fix them:
/* Style the anchors specifically for CSS specificity */
#reddit a {
font-family:'Oxygen Mono' !important;
}
.reddit-header, .reddit-voting-arrows {
display:none !important;
}
Updated fiddle.
Related
I don't know why I am getting this 3d effect in words. How can I remove the effect and flatten the words?
The font family is Poppins
body {font-family: "Poppins";}
You can do any formatting with CSS.
a {font-style: normal;}
will make font style as normal
There may be a CSS conflict. Try this. Change class & the colors as suitable.
add
text-shadow: none;
.text-class
{
text-shadow: none;
background: #333;
color: #fff;
}
I'm developing a site on Ubuntu. When I look at it in Firefox, it's a lot smaller than when I view it in Chrome. Screenshots:
Both browsers have their default fonts set to DejaVu Serif at 16px. I haven't messed with Bootstrap's default font size. It's still 1rem.
What's accounting for this discrepancy, and is there a way to further normalize the differences between browsers?
EDIT: My scss, even though it's not relevant, because it was requested:
$theme-colors: (
"burnt-orange": #fa7334,
"light-blue": #67e2f5,
"dark-blue": #006f80,
"beige": #f5d5bc
);
.header-icon {
font-size: 1.4rem;
}
#jumbo {
background: transparent;
border: 1px solid grey;
}
#diva-sidebar ul {
list-style-type: none;
padding-left: 0.65em;
}
#footer a {
color: white;
}
.errors {
border: 1px solid #c70f36;
color: #c70f36;
background-color: #ffc0cb;
}
#import "~bootstrap/scss/bootstrap";
#import "~#fortawesome/fontawesome-pro/css/all.css";
.header-icon-link-blue {
color: theme-color("dark-blue") !important;
:hover {
color: theme-color-level("dark-blue", 2) !important;
}
}
.header-icon-link-orange {
color: theme-color("burnt-orange") !important;
:hover {
color: theme-color-level("burnt-orange", 2) !important;
}
}
.color-burnt-orange {
color: theme-color("burnt-orange");
}
EDIT: After adding
html {
font-size: 16px;
}
To my custom.scss file, but the problem persists.
I found a similar issue when designing sites using Bootstrap 4.x. The issue is Bootstrap uses the browser's default font size, and then sets relative font sizes from this. However, Firefox and Chrome seem to use a different default size, which causes issues most noticeably when you are using larger fonts on headings. The easiest solution is to set an exact base font size on the html to override the browser default, like so:
html {font-size:16px;}
I think, you need to prefix your css code. Because, all browsers has a prefix code so: -webkit, -o, -moz ets. Go this Link and past your css left column and copy css from right column: for example: Kindly mark it as Answer if it solved your problem :)
On a a website I am currently working on, I have issues with underlining links on hover. Although declaring text-decoration: underline on hovering links, it doesn't work properly. I can't explain it myself.
Look at the website itself (it's the links on the bottom right corner): http://nils.zamaitat.de/#contact
It's the same with the dropdown menu "Projects" on the home section: The links that fade in can't handle the underlining properly as well: http://nils.zamaitat.de/#home
This is what I have in my CSS:
section.contact .links ul > li a:hover
{
text-decoration: underline;
}
nav ul li ul > li a:hover {
text-decoration: underline;
}
Thank you very much in advance!
You have text-decoration: none; in style.css. This CSS is telling the browser to render all hyperlinks with no text decoration. You'll need to override that CSS by supplying the !important declaration.
So for the links that you would like to be underlined, simply add the !important declaration to its corresponding CSS ID or Class.
Example
Change from:
a.exampleLinkClass{text-decoration:underline}
to this:
a.exampleLinkClass{text-decoration:underline !important}
Line 444 of style.css:
.contact div.links ul > li a
That's how the links in the bottom right are being initially styled. That means in order to override it, even when triggering it in an altered state, you need to call it by the same identifier inititially used with :hover appended to it, or you need to use text-decoration: underline !important; to force the rule to take place.
This situation is very common when css is overscoped and overcomplicated. It becomes easy to lose track of what identifier was targeted to which element.
.contact div.links ul > li a could be changed to just .contact .links a since you're using single level li elements and not a dropdown there.
Hope that helps.
Your CSS is just fine, no problems there.
Its the font - its not working properly in webkit browsers - It looks fine in firefox. Try changing the font to for example Helvetica and it works fine.
Now why its not working - pfff dunno ;D Never seen that font before.
EDIT: Ahhh its prolly your font-face, you have only supplied a eot file. From css3please.com:
#font-face {
font-family: 'WebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
So you need to supply a woff type also - you can generate it on fontsquirrel.com
I have search input beside navigation toggler. I want to style the text of placeholder as navigation toggler's heading but they are not similar even if the properties are same.
See:
::-webkit-input-placeholder {
color:#B2B4B5;
font-weight:bold;
font-size:15px;
}
:-moz-placeholder {
color:#B2B4B5;
font-weight:bold;
font-size:15px;
}
::-moz-placeholder {
color:#B2B4B5;
font-weight:bold;
font-size:15px;
}
:-ms-input-placeholder {
color:#B2B4B5;
font-weight:bold;
font-size:15px;
}
#menu-toggler > h4 {
width:auto;
padding:0 0 0 40px;
height:25px;
color:#B2B4B5;
}
Why ? Is it a bug? I am using Mozilla FF.
not sure what's going on but these might help you:
IE: http://msdn.microsoft.com/en-us/library/ie/hh772745(v=vs.85).aspx
Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder?redirectlocale=en-US&redirectslug=CSS%2F%3A-moz-placeholder
CSS Tricks: http://css-tricks.com/snippets/css/style-placeholder-text/
There maybe other proprety on your CSS file that overrides the one you set, like if the text is labeled as and you have set properties for that
I've noticed that FF requires you to be very specific with styling placeholders.
Instead of
:-moz-placeholder
try
input:-moz-placeholder
as class names (for example). Same counts for the ::-moz-placeholder styling.
Be as specific as possible, since FF tends to overwrite the placeholder if it has a more specific styling on the element.
I have a span and an input element that share the same CSS definition for font. Why does Chrome use different fonts for them? How would I fix this issue?
My objective is to make them look exactly the same in IE9, Chrome and FF.
CSS definitions (FIXED), if they still matter.
* {
font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */
}
body {
/*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/
font-size: .8em;
margin: 0;
padding: 0;
color: #000;
}
.button
{
text-align:center;
min-width:80px;
display:inline-block;
white-space:nowrap;
background-color:#4A8CF6;
color:#FFF;
padding:4px;
margin:1px;
border:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
font-size: .8em;
}
Solution
The problem was that the span elements inherited from my CSS definition for body and the input elements didn't. I had defined the font in my CSS with body { font-family:...; } like my computed results show and I thought that using display: inline-block; would force both of them to inherit the font from body but it did not.
The solution was to switch to using * { font-family:...; } for the font definitions. The button and clickable classes simply defined sizes and colors and such.
You have to literally specify input elements if you want them to have the same font like so:
/* Or input[type=submit] depending on your needs */
span, input {
font-family: Arial, sans-serif; /* Your font here */
}
Otherwise the browser uses the default values as your question shows. You're looking under Computed Styles which shows that Chrome has decided the values for you as you haven't specified them.
You should apply CSS reset rules in the beginning of your style sheet. Its purpose is to make all elements have the same look in all browser.
Examples:
http://developer.yahoo.com/yui/reset/
http://meyerweb.com/eric/tools/css/reset/
Related question which can be useful too: https://stackoverflow.com/questions/116754/best-css-reset