In Firefox, I can search for text using either
CTRL+F [normal search]
/ [quick search]
' [quick search, links only]
I can style user-selected text / links using
a:focus
a:active
::-moz-selection
However
the first two seem to apply only to user-selected/focused/activated links (by mouse, or TAB-navigating).
::-moz-selection seems to be applied only to the text I manually selected, not the text that is selected due to incremental search. The incremental search match is highlighted by Firefox in the greenish color.
when I search only in links ('), the searched part is being highlighted by Firefox in the same greenish color; moreover, the whole link gets outline; when the quick find disappears (~5 secs), the whole link gets :focus style applied -- not before that.
See the screenshot:
Is there any CSS pseudoclass to allow styling of selection that resulted from the search, not the user hand-selection?
From this mozillazine forum post, you can go to about:config and add one of the following to style different ui.text* settings on the browser chrome:
ui.textSelectBackground
ui.textSelectBackgroundAttention
ui.textSelectBackgroundDisabled
ui.textSelectForeground
ui.textBackground
ui.textForeground
ui.textHighlightBackground
ui.textHighlightForeground
Related
I am trying to build a chrome extension that changes the color of websites for colorblind people. One of the features is changing the color of links that have been clicked.
I have tried "a:visited" and it works for most links, but does not work on the actual Google search page. I tried inspecting the page and found that the links are h3 elements. I then tried using the h3 selector, but it changes the color of all of them. How can I make it so that it only changes the color of the links clicked.
Here you can see that the clicked links are orange-brown and the other links are blue, but the website names remain black
Those h3 elements are inside a elements, so you can address them like this:
a:visited h3 {color: red;}
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
I am using the Firefox Developer Edition theme on MacOS to reduce eye strain while programming.
However, results while typing in the location bar still pop up bright white.
Does anyone know of CSS to have these results use a dark background and light text?
Generally, if you are looking for an add-on which will change this, then a theme would be appropriate. At least one of the themes I use does style the URL Bar's auto-complete results. An extension could also change the styling, if desired. However, given that you are not wanting a completely different theme, just a minor modification to the Developer Edition theme, it is easier to do this yourself by applying CSS to the profile's chrome by placing the CSS in userChrome.css.
To do it for yourself, you need to determine the appropriate elements to style. As is often the case, the add-ons DOM Inspector combined with Element Inspector are quite useful in determining the appropriate elements to style. With those add-ons installed, opening the auto-complete drop-down and Shift-Right-Click results in seeing the DOM for what we want to change:
Thus, we can put the following in the profile's userChrome.css, which needs to be located in the [profile directory]/chrome directory:
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
/* set default namespace to XUL */
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#PopupAutoCompleteRichResult {
background-color:black !important;
-moz-border-top-colors:black !important;
-moz-border-top-colors:black !important;
-moz-border-left-colors:black !important;
-moz-border-right-colors:black !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
background-color:black !important;
}
#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
/*#PopupAutoCompleteRichResult .ac-url-text,*/
#PopupAutoCompleteRichResult .ac-action-text {
color:white;
}
This results in the URL Bar auto-complete having a black background with white text:
Ok, after doing quite a bit of Internet digging, I found probably the only solution, which also isn't really one.
As of writing this, there is no such Plugin/Add-on/Mod for changing the style of the search bar.
However, you could change the source code of Firefox itself. To do so start here: Mozilla Dev GUide. Its mainly written in C & C++. I mean, there really is no option for that.
There are settings, somewhere deep down in Firefox, where you can actually get such an add-on, I couldn't find it tho.
You can turn off the search bar completely, so you get your results on google, after hitting enter.
A thrid option would be, to try another browser. Just check, which browser allows you to style the search bar and apply all the other Dark Themes to that browser later on.
Hope, I didn't make it worse :/
This is a most basic question about formatting text links in css
I have tried to do it myself. I got the hover to work -- at least in firefox. But can't get the default color to work. Only hover.
Please look at this development page http://ogrowby.com/ in firefox.
There is a menu about the middle of the page, called "Test Menu". Please click on that. Then, in the dropdown, go to "TEST LINK".
When you hover over it, the text color changes to Gold. That is fine. But its default text color is black and I want it to be white. I may also want to change the font size, etc. But the main thing is to get the css working to set the default text color for this class to WHITE. #ffffff.
Here's my css so far. The hover is working, but the default remains needs to be changed to #ffffff Only for the .roundedblue class. And it needs to work not only in firefox but other modern browsers.
Any help will be appreciated. Thanks
Rowby
.roundedblue:link,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: white;
}
.roundedblue:hover,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: #FFB300;
}
If that is the only link you want to change, you should add an id to it and change the id's css properties. If you want multiple elements to have the same properties add a class to the element (if it doesn't already exist).
Then simply edit its properties as you would normally.
color:white;
font-size:14px;
...
I simply changed the styles in inspector and it worked for me. added "style='color:white;'" to your span.
http://alleystoeden.org/testing3/index.html
in windows safari 5.1.7, the primary navigation, both regular and when hovered don't look right. in fact, when not hovering the main menu is practically unreadable it's so light. the drop down menu is fine and fonts there are rendering properly.
body text (visible on the contact form page) are also rendering correctly.
i've tested it on iphone and it is fine there.
is there some code i can add to this template to fix the windows safari font problem with just the primary menu?
i'm not sure what part of the code i would copy and paste to show what i'm currently using, but if you can tell me the name, i can copy and paste it here.
thanks so much
In your CSS file (styles.css, line 1197) you have the following declaration:
white .nav--primary > li > a {
color: #CCC;
}
Change this light grey to a darker colour and you should be fine.