HTML help for a links page

SparkySparky Registered Users Posts: 104 Major grins
edited September 19, 2013 in SmugMug Customization
Hi, I'm looking for some help on the HTML for a links page on my site.

I would like a centered list, preferably with a bullet point next to each link and have the link open in a new window. I would also like the link to be red in color, but the descriptive text (if any) in white.

here is my short sample of the HTML from my legacy site, I can't seem to get it to work in the new Smug. I have not unveiled yet. I just need an idea of what to start with and then I can insert my links and text myself (I hope!). Thanks in advance.

[HTML]<html>
<div id="myText">
<h1><center>Firematic Links</h1>
<h3><center>(Links will open in a new window)</center></h3>
<HR WIDTH="100%" COLOR="#FF0000" SIZE="4">

<h4><center><li><a href="http://www.zazzle.com/buffalok*&quot;
target="_blank">My Zazzle Store</a></h4><h5><center>Custom products featuring the Buffalo Fire Department. Order unique BFD shirts, mugs, stamps, mousepads and more today!</center></h5>




<h4><center><li><a href="http://www.bpdthenandnow.com/&quot;
target="_blank">Buffalo Police Then and Now</a></h4><h5><center>The best source of news, information and history regarding the Buffalo, NY Police Department</center></h5>

<h4><center><li><a href="http://ecfwire.org/&quot;
target="_blank">Erie County Fire Wire</a></h4>

<h4><center><li><a href="http://www.padphotography.net/&quot;
target="_blank">PADPhotography.net</a></h4><h5><center>Great fire photography from New Jersey</center></h5>[/HTML]
Kevin
http://wowmephotos.smugmug.com/

Comments

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 19, 2013
    Sparky wrote: »
    Hi, I'm looking for some help on the HTML for a links page on my site.

    I would like a centered list, preferably with a bullet point next to each link and have the link open in a new window. I would also like the link to be red in color, but the descriptive text (if any) in white.

    here is my short sample of the HTML from my legacy site, I can't seem to get it to work in the new Smug. I have not unveiled yet. I just need an idea of what to start with and then I can insert my links and text myself (I hope!). Thanks in advance.

    ...
    Here's a sample of my site index page that I basically somewhat rewrote for NewSmug. This is in an
    html box and copy of the top part of the left box. Three html boxes side by side. 
    [b]<[/b]a href="/">[b]<[/b]span class="headers">HOME[b]<[/b]/span>[b]<[/b]/a>
[b]<[/b]br />[b]<[/b]br />
[b]<[/b]div style="margin-left: 25px;">
[b]<[/b]a href="/popular">[b]<[/b]span class="headers">Most Popular[b]<[/b]/span>[b]<[/b]/a>
[b]<[/b]br />[b]<[/b]br />
[b]<[/b]a href="/keyword/">[b]<[/b]span class="headers">Keywords (Bird Species Search)[b]<[/b]/span>[b]<[/b]/a>
[b]<[/b]br />[b]<[/b]br />
[b]<[/b]a href="/date/">[b]<[/b]span class="headers">Search by Date[b]<[/b]/span>[b]<[/b]/a>
[b]<[/b]br />[b]<[/b]br />
[b]<[/b]a href="/Guestbook">[b]<[/b]span class="headers">Guestbook[b]<[/b]/span>[b]<[/b]/a>
[b]<[/b]br />[b]<[/b]br />
[b]<[/b]a href="/Recent-Gallery-Changes">[b]<[/b]span class="headers">Recent Gallery Updates[b]<[/b]/span>[b]<[/b]/a> 
[b]<[/b]/div>
[b]<[/b]br />[b]<[/b]br />

[b]<[/b]a href="/Birds">[b]<[/b]span class="headers">Birds  »[b]<[/b]/span>[b]<[/b]/a>[b]<[/b]br />[b]<[/b]br />
[b]<[/b]div class="myLinks">
     &[b]#[/b]8226; [b]<[/b]a href="/Birds/Missouri-Bird-Photos-A-G/3272272_hQkxo">[b]<[/b]span class="headers">Missouri Bird Species Photos A-G[b]<[/b]/span>[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226; [b]<[/b]a href="/Birds/Missouri-Bird-Photos-H-Z/3760688_ty5Tu">[b]<[/b]span class="headers">Missouri Bird Species Photos H-Z[b]<[/b]/span>[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226; [b]<[/b]a href="http://blog.photosbyat.com/" target="_blank">Recent Bird Sightings (eBird)[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226; [b]<[/b]a href="/Birds/Birding-Trips">[b]<[/b]span class="headers">Birding Trips by Location[b]<[/b]/span>[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226; [b]<[/b]a href="/Birds/Panels-Weston-Bend-SP/n-23XzQ">Interpretive Panels for 
        [b]<[/b]br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Weston Bend State Park[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226; [b]<[/b]a href="/Birds/World-Bird-Sanctuary">World Bird Sanctuary Galleries[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226; [b]<[/b]a href="/Birds/Bird-Maps/3964694_P2SDjb">Birding Location Maps[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226; [b]<[/b]a href="/Birds/Least-Tern-Project">Endangered Interior Least Tern 
        [b]<[/b]br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nesting Barge Project[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226; [b]<[/b]a href="/Birds/Bird-Videos">Bird Videos[b]<[/b]/a>[b]<[/b]br />
[b]<[/b]/div>
[b]<[/b]br />[b]<[/b]br />


[b]<[/b]a href="/Creatures">[b]<[/b]span class="headers">Creatures  »[b]<[/b]/span>[b]<[/b]/a>
[b]<[/b]br />[b]<[/b]br />
  
[b]<[/b]div style="margin-left: 25px;">
[b]<[/b]span class="headers">Butterflies  »[b]<[/b]/span>[b]<[/b]br />
[b]<[/b]div class="myLinks">
     &[b]#[/b]8226;&nbsp;[b]<[/b]a href="/Creatures/Butterflies">All Butterflies[b]<[/b]/a>[b]<[/b]br />
     &[b]#[/b]8226;&nbsp;[b]<[/b]a href="/Creatures/Large-Butterflies">Large Butterflies[b]<[/b]/a>[b]<[/b]br />
...
...
    CSS tab of html box 
    a :hover, a:hover {
  color: #fff;
}

a :hover span, a:hover span {
  color: #ffa500;
}

.myLinks {
  margin-left: 20px;
  color: #ccc;
}

.myLinks a {
  color: #ccc;
}

.myLinks a:hover, .myLinks a :hover {
  color: #fff;
}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • SparkySparky Registered Users Posts: 104 Major grins
    edited September 19, 2013
    Thank you, most of that went right over my head. I'm going to stick with a simple look that seems to work in the new smug. Thanks again!
    Kevin
    http://wowmephotos.smugmug.com/
Sign In or Register to comment.