Using another campaign's blockquotes, sidebars, and example bars

False_Epiphany
False_Epiphany

I adore the blockquotes, sidebars, and example bars on I've seen on this campaign and would love to add them to my own. However, directly copying the html gets me this...

...which isn't quite what I'm looking for. Any idea how to recreate what that campaign had? Is this some custom CSS or other wizardry?



I'd also love to be able to change the color of the blockquotes to something other than red.

Blood & Bourbon, 2017 Campaign of the Year

Comments

  • weasel0
    weasel0
    Posts: 434

    That is assuredly CSS wizardry at work. Some people have pages on their sites that list the css they use(I have 2 linked in my sig...I think...I haven't looked at it in a while). Its been far too long since I've dabbled to say off the cuff but read through and you can possibly cobble together the correct syntax(assuming you have access to the custom css input).

     

  • False_Epiphany
    False_Epiphany
    Posts: 11

    Unfortunately, I don't. No clue what CSS the author may have used.



    I've been trying my newbie hand at CSS to replicate what that campaign had. I've made some progress (I figured out how to change background colors and default text!), but any tips would be much appreciated. Not sure how the author managed to create the rounded borders... or assign different appearances to three different pieces of code.

    Blood & Bourbon, 2017 Campaign of the Year

  • Abersade
    Abersade
    Posts: 291

    This is a two part solution as it turns out. In the HTML you have to declare whether it's a blockquote, a blockquote sidebar, or a blockquote example by tagging it as a blockquote then specifying the class. That's how each one is targeted and styled seperately. The HTML side of the solution is what is discussed here: https://explorers-on-the-edge.obsidianportal.com/wikis/style-guide

    What isn't discussed there are the CSS changes that were made on the backend. For that you need to ref the following bit of code from their CSS:

    blockquote {

      background-color: #761213 !important;

      border: none;

      padding-bottom: 0.05em;

      padding-top: 1em;

      -webkit-border-radius: 10px;

      -moz-border-radius: 10px;

      border-radius: 10px;

      font-style: italic;

    }

    blockquote h5,

    blockquote li,

    blockquote p {

      color: #e1ad80 !important;

    }

    blockquote a {

      color: #ff9d49 !important;

    }

    blockquote.sidebar {

      background-color: rgba(0, 0, 0, 0.75) !important;

      color: white !important;

      font-style: normal;

    }

    blockquote.sidebar h5,

    blockquote.sidebar li,

    blockquote.sidebar p {

      color: #cccdc8 !important;

    }

    blockquote.sidebar h3 {

      text-align: center;

    }

    blockquote.sidebar a {

      color: white !important;

    }

    blockquote.example {

      background-color: rgba(0, 0, 0, 0.2) !important;

      color: rgb(35, 35, 35) !important;

      font-style: normal;

    }

    blockquote.example h5,

    blockquote.example li,

    blockquote.example p {

      color: rgb(35, 35, 35) !important;

    }

    blockquote.example h4 {

      font-family: 'Open Sans', Arial, sans-serif;

    }

    h1 + p:first-of-type:first-letter { float: left; color: #761213; font-size: 2.75em; line-height: 0.75em; padding: 8px 4px 0 0; font-family: Impact, Charcoal, sans-serif; }

    blockquote.sidebar p:first-of-type:first-letter { float: left; color: #cccdc8; font-size: 2.75em; line-height: 0.75em; padding: 8px 4px 0 0; font-family: Impact, Charcoal, sans-serif; }

  • Abersade
    Abersade
    Posts: 291

    At a glance not all of that is technically required, but that should be enough to get this working for you.

  • False_Epiphany
    False_Epiphany
    Posts: 11

    Thanks for your help, that's exactly what I was looking for!

    Blood & Bourbon, 2017 Campaign of the Year

Sign In or Register to comment.

August 2022
In Over Their Heads

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