Is there a way - or anyone knows if someone already made this available - a way to style links in the form of buttons in the aristo style?
http://aristocss.com/
Using this CSS -reform a regular link to the style of a button?
You can more than likely copy all the CSS for those buttons and just use it on a link. In fact you'd probably be able to rip out a bunch of reset stuff as buttons often have all sorts of browser defaults which a link doesn't have.
So change:
button {
// Cut
}
to:
a {
// Paste
}
Hope that helps :)
(The css you need by the way starts right at the top of this file: http://aristocss.com/css/aristo.css)
Sure - just grab the CSS they're already using, change it from button to a.btn, add display:block, give your link a class of "btn" and you're all set.
Related
Hi I am new on here first of all nice to meet you all
I am facing a problem on wordpress
I am using "Quick Download Button" Plugin which the link is https://wordpress.org/plugins/quick-download-button/#description
after I have install it on my site I tried to change the button colour by css but I never ever success to change it. I have checked the button in inspect and I copied it but it didn't work.
what I tried was
.g-btn.f-l
{
color: #3c1c1c;
}
but it never worked.
please anyone help will be awsome thanks and sorry for my bad english
Like #jared said - it shouldn't be too hard to find the right selector and change the color within your browsers dev-tools. If you see the color change, bingo! Then if that doesn't work within your css file itself, you might have an ordering issue with your sites css files (i.e. your css is loading before the plugins). Quick way to test this is add the !important selector to that rule on your file - e.g:
color: #3c1c1c !important;
the css color-parameter is not defining the color of the button, but from the text of the button. if you want to change the color of the button, you need to look after "background" or "background-color".
example:
.g-btn.f-l{
color: #FFFFFF;
Background-color: #3c1c1c;
}
Visible example:
Source of example: Kryptonews Lexikon
I'm trying to change the class name of my header when I hover over it. The class name when NOT hovering is ".l-header.pos_fixed.bg_transparent.shadow_wide", but I'd like to rename it when hovering to ".l-header.pos_fixed.bg_solid.shadow_wide".
Is this possible?
EDIT: Maybe a bit more background information: I want to change the header of https://pinkypromise.pictures to the header of, for example, https://pinkypromise.pictures/contact when hovering on the home page.
To answer your question, yes, it is possible to change class names based on events (hover, in this case), but you will need javascript for that. You can't achieve this with pure css.
As others have mentioned, it is usually a better approach to have a css rule with the :hover pseudo-class. But also be aware that you might have problems with the intended result in touch devices.
A good source of information for these rules is Mozilla Developer Network. Please have a look at the full documentation for :hover's pseudo class on MDN.
Sorry I thought only the logo should change.
I see you site is using jQuery.
When I enter this in the console it seems to work fine:
jQuery('.l-header.pos_fixed.bg_transparent.shadow_wide').mouseenter(function() {
jQuery(this).removeClass('bg_transparent').addClass('bg_solid');
}).mouseleave(function() {
jQuery(this).addClass('bg_transparent').removeClass('bg_solid');
});
You don't need to change the class name on hover, just specify the styles that you want to apply when you hover:
header:hover {
// place the styles that make the background solid here
}
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 facing a problem related to css.My question is that I want to change background-color to black of any website page through url. I want this for study better to protect my eyes meanwhile I have eye problem. So what code to apply in the url to show the page black meanwhile we use this css rule like body {
background-color:#00000;} to output .I have attached two images for it to clear more better.Hope will get response as soon as possible.Thank you too much!
I think the best solution for you to it to take some of the recommendations above, and turn it into a bookmarket! That way, you can always click the button in your address bar and it will
1) Load jQuery if necessary
2) Change the background-color of <html> and <body> elements to black.
Here's a link to the JSFiddle. Drag the link to your bookmarks bar and watch the magic happen:
http://jsfiddle.net/lasha/GjQGZ/
No need for all the extra steps! :)
I would suggest you use some kind of glare reduction/warmer color software, like F.lux.
I use it and even with white backgrounds, my eyes don't get tired as much.
For SO site, where Jquery is used, you can type this in the console:
$('body').css('background-color', '#000');
And also you can change the text color to white:
$('body').css('color', '#fff');
If no Jquery is loaded, you can selet the body tag with document.getElementByTagName
you can't do it through a URL. However, since you're using firefox:
Alternatively, look in to a plugin like greasemonkey (or similar) and inject custom CSS styles on to the page you're viewing. Something like:
// ==UserScript==
// #name Readability Helper
// #description makes font more readable for custom viewing.
// #namespace CSS
// #include *
// #version 1.0
// ==/UserScript==
(function(w){
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "* {color:#fff !important;background-color:#fff !important";
w.document.body.appendChild(css);
})(unsafeWindow);
Brad already gave a good answer.
Alternatively you could use the Firefox add-on Color That Site!
The purpose of this Add-on is to let you easily change the colors of any web site you want. These color edits can be permanently saved and be im-/exported for sharing.
This can be done by applying some javascript to the site. After site is loaded, you can write in the address bar something like this:
javascript:document.body.style.backgroundColor = "#000";
Make sure to include 'javascript:' prefix part (if you copy/pasted it might happen that browser excluded it for security reasons).
This will work only locally, of-course!
UPDATE: If it happen for some reason this doesn't work in chrome, try to do it like this:
javascript:document.body.style.backgroundColor = "#000"; alert()
I didnt figure why or how but it works!
You cannot do such things with a URL (unless the server specified in the URL has special functionality for this).
You can use a user style sheet or browser add-on to impose your CSS rules. The ways to do such things depend on browser.
When using a user style sheet, you mostly need the !important specifier, since by default page (author) style sheet rules override use style sheet rules. Example:
body { background: black !important;
color: white !important; }
Note that this also overrides any background image that pages might set for body. And setting color whenever you set background is a good idea—you don’t want to see black on black, or even dark gray on black.
But it’s really more complicated. Any element can have a background (and content color) of its own. For example, if a page has <body><div id=content>...</div></body> and it sets background on that div, then you settings for body won’t have much effect.
At the extreme, you could replace body by * in the rule above, to make everything white on black, except those ingredients that are not under CSS control (like contents of images and possibly some form fields).
I was given a Wordpress theme to install for a new website and then asked to make some customizations.
The site is here: http://centergrovepto.org/townsend/ (I'm not sure where the original theme came from.)
There are 3 buttons along the right side of the front page slider. "Employers", "Candidates", and "Open Positions". The buttons were initially clickable and all they did was change the current slider image.
I'm trying to make them clickable so that they open the corresponding page. If you hover over each button you can see in the status bar that the link paths are setup correctly, but when I click the button nothing happens.
I'm guessing it is a CSS issue and some layer is covering up the actual buttons, but I don't know enough CSS to figure out what the cause is. I have the Firebug plugin for Firefox installed so I can more easily inspect the CSS. I've played around with changing the z-index of various elements, but I just can't get it to work.
I actually think it's your jQuery Faded plugin. It looks as if this:
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false; //THIS LINE PREVENTS DEFAULT ACTION WHEN <a> LINK IS CLICKED
});
}
Is preventing the default action of your links. I'm not sure what will happen, but try commenting the "return false" line out. See if any unwanted side-effects happen. Otherwise, add this code to your (or what I assume is yours) custom.js file:
jQuery(".pagination ul li a").click(function()
{
window.location = this.href; //UPDATED FOR EPHRAIM
});
I'm not exactly sure why this is happining, because if you open the link in a new tab, it works perfectly. It's possible that it's a css problem, but more likely, it has to do with your HTML.
What I would try is adding a target to your link. This will tell it to open the link specifically in the window your in, which may solve the problem. (I haven't tested it myself though)
Instead of
Try changing it to one of the following:
Or, if that one doesn't work, try this one as well
Let me know if that helps!
as I've seen on your site, the 3 buttons are linked like this:
a href="/townsend/employers/"
But i think it should be like this to work because a href="/townsend/employers/" does not refer to anywhere in your server
try changing it like so:
<a href="http://centergrovepto.org/townsend/employers/">