Posted on

Coding Snippet: Gallery Link Style #3

Hi again! I’m back with another coding snippet. This time I decided to give another creative way to display your gallery links on posts. This can also work well for news articles, source links, etc. Anything that would lead your visitors somewhere outside of that main post.

I have included one style below:

Place the following code in your stylesheet:

.elinks:before {
    background-color:#e55c96;
    border-radius:100px;
    padding:5px 10px 5px;
    content:'+';
    margin-right:5px;
    color:#ffffff;
}

.elinks ul {
  padding: 0px;
  margin:0;
  margin-top:5px;
}

.elinks li {
  padding: 3px;
  list-style: none;
}

.elinks li:nth-child(even) {
    margin:0;
    background-color:#ffffff;
}

.elinks li:nth-child(odd) {
    margin:0;
    background-color:#f9eff3;
}

.elinks a:link {
    color:#e55c96;
}

.elinks a:active {
    color:#e55c96;
}

.elinks a:visited {
    color:#e55c96;
}

.elinks a:hover {
    color:#e55c96;
}

.elinks u {
    color:#ffffff;
    font-weight:600;
    background-color:#e55c96;
    text-decoration:none;
    padding:5px;
    border-radius:5px;
}
  • To change the text color, find the color: lines and edit after the # sign to whatever color you want to show.
  • To change the background color, find the background-color: lines and edit after the # sign to whatever color you want to show.
  • To change the text, find the content: line and edit the “Gallery Links” to whatever you prefer, example “External Links”
  • The font will adapt to whatever font you have in your theme unless you add a font-family:FONT TITLE GOES HERE; area in the css above.
  • Change width by adding the following line into the .gallerylinks main class width:50%; you can change the 50% to any size you prefer.

After editing and adding that to the stylesheet, you can use the code below to display it:

<div class="elinks"><u>Update Links</u>
<ul>
<li>Photos: Public Appearances: <a href="http://jimmisimpsonfan.com/photos/thumbnails.php?album=544">February 26: Jimmi Visits BUILD Series NY</a></li>
<li>Photos: Screen Captures: <a href="http://jimmisimpsonfan.com/photos/thumbnails.php?album=552">NBC New York</a>
<li>Videos: <a href="https://www.youtube.com/channel/UCUQBtYVB4Zlb4uPA2OiF19A/videos">Unsolved Clips + Interview</a></li>
</ul>
</div>

If this tutorial helped you, please consider buying me a coffee using Ko-Fi.