Dot Point Justification (with the indent being to the "dot" instead of the left hand margin)

IanHoulihan
IanHoulihan
edited July 2014 in Campaign Portal Building
Hey All,

I want to display dot points where the text (which goes over several lines) is justified with the indented text after the dot rather than the text as it moves to the next line justifying itself to the far left hand margin (I hope that makes sense).

As good example would be found here under the topic of Horizontal Alignment.

http://www.goer.org/HTML/intermediate/align_and_indent/

Any assistance would be greatly appreciated.
«1

Comments

  • IanHoulihan
    IanHoulihan
    Posts: 79
    Also, any assistance as to changing what the dot appears as would also be appreciated.
  • Basileus
    Basileus
    Posts: 589
    Can you mock-up a picture of what you are trying to achieve or provide a link to any other examples?
  • NikMak
    NikMak
    Posts: 379
    Do you mean 'bullet points'? (is this a UK only terminology? I assumed it was universal!)

    in which case its just an asterix in front of each line you want to bullet point

    it should format as a 'bullet' (or 'dot' ) in front of each sentence - in fact there is an 'auto button' in the OB portal editor when your editing your page to insert them.

    However i have no idea how to change them to squares or arrows or whatever, as this was all I could find with a five minute search

    http://meta.stackexchange.com/questions/138628/textile-style-for-numbered-and-bullet-lists

    Hope this helps

    Cheers

    Nick
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    Bullet points is the same thing :)

    Here's the mock up image:

    "TEST IMAGE":https://db4sgowjqfwig.cloudfront.net/campaigns/84705/assets/345141/test-image.jpg?1404741420
    Post edited by IanHoulihan on
  • Basileus
    Basileus
    Posts: 589 edited July 2014
    Ahhh, bullet points! Now I understand.

    Add this line to your campaign CSS (you must be an Ascendant member):

    @.campaign-public-layout .wiki-page ul:not(.inline-list) {list-style-position: outside; list-style-image: url('http://www.example.com/image.gif'); padding-left: 2em;}@

    And some explanation of each property:

    @list-style-position: outside;@

    Puts the bullets "outside'' the text so that all lines of text will start together ("justified" to a vertical line on the left).

    @list-style-image: url('http://www.example.com/image.gif');@

    Uses an image of your choice in place of the bullet (could make it an arrow, or shield, or a giant flaming animated medusa head, etc...) Replace "http://www.example.com/image.gif" with the URL of the image you actually want to use. I recommend uploading it to your campaign and linking to that.

    @padding-left: 2em;@

    Since the list-style-position property is actually moving the bullet points to the left (outside the text) rather than moving the text to the right, you may find that everything is too far left. This property is actually moving things to the right (basically indenting it). Play with the value until it looks right in your campaign.

    Once that's set up, just do as NikMak said and put an asterisk in front of each list item.

    EDIT: An example "here":https://outremer.obsidianportal.com/wikis/test
    Post edited by Basileus on
  • NikMak
    NikMak
    Posts: 379
    hmm, giant flaming medusa head bullet points... i think i like it!
  • IanHoulihan
    IanHoulihan
    Posts: 79
    Just for the record Basileus - you're page is amazing. I need to know how to set up a CSS file so I can change my boring old font. Is there a tutorial anywhere as to how to learn how?
  • Basileus
    Basileus
    Posts: 589
    Thanks! I spend an inordinate amount of time fiddling with it.

    Learning CSS in general can be a longish process, but there are a few good resources:

    "W3 Schools":http://www.w3schools.com/css/css_intro.asp Has tutorials and can also be searched for explanations of specific properties.
    "CSS Tutorial":http://www.csstutorial.net/ More beginner-friendly tutorials.
    "Cheat Sheet":http://www.lesliefranke.com/files/reference/csscheatsheet.html Great quick reference if you aren't sure what you are looking at.

    Really though, unless you are looking to take a class or otherwise spend a lot of time learning CSS, the best way is to browse some of the basics, and keep asking questions here on the OP forums (plus there are some things that are Obsidian Portal specific) and try to pick up things as you go.

    Where are you looking to change your font? Campaign-wide, just the public-facing pages, just links, etc...?
  • IanHoulihan
    IanHoulihan
    Posts: 79
    I'm wanting to change the font across the board, please just making some of the titles a little more fancy and with colour - the black is just bland.

    I'm also wanting to get away from having to use the picture of a line rather than just a line produced by the html without it making a mockery of the page.

    Also, with the bullet points, its works great, but I've found it changes the font back to standard size (and I have h6. and my standard font).
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    Also, I'd also like to know how to block text like they do "HERE":www.website.comhttp://paizo.com/pathfinderRPG/prd/monsters/aasimar.html#_aasimar (i.e the word Aasimar in blocked in black with write writing) on the Paizo site. By way of example, instead of the character stats page looking like "THIS":https://pathfinder-the-price-of-immortality.obsidianportal.com/wikis/sam-iyam-level-2 where I have to use lines I want them to be blocked.
    Post edited by IanHoulihan on
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    Last for tonight, here is my "Wiki Page":https://pathfinder-the-price-of-immortality.obsidianportal.com/wikis/main-page

    How do I get the text to be a bit closer together?
    Post edited by IanHoulihan on
  • Basileus
    Basileus
    Posts: 589 edited July 2014
    h4. Font Style

    So there are numerous types of text elements, but you can set many of them with a single rule by combining selectors. The "font-style" property is what sets the font. CSS Example:

    @p, a, td, h1, h2, h3, h4, h5, h6 {font-family: 'fontname';}@

    You'll need to find a font you want to use on "Google Fonts":https://www.google.com/fonts and add it to your campaign (under Settings > Advanced, right underneath the Custom CSS box). Then replace "font" in the code with the name of the font you have chosen.

    This will affect a lot of text though - we may need to narrow the scope down later.

    h4. Lines

    Are you talking about horizontal rules? It looks like you are already using them.

    You can style them with CSS though. In one of my campaigns I use a simple black line but with nice faded edges:

    @/* HORIZONTAL RULE STYLING */
    hr {clear: none; border: 0;height: 1px;background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));}@

    h4. Font Size

    The "font-size" property controls the size of text, so just add it to the rule given above. Should be "font-size: 0.9em;" to match your h6 headers.

    h4. Blocks

    The link is directing back to this page for some reason, so I couldn't look at what you are trying to achieve.

    Are you looking for either "fieldsets":http://www.w3schools.com/tags/tag_fieldset.asp or "blockquotes":http://www.w3schools.com/tags/tag_blockquote.asp?

    h4. Line Spacing

    The space between lines is controlled by the "line-height" parameter. Right now, it looks like you are using unordered lists, so to make those closer together:

    @.wiki-page ul {line-height: 1.6;}@

    1.6 is the default that you are currently using, so decrease that value to make the lines of text closer together (I wouldn't go too far though, maybe try 1.4, whitespace looks good). This rule will only affect unordered lists on your wiki pages.
    Post edited by Basileus on
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    *Font Style*

    Thanks. I'll play with that.

    *Lines*

    The issue I have with the lines is that they space the paragraphs too far apart. I want the line to have only a few pixels between the text above it and the text below it.

    *Blocking*

    I wish I knew the terminology better. Here's my best description: Take a line where text should be. Put black in it. Type text and its clear or white.

    Check the image at the bottom of "this page":https://pathfinder-legacy-of-fire.obsidianportal.com/wikis/rules-skills-craft in the table. The titles ITEM, CRAFT SKILL and CRAFT DC are the sort of look I'm talking about:

    *Font Size*

    What if I just wanted to add that as a generic rule across the site?

    *Line Spacing*

    Just worried about this for the horizontal lines.

    And don't get me started on tables...
    Post edited by IanHoulihan on
  • Basileus
    Basileus
    Posts: 589
    h4. Horizontal Rules

    Ah, so what you are looking to decrease is the "margin" property. Margins control extra space outside the borders of an element. so try something like this:

    @hr {margin: 0.5em 0;}@

    The first number is the vertical margins and the second is the horizontal margins.

    h4. Blocking

    Hmm, sounds like setting a background color and then changing the text color.

    So you'll put a selector first depending on what kind of elements you want to do this way. Lets say you want to make all your h5 headers look like this. Probably use some CSS like this:

    @h5 {background-color: black; color: transparent;}@

    Instead of "h5", you could use "p" to select all paragraph text. Instead of "transparent", you could set that to "white". And so on and so forth.

    *

    One other note on font styles, it might be easier to simply set two classes rather than various types of elements, like this:

    @.campaign-public-layout, .campaign-dashboard-layout {font-family: 'fontname';}@

    Honestly, finding the right combination of selectors is always an exercise in trial and error, you have to go back and forth between figuring out what you want, then figuring out what unintended consequences that had. Since we are working with modifying Obsidian Portal's existing CSS, usually when we change one thing we inadvertently change others.
  • IanHoulihan
    IanHoulihan
    Posts: 79
    So can you create new "H" classes? So instead of being limited to H1-6 you can create addition H classes but with specific styles?
  • IanHoulihan
    IanHoulihan
    Posts: 79
    Also, is it possible to have different types of bullet points? For example for most of the campaign I am happy to have the leave icon as my dot point. Its a forestry style campaign and it suits the green style theme. But there are other areas within the game that I want to use a Mask of Razmir for the dot points.

    Ideas?
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    Also, thanks for all this help by the way. Its made an impact already on my layout (although I haven't played with font's yet).

    With the Horizontal Lines though, I've noticed the space between a horizontal line and the end of a "list" is still greater than the distance between a horizontal line and say the top of a header.

    "EXAMPLE":https://pathfinder-the-price-of-immortality.obsidianportal.com/wikis/main-page

    Any further suggestions there?
    Post edited by IanHoulihan on
  • Basileus
    Basileus
    Posts: 589
    The "hr" used above is in reference to "horizontal rule". That's the official name for the horizontal lines. That said, you can certainly create new classes - they won't technically be "headers", but you can use them the same way and apply them to text or other elements in your site. You aren't limited to only what already exists in OP.

    *

    If the other areas are different sections of the site (like characters versus wiki entries), then you can use different selectors without having to change anything in the campaign pages. But if its just different wiki pages that you may want to have different styled lists, you'll have to put some HTML on those pages (assigning a new class to those lists that you want to have unique bullet points) and then setting the style for this new custom class in your CSS.

    So on the page you'd have to create the list with HTML like this:

    @
    List Item
    @

    And then in your CSS, create the corresponding style. Thankfully, since it is still an ul element, you don't have to repeat all the settings, just change the image you are using:

    @.mask-of-razmir {list-style-image: url('http://www.example.com/maskofrazmir.gif');}@

    *

    Glad its helping! :) Campaign looks good.

    You're seeing extra space because the lists have margins at the bottom but not the top by default. You can control this too though. Go back to the line of CSS that styles the unordered lists (starts with the selector ".campaign-public-layout .wiki-page ul:not(.inline-list)"), and add this property inside the brackets after the others:

    @margin-bottom: 1.25em;@

    1.25em is the default size that you are currently using. You can reduce the value until you find a distance you like, or even set it to 0 to remove the margin entirely.
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    I'm also having a real issue trying to get the font to turn white with the background colour. Currently, the background works, but the font remains the same black/grey that it does everywhere else. The example page I'm using is "THIS":https://pathfinder-the-price-of-immortality.obsidianportal.com/wikis/evelyn-lanthaldar-level-1 page.

    This is the code I'm using in the settings:

    h5 {background-color: #707e00; color: #ffffff;}
    Post edited by IanHoulihan on
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    For the record, the whole Masks thing doesn't appear to be working at all.

    Check "THIS LINK":https://pathfinder-the-price-of-immortality.obsidianportal.com/wikis/rules-of-the-faith-razmir

    Am I doing something wrong? The CSS has this:

    bq). .mask-of-razmir {list-style-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/69960/assets/346540/mask-razmir-sml.png?1405069607');}
    .campaign-public-layout .wiki-page ul:not(.inline-list) {list-style-position: outside; list-style-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/69960/assets/345910/leaf-icon.png?1404910097'); padding-left: 2em; margin-bottom: 1.25em;}
    hr {margin: 0.3em 0;}
    h5 {background-color: #707e00; color: #ffffff;}
    Post edited by IanHoulihan on
  • Basileus
    Basileus
    Posts: 589 edited July 2014
    Hmm, looks like a specificity problem. The way CSS works is essentially that more specific rules take precedence over more general rules.

    So here, in order to ensure that the rule for the .mask-of-razmir class is more specific, lets copy the selectors from the other rule and then add the class selector to them, like so:

    @.campaign-public-layout .wiki-page ul.mask-of-razmir:not(.inline-list) {list-style-image: url(‘https://db4sgowjqfwig.cloudfront.net/campaigns/69960/assets/346540/mask-razmir-sml.png?1405069607’);}@

    That should fix it here. However, its also worth noting that rules are applied in the order they appear in your CSS. So you might want to move the .mask-of-razmir line down below the other, just to get used to the idea of starting with general rules and then moving to the more specific ones.

    *

    The rule for the text color seems to work, so its probably another specificity issue. Try this:

    @.campaign-public-layout .main-content h5 {background-color: #707e00; color: #ffffff;}@

    Those are the same selectors that the default Obsidian Portal application CSS is currently using to apply color to your h5 headers. Here you will be using the same specificity, but because your custom CSS is applied after the default application CSS, it should take precedence.
    Post edited by Basileus on
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    Well currently, the CSS says this:

    bq). .campaign-public-layout .wiki-page ul:not(.inline-list) {list-style-position: outside; list-style-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/69960/assets/345910/leaf-icon.png?1404910097'); padding-left: 2em;margin-bottom: 0.5em;}
    .campaign-public-layout .wiki-page ul.mask-of-razmir:not(.inline-list) {list-style-image: url(‘https://db4sgowjqfwig.cloudfront.net/campaigns/69960/assets/346540/mask-razmir-sml.png?1405069607’);}
    hr {margin: 0.5em 0;}
    .campaign-public-layout .main-content h5 {background-color: #707e00; color: #ffffff;}

    Everything is working except the masks. All that is coming up is a bullet point where the Mask should be. So the code appears to be working, except for the direction to the image (perhaps)?

    This is what I have on the page that I want the masks to show up on:

    bq).

    Five lashes with a whip.
    Branding (1d4 points of fire damage plus scarring).
    Beating (probably Krant if this occurs at the Tamran temple), dealing nonlethal damage. The person administering the beating starts dealing lethal damage if the offender fights back.
    Added chores, such as additional transcription or backbreaking labor that leaves the offender fatigued.
    Donning the mask of shame for 1d6 hours. The mask allows the character to breathe, but he cannot speak, hear, or see while wearing the mask. The mask is locked to the offender’s head (Disable Device DC 25).

    I'm yet to tackle the fonts issue, as I want to get this right first before I proceed.

    Also, any recommendations for the site at all?
    Post edited by IanHoulihan on
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    And then I found this:

    "BACKGROUND TEXT FOR ADVENTURE LOG":https://db4sgowjqfwig.cloudfront.net/campaigns/69960/assets/347265/layout-issue2.jpg?1405214212

    That was unexpected but I'm guessing has been caused due to the background text creation. Suggestions?
    Post edited by IanHoulihan on
  • Basileus
    Basileus
    Posts: 589 edited July 2014
    Those are h5 headers in the adventure logs, so they are following the same CSS rule. You could make that rule apply to only more specific areas of your campaign. Something like:

    @.wiki-page h5 {background-color: #707e00; color: #ffffff;}@

    Would make that rule only apply on h5 headers in your wiki pages.

    EDIT: Remembered you were trying to get it on your character pages. For that, use this rule:

    @#character-details h5 {background-color: #707e00; color: #ffffff;}@

    *

    Not sure about why the mask isn't working. Ran it through the CSS validator in case there was some minor formatting error I wasn't seeing, but it came back fine.

    Try throwing "!important" just inside the semicolon at the end of that rule and see if that makes the mask show? That's not a good long-term solution, but should indicate if its a specificity problem or something else.
    Post edited by Basileus on
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    *MASK BULLET POINTS*

    Unfortunately the "!important" didn't work.

    Things went wacky though with the attempt to change the background H5. My suggestion is that we try to have a universal rule for the H5 and just change it for the Journal pages as they will be the exception.

    Thoughts?
    Post edited by IanHoulihan on
  • IanHoulihan
    IanHoulihan
    Posts: 79
    Do each of the sections (i.e. Wiki, characters, items, journal, etc) have their own CSS title?
  • IanHoulihan
    IanHoulihan
    Posts: 79
    Well then...I think I fixed the problem myself with this:

    bq). .campaign-public-layout .wiki-page ul:not(.inline-list) {list-style-position: outside; list-style-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/69960/assets/345910/leaf-icon.png?1404910097'); padding-left: 2em;margin-bottom: 0.3em;}
    .campaign-public-layout .wiki-page ul.mask-of-razmir:not(.inline-list) {list-style-image: url(‘https://db4sgowjqfwig.cloudfront.net/campaigns/69960/assets/346540/mask-razmir-sml.png?1405069607’);}
    hr {margin: 0.3em 0;}
    .wiki-page h5 {background-color: #707e00; color: #ffffff;}
    .campaign-public-layout .main-content h5 {background-color: #707e00; color: #ffffff;}
    .adventure-log-index .main-content h5 {background-color: white; color: black;}
  • Basileus
    Basileus
    Posts: 589 edited July 2014
    Excellent! That's what you have to do - play with it until you find the code that accomplishes what you want. And as you learn more about how CSS "cascades", it will be less trial and error and more educated design.

    Did you use your browser's "inspect element" functionality to find the .adventure-log-index class? If so, that's a huge step and knowing how to do that will unlock all sorts of potential customization. Congrats!

    -For the masks, lets try this: instead of applying it to the "ul" element (the unordered list) and letting the child elements inherit, lets apply it to the "li" element (the actual list items).-

    Scratch the above... I was playing with your CSS in my browser and it looks like for some reason an extra pair of quotes is getting added to the URL of the image. Lets try just removing the single quotes around the mask image URL. If the application keeps adding the extra quotes on its own, that should fix it.
    Post edited by Basileus on
  • IanHoulihan
    IanHoulihan
    Posts: 79 edited July 2014
    Cool - thanks. No, that's not what I did, but I was looking up what the various pages are called and I found them on the site somewhere. Yay for me.

    As to the quotes: I changed the single quote from what it was to the standard text. It would appear that when I performed the copy-paste function that it took the "symbol" of the single quotation instead of the ascii text only. I've fixed that and WA-LA - mask appears!
    Post edited by IanHoulihan on
  • IanHoulihan
    IanHoulihan
    Posts: 79
    Now to change fonts and font colours.
Sign In or Register to comment.

July 2022
Signs and Portends

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