Rendering tags on icons

DerkG
DerkG

Hi,

I'm looking at a method to render text on an icon, to automatically generate the names rather than edit it in photoshop for each icon. I now have that working using the html id as per below example page and the below code.

My problem: HTML ID's do not allow for spaces or (most) special characters inside the ID. So I'd rather use free text, but I have not been able to think of a way to do this. So, am I missing something really obvious here? Your suggestions please :)

https://thepriceofimmortality.obsidianportal.com/wikis/main-page

 

HTML CODE:


<div class="wikiiconlist">
*(#Kassen) [[Kassen | <img src="https://derkgroe.home.xs4all.nl/Pathfinder/kassen_ico.png"; title="Kassen" class="hover1" > ]]
*(#SerpentGorge) [[Serpent Gorge | <img src="https://derkgroe.home.xs4all.nl/Pathfinder/serpent_gorge_ico.png"; title="Kassen" class="hover1" >]]
</div>

CSS:


.wikiiconlist a {font-size:0px;}

.wikiiconlist li {
list-style-type: none ;
display: inline-block ;
width: 150px ;
margin: 5px ;
margin-top:-25px;
text-align: center ;
margin-bottom: 5px;
font-size:0px ;
color:#777 ;
border-radius:10px;
}

.wikiiconlist img {
z-index:1;
border-width: thin;
border-style: solid;
border-color: black;
border-radius:10px;
-webkit-box-shadow: 3px 3px 12px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 2px 2px 6px 5px rgba(0,0,0,0.5);
box-shadow: 2px 2px 6px 5px rgba(0,0,0,0.5);
}

.wikiiconlist li:before {
content:attr(id);
display: inline-block ;
position:relative;
text-align: center ;
width:150px;
height:35px;
padding-top: 5px;
top:200px;
font-size:20px ;
font-family: Fondamento ;
font-weight: bold ;
text-shadow: 3px 4px 2px rgba(0,0,0,0.8) ;
color: white ;
background-color: rgba(160,0,0,0.5) ;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index:2;
pointer-events:none ;
}

 

GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

 

Comments

  • DerkG
    DerkG
    Posts: 76 edited July 2017

    Progress! I realized that the 'title' attribute does not have the limitations that ID does, and it makes much more sense to use title anyway (since it IS a title). I would like to use the image title, but for some reason img:before refuses to work (it doesn't even show up in Chrome's inspector). So I have to assign a title attribute to the anchor instead, which makes the whole thing clunkier again. So any suggestions how to make this neater still? E.g. is there a way to set the title for a wiki link in textile itself?

     

    HTML code


    <div class="wikiiconlist">
    * <a href="/wikis/kassen" title="Kassen"><img src="https://derkgroe.home.xs4all.nl/Pathfinder/kassen_ico.png"; title="Kassen" class="hover1" ></a>
    * <a href="wikis/serpent-gorge" title="Serpent Gorge"><img src="https://derkgroe.home.xs4all.nl/Pathfinder/serpent_gorge_ico.png"; title="Serpent Gorge" class="hover1" ></a>
    </div>

     

    CSS


    .wikiiconlist a:before {
    content:attr(title);
    display: inline-block ;
    position:relative;
    text-align: center ;
    width:150px;
    height:35px;
    padding-top: 5px;
    top:200px;
    font-size:20px ;
    font-family: Fondamento ;
    font-weight: bold ;
    text-shadow: 3px 4px 2px rgba(0,0,0,0.8) ;
    color: white ;
    background-color: rgba(160,0,0,0.5) ;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index:2;
    pointer-events:none ;
    }

     

    Post edited by DerkG on

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • Johnprime
    Johnprime
    Posts: 252 edited July 2017

    Not sure if OP allows them or not, but you could also try the data attribute. So for instance, data-name="Kassen" should work for what you are trying, that is if OP allows you to use data attributes. I'm pretty sure you won't be able to use IDs as they should get stripped out of the code by the OP code.

    Additional comment I forgot to mention, data attributes only allow for lower case in the qualifier, so for instance, data-firstName would actually be data-firstname as camel case doesn't work in data attributes! I found that out the hard way. :-)

    Post edited by Johnprime on

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • cgregory
    cgregory
    Posts: 777

    Short answer img doesn't have :before or :after pseudo-selectors.

    Long answer: The before and after pseudo-selectors don't insert HTML elements — they insert text before or after the existing content of the targeted element. Because image elements don't contain text or have descendants, neither img:before or img:after will do you any good. This is also the case for elements like br and hr for the same reason.

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • DerkG
    DerkG
    Posts: 76

    DOH! I never thought about that. Here I was thinking perhaps the portal was blocking them somehow. Thanks for clarifying!

    Overall looks like the current method is the most practical, and it gets me the result I wanted (nice icon titles without having to edit them in photoshop)

    Thanks for the advice, all!

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • Johnprime
    Johnprime
    Posts: 252

    Didn't even think about that cgregory, great catch!

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

Sign In or Register to comment.

January 2022
Lakes of Blood and Ash

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions