So, I am using Squarespace to build a website, and for whatever reason, squarespace uses radio buttons for their nav (at least secondary nav) instead of list items.
I am trying to make edits to the menu so that when you click on a menu item, it is essentially "checked" (since they use radio buttons) and then applies the CSS styling I would like.
I am, however, having some difficulty getting the menu items to retain their styling.
By using attribute selectors, I can select the menu items; however, I am having trouble selecting them to display only in the :checked state.
The reason I am having to use attribute selectors is because the class name that begins with "menu-select", has a string of numbers behind it that actually changes with every reload. So, every time I make any particular changes to the code to the full, numeric class name, upon the next reload, the changes do not stay because the class name (or numbers because that's what they are) has changed.
My question: Is there a way to use attribute selectors and then target pseudo elements?
I want to make changes to my CSS only in the :checked state.
Right now my code looks like this:
.menu-block .menu-selector label[class^="menu-select"] {
text-decoration: none !important;
border-bottom: 4px solid black;
}
But this is really what I want it to do:
.menu-block .menu-selector label[class^="menu-select"]:checked {
text-decoration: none !important;
border-bottom: 4px solid black;
}
Thanks so much!
Related
I have a sort of webshop, and on mobile when user selects filters, I want the filter button to have borders - this way user would know they have some of the filters applied. Respectively, when none of the filters applied, I want the button to go back to normal no-border state.
I can do this:
#include mobile {
border: solid;
}
But this way, the border will appear always, which is not what I want. The filters which can be selected are located in another .scss file and folder, so I can't (?) link them to this file I'm working on. So is there any way I could achieve this using CSS/SASS, or will I have to apply some JS here?
Alright, so what you need to do is detect whether you have at least a filter applied or not. This requires some javascript to condition on it.
If the condition returns true(in your case meaning some filters are selected), you'll have to add a CSS class to the filter button that will make it have borders. Initially, your filter button shouldn't have any filters since we suppose that there are no filters when the user starts navigating.
so for example here's some scss:
.filter-button{
border:1px solid transparent; /* has a transparent border*/
transition: border 0.3s ease-in-out; /*adds a cool transition when you
add the has-filters class*/
&.has-filters{
/*when the condition if (filters_exist) returns true, you add this class to
the HTML filter button which has the class .filter-button*/
border:1px solid blue;
}
}
I'm trying to override the active style of links in a blanket fashion, to revert them to their normal state in cases where they can't be interacted with (e.g. while the area they're in is scrolling).
So, in my code, I have this:
.scrolling a:active {
background-color: inherit !important;
color: inherit important!;
}
Unfortunately, this makes it inherit the colors of whatever its containing element is in, not the colors of the link when not active. Is there any way to get these to adopt the regular anchor tag styles, regardless of what they are? I'd prefer not to have to create an override for every type of link that can appear on the page.
Clarification: I can't just do something like:
a, .scrolling a:active {
color: red;
background-color: white;
}
because different links across the site use different coloring systems, so I'd need a style rule like this for each link type. (Which I suppose I could do, but I'd love to find a blanket rule I could just use, if it's out there.)
The value of inherit confers the value from the element's parent, where legal. If you want those values to be the same as the link in its resting state, can you do:
.scrolling a:active, .scrolling a {
background-color: #fff;
color: #000;
}
Updated
I don't see a way to do what you want. There is no way to interrogate the style values of the anchor in its resting state and pass that to the active state. You will have to do that manually, as indicated above, but LESS or SASS would likely make your job easier.
I'm attempting to style the jQuery UI tabs as vertical tabs, but styled slightly differently to the Vertical Tab Demo that they provide.
I'm trying to achieve this:
But the best I can get is this:
You'll notice that the color of the bottom border of the tabs matches the text color, but I really want the border to be consistent around the entire tab.
I could just add a css line in like this:
.ui-tabs-vertical > .ui-tabs-nav li {
border-bottom-color: #C5DBEC !important;
}
But I don't want to hard-code any colors as they are provided by the jQuery UI theme roller, so if I decide to change the theme, or have different themes for different branding of my website, then this will become a nightmare to maintain.
Looking a bit deeper into the problem, it seems that the standard jQuery UI theme css does this:
.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }
And this is because the whole thing is setup normally for horizontal tabs, which need the bottom border removed. I can't remove this because it's part of the generated theme roller css. I don't think that this should change the border-color property because only the first two of the shorthand border are specified (i.e. width and style). So I would expect the border-color to not be overridden here, but in fact it is, and it's setting it to the font color.
What I've done to attempt to revert this css line is this:
.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }
Note that again, I'm not touching the border-bottom-color here.
The result of this, at least in firefox, is this taken from firebug:
For some reason, it looks like the color is being set back to the default browser color, even though nothing touches border-bottom-color. I just want the color from .ui-widget-content .ui-state-default to come through, but I can't work out how to do it.
Using inherit doesn't work because I don't want to take the color from a parent element in the DOM.
Here's a jsFiddle showing my problem. Can anyone help me get a maintainable, solution?
Use #hexblot's answer and get the color dynamically.
To do this create a faux item, apply the jQuery class you want and after that use .css() to get the color. Simple as that.
+1 for trying to find a clean solution, without hardcoded stuff.
just add
.ui-state-active { color: #2E6E9E !important; }
and you should be ok. updated the fiddle with this line in the CSS (last line).
I have a design for a bullet list that has two things:
a. A blue arrow image replacing the list icon
b. A very light dotted border atop and below each list item.
I'm wanting to build this into CKEditor via (CKEDITOR.stylesSet) so that the user can select this particular style of list from a dropdown and not have to write any code to do so.
I have had success to the point where I can create a list with a particular class (and now have that themed), however, am running into issues given that it seems the only way to apply both the dotted line and the blue arrow is to use multiple backgrounds via CSS3, which, SURPRISE, doesn't work in IE8 or below.
If I added some DOM pollution (I.e., surrounded the list item text in a span) I could theme that; however, it seems CKEDITOR.stylesSet only allows for setting one element per style (I.e., I can set ul as an element or li as an element, but there's no way I can use one style to set a class on the UL and surround the text of the child li elements with a span).
Or is there? I'm thinking of falling back to JavaScript for this, but I'm also open to other suggestions to accomplish what I'm doing.
Thanks!
There's no need to use background images for either the arrow or the dotted line. You can do both via CSS. All you need CKEditor to do is apply a class to the (which it sounds like you already are) and then use CSS similar to this:
.styled li {
border-top: dotted 1px black;
border-bottom: dotted 1px black;
}
.styled
{
list-style: square url('http://www.wcb.ny.gov/site_images/blueArrow.gif')
}
Full working example: http://jsfiddle.net/jwynveen/ZhjCK/
My browser extension embeds a div item to webpages opened by browser on the fly. div contains several children items such as buttons, spans, input boxes etc.
Problem is when div is inserted to page, page's css affects the div and it's contents.
For example if the page has a css such as :
span {
text-shadow: 1px 1px 1px blue;
}
then the spans in my on the fly added div have blue text shadows. What i'm doing to fix this is to set any possible directive that might affect my div's content with !important, like
mydiv span {
text-shadow: none !important;
}
and it's rubbish.
Is there any sane way to override css for a given item, that'll take it back to browser (google-chrome) defaults?
Thanks.
Is there any sane way to reset the css to browser defaults for only a single item?
Sadly, no. The auto value will act as the default under some conditions, but not always, and you still have to specify it for every possible property. This is something about CSS that really sucks.
One idea comes to mind, though. Seeing as you're asking specifically about Chrome, if you control all the CSS classes and don't mind some clutter, you might be able to work with CSS3's not like so:
span:not(.default) {
text-shadow: 1px 1px 1px blue;
}
If you use not(.default) in every CSS rule, you can have elements that have the default behaviour if you give them the default class:
<div class="default">
I have no personal experience with CSS 3, but this should work. It will not work in older browsers, so it's not (yet) really mainstream compatible.
You cannot "reset" css rules, you have to override them (text-shadow:none;)