Adventure Index - float right on date

Bortas
Bortas

https://morwindl-2.obsidianportal.com/adventure-log

So I'm working on trying to make the date (in the wax seal) float: right, so that I can have more of the adventure summary in the teaser. Any ideas?

-bort

Comments

  • Johnprime
    Johnprime
    Posts: 252

    I'm not sure how you'll be able to get the seal much farther to the right than you already have it. I tried some positioning, setting it to absolute, but if I pushed that element further left than 555 px, it would move outside it's containing box and disappear.

    I did manage to get it off to the edge by assigning (position: absolute; left: 555 px;) to just that element. You might be able to set up a custom css using the post-date class, but I'm not completely sure it won't affect anything else.

    See the image below.

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • Keryth987
    Keryth987
    Posts: 939

    OK, so I think I need to steal MORE of your code now :)

    Might I inquire as to what the CSS is for the Journals? :)

  • Bortas
    Bortas
    Posts: 645

    Oh, my bad, I didn't mean I was trying to move it further over, rather, the teaser text I want to occupy more of that background. Much like a paragraph of text with a float right element in it, where the text butts right up to the image, and wraps around it and then underneath it.

    Keryth, I apologize, I did a poor job of commenting my adventure log index code, but here it is:


    /* Adventure Log Index - remove backgrounds and unused items */
    .adventure-log-index .adventure-log-post, .adventure-log-index .post-date { background-color: transparent !important; }
    .adventure-log-index .overflow-fade-out { background: none; }
    .adventure-log-index .last-comment, .adventure-log-index .comment-date, .adventure-log-index .post-view-link { display: none; }
    .adventure-log-index .main-content-container { padding-right: 0px !important; }
    .adventure-log-index .adventure-log-post-title.title { border-bottom: none; margin-bottom: 0px; }
    .adventure-log-index .adventure-log-post .columns { height: auto; }

    /* Adventure Log Index - post teaser backgrounds */
    .adventure-log-index .adventure-log-post-container { background-size: 100% 100% !important; background-repeat: no-repeat; transition: all .3s ease-in-out; padding: 0px;
    background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/154555/assets/795050/BG-adventure-teaser.png); }

    /* Adventure Log Index - title updates */
    .adventure-log-index .adventure-log-post-subtitle.subtitle { font-family: Courgette; }
    .adventure-log-index .adventure-log-post-title a { font-weight:900; font-family: Papyrus; transition: all .15s ease-in-out; text-shadow: 1px 1px 0 #373737; font-weight:bold; }

    /* Adventure Log Index - date & comments wax seal */
    .adventure-log-index .date-column { background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/154555/assets/719065/BG-red-wax-seal.png); background-size: 100px 100px; background-repeat: no-repeat; background-position: 43% .5%; transition: all .4s ease-in-out; text-shadow: 2px 2px 0 #000000; height: 102px !important; }
    .adventure-log-index .comments-section { padding-top: 0px; font-size: 8px; }

    -bort

Sign In or Register to comment.

Campaign of the Month
September 2021

D&D 3.0: Tales from Mystara


Read the feature post on the blog!
Or 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