|
HTML - Changing Font Colour
Hello everyone.
I have a website on which I post programs written in a specific lanuage. I would like to know if there is a way of changing the font colour of words depending on what the word is. Here is an example of one of my programs, you can see the colour scheme. But if you check out the source, you'll see I have had to change the colour of every word except the comments, which is the page default, being grey. Take a look, http://www.jakeselectronics.net/file...decoderasm.php I want to be able to 'store' a list of words in the head, and if that word is typed in the body, change colour to what ever I say. Like have a default of white, but if GOTO is typed, make that blue. My method at the moment is extreamly tendious, Is it clear what I'm trying to do? Thanks, Jake. Similar TutorialsHi, i have been sent this piece of code to use in my website for a small search facility on the data already held, but I have been trying to change the colour to 'navy blue' and the font to Arial without success. I also want to take out the line spaces to make the whole piece fit nicely, I have managed to change this slightly but would be grateful if it was all done at the same time!? Can anyone help please? Hi guys, im making a site for a client at the minute, i had successfully made it then noticed a glinch when i played it in 'firefox' (yes i to was shocked it wasnt in i.e). Basicly i have an accordian, when a user clicks on say label 1, i need the labels, background colour and text colour to change. Simialrly label 2 will change them to another colour. Now this is how i achieved that: HTML Code: <!-- within the label tag on the accordian i placed the following code to change the required colours when the link is clicked //-->
<a id="titleLink" class="title" href="#" onclick= "body.style.background='#006600'; titleLink.style.color='#663333'; menLink.style.color='#231f20';"><h1>link 1</h1></a>
Now here is the code in its entirety, copy and paste this should work, as long as you have the required .js pages in a folder entitled Script. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/testAcc.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>some name here</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- following is a sntarded accordian added in dreamweaver //-->
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<!-- within the label tag on the accordian i placed the following code to change the required colours when the link is clicked //-->
<a id="titleLink" class="title" href="#" onclick= "body.style.background='#006600'; titleLink.style.color='#FFFFFF'; menLink.style.color='#231f20';"><h1>link 1</h1>
</a>
</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<a id="menLink" class="title" href="#" onclick="body.style.background='#231f20'; titleLink.style.color='#663333'; menLink.style.color='#FFFFFF'; ">link 2</a>
</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>
Now, in Safari this works great, as it does in i.e and Opera. However when i try it in firefox it dosnt seem to work. I think it has something to do with firefox wanting to mark the links as visited but im unsure. Any ideas why this is happening and how i can avoid it!? any help would be appreciated, im tearing my hair out as the deadlines a-looming! cheers Roamer Hi, I would like to know how I can change the gover colour of a specific link by coding the anchor tag of the link? Here's my site: Click What I want to do is change the hover colour for the Home tag. Thanks, DarkArcher I already have the body tags, I want a certain section to have links of a different color. I tried <font color="#####"> but obviously that doesn't work. It seems like i should know this... but I am blank. I want to make changes to the font of the posts of this section: http://foxh0und.tumblr.com/tagged/foxh0undQA I'm really not sure where to find the part for that in the HTML.. what I want to do is change the spacing between each post & have the question in bold and the answer not in bold and smaller font - an example of what I would like to do is in the link below. http://foxh0und.tumblr.com/post/11626236049 any help would be amazing because i feel like it's ruining my whole theme. Hi, I have a search form with the following code:# <!-- Begin FusionBot.com site search engine code--> <FORM NAME=fbsearch METHOD=GET ACTION="http://ss021.fusionbot.com/cgi-bin/ss_query"> <INPUT TYPE=text NAME=keys style="height: 18px; width: 100px; background-color:#1E7CC8;<input size="8" SIZE=10> <INPUT TYPE=hidden NAME=sitenbr VALUE="154309449"> <INPUT TYPE="image" src="http://www.freewebs.com/hanifm/search.gif" name="go" value="go" alt="Click to Search"><BR> </DIV> </FORM> <!-- End FusionBot.com site search engine code --> What I want is, is for the form to be like the login area of this site: http://www.pixel2life.com/ if u look at the top right of that site u can see it has the bit with username. I want that same style of the box with the white text inside and with the same border thickness and colour. These are the colours: Inside of the form (background): #1E7CC8 The Border colour: #64A2D6 The boder thickness has to be small like the one on the sie If anyone could do this it would be much appreciated. Thank You Hey there, I've got a problem with my BG colour on a very simple page. I've uploaded this page he http://www.alastairq.co.uk/s-gaming The Web page looks like it should in FireFox 2 but in IE 6, the colour is completely wrong. Could anyone help me? Thanks, alastairq i'm looking for a cheap way out of making collapse/expand code. i've learned a lot of 'ghetto' techniques n thought mayb i can use something similar to the html tricks i've learned in the past. the theory i have is.. i use the title of the collapse/expand text as a link to the text below it to open and close by using the navigating tags: Code: <a name="content">opening/closing text here</a> and the title above the content: Code: <a href="#content">Title</a> to open the area of text. now my idea of a shortcut around the whole css/html/javacript combo is to make the text below it use a Code: <font size=0>content</font> at default and have the href title link change the font size to the default 9pt but I don't know if that's even possible. Is it possible with the Code: <div> tags? and if so, using that, would i still b able to make a link like that? Does anyone know of a font face generator that can convert a TTF or OTF font file into the 4 formats (woff, svg, eot, ttf), that's not font squirrel? That site only supports English fonts with a very low file size limit, and can't convert any foreign fonts. Already tried http://onlinefontconverter.com as well, doesn't work either as I waited like an hour then the server simply deleted my uploads without so much as an error pop-up lol, and now the website is not responding. This is for usage in CSS using the @font-face function. Thanks. Hello, When I try to set a font in HTML it works, but if I set a rule in my CSS to set the same font, it doesn't. Here are the three things I do (not at the same time of course): <font face="Verdana, Tahoma, Arial, Helvetica"> ... ... ... </font> vs body { font-family: Verdana, Tahoma, Arial, Helvetica; } or even... body { font: Verdana, Tahoma, Arial, Helvetica; } Out of all of those, only the first can change the font in my browser...is this a CSS issue because, somehow, the browser has superiority over CSS, and HTML has superiority over the browser? I would appreciate input. Thanks. Any idea how to set the backgorund of your website to a certain colour? Thanks, Narc Here's my code: HTML Code: <div align="center" onmouseover="this.style.backgroundColor='#FFFFFF'; this.style.cursor='aero_arrow'; this.style.color='#000000';" onmouseout="this.style.backgroundColor='#000000'; this.style.color='#FFFFFF';" style="width: 150px; height: 20px;">Home</div> =(The code is on different lines because it doesn't show a scrollbar when it's all on one line!)= This is in a table to create links as text buttons. But when I load / refresh the page, the text is black and when I hover over and away, it stays white. Can anybody fix this so that the text is white when you first load the page? how do i change the border colour in a style sheet? i added it to the body parts but it didn't change =/ .. this is my style sheet (the border colour part isn't there now i'm hoping someone can add it in the right place) Quote: /* CSS Document */ body{ scrollbar-arrow-color: #AD33FF; scrollbar-3dlight-color: #EFEFEF; scrollbar-highlight-color: #EFEFEF; scrollbar-face-color: #EFEFEF; scrollbar-shadow-color: #EFEFEF; scrollbar-darkshadow-color: #EFEFEF; scrollbar-track-color: #EFEFEF; } a:visited { color: #AD33FF; text-decoration: none; } a:active { color: #AD33FF; text-decoration: none; } body { background-color: #494949; } body,td,th { color: #9D9D9D; font-family: Tahoma; font-size: 10px; } a:link { color: #AD33FF; text-decoration: none; } a:hover { color: #cccccc; text-decoration: none; } Is there a simple way for me to change the colour of text that you put in a text box? Hi all, Ive been using the X11 colour set found on this link below, and it contains some interesting colours but would it be possible to use more colours than shown? http://en.wikipedia.org/wiki/Web_colors I was looking to make a table with 20 shades of blue as different backgrounds, would that be possible for example? Thanks! Here's my code: HTML Code: <div align="center" onmouseover="this.style.backgroundColor='#FFFFFF'; this.style.cursor='aero_arrow'; this.style.color='#000000';" onmouseout="this.style.backgroundColor='#000000'; this.style.color='#FFFFFF';" style="width: 150px; height: 20px;">Home</div> =(The code is on different lines because it doesn't show a scrollbar when it's all on one line!)= This is in a table to create links as text buttons. But when I load / refresh the page, the text is black and when I hover over and away, it stays white. Can anybody fix this so that the text is white when you first load the page? How to change the color of a certain link in the page (only one link) from the blue color to another one? Help please. Thanks in advance... I'm quite new to this and used a tag generator thing, how do I make the background black and has anyone got any other tips to make this look more attractive? Here is the code: HTML Code: <p style="text-align: center;"><span style="background-color: rgb(0, 0, 0);"><br></span></p> <p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);">if this newsletter is not displaying properly, click <a title="Sternberg Clarke New Talent - February 2010" href="http://www.scflyers.com/newsletterfeb10.html" target="_blank">here</a> to see it in its full splendour</span></span></span></span></p> <p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);"><br></span></span></span></p> <table style="border: 4px solid rgb(244, 249, 249); width: 751px; height: 604px; background-color: rgb(255, 255, 255);" align="center" border="4" cellpadding="0" cellspacing="6"> </table> <table style="border: 0pt solid rgb(0, 0, 0); width: 600px; height: 183px;" align="center" border="0" cellpadding="0" cellspacing="0" frame="border"> <tbody> <tr> <td style="width: 20px; height: 20px;" colspan="8"> <p><img style="border: 1px solid black;" title="sclogo" src="http://www.scflyers.com/htmlfiles/logo_600px.gif" alt="sclogo" width="600"></p> </td> </tr> <tr> <td colspan="8"> <p style="text-align: center;">performers of the month - March 2010</p> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">the langley sisters</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="5" valign="middle"> <p style="text-align: center;"><img style="border: 1px solid black;" title="Langley Sisters" src="http://www.scflyers.com/langley-sisters_250px.jpg" alt="Langley Sisters" width="250" height="238"></p> <p style="text-align: center;"> <object style="width: 250px; height: 206px;" data="http://www.youtube.com/v/1uSKPIZaZtg&feature" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/1uSKPIZaZtg&feature"> </object> </p> </td> <td> <p style="padding-left: 30px;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis. </span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </td> <td> <p> </p> <p> </p> </td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">puncture kit</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td><br></td> <td colspan="5" valign="middle"> <p style="text-align: center;"><img style="border: 1px solid black;" title="pk" src="http://www.scflyers.com/puncture_250px.jpg" alt="puncture kit" width="250" height="238"></p> <p style="text-align: center;"> <object data="http://www.youtube.com/v/wCdauhGajBE&feature" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/wCdauhGajBE&feature"> </object> </p> <p> </p> <p> </p> <p> </p> <p> </p> </td> <td style="padding-left: 30px;" valign="top"> <p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p><span style="font-size: small;"><br></span></p> </td> <td style="width: 20px; height: 20px;"><br></td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">cash cows</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong><img style="border: 2px solid black;" title="cashcows" src="http://www.scflyers.com/cashcows_250px.jpg" alt="cashcows" width="250" height="238"></strong></span></span></p> <p style="text-align: center;"> <object data="http://www.youtube.com/v/IvTHGp8Yui8" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/IvTHGp8Yui8"> </object> </p> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p> </td> <td style="padding-left: 30px;" align="left"> <p style="text-align: justify;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"><span style="font-size: small;"><br></span></p> </td> <td><br></td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td style="text-align: center;" colspan="8"> <p><span style="font-size: x-large;"><span style="text-decoration: underline;">kate mlynar</span></span></p> <p><span style="font-size: x-large;"><span style="text-decoration: underline;"><br></span></span></p> </td> </tr> <tr> <td> </td> <td colspan="5"><img title="km" src="http://www.scflyers.com/km_250px.jpg" alt="km" width="250" height="238"> <p> <object data="http://www.youtube.com/v/tz8BvSiop5Q" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/tz8BvSiop5Q"> </object> </p> </td> <td style="padding-left: 30px; text-align: justify;" valign="top"> <p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> </td> <td> </td> </tr> <tr> <td><img title="bottomleft" src="http://www.scflyers.com/htmlfiles/bl.gif" alt="bottomleft"></td> <td colspan="5"><br></td> <td> </td> <td><img title="bottomright" src="http://www.scflyers.com/htmlfiles/br.gif" alt="bottomright" width="20" height="20"></td> </tr> </tbody> </table> <p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;">click <a href="mailto:sarah@sternbergclarke.co.uk?subject=unsubscribe"> here</a> to unsubscribe</span></span></span></p> <p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="color: rgb(0, 0, 0);"><br></span></span></span></p> <p> </p> I'm trying to display some VB code in my webpage. I can keep the code structure using the pre and code tags. Is there any way I keep the color displayed in the code editor (vbsedit, textpad, ultraedit ... etc) ? Hi, I have this website: http://www.dmucomputing.co.uk/ The problem that I am currently having is that the background colour on the navigation panel on the left hand side of the screen does not follow all the way to the bottom of the page. I have checked it in Firefox and IE, but am having the same problem on both. Can anyone advice please? Thank you in advance. |
|||||||