this is my first time using glyphs, but i know this much they are text, and can be styled just like any other text.
This is the reason I'm confused to why my glyphs icon is not changing colour.
I want it to change the colour from black(default) to white. This is my code:
HTML
<li><span class="glyphicon glyphicon-cog"></span><a class="lolo" href="Franchise-Details.php"><b>Admin Panel</b></a></li>
CSS
.glyphicon glyphicon-cog{
color: #fff;
margin-right: 2px;
}
where have a gone wrong? any help would be appreciated
It should be
.glyphicon.glyphicon-cog{
color: #fff;
margin-right: 2px;
}
You have missed a . before the glyphicon-cog and also the space between the two classes is not required.
As the space indicates that glyphicon class named element is parent and glyphicon-cog named element is under this parent, which is not the case in your scenario.
Since you are targeting the same element with two classes the syntax should be
.classOne.classTwo
Try not to override the colors of of your glyphs. You may need to use a different color for the same glyph elsewhere. Instead make a CSS class like:
.white
{ color: #fff; }
-and keep the margins to your "glyphicon" class, then reserve the "glyphicon-cog" class only for the data (before content *unicode) as this saves file-size because you do not need to define margins for every single glyph, only in the font-class: "glyphicon" -if required.
Then simply use in HTML as:
<span class="glyphicon glyphicon-cog white"></span>
Related
I am attempting to build a page that offers RSS feeds, just title and dates of articles. This is a snapshot of what I have so far.
.wp-block-rss__item {font-size: 12px; color: #000000}
.wp-block-rss__item-publish-date {font-size: 12px; color: #000000}
Now, the second line of code, tells me I got something right. The font size and color both change the date to what I want. But the first line, only the font-size is working, I can change the article title (rss item) font size, but the color remains.
I am also trying to hide the bullet point image that flows from the RSS feed.
I tried
.wp-block-rss_item::marker {display: none;}
For what it's worth, this is my first attempt at this type of CSS manipulation, I'm using the Chrome developer tools / inspector to help identify what needs changing. Prior, I had a web page that used a paid theme, and would just post "how do I do this?" and someone would reply with code within a day or two. I'd like to learn to do these simple things myself. Happy to clarify anything or post other details from the Chrome tool.
Adding this in response to comments - my inspector view looks like this. (yes, a different rss feed from posted above, same issue for all the feeds)
Try using !important behind your statements to override already given properties.
For example:
.wp-block-rss__item {font-size: 12px; color: #000000 !important}
writing this to make it easier for people to find the solution that i wrote in the comments.
To fix this the easiest way is to change the .wp-block-rss__item {font-size: 12px; color: #000000} rule into
.wp-block-rss__item a {
font-size: 12px;
color: #000000
}
Why does this happen? To make it easy, you are dealing with CSS specificity, which is what makes CSS so flexible (while also making it difficult for people to approach it). So, to get on your point, every HTML element has it's "basic" styling, in the case of an a like yours it's blue colored and underlined like it was showing in the first screenshot, but why was your code changing the font-size but not the color? Simply because the "basic" styling of the a doesn't have a font-size, but it has a color and that color was overriding your rule, this is because for CSS the rules that were applied to the a are more specific than the rules applied to .wp-block-rss__item which was the parent of the parent of your a. Changing the rule like i suggested you tells the browser that every anchor inside a .wp-block-rss__item has to get that styling, which, in this case is more specific than the "basic" styling. I'll give you an example, maybe it's easier to understand
.parent{
color: red;
}
.parent .green{
color: green;
}
.kid a{
text-decoration: none;
color: black;
}
.kid .custom-link{
color: white;
background-color: red;
padding: 5px;
}
<div class="parent">
<span> This text is red </span> <br>
<span class="green">This text is green</span> <br>
This is a normal link <br>
<div class="kid">
This is a custom styled link <br> <br>
This is another custom styled link with a more specific selector
</div>
</div>
Notice how the normal link doesn't get the color of the .parent (red) BUT when i use a more specific class .kid a both links in the kid element get the style without the underline and the color black. The second link has a more specific class so it gets the color from that.
You can read Here and over here for more info. I know this might look scary and hard to understand, but trust me, work with CSS for a month or so and it will become natural.
Hope I explained myself good enough, let me know if you don't understand something
The context is I need to use select elements built from a framework that I would prefer not to change (respectively jqxComboBox and jqxDropDownList from jQWidgets), and use their built-in placeholders.
jqxComboBox creates an inner input for that with the attribute placeholder="my text", so it gets styled correctly in browser-dependant placeholders gray.
However jqxDropDownList creates an inner span with the attribute unselectable="on" that by default appears in the page's font color.
I'd like to style the jqxDropDownList accordingly, but the gray changes following the browser. Is there a consistent way to obtain the placeholder color that uses the browser, without having to declare a different rule for every one?
example: this gray is nice for Firefox, but not on Chrome (the difference might seem small here, but it is accentuated with our CSS).
body {
font-weight: bold;
}
input { /*just for the example*/
width: 100%;
}
input::placeholder { /*just for the example*/
font-weight: bold !important;
}
span[unselectable="on"] {
color: #777777 !important;
}
<input style=type="textarea" placeholder="native browser placeholder color"><br>
<span unselectable="on">testing placeholder color emulation</span><br>
<span>what I have currently in my jqxDropDownList</span>
EDIT: partially solved my problem by overriding placeholders color for all browsers following this post's accepted answer, but still interested for the sake of pure knowledge..
Try using color: unset to use the default color for given element.
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
I've been instructed to make links on a website have a different colour underline than the font colour. It all seemed quite easy, using border-bottom as below, except that linked images are now also underlined.
Is there a way, without using JS, to stop happening?
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
An example - hovering over the below image now adds the border-bottom CSS style to it, which I don't want -
<a title="Dyne Drewett" href="http://test.dynedrewett.com">
<img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>
The only static way to do this would be to use a class on image links like:
<a href='http://whatever.url.here/' class='imglink'>
<img src='img/image.png' alt='Alt text'>
</a>
Then apply a CSS style to this class:
a.imglink:hover {
border-bottom: 0px solid;
}
You'd have to declare this AFTER the other a:hover CSS class.
Technically, you cannot set a style on an element based on what elements it contains. You cannot make the border of an a element depend on the presence of an img element inside (and this is what you are dealing with). Using classes would help, but from the comments, it seems that this is out of the question.
There’s a workaround: place each image at the bottom of the containing element (not on the baseline as per defaults), and shift it down one pixel, or whatever the border width might be. This way, the image will cover the bottom border, provided that the image has no transparency. CSS code:
a img {
vertical-align: bottom;
position: relative;
top: 1px;
}
This slightly changes the position of all images, so it might affect the overall layout unless you take precautions.
I'd suggest adding a class to the link, so you can do
a.imglink:hover{
border:0;
}
Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show:
a img{
margin:0 0 -1px 0;
}
That -1px might need adjusting based on your other rules
Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/
Your solution will require you adding an additional class name to links that wrap images (or anything where the border should be removed). There's no way to sort of "reverse select" unless you want to employ a JavaScript technique.
A jQuery technique would be something like this:
$('a > img').parent().css('border-bottom', 'none');
That will remove a "border-bottom" style from all anchor tags that have image as a direct descendant. But you'll need it on every page, and every page is getting parsed by this script, so it's a little added overhead on each page.
Otherwise, if you have access to the HTML, creating a CSS class to target these specific links such as:
a.img-link{ border-bottom:none; }
And apply it to any link that's around an image such as:
<img src="#" alt="" />
I hope that helps!
Another way to achieve this is to simply make the images in links relative and then offset the bottom to cover the border. 5px seems to do it http://jsfiddle.net/ECuwD/
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
a img {
position:relative;
bottom: -5px;
}
a:hover img {
border-bottom:none;
}
or perhaps...
a:hover img.attachment-full {
border-bottom:none;
}
Apparently, what you want is a different behavior for the same markup (<a>) based on its content.
Sadly, there is no real way to do this with pure CSS, as this language is not programming language and therefore lacks the condition structures, such as if.
That does not mean that there is no solution! Here is a couple of things you can do:
Declare (say) in your HTML that the element (<a>) should be handled differently (with classes, in your case either <a class="text"> or <a class='image'>.
Use JavaScript to change your style dynamically, which means based on conditions, such as content for instance. In your case it would probably be something like:
function onLoad() {
for (var element in document.body) {
// look for links
// if this is a link:
// look for image inside link
// if there is one:
// remove the border
}
}
So it's detailed here on how to remove the padding on buttons by overriding the class on the page: Can the button padding be adjusted in Jquery Mobile?
But how do I take this:
.ui-btn-inner {
padding: 0;}
And selectively apply it to one button, ie:
<button data-icon="false" onclick="alert('clicked me')">Button Name</button>
Doing anything like this doesn't work:
<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>
Thoughts? Creative solutions?
Thanks
Just set a new class for that button and then change subclass as below.
HTML:
<a href"#" data-role="button" class="myClass">Text</a>
CSS:
.myClass .ui-btn-inner{
padding: 0px;
}
I think I have finally found a solution (been trying to figure it out for a while now)!
Use the 'cascading' part of CSS to help you. If your button uses theme 'a' for instance, you can apply the padding rules of .ui-btn-inner to only buttons with theme 'a'. Just prefix the class you are trying to change, with the themed property.
HTML:
<a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>
CSS:
.ui-btn-up-a .ui-btn-inner,
.ui-btn-hover-a .ui-btn-inner,
.ui-btn-down-a .ui-btn-inner
{
padding: 0px;
}
As you can see, this means you have to create the rule for each state of the button, otherwise the padding will return for the split second when you touch the button.
Just apply a different theme (such as 'b') to the buttons that should keep their padding. You can go totally nuts with buttons using this type of CSS inheritance.
You can have an unlimited number of themes. I go to theme roller and create a default theme for every letter of the alphabet. Then, just override them with CSS to my heart's content.
This was a big sticking point when I was trying to use jQuery Mobile for a work project. They already had a UI design and I was tasked with making jQuery Mobile match it exactly.
I just wanted the icon to show with no border or background so I used your example, but the icon was shifted up so I used this to reposition it:
.ui-btn-up-mytheme .ui-btn-inner,
.ui-btn-hover-mytheme .ui-btn-inner,
.ui-btn-down-mytheme .ui-btn-inner {
margin-top: 2px;
border: none;
}
The html markup:
<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext"
data-theme="mytheme" data-shadow="false" ></a>