Custom CSS Beta Discussion

11920212224

Comments

  • SkidAce
    SkidAce
    Posts: 830
    And here is the portion on the wiki page:

    @
    CHARACTERS
    MAGIC
    LIFE IN ALFAYSIA


    REGIONS AND GEOGRAPHY
    POWERS AND DEITIES
    COSMOLOGY


    HISTORY
    ORGANIZATIONS
    RUNNING THE GAME


    MONSTERS AND CREATURES
    MAPS
    TABLES AND RULES

    @
  • Wildhunt78
    Wildhunt78
    Posts: 17
    Thank you so much SkidAce, that will give me something to work with. I appreciate the time and effort mate.
  • Wildhunt78
    Wildhunt78
    Posts: 17
    I thought I should share another quick and dirty work around I found while messing with the code. To paste uploaded pics side by side copy like this:

    To get the line, right click on the thumbnail and select Inspect element and it will show you the image line. Copy / paste it, remove the word square_thumb and save. You should now be able to just put pics next to each other in a line like I have here: https://adelaide-wrath-of-the-righteous.obsidianportal.com/wiki_pages/work-page/edit

    I will make them buttons soon by adding :url-

    The only thing I have not worked out yet is what code you would add to change their default size. For now, I have to make sure I upload them at the size I want.

    I hope this is useful to someone.
  • Bondoid
    Bondoid
    Posts: 35
    wildhunt you can use inline css to modify your images. For example to set the size use



    Will stretch the image into a 200 by 200 square.

    Just using one, width for example, will keep the image in its default width-height ratio.

    You can do a lot of cool things with this, borders, padding, etc

    http://www.w3schools.com/css/

    is a great place to learn more.

    Bondoid
    "Legacy of Fire":https://our-legacy-of-fire.obsidianportal.com/
  • Wildhunt78
    Wildhunt78
    Posts: 17
    Thank you Bondoid, that is a great help. I am trying to improve my coding skills and that link looks great.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    I know that someone posted a fix for mobile device css. Can someone point me in the correct direction?

    Just trying to help out.

  • Unknown
    edited July 2015
    I have posted some stuff about working with mobile devices in various threads, but rather than track them all down and link them I would be happy to post something of an overview here again. That way it is in another place that people can hopefully find it in the future as well.

    There are a few things you can do when approaching mobile devices. The most beneficial is to have targeted CSS that handles those devices in instances where the content looks bad otherwise. The same can be done for desktops and laptops, or larger screens as well in the instances where it is useful. These are called *Media Queries* for those who want to research them further on their own. Some of the more common Media Queries that you would find helpful are going to be these:

    /* SMARTPHONES (PORTRAIT AND LANDSCAPE) */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* CSS HERE */
    }

    /* SMARTPHONES (LANDSCAPE) */
    @media only screen and (min-width : 321px) {
    /* CSS HERE */
    }

    /* SMARTPHONES (PORTRAIT) */
    @media only screen and (max-width : 320px) {
    /* CSS HERE */
    }

    /* TABLETS (PORTRAIT AND LANDSCAPE) */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* CSS HERE */
    }

    /* TABLETS (LANDSCAPE) */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* CSS HERE */
    }

    /* TABLETS (PORTRAIT) */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* CSS HERE */
    }

    /* DESKTOPS AND LAPTOPS */
    @media only screen and (min-width : 1224px) {
    /* CSS HERE */
    }

    /* LARGE SCREENS */
    @media only screen and (min-width : 1824px) {
    /* CSS HERE */
    }

    This is all stuff you can just dump right in with your CSS as normal, it is actually a part of CSS3 (and works just fine here on OP). Things to consider with it, since it is just more CSS after all, is that it will work in the cascading way of normal CSS. If you put it high in your CSS it could be overwritten by things you have popping up later. As you can imagine with the way all of this is setup there are many variations you could make with this. If you do some Google digging you can even find Media Queries for specific devices and other such things that could be potentially useful depending on how much effort you want to put into mobile support on a hobby project.

    In my own use of this on OP I have found that the above Media Queries tend to be more than enough for making the page mobile friendly without becoming overly invested in coding for my page. Of course if your troupe all uses one specific device (or just a couple) it could be beneficial to add in Media Queries for those devices on top of your basic mobile support to give your troupe an even better and customized experience when compared to other people that might be viewing your page.

    The best part about all of this is that this method is also considered to be responsive (meaning no page reload is needed for these adjustments to take place, they happen dynamically as a browser is resized to meet the requirements). If you want to see an example of how this works take a peek at my Dragon Age campaign on a Desktop and resize your browser width down to see the page gradually adjust itself to better display the content. The effect is more pronounced on some pages compared to others, but it is present essentially everywhere on my campaign.

    If you have some additional questions about all of this don't hesitate to hit me up, I am happy to help when I am able.

    --
    Alex
    "Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
    Post edited by Unknown User on
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Thank you so very much!! I owe you forever fans alexredeye!

    Just trying to help out.

  • Unknown
    Always happy to help out, let me know if you run into any issues at all with it.
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    OK. Anyone else having trouble with their sites? For some reason, even though I have changed no part of the CSS my Emerald City site is now all kinds of messed up. Fonts aren't recognized, images for buttons aren't working. What the hell?

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Unknown
    Mine seems fine, save for the issues I posted about videos and inline PDFs stopped working. I just did a dig through of my site quick and all else looks to be in order.
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Weird. Like I said it seems to only have effected my Emerald City site and none of my others. I am not sure why that would be since the code is pretty similar. But why would it spontaneously change regardless? Like I said I didn't change anything so it must be something on OPs end.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Only media embeds broken for me.

    Just trying to help out.

  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Aha! So something did change. Any idea what or how to fix it? Oddly the site works fine on my tablet. For now.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    OK. I got it working by completely changing the code for my EC site (some of which was older code since that site was my first one) and updating it to my current stuff. It seems to be working again. I just hope this kind of thing doesn't happen often.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • NikMak
    NikMak
    Posts: 379
    do you have you tube videos working again?
  • Unknown
    Still dead on my page
  • ZombieDragonPrincess
    ZombieDragonPrincess
    Posts: 9
    HumAnnoyd, What is the code? I don't have my old codes anymore.
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Well, as I said I got it working by using the CSS from my Star Wars site with the Emerald City images and fonts subbed in. I am not sure what it was that caused the original CSS to suddenly be broken. I hadn't changed it for quite a while.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Please share the working code...

    Just trying to help out.

  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    You want the code for my whole site?

    Well, I tried to post that but apparently it makes my post 6516 characters too long.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • saethone
    saethone
    Posts: 153
    I think they might still be talking about the youtube thing
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Yes, HumAnnoyd- just the code for the YouTube workaround.

    Just trying to help out.

  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Oh. Sorry. I am afraid you guys may have misunderstood what I was saying. I didn't have any Youtube videos on my site. Whatever change was made screwed up my fonts and links and buttons. I managed to get that to all to work again but I didn't have any videos so I didn't address that.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    JUNE 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Wildhunt78
    Wildhunt78
    Posts: 17
    I am not sure why, but I cannot place images behind my wikis now.

    I made a new site 2 days ago, inserted my image fine on the Front Page but the site refuses to the same now on any other wiki page I make. Code it same, new image uploaded fine. Very frustrating as I cannot work it out as it is identical to the front page.

    The code I am using is:



    Anyone else having issues and what can I possibly do? I have tried making other pages, different images, re-uploading the image.

    Link to what I have:

    https://hell-s-rebels.obsidianportal.com/
  • Unknown
    The CSS for this on my own page is too much to post on the forums here (it take a bit to get the desired effect). You can take a look at the CSS on my page (I have it posted publicly), just look for the CLEAN PARCHMENT PAGES section of it. Again, I would post here if I could, but it is about 2000 characters too long for a forum post.

    --
    Alex
    "Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
  • Wildhunt78
    Wildhunt78
    Posts: 17
    That is exceptional alex, your work is truly beautiful.

    Thank you for the code, I will work with that to ensure I am not stealing your whole page. I will add a thank you reference on my page for you.
  • Unknown
    Pft, feel free to take the whole things, I honestly don't mind. I wouldn't have put up so much detail about how to steal it if it bothered me.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    This forum really should be stickied

    Just trying to help out.

  • Krothos
    Krothos
    Posts: 230
    Really?! I guess starting with minor miracles would be some minute progress. lol
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