Using bootstrap 3 on a drupal site, how can I change the color and weight of links pointing to the currently active page? I tried using a:active but that does not do what I was expecting.
Drupal is adding an "active" class to the links to the current page. This is different than setting the property of an <a> to "active". Use the selector a.active in your CSS instead of a:active. You should be able to inspect the properties in developer tools to ensure the class being added and how to target it.
On the server-side, you can make it with javascript.
The theory
Make a css class with the styles you want (you can name it .nav-active or whatever you want.
Then append the class to an element with a javascript click function, here's an example using jQuery.
$(".nav-item").click(function(){
$(".nav-item").removeClass("nav-active");
$(this).addClass("nav-active");
});
Here's a pen so you can see how it works:
http://codepen.io/edfreitas/pen/PqbWbP
Related
I want to apply different colors to a few font-awesome icons inside an A tag. However, the CSS class seems not to be applied? I want grey (inactive icon) and yellow (active icon), but I get blue (active icon) and black (inactive icon) which I assume is Bootstrap defaults.
Visit https://jsfiddle.net/q1um77ax/1/ for a fiddle
NOTE:
The colors must be applied using classes as I am making dynamics theme features to my site and the same class tag is in several CSS files with different colors depending on the theme.
You didn't use the appropriate classes, use this for example:
.themeIconStatusInactive {color:red;}
It works!
You have used wrong css class name: .themeIconStatusActive
check it here: jsfiddle.net/q1um77ax/1/
You have used different classes on the Icons, that's why you didn't get the css applied! replace themeIconStatusActive with iconIndicatorActive for example and it will work!
Turns it out is was a cache issue. The old CSS was still cached in the browser. Duh. Thanks guys.
I am using Kentico 8.2 and running into the issue where I need to have different styles for my forms. I have been able to alter the input attributes without a problem, and thereby create different styling for the forms in the site. However, I cannot get the .FormButton to change style if attached to my CSS for the button, ie .newPage .FormButton { background:red color:white }.
Is there another way to populate a CSS on top of the form button in 8.2 without having to add a class attribute in the code behind?
You don't have to touch the code behind. You can just wrap the form in a div with a CSS class using either content before/after or a web part container and leverage CSS Specificty by creating a more specific CSS selector including your new class (e.g. .myRedForm). The resulting selector would look something like this: .newPage .myRedForm .FormButton { background:red color:white }. The last resort would be using the !important directive which I would rather avoid.
Best way to do this is to render the form on a page and inspect the element by using F12 or FireBug. Either one will allow you to view the source and inspect the elements in order for you to get your selector to style it accordingly.
You can also specify a css class by creating your form layout manually and adding CSS around the button. Not ideal because you'd have to build your forms manually each time.
In light of GMail's questionable support for CSS, I'd like to apply style elements to everything in the HTML email I'm assembling.
I'm currently using MVC3's Razor to construct the email, then sending off the generated HTML. Is there any way for me to write the template with a style sheet, then transform it such that each element gets a style attribute with the appropriate styles?
For instance, in a normal web page, I would have something like
<style>
a { color:#1c5567; }
</style>
Click here!
If a GMail user looks at this, they won't see it in that shade of teal. However, if I do
Click here!
they will. But that is a huge maintainability headache. Thus I want a process that can take HTML with the former style and output it in the latter.
. For this, I want to take that existing CSS style and transform it such that style="color:#1c5567;" gets added to every <a> on the page.
It might be the lamest way to do this but you could use a simple CSS parser like this one CSS Parser and add style attribute as required.
Since you're overriding the style in gmail from an external stylesheet, you need to use !important to override the style.
a {
color:#1c5567 !important;
}
I've added a TrustPilot Widget to my Website.
I want to overwrite the current stylesheet being imported from TP. I thought I'd just add a class around the div and then style it in the css with the use of !important however all attempts have failed.
I was wondering if anyone has a solution for this?
You have to manipulate it through javascript as they write the sprite image in the element itself, witch overrides any other style rule.
a simple jQuery
$("#tp_widget div").attr("style", "");
here's a live demo on how to custom the top header: http://jsbin.com/usadit/3/
and you can edit it through the /edit url as: http://jsbin.com/usadit/3/edit
Anyone know of a tool/Firefox Plugin that would allow me to click on a DOM object in a page and give me the CSS inheritances that Is needed to style that element?
So if there are a bunch of nested elements ol li ol li etc... what should my CSS look like to style said element?
The Web Developer extension is excellent at this as well. The shortcut is Ctrl+Shift+F to activate the click interface...click on any element to see a full inheritance tree.
Firebug will show you the full path to any element (on top of the HTML tab), but it won't automatically generate a CSS selector.
Have a look at firequark .. It is an extension for firebug that extracts css selector for a single or multiple html nodes
There's no one way to create a selector. Ultimately, doing a full ancestry chain for your selectors is asking for trouble, because whenever your document structure changes, your selectors will break. My rule of thumb is to use #id selectors for singleton elements in your document (i.e. #mainNav or #content) and .class selectors for elements that repeat or for mix-ins (i.e. .menuItem, .external).
You want Firebug.
Once you install it, you can right click on any element in the page and choose "Inspect Element" from the context menu. This shows everything you need to know about the element, including a list of all the CSS styles that are acting upon it. For your purposes, you would probably want to use the first selector in the list.