Posted on

Coding Snippet: Gallery Link Style #1 & #2

As webmasters, we all prefer to find fun ways to display our gallery links on our posts. I have found a few ways throughout 10+ years as a webmaster and thought I would share two of those with you today. The following includes two different ways you can display gallery links or even press links for external or internal articles for posts on fansites. You can use these fun ways on any site (fan, blog, news) or network related to it. Enjoy!

View the styles coded by clicking on the image previews.

Style One

Style #1 – The Code

Place the following code in your stylesheet:

.gallerylinks {
     padding-top: 15px;
     padding-bottom: 15px;
     padding-left: 15px;
     padding-right: 15px;
     font-size: 80%;
     text-transform:uppercase;
     border:1px solid #f5f5f5;
     font-family: 'Poppins', sans-serif;
     font-weight:400;
}

.gallerylinks a:link {
     color:#696969;
     text-transform:uppercase;
     text-decoration:none;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
     font-family: 'Poppins', sans-serif;
     font-weight:400;
}

 .gallerylinks a:hover{
     color:#242424;
     text-transform:uppercase;
     text-decoration:none;
     font-family: 'Poppins', sans-serif;
     font-weight:400;
}

.gallerylinks:before {
     content: "Gallery Links"; 
     background-color: #9cc1df;
     display:block;
     font-size: 89%;
     max-width:150px;
     font-style: normal;
     color:#ffffff;
     margin-left:8px;
     margin-top:-28px;
     text-align:center;
     text-transform:uppercase;
     letter-spacing:1px;
     font-family: 'Poppins', sans-serif;
     font-weight:400;
}
Style #1 – Editing
  • 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”
  • To change the font, you can erase the lines font-family: ‘Poppins’, sans-serif; and font-weight:400; for it to use the default of your current theme or you can edit the lines to show what font or font weight you prefer.
  • Change width by adding the following line into the .gallerylinks main class width:50%; you can change the 50% to any size you prefer.
    Style #1 – Adding To Posts

    Add the following code to your posts. If you have changed the class title from gallerylinks to something else, just replace that in the following code as well.

    <div class="gallerylinks">
    Appearances > Events in 2016 > <a href="">March 25: The Art Of People Gala</a><br>
    Appearances > Events in 2016 > <a href="">March 26: The Art Of Trees Gala</a>
    </div>


Style Two

Style #2 – The Code

Place the following code in your stylesheet:

.elinks {
    margin:0;
    padding:5px;
}   

.elinks u {
  text-transform: uppercase;
  font-weight: 700;
  padding-left: 3px;
  padding-right: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  text-decoration: none;
  background-color: #74b2b6;
  color: #ffffff;
  margin-bottom:-8px;
}

.elinks ul {
  padding: 0px;
  margin:0;
}

.elinks li {
  padding: 5px;
  list-style: none;
  -webkit-transition: opacity 0.3s linear;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  border-bottom:1px dotted rgba(0, 0, 0, 0.1);
}
Style #2 – Editing
  • To change the text color, find the color: lines and edit after the # sign to whatever color you want to show.
  • To add a background color, place background-color:#COLOR; between the brackets { }
  • To change the font, you can add a font-family:FONT; between the brackets { } otherwise it is going to pick up on the font in your theme.
  • Change width by adding the following line into the .elinks main class width:50%; you can change the 50% to any size you prefer.
    Style #2 – Adding To Posts

    Add the following code to your posts. If you have changed the class title from elinks to something else, just replace that in the following code as well.

    <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>
    <li>Videos: <a href="https://www.youtube.com/channel/UCUQBtYVB4Zlb4uPA2OiF19A/videos">Unsolved Clips + Interview</a></li>
    </ul>
    </div>