In my current job I manage a Mailchimp account and utilize templates created before I was hired -- by an outside firm. Currently, my email template prevents me from italicizing without changing the color of text. I'd like to be able to make the text italic, and keep the same text color. When looking at the code for the various fonts, nothing appears abnormal.
#section body text
#tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
#theme main
*/
.bodyContent div{
/*#editable*/color:#505050;
/*#editable*/font-family:'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
/*#editable*/font-size:14px;
/*#editable*/line-height:150%;
/*#editable*/text-align:left;
font-weight:normal !important;
}
/*
#tab Body
#section body link
#tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link,.bodyContent div a:visited{
/*#editable*/color:#336699;
/*#editable*/font-weight:normal;
/*#editable*/text-decoration:underline;
}
.bodyContent img{
display:inline;
margin-bottom:10px;
}
hr{
color:orange;
width:1px;
}
div.button{
margin-left:-1px;
margin-top:0px;
}
div.button a,div.button a:hover,div.button a:active,div.button a:visited{
display:block;
clear:both;
background-color:#FE7702;
height:25px;
width:100px;
font-weight:900 !important;
font-size:19px;
color:white !important;
text-decoration:none !important;
padding:10px;
text-align:center;
vertical-align:middle;
margin:10px 0 10px 0;
border:2px solid;
border-radius:25px;
}
I think it may have to do with the '!important' directive, but I don't know where to find what it initially referenced. Any other ideas on where this quirk might be coded or how I can fix it?
I'm not seeing anything in the given code referencing em, i or text-style either. It could be someplace else, but you can fix it by adding a little styling in the em tag inline:
<em style="color: inherit !important;">italics text!</em>
That should get you taken care of - if testing reveals "inherit" isn't working everywhere, just replace it with the proper color hex code.
Related
I have added a custom font for this code. I am trying to get my h1 tag to inherit the font-weight:bold; css attribute.
In my css I have added the font-weight bold in the body tag where it should affect all the text. I have also tried placing it in the h1 tag in css.
The font-weight is affecting everything but the h1 tag. What is going on?
#font-face {
src:url(fonts/kohm.otf);
font-family:'kohm';
}
body{
background-color:silver;
color:white;
padding:20px 20px 20px 20px;
font-family:"kohm";
font-size: 14px;
font-weight:bold;
}
h1{
background-color:#ffffff;
background-color: hsla(0,100%, 100%, 0.5);
color:#64645A;
padding:inherit;
}
Ignore the question I found out that heading tags are already made bold so the font-weight:bold; attribute will not affect it. font-weight:normal; to un-bold it and adjust is font-size.
However when I am trying to italicize the font or make it oblique font-weight:italic; font-weight:oblique; it will not affect any of the text in the body paragraph. Why might that be?
You are using the wrong CSS syntax. You are using font-weight whereas you should be using font-style instead.
If you want to make the body paragraph italic, the correct syntax would be
p {
font-style: italic;
}
If you are trying to make it oblique, the correct syntax would be
p {
font-style:oblique;
}
I hope that helps!
I would like to change the background color for the text area. I am using Minamaze theme.
Tried changing the background of textarea, but it didn't help.. Tried clearing the cache as well
Need some guidance..
The website is quantgreeks.com, I want to change the white background behind the text.
In your style sheet find:
#content {
clear:both;
margin:0;
padding:20px 10px;
}
and add a background color to it. For example:
#content {
background-color:#000000;
clear:both;
margin:0;
padding:20px 10px;
}
Even though I have set text-decoration to none, an underline is still showing on the h1 element. If you want to see the full css, go here. I am new to css, and this is just an adapted version of some code I found on the internet, sorry if the problem is obvious. If the problem isn't with the bellow code (which is where I think it probably is) then I will add in other relevant code.
You can see the page this is working on here
#pagetop h1 , a:visited
{
display:block;
float:left;
line-height:90px;
color:#FFFFFF;
text-align:left;
font-size:27px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin-left:23px;
text-decoration:none;
}
There is text decoration in your link in the h1 tag.
Add this style:
h1 a
{
text-decoration:none;
}
Your CSS selector #pagetop h1 , a:visited states that you would like to apply those styles to an h1 and also an a in its visited state.
The comma in your code represents a list of separate selectors rather than a combined selector. In your case you don't need to separately specify the same styles for both the h1 and the a.
What you want to select is an a that is a descendant of an h1 within #pagetop (so that it isn't applied to all h1s):
#pagetop h1 a { text-decoration: none; }
I'm currently using CSS to change the hyperlink colors in my left navigation but there seems to be some inconsistency. Some links will take the correct properties I have declared, whereas, other links won't accept them. I have declared the same class nav to all the links. There isn't any overwriting that I know of for these links since it's isolated.
Below is the left navigation code snippet
This works:
var context='<%=request.getContextPath()%>';
<%-- var sOrg = '<%=sOrg%>'; --%>
document.write("<div id=\"leftNav\">");
document.write("<div id=\"leftNavtext\"><a href=\"home.htm?sOrg="+'<%=sOrg%>'+"\" class=\"nav\" id=\"phome\" style=\"text-decoration:none\" >Home</a></div>");
Then this doesn't work:
<% if(roles.contains("PEIMSDataCompleter")) { %>
document.write("<div id=\"leftNavtext\" >Data Submissions</div>");
Then this works:
document.write("<div style=\" padding-left: 20px;padding-top:5px;\">Monitor Data Loads</div>");
Here is my CSS:
#leftNav {
width:180px;
height:687px;
background-color:#E0F0F2;
margin-bottom:15px;
padding-left:10px;
text-decoration:none;
text-color: #0083cc;
}
#leftNavtext {
font-family: Arial, Helvetica, sans-serif; font-weight:800;
font-size:95%;
color:#0083cc;
width:auto;
padding: 20px 10px 3px 0px;
}
#noteBody{
font-family: Arial, Helvetica, sans-serif; font-weight:800;
font-size:95%;
width:960px;
margin:auto;
}
// Below is the code for getting the hyperlink text to be formatted correctly (ie link colors)
a.nav:link {color: #0083cc; text-decoration: none; }
a.nav:visited {color: #0083cc; text-decoration: none; }
a.nav:hover {color: orange; text-decoration: underline; }
a.nav:active {color: #0083cc; }
As far as I can see, there are no differences between these two links. These are just a few of the many links I have in the left navigation and this happens randomly. I'm currently using IE 9 and this browser is my requirement.
Any help would be greatly appreciated! Thanks!
Did you formated all :pseudo stated of your anchors ?
a, a:link, a:visited {some.css}
a:hover, a:visited:hover, a:active, a:focus {some-other.css}
Perhaps you are looking at a browser specific styling.
First of all,
text-color property doesn't exists ; use color instead.
If you're using ASP (it seems to), please add the appropriate tag to your question
Next, the problem isn't due to your CSS ; see this tiny JSFiddle here : http://jsfiddle.net/j8ruV/2/
The fact is you're dynamically adding objects to your page with the document.write() method, but this method adds your divs weirdly to the DOM, and so they're not considered by the CSS (except for the inline one). By simply testing with the .innerHTML property, this seems to work (see the fiddle).
I ended up having to place inline code for the links:
document.write("<div id=\"leftNavtext\" >Data Submissions</div>");
I want the links inside of the second, nested div to have red text.
Dulled down CSS:
#outerdiv{ padding:10px; background-color: #ddd;}
#outerdiv a:link{ color:blue; }
.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}
Dulled down HTML:
<div id="outerdiv">
OUTERDIV link
<div class="innerdiv">
INNER DIV link
</div>
</div>
JSFiddle: http://jsfiddle.net/5S6ez/1/
How can I make my innerdiv links have red font?
My link keeps as much of its grandparents' styles as possible even though it has new styles applied to it that occur later in the CSS file. Why?
The problem is that the id based selector is more specific than the class-name based selector, to change that, use:
#outerdiv .innerdiv a:link{ color: red; background-color:White;}
Try making the outerdiv classes instead of ids. Like this:
.outerdiv{ padding:10px; background-color: #ddd;}
.outerdiv a:link{ color:blue; }
.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}
If that is not an option (outer div must be an id), then you can try to make the innderdiv rules more specific to the outerdiv, like this:
#outerdiv .innerdiv{ padding:10px; background-color: #aaa;}
#outerdiv .innerdiv a:link{ color: red; background-color:White;}
Also, I was recently introduced to this article, and it really has helped me a lot with CSS in general:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Use a, not a:link.
:link is a pseudo-class for unvisited links.
Also, just for a heads up that may help you with other things, keep in mind that a tags are also inline elements and not to style them with padding, etc unless you set "display: inline-block" or "display: block". Yeah, a bit more than you asked but still can be helpful.