Custom text decoration, font size etc...

  • 1
  • Question
  • Updated 7 years ago
  • Answered
My web site: www.mcran.com
Problem: My home page

If you go to my home page you will notice that there are underlines under The Bennett Archives and the two other items on the same line. I would like it so that there is no underline under the links and also that I have control over the font size type etc... I know that I would probably do this with CSS but I am not sure how to implement it in the code below. Some help would be greatly appreciated!! Thanks!!




<table border="0" cellpadding="0" cellspacing="2" width="100%">
<tbody><tr>
<td style="text-align: left;"><a href="http://www.mcran.com/thebennettarchives.php" target="_blank">The Bennett Archives</a></td>
<td style="text-align: right;"><a href="http://www.mcran.com/it-snippets.php" target="_blank">The In Transition Archives</a></td>
<td style="text-align: right;"><a href="http://ihtsb.yolasite.com/" target="_blank">I've Heard That Song Before Archives</a></td>
</tr>
</tbody>

</table>

Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • very grateful for help in this matter!!

Posted 7 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Randy,

I'll ask our HTML team to take a look at this and see if they can help advise you.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Randy,

How are you amigo?

Change the code above to this below -

<!--

<table border="0" cellpadding="0" cellspacing="2" width="100%">
<tbody><tr>
<td style="text-align: left;"><a style="text-decoration: none;" href="http://www.mcran.com/thebennettarchiv..." target="_blank">The Bennett Archives</a></td>
<td style="text-align: right;"><a style="text-decoration: none;" href="http://www.mcran.com/it-snippets.php" target="_blank">The In Transition Archives</a></td>
<td style="text-align: right;"><a style="text-decoration: none;" href="http://ihtsb.yolasite.com/" target="_blank">I've Heard That Song Before Archives</a></td>
</tr>
</tbody>
</table>

-->

Is that the actual code on the site? The live code seems to have H5 tags round the text?

Anyway if it's not correct come back and I'll edit it for you.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
You asked me how I am? I'm fine. Actually I am in training for two 21K marathons in September. Just ran a 42K in May. Seems like I spend most of my time training.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Just read about the font sizes.

This is a cleaner way to achieve what your trying to do -

Add this to the top of the page (or in the css editor if you have a silver account)

