Nick
|
Hello all,
I have a site with some all caps lettering, some blue and some white, but of the same size and font.
So, if I wanted to use h2 tags for two identical fonts (apart from colour), how would I do this?
I hope that's clear!
thanks,
Nick.
|
| |
Eileen
Artisteer Team
|
Hello Nick,
I'm sorry but the task is not quite clear for me. Could you provide a link to the page that demonstrates the text which you'd like to output as H2.
|
| |
Nick
|
Hello Eileen,
Thanks for your reply - it's offline at the moment but here is an image. I need to achieve the three different 'all caps' sizes of text, some will be links.
http://eppc001.ddns.net/img/text.PNG
On refelection, maybe I need 3 different types of paragraph text?
Thanks,
Nick.
|
| |
Nick
|
Anybody? Please?
|
| |
James G
|
Create an id for your custom font. Then enter something like this:
#caps_red
#caps_blue
#caps_green
<p id="caps_red">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. ETIAM PHARETRA, TELLUS SIT AMET CONGUE VULPUTATE, NISI ERAT IACULIS NIBH, VITAE FEUGIAT SAPIEN ANTE EGET MAURIS. AENEAN SOLLICITUDIN IMPERDIET ARCU, VITAE DIGNISSIM EST POSUERE ID.</p>
example image:
https://drive.google.com/file/d/0B5qs1V8vWbqbelNSZE1fWklVVGc/view?usp=sharing
|
| |
Nick
|
Hello James,
Many thanks but can you give me some more detail - I would need detailed steps please, that would be great.
Thank you,
Nick.
|
| |
Nick
|
OK, I have been reading up at W3C schools and I think I have the idea, please let me know if this is correct:
In Home>Options>CSS Options
I add my CSS class (in the box), like:
#caps_white
{
font-family: "Patua One";
font-size: 1.75em;
color: #ffffff;
text-align: center;
}
Then I edit the HTML to refer to the CSS:
<p id="caps_white">more</p>
Is that it?
Thanks,
Nick.
|
| |
James G
|
Yes sire. Looking good!
|
| |
Nick
|
Just to update, this seems OK, but please let me know if I've made any errors.
One other thing that I'd like some help with is that if I make the word "more" a link, the style falls back to the settings that I have for paragraph text in the "Typography" settings.
I could do with some help working out how to make the links take note of my CSS.
Here's the full CSS that I have pasted in the Home>Options>CSS Options box:
#caps_white
{
color: #FFFFFF;
font-family: "Patua One", Arial, "Arial Unicode MS", Helvetica, "sans-serif";
font-size: 1.9em;
text-transform: uppercase;
background-color: #62D7F2;
text-align: center;
}
a:link {
color:#FFFFFF;
}
a:visited {
color:#FFFFFF;
}
a:hover {
color:#000000;
}
a:active {
color:#FFFFFF;
}
... and here is what I have in the HTML:
<p id="caps_white">our mass times</p><p id="caps_white"><a href="#">more</a></p>
... and here is a screen shot to show you that the link doesn't match the text above!
http://eppc001.ddns.net/img/link.PNG
Any advice would be greatly appreciated :)
Thanks,
Nick.
|
| |
James G
|
Keep in mind that the <p> and <a> are two different elements.
So I assume you want the "more" white with a hover of black along with the visited white.
All other page links will keep your default settings.
<p id="caps_white">our mass times</p><p><a id="caps_white" href="#">more</a></p>
css:
#caps_white
{
color: #FFFFFF;
font-family: "Patua One", Arial, "Arial Unicode MS", Helvetica, "sans-serif";
font-size: 1.9em;
text-transform: uppercase;
background-color: #62D7F2;
text-align: center;
}
a:link#caps_white {
color:#FFFFFF;
}
a:visited#caps_white {
color:#FFFFFF;
}
a:hover#caps_white {
color:#000000;
}
a:active#caps_white {
color:#FFFFFF;
}
|
| |
Nick
|
Hello James,
Many thanks for helping me out here.
That has half mended things, the only problem I have now is that the link is aligned left, not centre.
Thanks,
Nick.
|
| |
James G
|
<p id="caps_white">our mass times</p><p style="text-align:center;"><a id="caps_white" href="#">more</a></p>
|
| |
James G
|
Off topic:
How are you liking your qnap device? Is the speed sufficient from your location compared to shared hosting? What speed does your isp provide?
Pros or cons?
|
| |
Nick
|
Quote James G:
<p id="caps_white">our mass times</p><p style="text-align:center;"><a id="caps_white" href="#">more</a></p>
Thanks, that did the trick but why is it that it's not getting the alignment information from the
text-align: center;
at the top?
Thank you, James for all of the help you've given me.
|
| |
Nick
|
Quote James G:
Off topic:
How are you liking your qnap device? Is the speed sufficient from your location compared to shared hosting? What speed does your isp provide?
Pros or cons?
I am very happy with it although I wouldn't use it to host a site on - too slow. I do use it for testing sites or for previewing them but mainly I use it as storage.
The web GIU is very good, very easy to use and packed with options. I would definately recommend, I've had it for about 4 years now and it has been faultless.
Also, I built my own server from an old desktop and popped FreeNAS on it. Not as intuitive to administer as the QNAP but really good considering it's for free.
Thanks,
Nick.
Thanks,
Nick.
|
| |
James G
|
Quote Nick:
Quote James G:
<p id="caps_white">our mass times</p><p style="text-align:center;"><a id="caps_white" href="#">more</a></p>
Thanks, that did the trick but why is it that it's not getting the alignment information from the
text-align: center;
at the top?
Thank you, James for all of the help you've given me.
It will work if you put it in the 2nd <p> but then your "more" font will be double in size.
example:
https://drive.google.com/file/d/0B5qs1V8vWbqbMFo3akswcFg5UEU/view?usp=sharing
|
| |
James G
|
To further this topic, you can create a div and the html will look like this:
<div id="caps_white">
<p>Enter Page content here...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id.</p>
<p><a id="caps_white" style="font-size:19px;" href="#" name="caps_white">Read more</a></p></div>
css:
#caps_white
{
color: #FFFFFF;
font-family: "Patua One", Arial, "Arial Unicode MS", Helvetica, "sans-serif";
font-size: 1.9em;
text-transform: uppercase;
background-color: #62D7F2;
text-align: center;
}
a:link#caps_white {
color:#FFFFFF;
}
a:visited#caps_white {
color:#FFFFFF;
}
a:hover#caps_white {
color:#000000;
}
a:active#caps_white {
color:#FFFFFF;
}
|
| |
Nick
|
Hello James,
Many thanks for all of your help, you've been really good to me!
All the best,
Nick.
|
| |