Trying to change h2 color from 3f3e3c to FF1494 in CSS, but the change doesn't seem to be taking effect when I publish it.
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494;
text-shadow: 1px 1px 0px #fff;
}
What am I missing? Thanks
Also tried clearing the cache, no luck. Note - I'm customizing a theme in Weebly. Is there something else I should look for that might be preventing my change?
Maybe you've already changed the color on another h2, use !important after the color, it might help.
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494 !important;
text-shadow: 1px 1px 0px #fff;
}
I think you forgot to add a } at the end of the h2 . (or if it's just a typo on SO, try clearing your browser's cache)
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494;
text-shadow: 1px 1px 0px #fff;
} <- add this
Related
I am attempting to add the text-shadow property to a CSS style sheet, and it does work for Internet Explorer, Chrome, Opera, and Safari, but I cannot get it to show up in Firefox, even if I use -moz-text-shadow property.
I am running version 43.0.4. Is this is a known problem and is there is a hack? Below is the CSS that controls the h1 to which I am trying to apply a text-shadow.
/* =Headings
-------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
font-weight: 700;
line-height: 1.0em;
word-wrap: break-word;
}
h1 {
margin-top: 0.5em;
margin-bottom: 0.5em;
font-size: 2.625em; /* = 42px */
-moz-text-shadow: 0 0 3px 2px #000;
text-shadow: 0 0 3px 2px #000;
}
h2 {
margin-top: 0.75em;
margin-bottom: 0.75em;
font-size: 2.250em; /* = 36px */
}
h3 {
margin-top: 0.857em;
margin-bottom: 0.857em;
font-size: 1.875em; /* = 30px */
}
h4 {
margin-top: 1em;
margin-bottom: 1em;
font-size: 1.500em; /* = 24px */
}
h5 {
margin-top: 1.125em;
margin-bottom: 1.125em;
font-size: 1.125em; /* = 18px */
}
h6 {
margin-top: 1.285em;
margin-bottom: 1.285em;
font-size: 1.000em; /* = 16px */
}
The text-shadow CSS property is defined like this:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
So you have:
text-shadow: 0 0 3px 2px #000;
Which will have:
h-shadow: 0
v-shadow: 0
blur-radius: 3px
color: 2px!!!
So just try to remove the 2px value and everything will be ok.
Your code is incorrect and shouldn't work in any browser. text-shadow takes a maximum of 4 values (offset-x, offset-y, blur-radius, and color) but you are entering 5 (like if it was a box-shadow that allows 5). If you remove the last value before the color, it will work fine:
h1 {
margin-top: 0.5em;
margin-bottom: 0.5em;
font-size: 2.625em; /* = 42px */
-moz-text-shadow: 0 0 3px #000;
text-shadow: 0 0 3px #000;
}
I have three span with different font sizes, which are wrapped in a div with different floats.
I tried to align these spans correctly by adjusting the line-height, but it seems a little bit hacky to me, as the last floating span is overflowing the container with this method.
I tried to play with vertical-align without luck.
So what would be the clean way to align these, without hacking (if possible)?
Here is the jsFiddle, and here is the code :
HTML
<div class="comTitle">
<span class="comUserName">admin</span>
<span class="comUserRank"> - Animator</span>
<span class="timeCreated">The 13/03/13 at 16:49</span>
</div>
CSS
.comTitle {
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
/*line-height:22px;*/
}
.comUserName {
font-weight: bold;
font-size: 16px;
color: #444;
font-variant: small-caps;
clear:left;
}
.comUserRank {
font-size: 12px;
font-style: italic;
color: grey;
clear:left;
}
.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
float: right;
/*vertical-align:baseline;*/
/*line-height:26px;*/
}
[Edit] I know how to deal with position property, and I can make this aligned right with :
.timeCreated {
...
float:right;
position: relative;
right: 0px;
bottom: -4px;
}
Or absolute positioning, but I'd like to know if there is a possibility to align the last span to the baseline (instead of the top) of the wrapper without changing the flow of the elements?
Add some padding-top space to the .timeCreated span - the difference of the font-size (4px)
.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
float: right;
padding-top: 4px;
}
And jsFiddle
I don't know how clean this is but it works, I just gave it some positioning. jsFiddle
.comTitle {
font-family:'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
/*line-height:22px;*/
position:relative;
}
.comUserName {
font-weight: bold;
font-size: 16px;
color: #444;
font-variant: small-caps;
clear:left;
}
.comUserRank {
font-size: 12px;
font-style: italic;
color: grey;
clear:left;
}
.timeCreated {
font-style: italic;
font-size: 12px;
color: #444;
position:absolute;
bottom:0px;
right:0px;
}
Can someone please tell me why this header wont go straight across? My goal is to have One call gets it all on the right side and the 800 phone number on the right. I placed them in there own div but the 800# is wrapping.
I've tried float, text-align and even span instead of div.
You can find the site here: http://jsfiddle.net/G78sd/
You have two block-level elements, which is why they're "wrapping". So one way to fix it would be to give each element a width and then float them.
.CompanyName {
color: #330000;
font-family: Tahoma, Geneva, sans-serif;
font-size: 28px;
font-weight: bolder;
/* text-shadow: 3px 3px 4px rgba(0, 0, 0, .9); */
font-variant:small-caps;
margin-top: 22px;
width: 450px;
float: left;
}
.HeaderPhoneNumber {
color: #330000;
font-family: Tahoma, Geneva, sans-serif;
font-size: 28px;
font-weight: bolder;
/* text-shadow: 3px 3px 4px rgba(0, 0, 0, .9); */
font-variant:small-caps;
width: 450px;
float: right;
text-align: right;
}
The image slider menu items are shifted downward 5px on every page the blog page, where they are positioned correctly. I can see the shift in Firebug but do not know where in CSS to fix.
http://drkateklemer.com
Thanks!
Your problem is in line 662 of your style.css for the organic natural summer theme. Change the margins to 0px, going from this:
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 5px 0px 5px 0px;
padding: 0px;
line-height: 32px;
}
To this:
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 0px;
padding: 0px;
line-height: 32px;
}
Note: Tested using Developer Tools for Chrome.
wordpress is loading the images into the content block, i dont think it your css just how images are accessed through your template
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 0px 0px 0px 0px;
padding: 0px;
line-height: 32px;
}
On my wordpress blog, the page title appears differently in windows and on linux. On Linux in Firefox its smooth and appears as it should,but on Windows in both Firefox and IE it has rough edges. On Windows, it appears http://img691.imageshack.us/img691/4592/picwindows.png . Any way to fix this ?
The CSS is as follows :
#pagetitle{
padding: 3em 0 0 1em;
}
#pagetitle h1.logo{
font-family: "Arial Black", Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
font-size: 500%;
float: left;
padding: .1em 0 0 0;
margin: 0;
letter-spacing: -0.1em;
/*font-variant: small-caps;*/ /* Uncomment this line to change title to uppercase */
font-weight: normal;
color: #eeeadb;
}
#pagetitle h1.logo a{
color: #eeeadb;
text-decoration: none;
}
#pagetitle h1.logo a:hover{
color: #fff;
}
#pagetitle h4{
float: left;
border-left: 1px solid #8e7762;
padding: .6em 0 .6em .8em;
margin-left: 1em;
color: #e9e2c9;
}
Thank You.
Turn on cleartype, in your desktop settings?