Some CSS and HTML code (continuation of PM)

Basileus
Basileus
edited February 2014 in Campaign Portal Building
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

  • WolfLord
    WolfLord
    Posts: 278
    Thanks for the post Basileus!!! This is super helpful, your awesome looking campaign finally motivated me to start delving into code for myself. These are all very helpful

    "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
  • WolfLord
    WolfLord
    Posts: 278
    And the blue glowy boxes were definitely my main interest lol very sharp
  • WolfLord
    WolfLord
    Posts: 278
    Also, super random question, but is it possible to make spoiler buttons that reveal content?
  • madartiste
    madartiste
    Posts: 328 edited February 2014
    I think you could do it with transitions and a hover effect.

    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.
    Post edited by madartiste on
  • WolfLord
    WolfLord
    Posts: 278
    Yeah i tried the link you sent, which was totally what i was going for, but when i plugged it in i got a message saying obsidian portal cant use java script. Hover seems like the only feasible way around it. Im not surprised it didnt work otherwise i would expect so see that all over the place on peoples campaigns
  • madartiste
    madartiste
    Posts: 328
    Yeah, sorry. I tried it myself after I posted that and realized it was going to fritz out. Hopefully the hover thing will work okay for you. Not as ideal, of course, since it's easier to hover over something by accident than to click on a button.
  • WolfLord
    WolfLord
    Posts: 278
    GENIUS!!!! You code worked like a charm. This is amazing, anyone reading this just plug that first part into your CSS and the second onto the page and boom, spoiler baby!
  • WolfLord
    WolfLord
    Posts: 278
    Alright more questions... so would it be possible to:
    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
  • madartiste
    madartiste
    Posts: 328 edited February 2014
    Hm. You should be able to center the spoiler by just enclosing it in center tags I think? @My Spoiler@
    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.
    Post edited by madartiste on
  • WolfLord
    WolfLord
    Posts: 278
    Perfect. You are making my life so much easier right now haha thanks so much for all the help! This is why obsidian portal is amazing, the community is so damn helpful
Sign In or Register to comment.

March 2024
Wrath of the Highborn

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