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/
Related
I'm working with XML and CSS. I need to add different shadowing for one of the parent's elements by mousing over this parent (box). But I can only use CSS. Is it possible to do that?
I was trying by adding hover selector for this specific element (as parent's (box's) child) but still shadowing only showed when I moused over this text.
I tried also some :not(:hover) things but this is also not the effect I want.
<registration>
<worker ID_worker="115">
<name>Name</name>
<surname>Surname</surname>
<date_of_birth>14-05-1980</date_of_birth>
</worker>
<activity_type type="4">
<activity>Some activity</activity>
<details>Some details</details>
</activity_type>
<date>05-29-2019</date>
<duration>8:12:18</duration>
</registration>
registration:hover {
background-color: RGB(13, 21, 25);
text-shadow: 0 0 2px #FFFFFF;
border-color: #FFFFFF;
}
This code provides changing background, border and adding shadow for whole text in XML's 'registration' when I mouse over registration box. But now I need text in 'activity_type' to have different color of shadow. Again - I can only use CSS.
Would be grateful if someone just tell me is it reachable in CSS?
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!
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 want to define some basic styles that I can combine. Let's say I have a stylesheet that contains the following lines:
.whitebackground {background-color: #ffffff}
.borderblue {border: solid 1px #0000aa}
I'm wondering if there is there a way to include these lines into a new line? Something like:
**div.main {.whitebackground; .borderblue}**
The result must be the same as it would be with this line:
div.main {background-color: #ffffff; border: solid 1px #0000aa}
You are looking for SASS or LESS library.
They will allow you to include style declaration from one selector to the other.
Using LESS, you syntax will be perfectly valid and work as you want
div.main {
.whitebackground;
.borderblue;
}
But, when they are compiled, it will take the optimized form automatically.
With standard CSS, you can't. However, you can give your div multiple classes.
<div class="whitebackground borderblue">
This will apply both sets of css to the div.
By the way, if I were in a pedantic mood, I'd say that names like "whitebackground" and "borderblue" are not very good class names. With classes like that, you could just as well use inline styles. Class names are supposed to convey meaning, intention, structure, emphasis etc. Use names like "special-remark", "important", "sidenote", "highlight" or whatever reason you have for giving your div a white background and blue border.
Can I apply css style to dreamweaver hotspot? what I mean is to change backcolor,size,font size, etc...thanks
Hotspots, at least in my experience, are just the areas you define on an image that can be clickable. In HTML they add a map element to your code, assign that map to the image, and add area elements within the map element defining the region that is clickable. (see here: http://www.entheosweb.com/website_design/image_maps.asp)
In that case, you can't do much to control that area element with CSS.
If you're talking about hyperlinks (the element), then yes you can do all of the above. For example:
a:link, a:visited {
background-color: Red;
font-size: 24pt;
}
UPDATE:
If you want an easy way to style the message that appears when you hover over a hotspot, you can use this jQuery plug-in: qtip