I'm asking what may be a silly question, and I apologize in advance.
I am working on something without access to the back end. I have this annoying little "magic box" where I can use HTML / CSS.
My question is this: I have a class with a link and I'm trying to hide that specific one.
So in this case I'm trying to hide this .ad_link href="/colt?ban-link=141"
I don't want to hide the entire .ad_link class, Just the specific class with that href attached to it. There are more items under the ad_link class that need to stay unhidden.
I hope my question makes enough sense, please let me know if I need to clarify more.
bigesgunshop.com It's located under the left side, the "colt" image/link
Try this:
.ad_link[href="/colt?ban-link=141"] {
display: none !important;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
or if you can add another class to this link, just add hidden defined as:
.hidden {
display: none !important;
}
Agree to #pawel, but this approach is not very maintainable.
I suggest it's in this case better to hide with inline style:
Foo
Or use an class with more importance to hide the link.
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I'm trying to change the class name of my header when I hover over it. The class name when NOT hovering is ".l-header.pos_fixed.bg_transparent.shadow_wide", but I'd like to rename it when hovering to ".l-header.pos_fixed.bg_solid.shadow_wide".
Is this possible?
EDIT: Maybe a bit more background information: I want to change the header of https://pinkypromise.pictures to the header of, for example, https://pinkypromise.pictures/contact when hovering on the home page.
To answer your question, yes, it is possible to change class names based on events (hover, in this case), but you will need javascript for that. You can't achieve this with pure css.
As others have mentioned, it is usually a better approach to have a css rule with the :hover pseudo-class. But also be aware that you might have problems with the intended result in touch devices.
A good source of information for these rules is Mozilla Developer Network. Please have a look at the full documentation for :hover's pseudo class on MDN.
Sorry I thought only the logo should change.
I see you site is using jQuery.
When I enter this in the console it seems to work fine:
jQuery('.l-header.pos_fixed.bg_transparent.shadow_wide').mouseenter(function() {
jQuery(this).removeClass('bg_transparent').addClass('bg_solid');
}).mouseleave(function() {
jQuery(this).addClass('bg_transparent').removeClass('bg_solid');
});
You don't need to change the class name on hover, just specify the styles that you want to apply when you hover:
header:hover {
// place the styles that make the background solid here
}
So I've been having this problem for a while now, and I just can't figure out why it isn't working. I want to use html5 validation to validate my form, but only show a pink background on invalid inputs AFTER clicking on a button.
.submitted input:invalid {
background-color: pink;
}
I have this jsfiddle here representing the problem I have.
Why is this CSS selector not working? Is there any other way to achieve this?
If I remove the .submitted and just leave the input:invalid, it works instantly, but I want the validation to execute only AFTER I click the button.
I'm certain the script works, as I can see the class being added to my inputs via firebug, but the styling infuriatingly stays the same.
Aren't you simply looking for the following? Pardon if I misunderstood your question.
input.submitted:invalid {
background-color: pink;
}
For starters I'm not sure what you're trying to do with your jsfiddle.
Firstly, inorder to assess whether a field is invalid, you need to do some validation then say, add a class to the input to say if it's invalid.
Seeing as you're using jQuery, I'll give you an example using javascript.
$('form'/*could supply a name like [name="name"]*/).submit(function(event){
if($('input[name="firstName"]').val().length<3)$('input[name="firstName"]').addClass('error');
event.preventDefault();
}
My code:
myTextItem = new TextItem();
myTextItem.setHint("Some text");
myTextItem.setShowHintInField(true);
myTextItem.setHintStyle("myTextItemHint");
My css:
.myTextItemHint {
color: gray;
}
My Problem:
My issue is that I can have that setShowHintInField(true) set OR my css getting applied, but not both.
I found more info about this on the link: http://forums.smartclient.com/showthread.php?t=14463 but I cannot come up with a common style / place for it, that would make the trick while the hint is inside the field.
My question:
What kind of css would I need in this case and how I tell the field to use it?
What I have tried:
With that setShowHintInField(true) line and without. Both cases: half of the solution is there. Not both halves.
FormItem has method setCellStyle() to set the style of specific cell.
Use
myTextItem.setCellStyle("myTextItemHint");
your CSS will look like this:
.myTextItemHint, .myTextItemHint input {
color: gray;
}
Override other properties also if needed
.textItem,.textItemFocused,.textItemDisabled,.textItemDisabledHint,.textItemError,.textItemHint
For more information on CSS, Please have a look at skin_styles.css that is already shipped along with standard skins in SmartGWT.
As the title says I would like to create a unique div ID for some class in css. Here is some examples:
http://prntscr.com/29rom4
These two blocks are using the same class in the wordpress' css. They are both named as td_block4.
http://prntscr.com/29rp81
Now I would like to create a unique div in the css file of the wordpress theme, where I can put a different background for each "block4".
Here is the example of what I actually want to do: prntscr.com/29rpvd (not a perfect improvisation) :)
And... when I put (in example):
.td_block4 {background-color:#000;}
...in the css, I get this: prntscr.com/29rqbh , and that's not what I want to get.
I hope I'm clear enough, how can I fix this?
Thanks in advance.
I think you can do that only via javascript.You can attack div data-image's with their background , and on load check it and write some js like ".css('background-image',dataimage)"
Take it easy
Your <div>s are surrounded by some more unique parents, so you can simply do:
.span6 .td_block4 { background-color: #f00; }
.span4 .td_block4 { background-color: #000; }
Sometimes, it's not about hooking onto a unique element you want, but by finding a way to use its parents to hook onto a common element, differentiated by unique parents.
Try jquery for this
$(document).ready(function(e) {
$('.td_block4:first').css('background-color','#000');
});
And you can use css for the rest