Is it possible to style autocompletion boxes that appear under text inputs? I'd like to change background color and border.
It is possible to do this by using javascript.
Another way to do this is by opening up your developer tools.. "View - Developer - Developer Tools" using the magnifying glass to hover your element, get the class or ID name and make direct edits in the right hand side, then paste that code within your stylesheet. ( sounds harder than it is! )
Related
I am trying to style four input controls to looks like the below image any help to get me started would be great
If using Chrome, open dev tools (F12), navigate to the 'Elements' tab, select the 'inspect element' tool on the top left (shortcut: cmd+shift+C) and hover over and then click on the input controls.
This will display the styling that goes in to creating that element, and you can try your hand at replicating it from there.
I am currently using a squarespace template and am wondering how to inject a code that causes a rollover state change on my logo. All I want it to do is change to the neon green color that is a part of my theme when hovering over. The link to my website is www.henrykernsart.com
I have tried looking for a solution via squarespace and no one has helped me so far.
This can be accomplished using custom css. But, because squarespace templates tend to vary quite a bit, you will probably have to do a little research to figure it out.
There are a variety of ways to inject custom css into your squarespace site. I'll illustrate 2 of them.
Affecting your entire site - In your squarespace admin dashboard, go to Design -> Custom CSS. This will open a side panel with a large text box where you can enter css code.
Affecting just a single page - Open the page you want to be affected. In the hierarchy panel of pages, hover over your page and you will see the gear icon. Click on that to open the settings panel for the entire page. Click on the Advanced tab and this will open a text box for css code.
The code you will enter will be the same in either place, with a small modification for the single page option.
You will need to know what your template calls your logo. If you are lucky, your logo image will have it's own consistent id or unique class. (Looking at your site, you aren't lucky and yours doesn't.) We can use that id or class to directly affect the image.
Let's say your image class was "Header-branding-logo" (that's what mine is). Your code will look like this:
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
That's if you are editing the css for the entire site. If you are doing page-specific editing in the advance tab you have to enclose it in <style></style>:
<style>
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
</style>
If your logo has an id instead of a class, you can do the same, but instead of the class, you will use #id:
#block-a-bunch-of-id-numbers:hover{ ... }
If you aren't lucky enough to have your logo id'd, you will need to use a combination of Attribute Selectors and Complex Selectors.
First, find a valid, constant id or class. BTW, this is an id that does not start with "yui-" or "block_yui-". Don't use ids that start with those.
On your website's template, you have a class called "logo-image". That's probably a good place to start. Starting from there you 'describe' the path to your image.
.logo-image > a > img:hover{ ... }
Inside the <div> (marked with the 'logo-image' class) is an <a> and inside the <a> is your <img>. So that's the path.
How do you get that path? The easiest way for me is in chrome, right click on the logo image and choose "Inspect". That will open the inspector from which you can examine your site's structure.
If you can't find a good class or id, you have the option of using an Attribute Selector. Find a block somewhere above your image with a unique attribute. Something like
data-content-field="site-title"
You can use that attribute as your anchor point.
[data-content-field="site-title"] > div > a > img:hover { ... }
Lots of ways to accomplish the task. It's kind of fun to figure out. (Remember, stay away from those "yui-" ids!)
What actually happens when you hover the image is it swaps out the current code/image with new code/different image. That being said, in the css you need to specify the replacement. If the logo is a static image, I would recommend creating the logo using the hover color (in this case - neon green). Then set the hover event property to swap the default logo image with the hover image.
This link may help you with the :hover event property: w3schools - CSS :hover selector
I would like to style a form button (input or button tag) with 2 background images to create a stretchable button (relative to the text-length). The form button should also have a hovered state and it should be cross browser (at least IE7 & +) would need to support it.
I know how to obtain the effect with just css with an tag => test
If anyone could help me a little bit, I would be pleased
yours truthfully
See this link.
This will only work with button because an inner element like a spanis needed.
Try JQuery UI. They have a very easy cross-browser set of user interface controls that might satisfy your requirements. You can change the backgrounds used for the buttons, etc.
This is a very specific question for a Google Chrome extension.
http://www.meebo.com/mobile/
This page is where you're kicked to when you go to Meebo.com on an iPhone or Droid phone. But if you notice, the Status box where you can set yourself away or what you want your status to be has white text on a white background.
In order to get a website to appear in a Google Chrome extension's popup window (the one that drops down when you click the icon next to the address bar) that isn't an included html file in the extension, I need to use an iFrame. I know that there's security measures about Cross-Site stuff like javascript and I'm not surprised I'm having trouble accessing the CSS. But there's a class, status, and it's color is white and I need to change that to black. I've tested it with Chrome's Inspect Element window and if I change that, I'll be fine.
I've tried changing the manifest.json file to inject a CSS file using Content-Scripts, but nothing...
I'm new to Chrome Extensions but I have experience doing web development.
What you have to do is to change the DOM inside the iframe, ie to change the style of the text element with javascript.
You can for example, change the 'color' attribute of the text element, or change his CSS class and add a new one.
Does anyone know the name of the CSS classes responsible for styling the dojo promptMessages (or invalidMessages) tooltip associated with ValidationTextBoxes.
Normally Firebug does a great job of revealing all the inner workings of CSS, but in this case the tooltip prompt disappears when I try to inspect it!
I am intending to play with such CSS properties as padding and width for the promptMessage tooltip.
Dijit Tooltip template reveals the structure:
<div class="dijitTooltip dijitTooltipLeft" id="dojoTooltip">
<div class="dijitTooltipContainer dijitTooltipContents" dojoAttachPoint="containerNode" waiRole='alert'></div>
<div class="dijitTooltipConnector"></div>
</div>
Actually, although my question remains for general purposes, in the specific case that interests me, it's probably as easy to include as part of the tooltip content the css markings that will do what I want:
dijit.form.ValidationTextBox({
promptMessage = "<div class='customizedWidth'>Blabla</div>"
},myNode);
That said, I would still be eager to learn the dijit class for that specific tooltip. It would become necessary in the case of wanting to change the look of that entire class...
I had a similar problem when trying to debug why the css for the ToolTip on the ValidationTextBox was showing up as a plain grey box instead of using the proper css. The normal way to view css and other information in Firebug does not work because the tooltip will disappear when you click on it. However, I found that using the standard Web Developer Toolbar you can go to the CSS menu item and select View Style Information (or just do cmd-shift-Y on your keyboard). This will turn the cursor into a crosshair. You can then move the crosshair over the tooltip and the entire css chain will display for the tooltip. This solved my particular styling problem by providing the hint that I needed to apply the proper theme class to the body tag. The system I am coding against does not allow me to directly alter or add to the body tag in the generated html. However I used dojo to add the class after load like this:
dojo.query("body").addClass("claro");
and everything (Dialogs and tooltips) work great now.