Hello friends!
I’m facing an issue with my game.
I currently have some predefined themes for players to choose from. These are created using the following code.
Stylesheet:
/* Theme */
html.theme-black body {
background-color: black;
}
html.theme-black #ui-bar {
background-color: black;
}
html.theme-monokai body {
background-color: #272822;
color: #75715E;
}
html.theme-monokai #ui-bar {
background-color: default;
}
html.theme-sand body {
background-color: #1f1c17;
}
html.theme-sand #ui-bar {
background-color: #57422b;
border: 1px solid black;
}
html.theme-sand #menu li a{
border: 1px solid white;
}
/* Theme - end */
JavaScript:
// Setting up a list control for the settings property 'theme' w/ callbacks
var settingThemeNames = ["Default", "True black", "Monokai", "Sandblown"];
var settingThemeHandler = function () {
// cache the jQuery-wrapped <html> element
var $html = $("html");
// remove any existing theme class
$html.removeClass("theme-black theme-monokai theme-sand");
// switch on the theme name to add the requested theme class
switch (settings.theme) {
case "True black":
$html.addClass("theme-black");
break;
case "Monokai":
$html.addClass("theme-monokai");
break;
case "Sandblown":
$html.addClass("theme-sand");
break;
}
};
Setting.addList("theme", {
label : "Choose a theme.",
list : settingThemeNames,
onInit : settingThemeHandler,
onChange : settingThemeHandler
}); // default value not defined, so the first array member "(none)" is used
As you can see, the theme controls the background color of passages using the html class as well as the html.theme-name body selector.
I’m trying to change the body properties of a specific passage using the following code:
body.newspaper{
background-color: #f9f7f1;
padding: 0 24px;
}
I’ve tried the following selectors without luck:
.newspaper body
#passage-dailyNews
#passage-dailyNews body
.newspaper .body
html.newspaper body
The entire code to the above is as follows, and the rest of it works just fine, only the background doesn’t work.
/* START NEWSPAPER */
body.newspaper{
background-color: #f9f7f1;
padding: 0 24px;
}
newspaper h1 {
color: #404040;
font-weight: 700;
font-size: 4rem;
font-family: 'PT Serif', serif;
line-height: 1;
text-transform: uppercase;
text-align: center;
}
newspaper h2 {
font: 3rem/.95 'Oswald', sans-serif;
text-transform: uppercase;
margin-bottom: 16px;
color: #404040;
}
newspaper h3 {
font: 2rem/.95 'Oswald', sans-serif;
text-transform: uppercase;
margin-bottom: 12px;
color: #404040;
}
newspaper time {
font: 700 1.5rem 'Oswald', sans-serif;
text-align: center;
text-transform: uppercase;
border-top: 3px solid #333333;
border-bottom: 3px solid #333333;
padding: 12px 0;
display: block;
color: #404040;
}
newspaper time sup {
font-size: .875rem;
font-weight: normal;
color: #404040;
}
newspaper blockquote {
font: 1.8rem/1.25 'Oswald', sans-serif;
margin: 1.5rem 2rem;
color: #404040;
}
newspaper blockquote::before { content: open-quote; }
newspaper blockquote::after { content: close-quote; }
@counter-style emoji {
symbols: "\2615";
system: cyclic;
suffix: " ";
}
newspaper article ul {
list-style: emoji;
}
newspaper <figure>
<img src="./image.jpg" alt="" onerror="this.style.display='none'" />
<figcaption>Golden Gate Bridge</figcaption>
</figure>
newspaper figure {
margin: 0 0 12px 0;
text-align: center;
}
newspaper figcaption {
font-family: 'Oswald', sans-serif;
}
@media(min-width: 955px) {
newspaper article {
column-count: 3;
}
}
@media (min-width: 955px) {
newspaper article {
column-count: 3;
column-rule: 2px solid #333333;
column-gap: 42px;
margin-top: 36px;
color: #404040;
font-family: 'PT Serif', serif;
}
}
newspaper p {
color: #404040;
font-family: 'PT Serif', serif;
}
.author {
color: #404040;
}
/* END NEWSPAPER */
However using only the selector .newspaper will create a box with the right background, but it won’t fill out the entire passage, of course without changing the sidebar/UI.
The box is not adequate, and looks rather confusing and unfinished.
Please help me fix this problem, as I am completely lost on what to do from here. It seems that the theme takes presedence because it’s made with html classes, and therefore overrides the css styling of the newspaper, no matter the order in the css. I am at a loss.
Regards,
Nota Bao