<style type="text/css">
.header_links a {font-size: 14px; text-decoration: none; color: #000;}
</style>

Then add this to the page where the links appear...

<table class="header_links" border="0" cellpadding="0" cellspacing="2" width="100%">
<tbody><tr>
<td style="text-align: left;"><a href="http://www.mcran.com/thebennettarchiv..." target="_blank">The Bennett Archives</a></td>
<td style="text-align: right;"><a href="http://www.mcran.com/it-snippets.php" target="_blank">The In Transition Archives</a></td>
<td style="text-align: right;"><a href="http://ihtsb.yolasite.com/" target="_blank">I've Heard That Song Before Archives</a></td>
</tr>
</tbody>
</table>

-->

In the top 'style' code you can change the font-size and color to anything you like.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
You mentioned adding this to the CSS editor. I'm not quite sure how to do this. I would imagine that any changes to the CSS here will change all occurrences of it on my site? if so, that would be great and save me a ton of time. I just need some guidance on how to do this. Show me once and after that I'm good to go. I learn pretty fast.

I wish there was a video showing ho to use the CSS Editor.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
www.mcran.com

Thanks UK Duke!!

I do have a silver account. For some reason, I know I am a pest always posting HTML/ coding issues here but I still can't seem to wrap my head around where all the code belongs. I spend a lot of time on the w3schools.com site and still even though I have pretty well grasped the syntax of the code I still can't figure out where it all goes on my site.

Hopefully someday it will click!

If you look at my site, you will notice that on every page I have the code I posted above. Now, if I want to for example change the font size and color for every occurrence of the code, how would I do this? Create a separate CSS style sheet and then reference it in the code?

If so, I thing I would need a bit of help in doing this. I really appreciate the help I get from all of you!! I have an idea of how I would like my site to look, I just need some help with the coding stuff. Thanks!!!!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I only have a second, if any thing is unclear ask and I will answer again tomorrow (or someone else will pick it up)

1. Click 'style' (top menu in editor)

2. click 'edit custom css'

3. paste the code below into the left panel
.header_links a {font-size: 14px; text-decoration: none; color: #000;}

4. click OK

That's it.

Let me explain what that line of css does... I have added a class to the table code you originally posted (see the table code in my final post above -- see it says class="header_links"). The line of css tells the browser that when it finds a table (or a div) with the class 'header_links' to change all the a links inside it to fit the style.

.header_links <<< Class
.header_links a <<< all the a links inside that class
.header_links a {STYLE RULES HERE} <<< style the a-links accordingly

-----------------------------

If you wanted to change all the links on the site (not just the ones in a element with the class .header_links) you would add a line in the same place something like this.

a:link {font-size: 14px; text-decoration: none; color: #000;}

-------------------------------

Hope that helps mate.

Lee - http://pirouette-dance-agency.co.uk
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks! When I have a moment, I will try it out and post back with the results. :)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I am really into keeping my site as consistent as possible so I am hoping that by using the CSS Editor, I can have for example the same font and font size used for all the headings on all of my pages. If I want to change the font type, size, color or what ever, I can do it once from the CSS Editor and the changes would be reflected across my site. I hope this is possible. I would love to have one place to go to make all the site wide changes I need to make. That would save me tons of time!!

I hope this is possible!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I am really making progress now. I created a .css document that I keep on my hosting server. My CSS code is in there. Every page in my document is linked to that document and it works. I know there is a way that I can keep the CSS document in my File manager instead and just link to that?

If I do that, could I access that CSS document anytime to edit the CSS code if need be?

I would also assume that instead of keeping the CSS document, I can just put the code in the custom CSS editor? I'm so happy that I came this far and can now really see the power of css.

Here is the code I have in my css document. Any other ideas for code that I can put here that would give me even more control and flexibility over my web site?




.header_links a {font-size: 18px; text-decoration: none; color: black; font-weight:plain;}

h4.heading { font-size: 24px; text-decoration: bold; color: black; text-align: center; font-family:"Times ",Times,serif; }

img.bio {height:120px;width:150px;}

Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Randy,

You can definitely upload your CSS file to your File Manager. Then you would need to link to your CSS file. It would look something like this:
<link href="resources/your-custom-style.css" rel="stylesheet" type="text/css" media="screen" />

You can also add CSS to the Site CSS if you wish as well!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Sanja!

If I put the css file in my file mamager, how can I edit it if I need to make changes to it?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Randy,

What I do is keep a CSS file on my desktop and then make the changes needed using Notepad or TextEdit. Then, I upload the CSS file and replace the old one with the new one.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Sanja!

Actually, I finally got my css code to work in the Site CSS editor. What I like about doing it this way is that when I am in the radio station doing my radio show, I can access my site through their PC and make changes to my CSS if need be. This is the kind of flexibility I am looking for. So that no matter where I am, no matter what computer I am using, I can make my site CSS changes quickly and in a timely manner.

Now that have my css code in the site css manager, would you have any tips regarding css code that I can add that will give me even more control over my site?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Sanja,

My site: www.mcran.com

This is the css code I am using:




.header_links a {font-size: 18px; text-decoration: none; color: black; font-weight:plain;}

h4.heading { font-size: 24px;font-style:italic; text-decoration: bold; color: black; text-align: center; font-family:"Times ",Times,serif; }

img.bio {height:120px;width:150px;}



This is the code for my archives menu:



<table class="header_links" border="0" cellpadding="0" cellspacing="2" width="100%">
<tbody><tr>
<td style="text-align: left;"><a href="http://www.mcran.com/thebennettarchives.php" target="_blank"><h5>The Bennett Archives</h5></a></td>
<td style="text-align: right;"><a href="http://www.mcran.com/it-snippets.php" target="_blank"><h5>The In Transition Archives</h5></a></td>
<td style="text-align: right;"><a href="http://www.mcran.com/ihtsb.php" target="_blank"><h5>I've Heard That Song Before Archives</h5></a></td>
</tr>
</tbody>
</table>


The archive links on all of my pages are using the h5 tag. What css code can I use instead of using h5 tags that would allow me more flexibility over the look of my archive links?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Randy,
Sanja is currently offline, however, she will gladly reply when she returns!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Brianna!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Randy,

You can use h5 tags but in your css code, include the style mark-up. e.g.

h5 {
font-size:40px;
color: #5dc4d3;
}

I hope that makes sense!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Great! I had no idea you could modify the h tags. I also thought of something else while I was training this morning. Instead of using a table to display my archive links, I could use a css horizontal navbar using the inline element aling with the list tags. I am hoping I can put this code in the css site editor and it will display on all of my pages.

Does this sound like a do-able solution? If so I am really looking forward to trying it out because it would give me total control over my archives link menu.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Here is the code I am trying out just to see if it works in the Site CSS editor. If it does, I will tweak it to my liking. Will this code work in the Site CSS editor? If not, what could I do to make it work if possible.



<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-left:180;
padding-top:176px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Randy,

You can add just this part to your Site CSS:

ul
{
list-style-type:none;
margin:0;
padding:0;
padding-left:180;
padding-top:176px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

Do not include the style tags or the body codes. You need to put the body code into an HTML Widget.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Sanja!