My aim:
To change the default click pointer on a website using CSS.
I have already changed the default pointer but this question is specifically for changing different 'versions' of the cursor.
My current attempt for the pointer is:
cursor: url(images/click.png), pointer;
This worked for the default mouse change (pointer was renamed as auto) but I've yet to find a working solution for the pointer.
Is it plausible or is it simply something not needed and thus, not introduced?
Just set cursor style.
a {
cursor: url("/examples/images/custom.gif"), url("/examples/images/custom.cur"), default;
}
You can read about the css hover property. and add the cursor to it. For example putting the following code in your styles would make the cursor alias whenever you'd hover over the anchor tag. Let me know if this helps you.
a:hover {
cursor: alias
}
I'm trying to put a different cursor on my Big Cartel site but have never done anything with CSS. This is the best I could do by googling it and it's not working- any help is appreciated!
.module {
cursor: url('https://downloads.totallyfreecursors.com/cursor_files/milhouse.cur'),url('https://downloads.totallyfreecursors.com/thumbnails/milhouse.gif') auto;
}
When I put this in nothing changes, the default cursors stay.
I would like to know if there is a way to duplicate the cursor in my website so it appears twice, say as if you are seeing it drunk. I would like it to keep being responsible to images and change, but always double... is it possible to do this in an easy way? my CSS is pretty basic... thanks in advance!
This is an example: https://s11.postimg.org/ba76nmrvn/cursor_1.png
You can make some image and define it as cursor like this:
body {
cursor: url(path/to/your-arrows.png);
}
Doesn't need to be the body, you can define this for any HTML element.
You can load custom images, but don't forgot to always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
body {
cursor:url(double-arrows.png),url(anotherCursor.cur),auto;
}
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.
I just finished a medium sized web site and one thing I noticed about my css organization was that I have a lot of hard coded colour values throughout. This obviously isn't great for maintainability. Generally, when I design a site I pick 3-5 main colours for a theme. I end up setting some default values for paragraphs, links, etc... at the beginning of my main css, but some components will change the colour (like the legend tag for example) and require me to restyle with the colour I wanted. How do you avoid this? I was thinking of creating separate rules for each colour and just use those when I need to restyle.
i.e.
.color1 {
color: #3d444d;
}
One thing I've done here is break out my palette declarations from other style/layout markup, grouping commonly-colored items in lists, e.g.
h1 {
padding...
margin...
font-family...
}
p {
...
}
code {
...
}
/* time passes */
/* these elements are semantically grouped by color in the design */
h1, p, code {
color: #ff0000;
}
On preview, JeeBee's suggestion is a logical extension of this: if it makes sense to handle your color declarations (and, of course, this can apply to other style issues, though color has the unique properties of not changing layout), you might consider pushing it out to a separate css file, yeah. This makes it easier to hot-swap color-only thematic variations, too, by just targeting one or another colorxxx.css profile as your include.
That's exactly what you should do.
The more centralized you can make your css, the easier it will be to make changes in the future. And let's be serious, you will want to change colors in the future.
You should almost never hard-code any css into your html, it should all be in the css.
Also, something I have started doing more often is to layer your css classes on eachother to make it even easier to change colors once... represent everywhere.
Sample (random color) css:
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}
Then some markup, notice how I am using the colors layer with otehr classes, that way I can just change ONE css class:
<body class='main_text'>
<div class='main_color secondary_text'>
<span class='secondary color main_text'>bla bla bla</span>
</div>
<div class='main_color secondary_text>
You get the idea...
</div>
</body>
Remember... inline css = bad (most of the time)
See: Create a variable in .CSS file for use within that .CSS file
To summarize, you have three basic option:
Use a macro pre-processor to replace constant color names in your stylesheets.
Use client-side scripting to configure styles.
Use a single rule for every color, listing all selectors for which it should apply (my fav...)
I sometimes use PHP, and make the file something like style.css.php.
Then you can do this:
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
Now you can use that colour wherever you want, and only have to change it in one place. This also works for values other then colours of course.
Maybe pull all the color information into one part of your stylesheet. For example change this:
p .frog tr.mango {
color: blue;
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
background: green;
color: red;
font-size: small;
float: left;
}
// ...
to this:
p .frog tr.mango {
color: blue;
}
#eta .beta span.pi {
background: green;
color: red;
}
//...
p .frog tr.mango {
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
font-size: small;
float: left;
}
// ...
You could have a colours.css file with just the colours/images for each tag in.
Then you can change the colours just by replacing the file, or having a dynamically generated CSS file, or having different CSS files available and selecting based upon website URL/subfolder/property/etc.
Or you can have colour tags as you write, but then your HTML turns into:
<p style="body grey">Blah</p>
CSS should have a feature where you can define values for things like colours that you wish to be consistent through a style but are defined in one place only. Still, there's search and replace.
So you're saying you don't want to go back into your CSS to change color values if you find another color 'theme' that might work better?
Unfortunately, I don't see a way around this. CSS defines styles, and with color being one of them, the only way to change it is to go into the css and change it.
Of course, you could build yourself a little program that will allow you to change the css file by picking a color wheel on a webpage or something, which will then write that value into the css file using the filesystemobject or something, but that's a lot more work than required for sure.
Generally it's better to just find and replace the colours you are changing.
Anything more powerful than that will be more complex with few benefits.
CSS is not your answer. You want to look into an abstraction on top of CSS like SASS. This will allow you to define constants and generally clean up your css.
Here is a list of CSS Frameworks.
I keep a list of all the colors I've used at the top of the file.
When the CSS is served by a server-side script, eg. PHP, usually coders make the CSS as a template file and substitute the colors at run-time. This might be used to let users choose a color model, too.
Another way, to avoid parsing this file each time (although cache should take care of that), or just if you have a static site, is to make such template and parse it with some script/static template engine before uploading to the server.
Search/replace can work, except when two initially distinct colors end up being the same: hard to separate them again after that! :-)
If I am not mistaken, CSS3 should allow such parametrization. But I won't hold my breath until this feature will be available in 90% of browsers surfing the Net!
I like the idea of separating the colour information into a separate file, no matter how I do it. I would accept multiple answers here if I could, because I like Josh Millard's as well. I like the idea of having separate colour rules though because a particular tag might have different colours depending on where it occurs. Maybe a combination of both of these techniques would be good:
h1, p, code {
color: #ff0000;
}
and then also have
.color1 {
color: #ff0000;
}
for when you need to restyle.
This is where SASS comes to help you.