Misaligned Stream

SkidAce
SkidAce
edited November 2013 in Campaign Portal Building
Can anyone tell me why my stream is at the bottom of the page and to the left "here":https://unconquered-kingdoms.obsidianportal.com/wikis/main-page but is in the correct place "overhere":https://unconquered-kingdoms.obsidianportal.com/wikis/characters ?

I'm lost...

Comments

  • pencilneckgeek
    pencilneckgeek
    Posts: 50
    When that happened on my site, it was because there was an errant somewhere on the page. I had a without a it was trying to close. I don't know if that's the case here, though...

    --The Geek

    Current Campaigns:

    Shadows of the Rift : Homebrew Pathfinder Campaign (Campaign of the Month, September 2018)

    The Dresden Files: Portland

    Deadlands: Riders on the Storm

    Velvet & Steel : 7th Sea 2nd Edition

  • Kallak
    Kallak
    Posts: 1,090
    Without actually digging into the page, I'd say pencilneckgeek is correct. An extra "" left over or put in by mistake is your culprit.
    All the best,
    - Kallak
  • SkidAce
    SkidAce
    Posts: 830
    But why would it affect one page and not the other? Hmmm. I will look over it after work.

    Thanks all...
  • SkidAce
    SkidAce
    Posts: 830
    I couldn't wait....that was it.

    I think I didn't figure it out on my own because I thought it was in my custom css.

    But the main wiki is different than the other pages, and at the end of my tribox was the offending div, which has since been banished from our sight(site).
  • erwin
    erwin
    Posts: 58
    hate to bump a dead thread but i'm having a related issue;

    stream shows at the bottom of my main-page, but nowhere else.

    is there a way to just hide the stream completely?
  • Unknown
    edited March 2015
    There sure is, though I suspect a similar issue with an errant being on that page causing the Stream to get pushed (though could be a sizing issue as well of content areas). Anyways, to hide the Stream wholesale like I do on my own Campaign Page you would put this in your CSS:

    .campaign-public-layout #sidebar #campaign-stream {
    display:none;
    }

    In my own CSS I have a !important on the display:none but that might be due to some of the other things I am hitting on it not pulling without it (I would try without the !important first as that would be better code overall technically speaking).

    If you cut out the Stream you may want to toss something on the Front Page to denote updates you want to point out to folks (a manual replacement of the Stream - I prefer this since it doesn't display my little minor updates to pages for formatting or spelling. To do that in a slick way you could setup the CSS News Ticker that I have implemented. I have it designed to work with 4 bits of content presently, but with a bit of work on the CSS you could include more items. To do this you would add this to your CSS:

    /* NEWS TICKER */
    /* TICKER EFFECT */
    @-webkit-keyframes ticker {
    0% {margin-top: -4px;}
    25% {margin-top: -34px;}
    50% {margin-top: -64px;}
    75% {margin-top: -94px;}
    100% {margin-top: -4px;}
    }
    @-moz-keyframes ticker {
    0% {margin-top: -4px;}
    25% {margin-top: -34px;}
    50% {margin-top: -64px;}
    75% {margin-top: -94px;}
    100% {margin-top: -4px;}
    }
    @-ms-keyframes ticker {
    0% {margin-top: -4px;}
    25% {margin-top: -34px;}
    50% {margin-top: -64px;}
    75% {margin-top: -94px;}
    100% {margin-top: -4px;}
    }
    @keyframes ticker {
    0% {margin-top: -4px;}
    25% {margin-top: -34px;}
    50% {margin-top: -64px;}
    75% {margin-top: -94px;}
    100% {margin-top: -4px;}
    }

    /* CONTAINING BOX */
    .news {
    box-shadow:inset 0 -15px 30px rgba(0,0,0,0.4),0 5px 10px rgba(0,0,0,0.5);
    width:75%;
    height:30px;
    margin:20px auto;
    overflow:hidden;
    border-radius:4px;
    -webkit-user-select:none;
    padding:2px 1px 2px 0;
    }

    /* BOX TITLE SPAN */
    .news span {
    float:left;
    color:#fff;
    padding:3px;
    position:relative;
    border-radius:4px;
    box-shadow:inset 0 -15px 30px rgba(0,0,0,0.4);
    font:16px 'Source Sans Pro',Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -webkit-user-select:none;
    }

    /* TICKER LIST FORMAT */
    .news ul {
    float:left;
    padding-left:5px;
    -webkit-user-select:none;
    -webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    -moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    -ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    }

    .news ul li {
    line-height:30px;
    list-style:none;
    }

    /* LINK STYLE */
    .news ul li a {
    color:#fff!important;
    font:14px Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -webkit-user-select:none;
    }

    .news ul li a:hover {
    color:#fff!important;
    }

    /* PAUSE ON LIST HOVER */
    .news ul:hover {
    animation-play-state:paused;
    }

    /* OPTIONAL PAUSE ON SPAN HOVER */
    .news span:hover+ul {
    animation-play-state:paused;
    cursor:default;
    }

    /* BACKGROUND COLORS */
    .blue {
    background:#347fd0;
    }

    .blue span {
    background:#2c66be;
    }

    .red {
    background:#d23435;
    }

    .red span {
    background:#c22b2c;
    }

    .green {
    background:#699B67;
    }

    .green span {
    background:#547d52;
    }

    .magenta {
    background:#b63ace;
    }

    .magenta span {
    background:#842696;
    }

    .yellow {
    background:#eae672;
    }

    .yellow span {
    background:#d3cf67;
    }

    .navy {
    background: #1E2227;
    }

    .navy span {
    border-top-color: #161A1F;
    }
    /* END NEWS TICKER */

    For the actual HTML that goes along with this you would place the following somewhere on your Front Page (obviously adjusting the links for your own content), and in the class you can substitute red for any of the color options I have listed in the above CSS (yellow, blue, red, green, magenta, navy):

    UpdatesTitle Text 1Title Text 2Title Text 3Title Text 4


    To see this in effect you can pop over to my Campaign Page and check it out. If you do a search on my page for Formatting you can get to a page where you can see the different color options in action (except for the navy one at the moment). The code should work across all modern browser (which is why it includes the keyframe bit multiple times). It is also responsive to respond to mobile devices, but longer titles for the content can cause some odd results as it attempts to cope with the overflow.

    --
    Alex
    "Dragon Age: Requiem - https://dragon-age-requiem.obsidianportal.com/
    Post edited by Unknown User on
  • erwin
    erwin
    Posts: 58
    awesome, thx for the super quick response.

    even with that code it won't hide the stream.

    which means I'll have to check out the rest of the css and find any loose 's or other sloppy coding that might be causing it.
  • Unknown
    Please note that I edited the above post. If it is not working with the base code try it modified with the inclusion of the !important tag which would look like this:

    .campaign-public-layout #sidebar #campaign-stream {
    display:none!important;
    }

    That should force the override since there is no doubt something about the stream in a CSS file OP loads after the custom css file which causes it to overwrite without that tag in place then (wasn't sure if it was the Stream that needed that or some of the other stuff I opt not to display). You can also try adding this to the CSS as it might be an issue of needing the tandem effect (been awhile since I pulled the Stream off my own page):

    #sidebar .stream-module-container {
    background-color:transparent!important;
    }

    Having both in place I believe should ensure that it does in fact pull the Stream off the Front Page. You will still see the Stream in the Dashboard with this code in place though, so keep that in mind.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • erwin
    erwin
    Posts: 58
    figured what it was; ive been pasting in other chunks of css to hide other variables

    there was something clashing with the #sidebar in the initial code. removing it fixed it and now the streams hidden :) ty again
  • Unknown
    Awesome, glad it is all sorted for you. Feel free to snag the manual ticker if your are so inclined, as I said I highly prefer it to the actual Stream for pointing out actual important and relevant updates.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • erwin
    erwin
    Posts: 58
    just checked out your DA: requiem campaign; that ticker and the rest of the page is awesome!
  • Unknown
    Thanks very much, and feel free to steal anything you like off there. I have my CSS posted (just search CSS on the page), and for a number of the bits and bobs in the CSS I have the HTML posted under the Formatting Test page (do a search for it as well, not directly linked anywhere). If there is anything you have trouble trying to figure out I would be happy to explain.
  • twiggyleaf
    twiggyleaf
    Posts: 2,006
    You tech guys are so wonderful!

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Unknown
    No sense in not sharing, as far as I see it anyways. The exchange of information and knowledge is what makes the world go 'round, or some such nonsense like that -- right?

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
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