i want to ask
How to remove uppercase text first word
i have tried like this :
text-transform: none !important;
text-decoration : none !important;
not work
i'm using blogspot theme leading coral theme:
this my example web : https://blogkubagus123.blogspot.com/2020/02/testing-post.html
example like this screenshoot :
i want to change normal text (if i created bold they bold, if i created h1 they text h1,etc)
how to remove sir?
Inspecting your page I found following style for body.item-view .Blog .post-body::first-letter
float:left;
font-size:80px;
font-weight:600;
line-height:1;
margin-right:16px;
So for cancel that you will need:
float:none;
font-size:inherit;
font-weight:inherit;
line-height:1;
margin-right:0;
All of those for the selector body.item-view .Blog .post-body::first-letter (less specific will not override the template style unless !important is used)
Hope this help you.
body.item-view .Blog .post-body::first-letter{font-size:16px;}
Related
I have a little css code to add an underline to the H2 headings in my blog posts:
.post h2:after {
content:'';
display:block;
border: .5px dashed ;
}
This works.
For a specific post, I don't want this underlines applied. I added an additional class to the H2 headings that I want to stylize differently: .h2lines
Now, I can exclude this new class (.h2lines) when applying CSS directly to .post h2. For example:
.post h2:not(.h2line) {
color: #blue;}
This works. It will make all post H2 blue except the ones with additional class.
However, I can't get it to work on the :after element:
.post h2::after:not(.h2line)
This does not work. It removes the underline from all H2 headings.
Any help is very much appreciated.
You just use,
.post h2:not(.h2line)::after{}
So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
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.
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>");