Help requested for MYSTERIA

twiggyleaf
twiggyleaf
edited November 2013 in Campaign Portal Building
Please help with Mysteria

"https://mysteria.obsidianportal.com":https://mysteria.obsidianportal.com/

I used a template of Wolfhound’s and then adapted, inserting my own stuff. It seems to me that some of the CSS code works and some doesn’t so I am not sure if I should remove all or none or just some, but the main changes I would like to make are:

MAIN LOOK OVERALL:

Use the “faded parchment” (http://cdn.obsidianportal.com/assets/177083/Paperbacklight.jpg(Paperbacklight)
background as the backing for the text in the central section, which is currently white, and use a darker brown colour for the actual background that appears on the left and right bars supporting this. I like my previous insert, Dark Brown Scratched Wall (http://cdn.obsidianportal.com/assets/177039/Brown_Grunge.jpg(Brown Grunge) for this but the original image was 585 x 439 px and the Info under the BACKGROUND DROP function recommends a minimum of 1000 x 800 px so I am also fine with using another dark brown background if my preference doesn’t work. Hopefully, that should enable the light coloured text to be seen better.
(Possibly have the central text block widened but this is not serious. I have currently set the width on the CONTENT MAX WIDTH as 1700).

On most pages (apart from FRONT WIKI PAGE), I like the new Fonts but if the page is now FADED PARCHMENT instead of white, I would prefer the text to be very dark brown instead of black, with the LINKS being a light brown colour, possible changing to orange or red on hover/click.

I love the new Character Page exactly AS IS and would not change it other than the darker background as described above.

Individual Wiki pages should look as they are but on FADED PARCHMENT instead of white, juxtaposed with DARK background as described above and font colours changes as described above.

Calendar page should follow this trend, as well as maps and items (i.e. darker background only). I had not made any adjustments to ADVENTURE LOG style as we had not started playing, but would generally like to keep the same feel throughout.

Forum pages look fine as they are, even with the faded parchment background, although if overall style demands darker background that is also cool, so long as text can be read easily.

PLAYER CHARACTER DSTs: The new fonts on these are much better. I would still prefer them to be on FADED PARCHMENT (rather than white), with dark brown background (in line with other pages).

FRONT WIKI PAGE:

I had originally copied a WOLFHOUND design of identical pictures, three in a row, with Text in each one that provided a link to the WIKI Pages. I would now like to keep this positioning but I wish to substitute a different picture for each link. (I can replace MOCKUP pictures at a later date when style is arranged). I don’t mind too much about any suggested FONT changes but I would like a definite change in colour on HOVER. (Pictures were just SQUARE BOXES in terms of their shape).

I would like to keep the flashing Mandala and may change the TITLES: “Windows of Mysteria”, “Doors to Mysteria” and “Development” to something a little more dramatic in terms of FONT CHOICE.

IMAGES OF THE PAST:

Before the Reforge, I took snapshots of my whole CSS EDIT section, as well as snapshots of each page to show how it looked before (although I am quite into moving forward and not sticking to the old style). If those would be helpful, I can always email them to a prospective Vanguard Advisor.
My BANNER is temporary at the moment and I can easily change it later to suit layout!

Much hope and anticipation. I am really at a loss with the CSS component, having copied and pasted from template with not too much understanding of how it works.

Twiggyleaf aka Mark Osborn
My email address is [email protected]

"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

«1

Comments

  • Belrathius
    Belrathius
    Posts: 206
    Hey Twiggy,

    I'm not Vanguard (nor do I intend to become one, just don't have the CSS-fu to be in the same league), but the statement you made about "It seems to me that some of the CSS code works and some doesn’t" made me think about some of my own efforts. One thing you may want to do is the stuff that doesn't seem to work when it should, add the !important flag after the setting. For me, it made the difference in many cases. An example of use would be

    color:red;

    vs.

    color:red !important;

    This flag has to be added to each style that doesn't seem to be working, it's not a single setting added to the string of styles. I won't pretend to understand the technical aspects of why it makes a difference, only that it does.

    Hope that helps while you wait for more capable assistance.

    - Bel
  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Wow! I'm afraid I cannot even be that exact. I just know things like WIKI PAGE text comes through but not pictures. My inclination is to delete ALL and start again but I am afraid that this might make matters worse, so would really want someone who knows CSS code to advise me. Thanks for your advice, Bel.

    "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

  • JustinMason
    JustinMason
    Posts: 36
    Mark,

    Let's touch base on looking into your CSS. I think I understood most of what you're looking for, but would like to discuss further. When you get a chance, send me an e-mail at [email protected] (include your old screen shots so we have a reference point), and we'll see about getting on the same page and getting some ideas together on moving forward/fixing the issues you're having.

    - Justin (HoptownGameNight)
  • JustinMason
    JustinMason
    Posts: 36
    I still have to update my own campaigns at some point, but presently they're all on hiatus due to scheduling conflicts so I'm game to help out on yours when/if you want.
  • wolfhound
    wolfhound
    Posts: 354
    Hey Twiggy, how goes? :) Email sent
  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Justin, thanks very much for your offer of help. I have sent an email to Wolfhound because it is his AULD LANG SYNE template that I had copied to create the Mysteria site. Wolfhound, email sent and have sent an invite to join.

    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

  • JustinMason
    JustinMason
    Posts: 36
    Cool deal. Hit me up if you need anything. :)
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,883
    Great to see you back on the boards Justin!!

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Thanks, Justin.
    I may take you up on that offer later, even if only to give Wolfhound a break from my CSS ignorance.

    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

  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    A big thank you to Wolfhound for his "building repairs" and to Obsidian Portal for the whole VANGUARD idea. It makes those of use who are less TECH-SAVVY a little more comfortable after the changes. I am enjoying the new look REFORGE and am almost ready to move forward with my actual "DUNGEON" work, which has been sprung upon me so that I have to start GMing in the next two weeks instead of next year.

    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

  • wolfhound
    wolfhound
    Posts: 354
    Good deal. When you get ready to tackle those wiki buttons just add me back if it gets too unwieldy. :) It's all good.
  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Can any of you SAVVY TECH WIZARDS suggest a CSS Code for me to add that will change the colour of the TEXT in my Adventure Log Comments?

    See "COMMENTS":https://mysteria.obsidianportal.com/adventure-log/our-heroes-lay

    You will note I have a TWO TONE background and the Black Text disappears against the DARK background. I think that problem would be solved by changing the BLACK text to WHITE. Any takers????

    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

  • Savannah
    Savannah
    Posts: 188
    bc. .comment-text {color:white;}

    should work.
  • wolfhound
    wolfhound
    Posts: 354
    Yup.

    Optionally

    bc.. .comment { background-image: url(http://cdn.obsidianportal.com/assets/177083/Paperbacklight.jpg); padding: 5px; }

    p. that puts your parchment in play

    p. Different matter - also if you track down the following (I believe it's already in your CSS) and add the following

    bc.. .adventure-log-post-container .post-comments.post-section { background-size: cover; }

    p. I believe that will make your darker orange/brown image a little nicer.
  • SkidAce
    SkidAce
    Posts: 827
    I like the wiki buttons!
  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Thanks All! So quick and so effective.

    I will keep the white text. It works fine. Actually, Wolfhound, although I see exactly what you are getting at, I rather like the random two tone effect of the comments section and so will keep it at that size with just the writing changed from black to white. Thanks Savannah. I knew I'd get a return on those Underdark Cities sometime! LOL! And thanks, SkidAce. Wolfhound helped me set the images up and I edited the pics in Google Picasa. Glad you like them. I do too!

    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

  • Savannah
    Savannah
    Posts: 188
    Hah, I'd just been thinking about that recently -- feel free to PM me if there's anything else I can do for you.
  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Cool. I have a couple of minor tweaking things but will get back to you later.

    "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

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,883
    Looking awesome!!

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Thanks KVP, so here's my next thing that I don't know how to do.

    I am setting up my EXPERIENCE Page. There are three bits. I have already put in a GRAPHIC for Experience Points but below it I want to do STATUS POINTS - for this I would like to have pictures of the PCs (including GM PC) exactly as they are in the CHARACTER Front Page ("Characters":https://mysteria.obsidianportal.com/characters ) - exactly the same size but just the pictures in a row. I am going to put a number underneath each one relating to their STATUS POINTS so there should be seven pictures with seven numbers underneath.

    Character Pics to be in a row: Anastrianna, Arca Domina, Arcael, Lord Flasheart, Spikey Jonze, Truman Click, Yander - The number underneath can be in the brown Joti One font that I am using throughout the site. (This number will probably NEVER be bigger than a two digit number).

    Here is the page in question:

    "Experience":https://mysteria.obsidianportal.com/wikis/experience

    Pictures to be in a row underneath the Text: "Status Points"

    Many thanks in anticipation,
    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

  • wolfhound
    wolfhound
    Posts: 354
    Have you already tried just right clicking on the Character page and cut and pasting he DIV or IMG tag for the character in question?

    For example

    When I right click and "view source" this is the Tag for Anastriana

    bc..

    p. If you use the same "class" it should use the same CSS (size etc.). Then just put that in a regular Obsidian Portal table

    bc.. | | | |
    | 1 | 2 | 3 |
  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Hey Wolfhound, that is GREAT with the pictures. I have now managed to put them in a row and they look really cool but I can't for the life of me work out a way to get the numbers aligned underneath.

    "LINK":https://mysteria.obsidianportal.com/wikis/experience

    There are seven images and I would like numbers underneath basically centrally aligned under each picture. The numbers in order are:
    5,4,9,10,0,8,5

    So if anyone can help me out with that, it would be really cool!

    Thanks,
    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

  • dawnhawk
    dawnhawk
    Posts: 113
    Twiggy - when you put your numbers in the table - just wrap your numbers inside a - it will make the numbers align to the center of the table cell.

    You do need to put the images into a table though - from the HTML source it doesn't look like they currently are?

    So using the images you currently have on there it would look like this:

    | | | | | | | |
    | 5 | 4 | 9 | 10 | 0 | 8 | 5 |
  • Savannah
    Savannah
    Posts: 188 edited November 2013
    Have you considered putting them in a table? So the images would be in row one and the numbers in row two.

    ....well, that was sad. Ninja'd badly on such a short post.
    Post edited by Savannah on
  • twiggyleaf
    twiggyleaf
    Posts: 1,748 edited November 2013
    Thanks Dawnhawk and Savannah. I had taken the pics out of table mode because they weren't aligning properly but I must have had a small coding error somewhere because it is working now. Yippee! twigs
    Post edited by twiggyleaf on

    "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

  • twiggyleaf
    twiggyleaf
    Posts: 1,748 edited November 2013
    OK, I think I have one last little CSS bugbear left in me – it is not essential so I have not let it bug me too much, but it is slightly irritating and if anyone can think a nice quick fix, then I would be most grateful:

    It is a couple of text colour change elements - one on my "Front Page":https://mysteria.obsidianportal.com , one on my "Wiki Pages":https://mysteria.obsidianportal.com/wikis/main-page and one on my "Calendar Page":https://mysteria.obsidianportal.com/calendar

    All have little blocks with Orange Text on Orange Background, and all are fine on hover (changing to red on dark brown). Is there something I can do to change the ORANGE text on each orange block to BROWN, without affecting other text?
    Front Page: “Become a Fan”/”You are a Fan” – change to DARK BROWN TEXT
    Wiki Pages: "See All Pages" - change to DARK BROWN TEXT
    Calendar Page: “Send Reminder” AND “Going” – change to DARK BROWN TEXT

    (All of the above are on the RIGHT HAND NAVIGATION BAR)

    twigs
    Post edited by twiggyleaf on

    "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

  • Savannah
    Savannah
    Posts: 188 edited November 2013
    Yep, you can do that.

    bc. .become-a-fan-button, .see-all-wiki-pages-button, .reminder-button, .attending-link
    {
    color: [code for whatever dark brown you want] !important;
    }

    (I haven't double checked that .reminder-button ("send reminder") and .attending-link ("going") don't affect other things -- if they do, let me know and I can narrow it down.)
    Post edited by Savannah on
  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Savannah

    Thanks. That is great but now I need to change the text colour on hover because everything turns to brown.... so background turning to brown is fine but now all those text need to change to a lighter colour on the hover......

    (Once you let me know the code, I can try various colours to get the best thing).

    Thanks in anticipation....

    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

  • Savannah
    Savannah
    Posts: 188
    ....shoulda thought of that.

    Try:

    bc. .become-a-fan-button, .see-all-wiki-pages-button, .reminder-button, .attending-link
    {
    color: [code for dark brown] !important;
    }
    a:hover.become-a-fan-button, a:hover.see-all-wiki-pages-button, a:hover.reminder-button, a:hover.attending-link
    {
    color: [code for lighter color] !important;
    }
  • twiggyleaf
    twiggyleaf
    Posts: 1,748
    Thanks Savannah.

    Today you may call yourself "awesome possum!"

    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

Sign In or Register to comment.

The first Campaign of the Month for 2021 is Gaxim Plague!

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