Campaign custom side boarders?

2»

Comments

  • Basileus
    Basileus
    Posts: 589 edited March 2014
    No dice... front page, wiki, or anywhere else.

    Edit: Working in Chrome and Opera. Not working in IE, Mozilla Firefox, or Safari. :(

    Whyyyyy??? -shakes fist at heavens-

    ---

    Also Edit: I just copypasta'd that exact line of code from your campaign's custom CSS file into one of my campaigns and it worked as expected. Can you think of any other CSS that might be affecting the main content container?
    Post edited by Basileus on
  • madartiste
    madartiste
    Posts: 328
    Oh whoops. I'm terrible about checking cross-browser compatibility stuff, apparently. Looks like border image only works in IE11: "http://caniuse.com/border-image":http://caniuse.com/border-image

    Freakin' IE...
  • WolfLord
    WolfLord
    Posts: 276
    No way!!! :(((((( Double fist raising to the heavens!!!!!!!!!!! Alright OP community.... Everyone switch to chrome, ready... set... GO!

    Not off my head Basileus. Im gonna move it to the top of the code see if that makes it take priority. I'd be happy to send you an invite again to poke around if you think you can identify the issue.
  • WolfLord
    WolfLord
    Posts: 276 edited March 2014
    @
    .campaign-public-layout #content {max-width:1100px}
    .campaign-public-layout .highlight-container {display:none;}
    .campaign-public-layout #campaign-summary-row .row {opacity: 0.0; height: 30px}
    .campaign-public-layout .main-content-container {width:100%; padding: 0px;}
    .campaign-public-layout .campaign-landing-page-container {width:100%; padding: 0px;}
    .campaign-public-layout .section {width:100%;}
    .campaign-public-layout .post-main {width:100%;}
    .campaign-public-layout .front-nav-container {position:relative; z-index:5; width: 185px}
    .campaign-public-layout .sidebar {position:relative; z-index:5; width: 185px}
    .collapsable-nav-row .full-width.main-content-container {width: 900px; padding: 0px;}
    @

    That is the only other code I have that also affects main content container

    EDIT:

    I lied here is some more (i deleted that last line just now to see if that changes anything)
    @
    /*CHANGE WIDTH OF CHARACTER ENTRIES*/
    .character-list-item-container {width:115% !important;}
    .character-show .character-avatar .frame img {width: 350px; height:350px;}
    .character-list {width:70% !important;margin-left:65px;}
    .collapsable-nav-row.collapsed .main-content-container.full-width {width:75% !important;margin-left:65px;}
    @
    Post edited by WolfLord on
  • WolfLord
    WolfLord
    Posts: 276 edited March 2014
    In addition, it seems that the right row (fans, updates, etc...) is not getting slimmer on IE or Firefox when i view it only chrome. Any ideas what could be causing that based on the code im using above? On chrome it is thinner and allows room for a wider main content container but on IE and FF it is overlapping my content. I use chrome so none of these post re-forge issues have been made apparent to me until now haha.

    Edit: Okay on anything except chrome a lot of my shit gets real funky
    Post edited by WolfLord on
  • WolfLord
    WolfLord
    Posts: 276
    UPDATE:

    Alright, so thanks to the wizardry of Basileus it seems the issues were being caused by my own chaotic and amateur CSS which was messing things up. It should now be working correctly for everyone with custom border and all (fingers crossed!)

    "Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
  • Basileus
    Basileus
    Posts: 589 edited March 2014
    _Compatibilis Cross-browseritorum!_

    !http://ftparmy.com/images/css-wizard-01.jpg!

    _...exceptus Safario..._
    Post edited by Basileus on
  • WolfLord
    WolfLord
    Posts: 276
    !http://www.reactiongifs.com/wp-content/uploads/2012/09/orson_wells_Slow-Clap.gif!
    !http://25.media.tumblr.com/tumblr_m6h8h6439G1rwcc6bo1_400.gif!
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,978
    Better and better! Nice to see that the community is still helping each other!

    Just trying to help out.

  • Maesenko
    Maesenko
    Posts: 325
    Huzzah, the borders show in Firefox! And the banner is fully visible, so a second huzzah! And I finally put audio on to hear the background music,so a third huzzah!

    Huzzah! Huzzah! HUZZAH!

    _~Mae_
    "Whispers in Tamris":https://whispers-in-tamris.obsidianportal.com/

    ~Mae

    CotM Selection Committee

  • WolfLord
    WolfLord
    Posts: 276 edited March 2014
    "Haroo! Haroo! Haroo!":http://www.youtube.com/watch?v=lIr8u0j08gU

    Haha, yeah i think we finally got all the kinks figured out it looks like it is working great now :) Maybe we will see sweet borders popping up on the portal now. If anyone needs the code shoot a comment in this thread!

    "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
    Post edited by WolfLord on
  • WolfLord
    WolfLord
    Posts: 276
    I didn't think about it until now, but the border works equally well on the banner

    @
    .campaign-public-layout #banner-container .campaign-banner-image {border: 15px solid transparent; border-image:url(http://i1233.photobucket.com/albums/ff386/danbadour/fullborder_zps16eb04f2.png) 64 64 64 64 round;}
    @
  • SkidAce
    SkidAce
    Posts: 830
    The border on the banner is neat, technologically.

    But aesthetically, its to much. The circular pictures and menus on the left and right don't have it, and they look cleaner.

    My opinion of course.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,978
    I actually agree with SkidAce here- but man, that is slick....
    Looking awesome overall!!
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • WolfLord
    WolfLord
    Posts: 276
    Hmmm you guys might be right on this one... I will have to reconsider. In this case it might be a bit much. I will have to tweak with things and see about making it a bit less "in your face" with that greek pattern
  • Keryth987
    Keryth987
    Posts: 1,018 edited March 2014
    OK, so, can you share the code? I could really use this on the new site I'm working on.

    Thanks

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/
    Post edited by Keryth987 on

  • WolfLord
    WolfLord
    Posts: 276 edited March 2014
    Oh yeah totally! It should be further up the page but here it all is again.

    @
    /* BORDER GRAPHIC AND MAIN CONTENT CONTAINER */
    .campaign-public-layout .main-content-container {border: 15px solid transparent; border-image:url(http://i1233.photobucket.com/albums/ff386/danbadour/fullborder_zps16eb04f2.png) 64 64 64 64 round;}
    .collapsed.collapsable-nav-row .main-content-container {width: 75%; left: 5.06em; padding-left: 0em; background-color: white}
    /* MAIN CONTENT CONTAINER AND SIDEBAR SIZE */
    .campaign-public-layout .sidebar {width: 17%}
    .campaign-public-layout .main-content-container, .collapsable-nav-row.collapsed .main-content-container {width:75%;}
    .collapsed.collapsable-nav-row .full-width.main-content-container {width: 91%;}
    .collapsable-nav-row .main-content-container {padding-right: 0em;}
    @

    Mess around with the numbers till you get the sizes you want for things.

    "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
    Post edited by WolfLord on
  • Keryth987
    Keryth987
    Posts: 1,018
    Thanks Tolsmir,

    Now, two more questions.

    1: The border itself, transparent background I assume? What would happen if it wasn;t a transparent background? Would everything on the page show or would it be hidden?

    2: If I wanted to apply this to ONLY one page, specifically the Characters page, any idea how I would proceed?

    Thanks

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • Basileus
    Basileus
    Posts: 589 edited March 2014
    You can use any image for the border and it will slice out the center based on the pixel widths you set, so no need for a transparent background - it will look the same either way.

    As for the second question it should just be a matter of using the correct class as a selector. I'm on my phone at the moment but I'll take a look tonight when I get home.

    EDIT: Looks like you found it.
    Post edited by Basileus on
Sign In or Register to comment.

January 2023
Fake News, Real Adventure

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