i have this line:
echo "<td class='td_show_contact_item' color='#ff0000' align='left'>".link_to($msg->getSubject(), 'messagebox/read?cursor='.$cursor,'class=link_medium_red')."</td>";
i cannot find where td_show_contact_item is defined?? i grep'd it but found nothing so i want to just override the color property as it is now the link text is blue and only when you hover over it displays red..i want the link text red please?
thank you
To find td_show_contact_item you could use FireFox FireBug plugin.
To change the color of this element, you could write it inline like:
<td class='td_show_contact_item' style='color:#FF0000 !important;' align='left'>
Or add a second class:
.td_class, .td_class a, .td_class a:visited
{
color:#FF0000 !important;
}
<td class='td_show_contact_item td_class' align='left'>
Notice !important has been added to ensure the current style is overridden.
It's best to do this via .css, since the link-color is not the same as the td color.
If it's really not defined, you can add the td_show_contact_item to your css file, and change the link-color for links within
.td_show_contact_item a {
color: #ff0000;
}
(Perhaps, add .td_show_contact_item a:visited as well)
echo "<td class='td_show_contact_item' style='color=#ff0000; text-align=left'>"
.link_to($msg->getSubject(), 'messagebox/read?cursor='.$cursor,'class=link_medium_red')."</td>";
Related
I'm pretty new to react-js or css and i want to hide a css object.
This is the code
I tried to hide (make it unclickable) the object with this code
.react-aria9431256528-7
{
display: none;
}
but this only works temporary. Every time i load the site, the id changes. How can i reference this object in way that it will always work? I was thinking about the aria-label since it is constant but how to i reference it?
Is there a better way than just to hide it?
If the aria-label attribute is unique, you can use the attribute selector syntax ([attr="value"]) as follows:
[aria-label="Help"] {
display: none;
}
Help
You can use this for example.
a[id^="react-"] {
display: none;
}
a[id^="react-"] {
display: none;
}
<div>
<a id="react-area1">1</a>
<a id="react-area1">2</a>
<a id="react-area1">3</a>
<a id="area1">4</a>
</div>
Is it the link (a href='...') that you're trying to hide? You could use the aria-label as already said. Here is another solution :
I've noticed that there is a parent div with a class "dropddown". You could target your link with css like below:
.dropddown > a {
display:none;
}
That should do it normally. If not add the important flag :
.dropddown > a {
display:none !important;
}
PS, don't forget to fix the naming of the class dropddown by the way (one d) => "dropdown". That makes me believe that you have control over it ;).
In a page I have an HTML element
<span class="ysf-game-status ">
<a class="F-reset" href="http://sports.yahoo.com/nfl/miami-dolphins-washington-redskins-20150913028/" target="sports" onclick="pop(this)">Sun 10:00 am # Mia</a>
</span>
How would I change the text color of the Sun 10:00 am # Mia text?
I tried
.ysf-game-status > .F-reset {
color: blue;
}
but that did not work. However, I created a jsFiddle and it seems to work there. What am I doing wrong?
Here is a link to an example page I am trying to modify. I want to change the text below the player name to a different color.
The color is set by a rule with the selector #Stencil .F-reset. As this is more specific than the selector that you use, it takes precedence.
You need a selector that is as specific and comes after that rule, or a selector that is more specific. You can use the more specific selector:
#Stencil .ysf-game-status > .F-reset {
color: blue;
}
Try
#Stencil .F-reset{
color:blue;
}
The ID is more specific. Unless you target that, it is being overwritten.
Try this, it will work
#Stencil .F-reset {
color:blue !important;
}
Use just this:
.F-reset {
color: blue;
}
I think you dont need more than that. But if you use this class more than once and you want this specific just use like this :
.F-reset {
color: blue !impotant;
}
I'm trying to override the background of my rows in the table
This is what I did:
<tr style="background-color:#000099 !important;">
and this was the result:
http://onlinehandytools.com/blah.php?board=EDE&level=AL&subject=biology&year=2010
I've spent 2 hours on that, I've googled everywhere nothing seems to work
The only thing that have worked is
<style>
td{ background-color:#000099 !important;" }
</style>
But I don't want to do this, I will have different background colors of rows.
I tried to make seperate classes for each kind of row but td.classname didn't work either
You don't have to add !important to inline css as it has the highest priority.
Just do this:
<tr style="background-color:#000099">
I think you want to add this to your kindo css file , because kindo script will overwrite your css:
kindo.common.min.css:line # 9
.k-grid td
this is the css for the td just add your background color.
Edit:
Maybe this is what you are searching for:
$(document).ready(function(){$(".k-grid td:contains('Jan')").css("background-color","#000099");});
this is how it looks
Modify your html to this
<tr class="grayRow" > ... </tr>
<tr > ... </tr>
and then just set your style in css file like this
tr{
background-color: #fff;
}
tr.grayRow{
background-color: #ddd;
}
It shout be worked.
If you will change style from your css file NEVER use !important; flag on element in your html.
like this
<tr style="background-color:#000099 !important;">
I have check your alternative rows is added a class "k-alt" in <tr> with color #f5f5f5; Even you have <tr style="background-color:#000099 !important;"> , it will override by the class, because HTML parse out 1st then only insert the class "k-alt" by function. I suggest that you using jquery remove the "k-alt" or replace the "k-alt" background color by jquery.( I have see ur webpage have install Jquery Libary)
Replace the background
<script type="text/javascript">
$(function() {
$(".k-alt").css("background","#000099");
});
</script>
Or Remove the background
<script type="text/javascript">
$(function() {
if($("tr").hasClass('k-alt')){
$("tr").removeClass('k-alt');
}
});
</script>
Havin a table with kind of
<tr bgcolor="#aacbdd">
And I use reset.css which says
...td { background: transparent; ....
And this rule removes all backgrounds set in bgcolor attribute.
But I can't just refuse using reset.css
And I can't change HTML (there are tons of plain HTML in the site like this)
Goal is to save these bgcolor backgrounds.
I tried
.ololo tr
{
background: inherit;
}
But no use. How do I?
If you only have a few colors, you can use an attribute selector:
[bgcolor="#aacbdd"] {
background: #aacbdd;
}
[bgcolor="#c73cab"] {
background: #c73cab;
}
Here's the fiddle: http://jsfiddle.net/JN3wW/
If you have many many different colors, this can get unwieldy. I'd advise you to rely on JavaScript for that. Here's an example using jQuery:
$('tr[bgcolor]').css('background-color', function () {
return $.attr(this, 'bgcolor');
});
Here's the fiddle: http://jsfiddle.net/JN3wW/4/
You're using a CSS/Stylesheet reset, and in stylesheets, the latest definition will be used.
So try setting the style property of the tr rather than the element attribute.
<tr style="background-color:#aacbdd;">
I've been trying to figure out on how to set the current page I'm at to a different background color than the other links, but to no avail.
HTML
<div id="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
</ul>
</div>
What I want is to set the current active link to black, and the other four links to grey. That way if I visit Portfolio, for example, that link is black and the rest are grey. How would I do this?
Thankfully, there is no Javascript involved. HTML and CSS will work fine for this task. First off, let's create your HTML. You obviously know what page you are on, so we are going to add a class to the current page's link. So, for example, if we were on /index.php/home our markup might look similar to this.
<div id="navigation">
<ul>
<li><a class="current" href="<?php echo base_url() ?>index.php/home">Home</a></li>
<li>Portfolio</li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
</ul>
</div>
Now, before we color the current link we are going to color the rest of the links. We can select the rest of the links via CSS like so.
#navigation a {
}
The following CSS will select all <a> elements that are children of the navigation element. So now we need to set its background color. The CSS property for setting the background color is background-color: xxx. Where xxx is either the hex code, rgb value, or the name of the color. So we would do the following to have all the links grey.
#navigation a {
background-color: #333; /* or whatever grey you want. */
}
This will set every link to the color grey. Now, we need to set the current link to the color black.
If you noticed, we added class="current" to the current link, the home link in this case. Next we need to create the appropriate styling for this. Our CSS declaration will look similar to this.
#navigation .current {
}
The above declaration applies to all elements with the class current that is a child of the element navigation. And so now we set the background color like so.
#navigation .current {
background-color: #000;
}
So, our final CSS would look like so.
#navigation a {
background-color: #333;
}
#navigation .current {
background-color: #000;
}
Note that the order is important! If we were to put the second declaration first, it would be overridden by the, more general, link declaration.
You have two options, you can use PHP and CSS, this is better, because this is client independent.
Second option is to use Javascript and CSS
PHP & CSS
I prefer this way!
You need to check on every site if the current page is equal to each menu link. Here are some snippets of my solution. It works fine for my site.
I don't know if its working with your way for linking: index.php/home. Think you have to adapt it. Because I use real files like home.php and blog.php
this is the menu.php, I include it into every site:
<div id="menu">
<div class="innertube">
<ul>
<?
markIfCurrent("Willkommen", "willkommen");
markIfCurrent("Salzgrotte", "salzgrotte-am-fehn");
markIfCurrent("Heilwirkung", "heilwirkung-des-salzes");
markIfCurrent("Farbtherapie", "farblichttherapie");
markIfCurrent("Salzshop", "salzshop");
markIfCurrent("Erfahrungs-<br/>berichte", "erfahrungsberichte");
markIfCurrent("Fragen und Antworten", "fragen-und-antworten");
markIfCurrent("Preise", "preise");
markIfCurrent("Galerie", "galerie");
markIfCurrent("Presse", "presse");
markIfCurrent("Praxis", "praxis");
markIfCurrent("Anfahrt", "anfahrt");
?>
</ul>
</div>
</div>
Now the php functions:
/* filter selected menu items */
function markIfCurrent ($name, $link) {
$should_mark = isCurrent($link);
if ($should_mark) {
$first = strtoupper(substr($name, 0, 1));
$rest = substr($name, 1);
echo "<li><span class='current'>".$name."</span></li>\n";
} else {
echo "<li><a class='lower' href='".$link."'>".$name."</a></li>\n";
}
}
/* check if $pageis current page */
function isCurrent ($page) {
/* reverse mapping */
if ($page == "willkommen") {
$page = "index";
}
$isCurrent = $page.".php" == getCurrentPage();
return $isCurrent;
}
function getCurrentPage() {
$path = $_SERVER['PHP_SELF'];
$a = explode("/", $path);
$site_name = $a[sizeof($a)-1];
return $site_name;
}
At least the CSS:
li span.current a {
background-color: black; /* or #000000 */
}
li span a {
background-color: gray; /* or #cccccc*/
}
JavaScript & CSS
This is more pseude code, but its the same logic for the PHP version
In this case you also need to check the current url
with window.location.pathname you get the url / pathname. split on the slash and extract the file.
Then you can iterate through the elements of your navigation with jQuery like $("#navigation").find("a") and then you can set the css style for the a element a.css("background-color", "black")