I was asked to take over a company's website built using a builder I'm not familiar with.
I need to remove a few buttons, tabs, etc. (The site needs to be rebuilt.) Until we get the green light I'm having to remove items here and there with CSS.
I was able to remove the following button
"Rental"
with the following:
a.search-btns[data-search=rental] {
display: none;}
But I trying to remove this tab
<li class="tab"> Rental</li>
does not work using this method.
a.tab[data-tabtitle=Rental Equipment] {
display: none;}
I know just enough about CSS to be dangerous. Can someone help with this?
Thanks in advance!
Change css code to:
li.tab a[data-tabtitle="Rental Equipment"]
{
display: none;
}
In some CSS contexts, spaces are optional. For example, in a property declaration display:none; is the same as display: none;. However, as you can see in your selector scenario, they do matter.
a.tab[data...] is selecting for all links that have the class .tab and the data-attr you specified. For your scenario to work, you want something like: tab > [data...]
.tab > [data-tabtitle="demo"]{
display: none;
<ul>
<li class="tab">hidden</li>
<li class="tab">not hidden</li>
</ul>
I suggest checking out some documentation on CSS selectors to learn more.
https://www.w3schools.com/cssref/css_selectors.asp
Try changing it to double quotes.
a.tab[data-tabtitle="Rental Equipment"]
Related
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
I hope this question was not already asked somewhere in this forum. I swear I searched it!
My goal is to change the "tag" icon when mouse is over it. Namely, I would like to let the "tags" icon appear replacing the old one.
I am quite sure there is an easy solution out there; probably using
.fa-tag:hover {
background: url(something);
}
Here the page of my website with the .fa-tag icons : http://wordsinthebucket.com/about
Thank you in advance for your attention.
I would have two icons but have only one visible at a time, toggling them based on :hover state. I feel this is more flexible then messing with background.
.change-icon > .fa + .fa,
.change-icon:hover > .fa {
display: none;
}
.change-icon:hover > .fa + .fa {
display: inherit;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<span class="change-icon">
Tags
<i class="fa fa-tags"></i>
<i class="fa fa-gear"></i>
</span>
.fa-camera-retro:hover:before{
content: "\f02d";
}
demo - http://www.bootply.com/oj2Io7btD7
you will need to change the content of :before pseudo element on hover
here is the list of complete fontawesome content codes
http://astronautweb.co/snippet/font-awesome/
You can by adding CSS like:
.fa-tag:hover:before {
content: "\f02c"
}
which changes the content in the :before pseudo element when hovering over the .fa-tag.
I'm quite sure it's not a good idea to overwrite the .fa-tag styling. At least scope it by a parent class, e.g. .entry-content .fa-tag:hover:before (although I would prefer a better class name like author-tags.
It's not a good idea to overwrite fa-tag as you might need it somewhere else in a different scope. I would go like this:
http://antonakoglou.com/change-font-awesome-icon-content-hover/
which is actually the second part of this answer that I just discovered:
https://stackoverflow.com/a/19503006
I'm looking for a quick and easy way to hide an element on just two pages that is otherwise in the sidebar on all pages. I tried to do it with css but just can't seem to affect this one spot. This is one of the pages and the client wants the FDIC logo in the sidebar gone. I tried adding page ID and the sidebar css to display:none, but can't work out the right combo. Am I on the right track?
#page-id-63 .textwidget
{display:none;}
Thanks for your help!
"page-id-63" is a class, not an id on the page you linked, so you'd need:
.page-id-63 .textwidget {
display: none;
}
#text-9 > .textwidget {
display: none;
}
Try this out, either include it in a tweaks stylesheet specifically for those couple pages or throw it between style tags in the head.
Edit: I see you have the page number defined as a class in the body tag, you can put this in your main stylesheet adjusting the first class for your specific page (ex. .page-id-13 instead of 63) ..
.page-id-63 > #wrapper > #main > #secondary > #text-9 > .textwidget {
display: none;
}
You need
.page-id-63 .widget-area .text-widget {
display:none;
}
as you have many text widgets, and only want to hide the one in the sidebar.
Yes you are on the right track. What you need to do is apply the style and then have a look at the element using your browser dev tools. Then you will be able to see if
The style applied.
If any other styles are overriding it.
Update
Having checked your site now that is out of maintenance mode, try this
.page-id-63 .textwidget{
display: none;
}
My website has two different css style documents. The first is specifically for the index page, which uses lists to do the tabs at the top for a link bar between the title and the rest of it. This has the code:
index.css:
u1
{
list-style-type:none;
}
along with some code which applies to the li elements.
The other css document is for the rest of the site. I want to use lists for some of the other parts, but I'm having an issue. While the li elements are overwriting properly, I can't get u1 element to show the bullets in the rest of the site. I've tried using u1.a and u1.b , but that doesn't fix it.
main.css:
u1
{
list-style-type:circle
}
Try overwriting it by adding !important
u1
{
list-style-type:circle!important;
}
and/or add another CSS file with just this rule to the page you want to be different.
The element is ul as in UL not u1 and in u-one. I assume this is not a typo of the code because it's all over the place in your question.
CSS work by cascading and specificity. Having list style apply to other elements of your site might be as simple as adding a class:
ul.circle {
list-style-type: circle;
}
and then adding the same class to your element in the HTML document, as such:
<ul class="circle"></ul>
There are many different ways to override CSS, and I described them in an answer of sometime ago, but in your case this should be the easiest.
sorry to probably reiterate what was already said, but if you wanted to make your 'u-one' class, you should prepend a dot to it, so it is either a class:
.u1 {list-style-type: circle;}
And you will use it as a usual class, ie
<ul class="u1"> <li></li> </ul>
or use ul [UL] as a tag:
ul {list-style-type: circle;}
and all your UL lists will have this formatting.
The way you put it in your css will not work with html because the 'u1' tag does not exist.
But I'll need to see a snippet of your html to be sure.
A colleague just added this to our project.
<ol class="numbered-list list-inside" start="1">
.numbered-list
{
list-style-type: decimal;
}
.list-inside
{
list-style-position: inside;
}
Am I missing something here or is this just as bad as inline CSS? How do I explain this to my colleague?
Edit Perhaps my question is misunderstood. Shouldn't it be something like this instead?
<ol class="info-list" start="1">
.info-list
{
list-style-type: decimal;
list-style-position: inside;
}
The point I'm trying to make is, the class names just represent the rule they apply. So if you want to change the representation of the list, you have to change the HTML (or change the CSS so you end up with a class name that does the opposite of the rule it contains).
Another edit Perhaps this will further help you understand my question.
<p class="red">Hello</p>
.red
{
color: red;
}
Now, you want to change the text to be green. See the issue?
If those classes are used separately in rest of your project this is ok. If there is no need to separate those styles such solution can be unnessesery.
Many times you add to one element several classes if they are used for different purposes.
An article confirms my doubts about this style. The most relevant example is this one:
<div class="hyphenate"></div>
Unsemantic. Trying to specify the behavior of the content inside, instead of describe what it actually is.