I need to remove the border-top: 1px solid #202020; from .contact on my contact page only, and leave as is in all other .contact instances. Is this possible? If so, how do I make these changes?
Thank you.
Give that page's body a special class like
<body class="contact-page">
Then in your css
body.contact-page .contact{
border-top:0;
}
You can add class to body or other wrapper tag like <body class="contacts-page">
Then use the following CSS .contacts-page .contact { border-top: none }
Add this lines to your http://frshstudio.com/wp-content/themes/frsh/style.css file:
.contact_contact{border-top: none;}
and your html:
<div class="contact contact_contact">
<p>
<span>Let's Chat</span>
</p>
</div>
You can always override stylesheet css with inline css. So like all the other people suggested, put .contact { border-top: none; } but do it like this
<head>
<style>
.contact { border-top: none; }
</style>
</head>
This will only disable the border on your page while all your other pages will obey the stylesheet.
Related
I have the following CSS:
#form1,#form2,#form3,#form5,#form6,#form7,#form8 div{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
For some reason, the last id does not get the style. (ie #form8 does not get the style).
If I switch the css like this (Without changing any html code):
#form1,#form2,#form3,#form5,#form8,#form6,#form7 div{
Now #form7 does not have the style.
Did I code the structure wrongly please? Its very strange
It's probably an HTML markup issue. Can you provide it?
A wild guess is that your code looks like:
<div id="form8">
...
</div>
And the last part of your CSS selector (#form8 div) actually targets a markup like:
<div id="form8">
<div>
...
</div>
</div>
Here's a meta advice: if your selectors list is so long and apparently targets the same type of element (a form), use a class!
.form{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
Seems you are targeting div#form1, div#form2 ... and so on... You can skip writing div for the selector. Try this
#form1, #form2, #form3, #form5, #form6, #form7, #form8 {
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
Or even better ... give all of them a class name like <form class="myform" id="whatever"></form> and use:
.myform {
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
You should just use #form1,#form2,#form3,#form5,#form6,#form7,#form8
#foem8 div refers to the all child divs of the element with this is #foem8
I have next code:
<div class="form_field">
<input type="text" />
</div>
styles
.form_field { height:22px; border:1px solid #B7AB8C; background:#FFFFEA; padding:0 5px; line-height:22px; }
.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }
In IE7 I can't remove the border around the input field.
What are the ideas?
The best decision for myself, I identified as set a class for field "input" as recommended "tylerdurden".
And I add next properties for this field as "background:transparent; vertical-align:top;".
But I could not override the property line-height for field "input".
What are the ideas? (:
Added: I removed the property "height" for container .form_field - helped to align text vertically.
For IE7 you'll have to add a classname to the input element, or select it in a different way as IE<8 doesn't support attribute selectors.
But this css should work with the right selector:
.form_field input
{
border:0
}
But please note that using border-color: transparent; with border: none; will impact the input’s box model by removing the border dimensions.
This will alter the input’s relationship, like vertical positioning, with surrounding elements.
This is because the code below for input[type="text"] is not known in IE7 or below.
.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }
Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.
You may want to add this to the top of your html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
You don't need quotes around "text" in the CSS selector. Instead of all those border proerties, just do border: 0; on its own (or if you want to be thorough border: 0px none transparent but that's overkill)
Give a class to text field ;
.form_field .textInput
{
border:none;
}
Then in your html;
<div class="form_field">
<input type="text" class="textInput" />
</div>
Try this
<!--[if IE]>
<style type="text/css">
.form_field input{
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
It seems IE7 doesn't want the "none" value, "0" seems to work.
How can i override img css for particular image.
Let say ,
i have css in my website like
img{
border:2px solid #ECECEC;
padding:4px;
}
i have one img with in the website say <img id="example" src="../example.png"/>
Now , i don't want to apply img css to this particular image.
How can i do that?
Thank
use the id as a selector and change the css properties you want.
#example{
border:0;
padding: 0;
}
img#example {border:none !important; }
No border for image with example id
If for some reason you can't touch the markup, you could use an attribute selector.
img[src="../example.png"] {
border:0;
padding:0;
}
add a separate class to the image
Example
<img class="example" id="example" src="../example.png"/>
.example{
border:0 !important;
padding: 0 !important;
}
Try this example:
Give it an inline style, mine worked very simply
I have a link inside a DIV. How can I change the color of this link inside this div. This code does not seem to work
<style type="text/css">
.someDiv
{
font-size:14px;
color:#c62e16;
}
</style>
<div id="someDiv">
SOne Text
</div>
Thanks.
ids are accessed by a pound sign (#), and classes are accessed by a period (.)
<style type="text/css">
#someDiv a
{
font-size:14px;
color:#c62e16;
}
</style>
<div id="someDiv">
SOne Text
</div>
use
.someDiv a {
font-size:14px;
color:#c62e16;
}
You are using the wrong selector. You have an id="someLink", and the CSS is looking for the class="someLink". Try with #someLink, it'll work.
div#someDiv a{
color: #hexcode;
}
That will work too, you use the selector to select ALL the elements of the type "a" in a div with the id="someDiv".
While you're using the wrong selector for someDiv you will usually need to set a colours separately:
#someDiv, #someDiv a {
color: red;
}
Is there a reason my below CSS only half works?
div.share
{
position:relative;
top: -4px;
left: 25px;
font-family:Tahoma;
background-color:#000000;
font-size:11px;
font-weight:bold;
}
/* share link css */
a.share:active
{
color: #000000;
}
a.share:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
The div.share CSS is all working but the CSS for the active and hover is not
CSS is valid, but make sure the link does have the "share" class, if its in the DIV, change the css to:
div.share a:active
{
color: #000000;
}
div.share a:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
adding your html would make this easier.
I can only guess that you have a <div> with class='share' and no <a> tag with the same.
e.g., does your html look like:
<div class='share'>
<a class='share' href='http://yoursite.com'>Your site</a>
</div>
or
<div class='share'>
</div>
...
<a class='share' href='http://yoursite.com'>Your site</a>
If it's the first, then
div.share a:hover {
...
}
would make more sense.
If it's the second, then the selector looks fine... though it might be better to choose different, but appropriate class names.
Use div.share a:active and div.share a:hover.
The way you have it right now it is looking for an <a> tag with a share class applied directly. However the share class is on the outer div.
Can you show us an HTML snippet using this CSS? Is it really the <a> tag that has the share class or is it nested inside the <div class="share">?