Look, this is my test site.
http://www.securebitcr.com/test/balls.php
The problem that I am having is, that I see the link style in the flying objects, but I am resetting that in my css .
Please take a look at my code, I've been trying a lot of things and anything works for me.
Thanks,
Marco,
Add this CSS?
.box img {
border: 0
}
Related
I've taken a look at many questions that I thought were a problem similar to mine but none of them worked for me which is why I'm posting this. I'm still new to programming (just know the basics) so please bear with me:
I own a website All Gaming Everything
please open any post on the website
The problem I was facing was that all of the <a> elements on the website were grey in color so using the custom CSS option in my wordpress theme, I just did
a:link { color:white; }
Now while this worked like a charm and all of my elements have the same color (white), I want the color of a:link as red on ONLY the body of the article since white prevents the visitor from seeing if there is any link on the post. I tried changing the aspects using inspect element and custom CSS but nothing seems to be working for me. I have access to both custom CSS and custom HTML editors on my wordpress theme so I'd really appreciate any help with this and once again sorry if I talked noobish (I am a noob).
You can use a css selector inherited. That means if you have a container with a <a> element as child for example
<div id="container">
Link
</div>
do in your css
#container a {
color: #ff0000;
}
or
div a {
color: #ff0000;
}
now all <a> in #container got red color, if no other declarations from wp stylesheets exists.
Take a look to some great websites like w3schools.com and get the basics of css selectors, childs, parents and much more.
Since you are using wordpress and the wygiswys wrap text inside <p></p> you can try:
p a:link{color:red};
and it will change the color of each link inside a paragraphe.
I visited your site and noticed all articles are wrapped in a div with a class "td-post-content". This way, all you have to do is create a CSS rule that targets anchor tags only within those divs.
Here:
.td-post-content a {
color: red;
}
It workd like a charm. I tested on the post below which has a link within the article body:
By the way, you don't need to use a:link on your CSS statements. Only a will do it. ;)
Cheers!
Hi I'm trying to have a word or group of word in a different color in a . This is the code I use:
<h2 class="text-blue">
We are a <span class="text-orange">photography & video production</span>
studio improving businesses & brand's image and helping them to achieve their goals
</h2>
css:
.text-blue{
color: #645f5f;
}
.text-orange{
color: #ff8400;
}
My problem is that somehow the orange text appears smaller than the rest and not on the same line. Can someone tell me what I do wrong? Thank you very muchscreenshot
That's a little strange...from what I can tell, span shouldn't really change the size of your text. I put it into Codepen as well, and I didn't really see any difference. However, if you really want to make sure, I recommend just manually adjusting the .text-orange class, so that the text is the same size as that of its parent class:
.text-orange{
color: #ff8400;
font-size: 100%;
}
Give that a try. Let me know if that works :)
Ok I solved it thanks to you J. Zhou
I changed the span by a p and added a display:inline into my class. Following is the code:
<h2 class="text-blue">We are a <p class="text-orange">photography & video production</p> studio improving businesses & brand's image and helping them to achieve their goals</h2>
css:
.text-orange{
color: #ff8400;
display:inline;
}
It's very likely that your span is being styled elsewhere, and it's receiving display: block - which is why it's breaking the line - and also a font-size. You can see it at the developer console.
If that's the case, then I highly suggest that you correct it instead of using another tag, because span is the most adequate tag for inline style exceptions.
If you wish to keep that style, try changing its selector, making it more specific, so it doesn't affect all your span tags.
just add the font-size you want like this:
.text-orange {
font-size: 100% !important;
}
this will undo any predefined styles and make font-size 100%;
similarly you can add more styles with !important;
"If my answer is correct then please mark my answer as the right answer-> it will help my profile thanks Read: stackoverflow.com/help/someone-answers"
I want to do a div as a link, and to tell user that thats is a link I want to do a hover with a different color. But here's a problem: in my div there is picture and text in two separate divs.
div {
:hover {
background-color: light cyan;
}
And when I hover with a mouse on a div the result is:
But I need the all div to become colored. Can you help me?
You can insert your both div tags in a single div and set a class for some css
.exampleclass:hover { background-color: light cyan; }
and use as well as you want.
Otherwise If you want something more from me.
Then please provide html and css both codes to make changes and more better for you. :)
It was really easy, may be some bag of sass, but when i did div:hover{background-color: light cyan;} it really solve the problem.
Thanks you, jonju.
I recently modified a bit of a button to give it a 3d effect in a bootstrap site.
The result satisfied me, but when I applied the style to tag <button> instead of <a> I had several problems.
You can find the code in question here: http://jsfiddle.net/wctGM/3/
I hope someone can help me, because I can not in any way to move forward
You must use border: none:
button {
border: none;
margin-top : 50px;
}
Your code:
http://jsfiddle.net/wctGM/7/
There are some things which are different to each other. For an instance if you set the border:none; property for a button you will get rid of that border. But the width and height remains different. What I mean to say is go through the default properties which are set on each html tag and try to understand them and then try to change.
See this link. I have added border property like below.
button {
margin-top : 50px;
border:none;
}
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.