Home › Discussions › Campaign Portal Building › Using another campaign's blockquotes, sidebars, and example bars - Campaign Portal Building Discussions on Obsidian Portal Community Forums
Using another campaign's blockquotes, sidebars, and example bars
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
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
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).
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code
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
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; }
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
At a glance not all of that is technically required, but that should be enough to get this working for you.
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub
Thanks for your help, that's exactly what I was looking for!
Blood & Bourbon, 2017 Campaign of the Year