PDA

View Full Version : change colour of email link


K.Simmonds
09-15-2014, 11:06 AM
I've just finished a website, and for some reason, all the email links are white. How do I change them to blue? On page properties I have selected white for my navigation links, which is what I want ....... but surely I don't have to have email links the same colour ??

edbr
09-15-2014, 11:10 PM
Guessing then that you are using mailto as that will be affected using a general styling for links. Add a class to the mail links and style them as you want. See the link in my dig for examples

Ricky55
09-15-2014, 11:21 PM
Like this.


<a href="#">I am a link</a>
<a class="email-link" href="mailto:you@you.com">I am a mail link</a>

<style type="text/css">

/*This will effect all links until your write a more specific rule*/
a {
color: red;
/*More Styles*/
}

/*This will apply to anything with the class email-link*/
.email-link {
color: blue;
/*More Styles*/
}

</style>

K.Simmonds
09-16-2014, 08:13 AM
Hi and thanks for the help. I'm close .... but no cigar yet.
I guess the only bit I need is:

email-link*/
.email-link {
color: blue;

but where do I put it? I've attached a screenshot of the page I'm working on.

edbr
09-16-2014, 08:17 AM
It needs to go in your style sheet. css sheet

K.Simmonds
09-16-2014, 08:17 AM
OK - So why didn't my screenshot upload ?

edbr
09-16-2014, 08:18 AM
not sure but that wouldnt help anyway better a link

K.Simmonds
09-16-2014, 09:18 AM
I put it in right at the end ..... but doesn't work. I've done it wrong haven't I ?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

style type="text/css">
<!--
.style4 {font-family: Georgia, "Times New Roman", Times, serif;
color: #666666;
}
.style5 {font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #666666;
}
body {
background-color: #e2d9c4;
text-align: center;
}
.style11 {color: #666666; font-size: 24px; }
.style12 {color: #666666; font-size: 36px; }
.style13 {color: #666666}
.style8 {color: #9933FF;
font-style: italic;
}
.navbartext {
color: #FFF;
}
.navgrey { color: #333;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
email-link*/
.email-link {
color: blue;
}
-->
</style>

edbr
09-16-2014, 10:09 AM
Try
.email-link a{
color.........
}

d a v e
09-16-2014, 10:44 AM
surely this
email-link*/
.email-link {
color: blue;
}

should be this:

.email-link*,
.email-link {
color: blue;
}

No forward slash, comma instead, and email link should be a class not a tag ;)

K.Simmonds
09-16-2014, 10:45 AM
Just tried that, but still doesn't change it (I copied and pasted your bit of code replacing the previous one) Have I put it in the right place ?

K.Simmonds
09-16-2014, 11:04 AM
That didn't work either. I think I must be doing it wrong. Perhaps I'll leave it white - although you can't see it against the background. Thanks for all your help ..... but I'm wasting too much of your time! Its frustrating. I'll go bang my head against a wall.

d a v e
09-16-2014, 11:55 AM
if you could upload it and post a url to it it would be a lot easier. without seeing all the code - both html and css - it's hard to say

we're here to help :)

d a v e
09-16-2014, 12:12 PM
not sure whether you have any external stylesheets or anything else but this works for me
http://gekkoweb.com/stuff/email-color.html

make sure there isn't a space between the tag and the class
a:link.email {
color: blue;
}

so NOT a:link .email

(oh i shortened your class name btw but the idea is the same ;) )

K.Simmonds
09-16-2014, 12:44 PM
I found this video on Youtube.
https://www.youtube.com/watch?feature=player_detailpage&v=DxtIfUlA5DM

I followed it to the letter, I even called my new CSS rule "class5"
It worked perfectly on 2 pages, but it refused to work on the next 2 pages. When I get to the part: insert / layout objects / div tag .......... the dropdown boxes are blank (no "class5")

d a v e
09-16-2014, 12:53 PM
if you add the class to the link like i have in my page you don't need to specify a certain div or anything to target. i showed you this way because you didn't post a link to the page so i have no idea where you're email links are - whether they're just in a footer or spread through different areas of the document.

regardless my code works as you can see in the example so you can just use that if you have several links in the document.

if still in doubt post a url to your site

Ricky55
09-16-2014, 03:49 PM
Always keep your selectors as unspecific as possible to get the job done.

For example.

.email-link

is far better than #wrapper .email-link

If you get too specific you'll find trumping those styles more difficult when it comes time to make changes.

d a v e
09-16-2014, 04:52 PM
this is the best way to do it (if you look at http://gekkoweb.com/stuff/email-color.html again)
using the css attribute selector you can target any url beginning with anything you want so e.g.

a:link[href^="mailto"]
{color:red;
}

means any link (starting with a 'mailto') make it red.
that way you don't need to write a class to every email address - just one line will apply that style to *any* email address.

really you should have all your styles in an external stylesheet ;)

***

also here http://css-tricks.com/better-email-links-featuring-css-attribute-selectors/

***

i use it with :after on my site (http://gekkoweb.com/portfolio/ ) to put a genericon next to any link that opens in a new window (see the little box-arrow next to "Ansioluettelo" which is a link to my cv) uses
a[target="_blank"]:after {
content: "";
display: inline-block;
font: 1em/1 "Genericons";
}

Ricky55
09-16-2014, 09:09 PM
Yes that is a better way of doing it, good comment.

I don't always use attribute selectors as often as I probably should.

Use the pseudo before and after all the time though.

Cheers

K.Simmonds
09-17-2014, 12:52 PM
if you could upload it and post a url to it it would be a lot easier. without seeing all the code - both html and css - it's hard to say

we're here to help :)

Hi again. I've uploaded the website now, so maybe you could have a look. The two pages that have the white email link (that I can't seem to change to blue) are:

http://www.eastgarth.co.uk/Pages/rates.html
http://www.eastgarth.co.uk/Pages/directions.html

Try not to pick too many faults ... bear in mind I'm a novice !!!
Thanks again.

d a v e
09-17-2014, 02:52 PM
erm it's a little rough :)

i thought you wanted to change the email links not the normal ones?!

changing the class5 links to
#class5 a {
color: #00F;
}

works for me after i did a quick code tidy


i realise that you're just beginning but you're making a site that's based on old and even outdated practices and i'm assuming you're not aiming to make this responsive? this would be be ok for a personal site for practice, maybe, but for a business you're just doing it no favours at all.

you should be using html5, not using tables for layout
(try something like this nav http://jsfiddle.net/sxmk2k83/ ) and making something that works on different devices.

so you have quite a learning curve. you might also look into using a simple uptodate wordpress theme for example and customising its colours and appearance to your liking.

d a v e
09-18-2014, 11:11 AM
Oh and if i can add a few more pointers?

always avoid putting text in images when possible - it's less accessible, and harder for search engines to find (not good for SEO either) put the name of the company and phone number as real text

i would put your room rates in a table because they are tabular data and it makes it easy to compare rates with other rates and keep all the info together

typography: make your headings visually important i.e. bigger than body copy. don't use all bold for main body copy - reserve it for emphasis

Ricky55
09-18-2014, 08:42 PM
Are you trying to learn web design or do you just want a website?

If you just want a nice looking website there are far easier methods these days than trying to roll your own in Dreamweaver.

I'd personally just use WordPress and buy yourself a nice theme. For 30 you'll be up and running. It will look miles better and will be easier for you to edit.

All you've got here is something that looks unprofessional and is hard to edit.

If you're learning then fair enough welcome aboard but if its just a means to an end I'd rethink your strategy :)

edbr
09-19-2014, 02:42 AM
not sure how much editing you would need if you find a design you like , here are some free css hotel templates .
my only prsonal suggestion would be an online booking feature
http://www.free-css.com/template-categories/hotels
http://www.templatemag.com/free-hotel-website-templates/

edbr
09-19-2014, 06:28 AM
as for booking engine there is a free option you could try if you were interested https://www.bbliverate.com

Ricky55
09-19-2014, 07:25 PM
Always makes sense to create a site that's easy to edit especially when it's for an hotel that's taking bookings.

Just can't see the point struggling with the basics if all you want is a nice site. Even if you are learning I still think it makes sense to have a back end powering it.

Just my two cents. :)

edbr
09-25-2014, 02:04 AM
yes you already stated that, you like wordpress we get it but many posters like to learn and make there own designs.
their choice i would say