on a certain website I would like to change the appearance of a certain link. The operator of said website did something to it so that it does not work the way it used to anymore.
(I'm moderately new to CSS, this much in advance.)
The link goes [website]/internal/main.php?action=menu&id=[some number]. So far I've been changing it with
a[href*="main.php?action=menu&id"] { font-size: 30px;}
but that does not work anymore. So basically 'select any link that cointains that string and change the fontsize to 30px'.
However it would be really helpful/convenient to be able to edit it. Any other links on the page can still be edited via the above CSS. After reading a little I thought adding "!important" would solve the problem, but it did not.
I was under the impression that no matter what the website 'does' that the user has full control over what the browser displays, as it should fetch the 'intended' thing from the server and THEN add custom CSS to it, effectively changing it.
To that end I've been using the Firefox AddOn "Stylus" to edit/change the appearance. Other similar programs also did not manage to change said links. (Stylish, StyleBot for Chrome). It is the same issue on both Chrome and Firefox. I have not tried any other browsers but i imagine it is the same there.
I'd be very thankful for any pointers in the right direction, explanations of where my understanding of the matter is wrong and/or solutions to this problem.
Thank you in advance
Most likely the original CSS definition for links on tha site is done for the different states a:link, a:hover, a:active and a:visited
So you should change your rule to
a:link[href*="main.php?action=menu&id"],
a:visited[href*="main.php?action=menu&id"] { font-size: 30px;}
And similar for the two other states
Related
Have found great help with R on SO--now for something completely different.
I am working in WordPress 5.8.3.
I am building a website using the Blank Canvas theme, a child-theme of Seedlet--Not sure whether that is all relevant. I am a novice with WP and all things web development. I have installed the Events Calendar plugin and have it all configured with some test events and dates so no issues there. I am customizing the theme colours using the Additional CSS prompt from the WordPress dashboard interface.
I haven't gotten permission to publish the site, so unfortunately I can't offer a live demo. I will try to be explicit.
I have found helpful resources with instructions on how to use this utility for menus, for general custom CSS, and some useful information for changing properties of footers with CSS. Now I am trying to modify hyperlink colours within the Events calendar widget. I have approached this problem the same way as all the others but this one has stumped me. I elaborate:
From this image, you can see the Events Calendar hyperlink text is yellow. I opened the inspector and determined that this object is called .tribe-events-widget .tribe-events-widget-events-list__view-more-link. I thought the following code should change the colour
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:#000;
}
It does not. This code makes no visible change. However, when I also change the background-color like this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
background-color:black;
color:#000;
}
The result is:
This led me to believe that there is no colour option for this element---HOWEVER, the inspector shows that this element has the 'color' property:
And I'm stumped. I'm not even sure when or how this color-link-accent got defined. This check-mark toggle is not a permanent solution and besides, I would very much like to understand what is going on here.
Any advice would be greatly appreciated.
It's a bit difficult to be certain of the problem as we don't have the context, however I was surprised that you saw just this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link
and didn't find an anchor (a) element within it.
I would have expected that you'd have to do:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link a {
color:#000;
}
as it is quite likely the anchor element will have its own special styling which will override your setting because of the increase specificity.
If that doesn't work then use your browser dev tools inspect facility to find out more about the context of that a element - you may need to give even more hints to the browser on pinning it down.
Well, this would have helped me, so I will post the solution to my question for posterity. I learned from this question and thread about overriding cascading commands. I still don't understand where the command producing the yellow text in the first place was, but I managed to override it by appending !important in my CSS. The full CSS to turn the text from yellow to black is:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:black !important;
}
Reading on, this does not necessarily mean that I was specific enough about the context although I find it hard to tell in this case. This reference has some other useful info as to when it is appropriate to use !important. It seems this is not the optimal solution.
Hope somebody else can benefit from my toiling...
Dots & Dashes currently has a rather unsightly nav-above box on its blog pages, as seen above the below post:
http://dotsanddashes.co.uk/blog/huge-moves-savage-sister/
Having inspected the element on Chrome, it seems easy enough to remove it via HTML, although I'm struggling to find all the applicable bits in the CSS stylesheet... I think/ hope this is a pretty rudimentary fix, for which I apologise in advance, but my grasp of CSS is slightly dodgy in truth..!
Thanks.
You can hide it with CSS using the rule:
#nav-above {
display: none;
}
This will remove it from the flow of the page so things should appear the same as deleting from the DOM tree in the Chrome inspector.
Note that the relevant source and images etc are still downloaded by users so ideally you should actually remove it from the source if you no longer want it.
Site:
oldfashionedgoods.com
I'm using SquareSpace to build a splash page for my site, and while I've been able to figure everything out, this last thing plaques me.
I'm trying to have it so when you type your email in to the submit field, it uses the font Cutive Mono, just like I'm using for the text above the box.
So far I have this:
input[type=text] {
color: #cc5723;
font-family: cutive mono;}
While I do not want it to be that amber color, I was messing with the color to make sure I was working with the correct item. The text changes color as I type, but the font will not change. What am I missing here?
I'm a complete newb so sorry if this is a dumb question! I already looked everywhere online, but nothing seems to work. Thanks!
I suspect it is being overridden by another CSS style. Try using:
input[type=text] {
color: #cc5723;
font-family: cutive mono !important;}
If that works then it is being overridden somewhere in your CSS.
NOTE:!important should only be used to test. It is not a solution.
I have tried a basic example here: http://jsfiddle.net/n4S3s/ which seems to work fine.
Your other styles have priority over this. Use
font-family: cutive mono !important;
to test.
Yep. important! works. I just wasn't sure of it, but here is the
DEMO
The other answers are correct; other styles in your CSS are overriding this one. I'm not sure I like using !important to force the style; I think of that as a last resort. But it's good for testing.
But more importantly, would you like to know how you could figure this out for yourself? Use the Developer Tools in Chrome (or any browser). Simply right-click the input element and select "Inspect Element". Then look at the Styles panel in the bottom right and you can see what styles are in effect for this element, and which CSS rules they came from. You can also temporarily toggle off any styles, edit the styles, etc.
Stack Overflow is a fast way to get questions answered, but the Developer Tools are much faster! :-)
I'm working on this little film's website, which I'm temporarily hosting at http://ivanfuentes.com/nolovelost/
After loosing my job in film, I decided to start working on my other passion, web pages... I've been learning a lot of html5 and css3, but still a newbie, as I discovered... my client asked me to build a Wordpress site, and I when found Atahualpa, I thought it would be a great idea to adopt it, so he can have lots of control over his site, with ease. Never again! From now on, I'll try to start as much from scratch as possible.
He wants to have the current page written in a different color on the side menu. For that, I used the current_page_item identifier from Wordpress, which actually did work, as I tried with different parameters, and, for example, did transform all the text to uppercase. But for some reason I still can't figure out, it does NOT change the text's color!
I checked the code using Chrome's "Inspect element" option, and as I can see, the browser did identify the item as "current_page_item", only it did not want to apply the specific color change (it's striked out).
Anyone know what could it be? I've been busting my braincells trying to figure this one out, to no success so far... any help, even just a hint at where to look for, with no further explanation, will be so, so appreciated, as this is all the work I now have. So also, if anyone wants to suggest any other ideas to stop being such a noob, I'll be glad to listen/read!
Thanks!
CSS tip:
The more specific the CSS, the more precedence it takes over existing CSS targeting the same items. Target the css like so:
.current_page_item a{color:/*YOUR COLOR HERE*/;}
If that is still being struck through, then make it more specific:
#DIV_ID #MENU_ID .current_page_item a{color:/*YOUR COLOR HERE*/;}
You can continue up the tree in that fashion adding more layers of specificity until it's the color you want, or you can do a manual override like so:
.current_page_item a{color:/*YOUR COLOR HERE*/ !important;}
That will ensure that your CSS won't be overridden, but I personally try and avoid using it unless absolutely necessary.
I'm trying to change cursor mouse on my website with custom images.
Here is my actual CSS:
<style type="text/css">
<!--
body {
cursor:url(images/default.cur),auto;
}
a:hover {
cursor: url(images/hover.cur),auto;
}
a:active {
cursor: url(images/wait.ani),auto;
}
-->
</style>
Firefox 3.5.6 does change the default cursor with my .cur file but the problem is that .ani cursor doesn't work with Firefox (and even .gif). It does work on IE.
The cursor files I'm using can be found here.
The other problem is that I'm just changing a:active image to animate my cursor but it disappear fast.
I would like to change cursor when we click to go to some page and the cursor to become "normal" once this page is loaded.
What I'm looking to is a way to change cursor when somebody clicks on some internal links of my website.
I wouldn't have to change all my links to do this, but it doesn't seem to work.
I thought about some window.onload JavaScript but I didn't achieve to write it and there might be better ways.
Thanks for your CSS or JavaScript suggestions.
Please don't give design feedback when asked for programming solutions. It is not the role of developers to pass back design critique. It may not be his decision, it may not work but he wants to try it and we should help. If you've been in an environment where programmers pass critical judgement on every design decision you'll realize its very destructive for the whole team. Designers and team members will value you a lot higher if you refrain from commenting on whether or not you agree with what they want to do unless asked. I hope if you think about it you will understand why its important.
Don't. How would you like it if you went to your friend's myspace page and your cursor suddenly turned into a big purple dragon and you had no idea where it was actually pointing.
It's jarring to the user, therefore irritation. If you want to let them know something is working in the background use an animated gif displayed over the page, not as the cursor.
If you have too, you may be able to set it with javascript on all your the elements on the page. I don't think it cascades. If it does, just set it on body and be done with it.
if using ASP, it simplifies things a bit to use resolve url... ie
cursor:url('\<\%\=ResolveUrl("~/img/magnify.cur")\%\>');
Evidently I'm inclined to agree with the other statements, as familiarity is key in any good design, customizing an environment to such a degree that the user feels either unfamiliar with it or under the impression that somehow their system is altered,is a bad bad bad design and reflects poorly on the designer as well. I'm not saying be dull in design, but be a tad reserved.
I might not like MetroUI (rather Metro Web Design) much, but I love it's root,the design concept of "Bauhaus".
"There is beauty in simplicity."