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
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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
CSS
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
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. :-)
Johnprime
Where the west is really wild!
The Valley of Life
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
orimg:after
will do you any good. This is also the case for elements likebr
andhr
for the same reason.They are among us!
XCom: Defiance - Campaign of the Month November 2016
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
Didn't even think about that cgregory, great catch!
Johnprime
Where the west is really wild!
The Valley of Life