Basileus
This thread is just a continuation of a response to some private messaging - the private message system was eating some of the code I was trying to show in my replies.
---
First, the soft bordered, "glowing" boxes such as seen here on the "front page":https://outremer.obsidianportal.com/. These are accomplished with a bit of HTML - they are simply divs with the following code:
@
Normal content with Textile styling goes here.
@
The important properties that accomplish that appearance are: the "background-color:rgba" with the fourth value set to 0.5 (sets the alpha channel to half transparency), and the "box-shadow" property which is used here to create two blurry borders (one inset and one outside) rather than a hard border. I don't mind using HTML on my front page but try to avoid using it throughout the wiki because it can't be updated across the whole campaign at once.
They are also surrounded by horizontal rules, which are not part of that object but contribute to the appearance. On the page horizontal rules can be created simply with Textile:
@---@
or HTML:
@@
However, I have customized the horizontal rules in my campaign CSS as follows to make them glowy/blurry as well (the default horizontal rule is awful) and change the behavior of how they interact with other content a bit:
@/* HORIZONTAL RULE COLOR AND STYLE */
hr {clear:none; color: transparent; background-color: transparent; border: 1px solid transparent; box-shadow: 0em 0em 1em lightskyblue;}@
---
Second, the borderless tables containing all the links such as shown on the "main wiki hub":https://outremer.obsidianportal.com/wikis/main-page or slightly differently "here":https://outremer.obsidianportal.com/wikis/races. These are a mixture of some campaign CSS and in-page table formatting. The CSS relevant to tables is below (the "nth-child" trick was courtesy of another forum member during the post-Reforge scramble, but I can't recall who to properly give credit):
@/* TABLE SETTINGS */
table {margin: 0px auto;}
.campaign-public-layout th {font-size: 120%; font-weight: bold; font-family:'Jura';}
#content table {background-color: transparent; border-style: none;}
#content tr:nth-child(even) {background-color: transparent;}@
And the on-page formatting is something like:
@
table{width: 100%; text-align:center; font-size: 120%;}.
|_{width:25%}. Column Header 1|_{width:25%}. Column Header 2|_{width:25%}. Column Header 3|_{width:25%}. Column Header 4|
|[[Link 1]]|[[Link 2]]|[[Link3]]|[[Link 4]]|@
---
EDIT: It occurred to me after all that, that you may have just been asking about the quotes (such as seen at the top of the front page). These are far simpler. On page is just the blockquote function, which in Textile formatting is just:
@bq. Content goes here.@
And styled in campaign CSS with:
@/* BLOCKQUOTE STYLING */
.campaign-public-layout blockquote {border-left: transparent; font-style: italic; font-family: 'Jura'; box-shadow: inset 2em 0em 1em -2em lightskyblue, -1em 0em 1em -1em aliceblue; }
.campaign-public-layout blockquote p {color: dimgray;}@
The relevant part is setting the default blockquote styling (the hard line using "border-left") to transparent, and then using the "box-shadow" property as above and offsetting each shadow to the side so it only shows on the left edge.
Comments
"Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
"Avatar: Conquest of the Imperial Order":https://avatar_adventures.obsidianportal.com/
"COTM November 2011":http://blog.obsidianportal.com/november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order/?utm_source=rss&utm_medium=rss&utm_campaign=november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
I think having a button you click on would require javascript, though. But you could set it up so the height of the div or the position of another element changes when you over over it.
Edit for the expanding div, something like @div.spoiler {height:30px;overflow:hidden;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
div.spoiler:hover {height:125px;}@
And put this in your page body: @Spoiler!!!!
Here's my spoiling text!@
You might have to tinker with the height values to get everything to show and hide properly.
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
A) Center the spoiler
B) Use an image as the thing to be hovered over
C) Use one of the headlines on the text that needs to be hovered over? i cant seem to get the headline to work without messing up the spoiler code
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
I think the image would work if you just put it in the first line of the div... You might need to adjust the starting height to make sure the whole image is visible.
By headlines do you mean the .h# tags? If so, did you try the standard HTML versions of them? ie: @My Headline My 2nd Headline@
EDIT: I'm also thinking there might be another way to do this with the :target psuedo selector. I've seen that trick used with CSS accordion style menus. It might take me some time to figure out, though, since I've never tried it myself. It *would* theoretically allow you to essentially make something that works similarly by clicking instead of hovering. I'll have to tinker and see what I can come up with.
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011