I've been looking for ages with no luck. Our e-commerce site has application links in a lookup table to a detail table containing info & shopping cart buttons. In browsers where it works, "focus" sort of does the job (on the anchor cell at least), but I need ideas on how to have the entire link target row change background color or text color. The site is www.maxrules.com, an outboard motor parts supplier. "http://maxrules.com/fixomcsealkit.html" is one page with the basic idea. Click one of the part number links to the detail chart. I need the target line to somehow differ from the rest so customers are sure to get the right one. This probably involves js as well but not sure which forum to post in. This seem more appropriate.
CSS has the :target selector for this
:target { color: red;}
It's however not supported by IE 6-8. For it to work on IE you need JS. Something like
<a href="#name" onclick="document.getElementById(this.href.substr(1)).className='target';">
than in CSS use
.target {color: red;}
Only downside is that this script doesn't remove the class if some other link is clicked, so you can end up with multiple products with red color. Can be fixed with some more JS, but I leave to up to you
PS. in case of the maxrules site, you don't need the empty <a> elements, you can just add id="1212" to the <tr> element. This also fixes that currently the top part of the part is clipped, when clicking on a link.
Related
I am newbie with javascript and trying to code a very simple page.
I meet this problem. As you can see in this picture, I code some elements named Home, Bane, Tour, Contact, More and all of them have underline.
As tutorial, they must have text-decoration at something called web-kit-anylink in user agent stylesheet.
But as you can see in this picture picture about this problem, when I click to Home for example, the user agent style sheet show only body, not more.
I just want to change the text-decoration from underline to another one. But at first, I want to show it in the Styles of the Elements .
Could you please help me in this problem ? Thank you very much for your time.
It seems you clicked on the body, not on the a element.
If you select an a element, you can see the text-decoration on Styles Panel.
To do that, simply click on the button I showed with the arrow, and then click on Home link.
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've inherited an .asp website and had to update the pages to relocate forms in tables to the sidebar.
It's worked fine on all but one page which stubbornly refuses to accept my css and is taking values from who knows where.
I've tried debugging in Firefox/Chrome and even written rules in the head of the page but to no avail. Is there a tool for identifying this kind of thing? I'm no slouch with css but this is baffling me. I don't want to resort to javascript to fix this as I see it as a fundamental issue.
Is there a way to find out where a css rule is coming from?
You may use web inspector in Chrome.
Right click on failing element and select inspect element.
You should end up with web inspector window with two sections: left is html nodes tree and right is styles and properties of selected node. Failing element should be selected already.
Next you need to expand "Computed Style" tab and look for offending style.
When found, you'll see small triangle to the left of style definition - it is clickable. On click it should expand list of selectors that affects this style for this element. You'll see url to css for each of this. Bingo.
As pointed out by austin and Waterlink the Computed styles (or Computed in FF) tab can show the currently applied styles, and their origin.
However, the Styles tab is also very useful. Upon right-clicking "inspect" on an element, the Styles tab will show a Full list of all the active styles and overwritten styles related to the inspected element. (Shows them as they were written in the CSS. Not what is actually being rendered)
That way you can tell which styles were overwritten in which order. A style in your css could be overwritten from an inline style, user defined style, a later defined css file or a css rule of higher importance, or even a non-css-attribute such as width/height attributes directly on a HTML-element
The formatting shows the status for a style:
normal text = active
strike through = inactive since another style has overwritten it
greyed out = identifier not applied. ( If you are inspecting the Style of a <p> element and the css identifier is p, span , then the span identifer would be greyed out)
Example:
In this image, the color property of #post a is inactive. It has been overwritten by the color property in #cashieCatalog.
In the HTML tab of Firebug, you should see a panel on the right with tabs Style, Computed, Layout, and DOM. Select Computed. This will show you the "current" style being applied to the page.
If you expand a rule node, you should see a link on the right showing you which style sheet it is coming from, along with stylesheet rules that are being overridden.
I don't even know where to start.
On one page of my project, when you enter the page for the first time, some parts of the site disappear and some don't get styled (e.g. border-radius doesn't work).
First off, some parts of the header shows up again when you hover over links, or select some text (that is actually invisible before selecting). Everything looks as it should when you refresh the page.
Before I found out that hovering or selecting fixes some parts, I thought that styles don't get applied or something like that. I've even tried to remove all the #imports and check if that works.
This happens only in Safari, styles get applied to proper elements but those are not rendered properly and are not visible.
I don't even know which parts of my code should I post here since it's just basic CSS and it works perfectly everywhere except Safari.
Any ideas?
#edit:
Here's an example of an issue (link your profile is shown, cause I hovered over it)
And when you select some parts of the invisible text and than deselect, it shows up:
This is Bootstrap based site, and here's the code for this alert:
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>You are not connected to Stripe yet.</strong>
<p>Other people will not be able to find or participate in your experiences until you connect to Stripe. Go to your profile to connect to Stripe now.</p>
</div>
Regarding the styles, it's basically just some padding and, obviously orange gradient. On the screenshot, you can see the border radius but sometimes it's not there.
An advice by a friend of mine: put empty style tag in your document worked! Just placed line <style></style> in the header and everything works.
Check out safari developer tools : https://developer.apple.com/technologies/safari/developer-tools.html
Posting screenshots of individual problems along with html snippets would help us narrow down the issues.
I am trying to program a TAB based paging.
My problem is each Tab contains a different background, so when I click on the hyperlink, the new background DOES NOT load, BUT the content loads.
Any ideas?
Code here
http://jsfiddle.net/rgarimella/AnBEc/1/
Tested your jsfiddle, adding !important to your css rules does the trick: http://jsfiddle.net/AnBEc/2/
Edit:
Depending on what effect you are looking for you could also remove the .ui-content part of each rule (so that it's just #services) that would apply the background to the whole page and not just the content part: http://jsfiddle.net/AnBEc/3/