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.
Related
I have an odd issue with a website that I maintain: On the homepage, the text in the footer menu is 'invisible' (it's there, but the text is the same color as the background) only when I open it in a new browser session in Firefox.
If I navigate to another page on the site, the text is visible. If I navigate back to the home page, or open the homepage again in a new tab, the text is visible. If I open the page in Safari or Chrome, the text is always visible. It's ONLY an issue in Firefox, and ONLY when I open the homepage in a new browser session.
I'm not sure where to begin to debug this problem -- I checked out the CSS for the footer and it looks fine (i.e., the text color is correct).
The site is here: http://uucj.org
Any ideas as to what might be happening?
I noticed when I disabled this style (#mp-brick-174 *) in your CSS for the font family it appeared and was working.
Disabled Style: #mp-brick-174 *
Instead of doing this:
font-family:'Oxygen:Light,300';
Try this:
font-family: 'Oxygen', sans-serif;
font-weight: 300;
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.
Creating a Wordpress-driven site for a client - http://www.2sleeptight.com
It looks OK in major browsers, except there are some serious problems in IE. Navigation will not display horizontally and the site title is the wrong color. There are 2 stylesheets, style.css (main style sheet) and custom.css (edits I have made to style.css)
The Wordpress theme even injects the title color style directly into the page header here:
#header .site-title a {font:bold 60px/1em 'Rancho', arial, sans-serif;color:#ffc600;}
But IE still picks up that grey color somewhere.
spogue, the problem is the order of your CSS. The values are being inherited by your other CSS files and because they are executed last they become the master.
Simply add this to the bottom of your CSS file.
.site-title a {color:#FFC600!important;}
I have a web page with a phone number being displayed in the page header. The font color for that section of the page is brown.
When the page is viewed on an iPad, the iPad (correctly) detects the text as a phone number and automagically converts the phone number text to a "contact link".
My problem is that I am unable to FORCE the link color to be brown - regardless of what I do in the CSS file (including "! important" after the color statement), the phone number is always being displayed in it's own self-appointed color!
Any clues on how to get my CSS declaration to win the war?
It seems like ipad wraps the number in an <a>. I just added an additional rule for this:
Before:
.phone { color:red; }
After:
.phone,
.phone a { color:red; }
Have a look on this page (format-detection) ;)
Try this, it worked for me (change the color code):
a.phone[href^=tel]:link { color:#9F6; }
<meta name = "format-detection" content = "telephone=no">
Works for me. Check this for more detail.
http://developer.apple.com/library/safari/#featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html
(360) 687<i>-</i>8936
I have a client who is a crazy person. He wants his phone number all over the website, and in only one place does it clash with the iphone/ipad auto-linking parser.
So, adding the i tag around the dash fooled iOS into seeing it not as a phone