Maxwell_Transparent.webp

World Styling Editor

SELECT THEME

CUSTOM CSS

@font-face{
font-family: runicscript;
font-style: normal;
font-weight: 400;
src: url(https://rawcdn.githack.com/ayydam97/runicscriptfont/9b0fe4314cca2042d59cdc6f6d890b4e453b1deb/RUNE.TTF) ;
}

.user-css .runicscript {
font-family: runicscript !important;
}

.user-css-presentation {
    background-image: url(https://www.worldanvil.com/uploads/images/bcffc1272cd47c62f6dcd38109e789e7.jpg) ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@font-face {
  font-family: Pirata One;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/pirataone/v9/I_urMpiDvgLdLh0fAtofhi-Org.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: MedievalSharp;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/medievalsharp/v12/EvOJzAlL3oU5AQl2mP5KdgptMqhwMg.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.user-css .article-title h1 {
    font-family: Merienda;
color: rgba(237, 230, 138)
}

.user-css h2 {
    font-family: Merienda;
color: rgba(237, 230, 138)
}

.user-css h3 {
    font-family: Merienda;
color: rgba(237, 230, 138);
font-size: 24px;
align: right;
}

.user-css h4 {
    font-family: Open Sans;
    font-size: 16px;
color: white;
}

.user-css .world-title {
    font-family: Merienda;
    text-align: center;
    font-weight: 600;
        padding-bottom: 20px;
padding-top: 25px;
    border-radius: 3px;
    font-size: 62px;
    white-space: nowrap;
color: rgba(237, 230, 138);
border-bottom: 1.5px rgba(237, 230, 138) solid;
border-top: 1.5px rgba(237, 230, 138) solid;
}

@font-face {
  font-family: Merienda;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merienda/v9/gNMHW3x8Qoy5_mf8uWMFMIo.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.user-css blockquote {
    background:#2f3032 ;
    padding: 10px;
    margin: 5px;
        font-size: 14pt;
    line-height: 1.5em;
    box-shadow: 0px 2px 5px grey;
color: rgba(237, 230, 138);
border-left: 1px
}

@font-face {
  font-family: Yellowtail;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/yellowtail/v11/OZpGg_pnoDtINPfRIlLohlvHwQ.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.user-css .article-panel .heading {
    color: rgba(237, 230, 138);
    border-top: 1.5px rgba(237, 230, 138) solid;
    border-bottom: 1.5px rgba(237, 230, 138) solid;
    background: #2f3032;
    padding: 7px 15px 7px 15px;
    border-radius: 0px;
    margin: -10px -10px 5px -10px;
}

.user-css.page,
.user-css-extended .page {
    background: rgba(47, 48, 50,0.8) ;
color: white;
border-top: 1.5px rgba(237, 230, 138) solid;
    border-bottom: 1.5px rgba(237, 230, 138) solid;
border-left: 1.5px rgba(237, 230, 138) solid;
border-right: 1.5px rgba(237, 230, 138) solid;
}

@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.user-css .top-left {
content: url(https://www.worldanvil.com/uploads/images/2298f597709bb25a12ed491812042b79.png);
position: fixed;
top: 0;
left: 0;
height: 100px;
width: 100px;
}

.user-css .top-right {
content: url(https://www.worldanvil.com/uploads/images/a6d34af9edea779fcb9a56d83974aa27.png);
position: fixed;
top: 0;
right: 0;
height: 100px;
width: 100px;
}

.user-css .bottom-right {
content: url(https://www.worldanvil.com/uploads/images/9abe73e46a3e755590853c02c5ff417e.png);
position: fixed;
bottom: 0;
right: 0;
height: 100px;
width: 100px;
}

.user-css .bottom-left {
content: url(https://www.worldanvil.com/uploads/images/21645edb818b9ce570aa96459ed4f3fc.png);
position: fixed;
bottom: 0;
left: 0;
height: 100px;
width: 100px;
}

.user-css a,
.user-css a:focus {
    color: rgba(237, 230, 138);
}
.user-css a:hover {
 text-decoration: none;
        color: rgba(176, 165, 101, 0.9);
}

.user-css .twitter-share-button {
display: none;
}

.user-css .world-share-rss-feed-link.btn.btn-xs.btn-primary {
display: none;
}

.top-left, .top-right, .bottom-left, .bottom-right { z-index: -1; }

.user-css .article-panel,
.user-css-extended .article-panel {
    padding: 10px;
    background-color: rgba(47, 48, 50, 1);
    border: 1px rgba(237, 230, 138) solid;
    margin-bottom: 15px;
transition: all 0.5s ease;
opacity:0.6;
}
.user-css .article-panel:hover,
.user-css-extended .article-panel:hover {
    opacity:1;
    z-index: 100;    
}

.user-css .article-panel .details p {
    text-align: center;
color: white;
font-size: 14px;
    padding-top: 5px;
    padding-left: 10px;
}

.user-css-image-thumbnail img.align {
width: 125px;
padding-top:20px;
}

.user-css .center-piece {
width: 100%;
    display: flex;
align-items: center;
margin-top: -15px;
}

.user-css .center-piece .article-panel  {
width: 50%;
max-height: 225px;
height: 225px;
margin-bottom: -20px;
margin-top; -10px;
margin-left: auto;
margin-right: auto;
}

.user-css .article-title h1 {
    font-family: Merienda;
 text-align: center;
    font-weight: 600;
        padding-bottom: 10px;
padding-top: 10px;
    border-radius: 3px;
        white-space: nowrap;
color: rgba(237, 230, 138);
border-bottom: 1.5px rgba(237, 230, 138) solid;
border-top: 1.5px rgba(237, 230, 138) solid;
}

.user-css,
.user-css p,
.user-css-extended,
.user-css-extended p {
    font-size: 16px;
}

.user-css .panel,
.user-css-extended .panel {
    background-color: rgba(32, 32, 33, 0.5) ;
    margin-bottom: 20px;
    border: 1px rgba(237, 230, 138) solid;
    border-radius: 0px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05) ;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.user-css .m-t-10.panel .user-css-image-thumbnail {
    margin-left: -15px;
    margin-right: -15px;
padding: 0;
}

.user-css img.border {
  border: 1px rgba(237, 230, 138) solid;
}

.user-css .regionscont {
width: 100%;
    display: flex;
align-items: center;
}

.user-css .regionscont .user-css-image-thumbnail  {
padding: 0px;
width: 50%;
    display: flex;
margin: 5px;
border: 1px rgba(237, 230, 138) solid;
}

.user-css .deuscrystals {
width: 100%;
    display: flex;
align-items: center;
}

.user-css .deuscrystals .user-css-image-thumbnail  {
padding: 0px;
width: 35%;
    display: flex;
margin: 5px;
margin-right: 20px;
}

.user-css .deuscrystals .text-justify {
width: 65%;
}

.user-css .rs {
width: 100%;
    display: flex;
align-items: center;
}

.user-css .rs .user-css-image-thumbnail  {
padding: 0px;
width: %;
    display: flex;
margin: 5px;
margin-left: 5px ;
margin-top: 50px
}

.user-css .rs .text-justify {
width: 65%;
}

.user-css .mag-left {
width: 100%;
    display: flex;
align-items: center;
}

.user-css .mag-left .user-css-image-thumbnail  {
padding: 0px;
width: 35%;
    display: flex;
margin: 5px;
margin-left: 15px ;
border: 1px rgba(237, 230, 138) solid;
}

.user-css .mag-left .text-justify {
width: 65%;
}

.user-css .mag-right {
width: 100%;
    display: flex;
align-items: center;
}

.user-css .mag-right .user-css-image-thumbnail  {
padding: 0px;
width: 35%;
    display: flex;
margin: 5px;
margin-right: 15px ;
border: 1px rgba(237, 230, 138) solid;
}

.user-css .mag-right .text-justify {
width: 65%;
}

.user-css .tagged-articles-list {
display: grid;
grid-gap: 20px;
grid-auto-rows: minmax(0px, auto);
grid-template-columns: repeat(3, 1fr);
}

.user-css .race-left {
width: 100%;
    display: flex;
align-items: center;
}

.user-css .race-left .user-css-image-thumbnail  {
padding: 0px;
width: 35%;
    display: flex;
margin: 5px;
margin-left: 15px;
border: 1px rgba(237, 230, 138) solid;
border-radius: 50%;
}

.user-css .race-left .text-justify {
width: 65%;
}

.user-css .race-right {
width: 100%;
    display: flex;
align-items: center;
}

.user-css .race-right .user-css-image-thumbnail  {
padding: 0px;
width: 35%;
    display: flex;
margin: 5px;
margin-right: 15px;
border: 1px rgba(237, 230, 138) solid;
border-radius: 50%;
}

.user-css .race-right .text-justify {
width: 65%;
}

.user-css div .backtoworld a {
    position: absolute;
    padding: 7px 10px;
    padding-left: 13px;
    background: #2f3032;
    color: #ede68a;
    border-top: 1px rgba(237, 230, 138) solid;
border-right: 1px rgba(237, 230, 138) solid;
border-bottom: 1px rgba(237, 230, 138) solid;
transition: all 0.5s ease;
opacity: 0.4;
}
.user-css div .backtoworld a:hover {
        opacity: 1;
}
.user-css .search-form #search-button {
color: #ede68a;
}

.user-css .search-form .typeahead-input {
background: #2f3032;
}

.user-css .search-form {
transition: all 0.5s ease;
opacity: 0.5;

}
.user-css .search-form:hover {
opacity: 1;
}
.user-css-extended .nav-tabs li a {
    font-family: alegreya sc,serif;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 800;
    text-transform: uppercase;
    background: #2f3032;
    border: 1px rgba(237, 230, 138) solid;
    color: #ede68a;
    border-radius: 0;
    margin-right: 0;
    margin-left: 0;
    box-shadow: none;
transition: all 0.5s ease;
opacity: 0.5;
}
.user-css-extended .nav-tabs li a:hover {
opacity: 1;
}

.user-css-extended h2 {
color: #ede68a;
}

.user-css-extended a.user-tag {
color: #ede68a;
}

.user-css-extended a {
color: #ede68a;
}

.user-css-extended a:hover {
color: white;
}

.user-css .center-piece .article-explorer-link {
transition: all 0.5s ease;
width: 1000px;
opacity: 0.5;
margin: auto;
}

.user-css .center-piece .article-explorer-link:hover {
opacity: 1.0
}

.user-css .regionscont .article-explorer-link {
transition: all 0.5s ease;
width: 50%;
opacity: 0.5;
margin: 5px;
}

.user-css .regionscont .article-explorer-link:hover {
opacity: 1.0;
width: 60%;
}

.user-css .regionscont .article-explorer-link .user-css-image-thumbnail {
width: 100%;
}

.user-css .menuitems {
width: 100%;
display: flex;
}

.user-css .menuitems .user-css-image-thumbnail {
padding: 2px;
border: 1px rgba(237, 230, 138) solid;
margin-left: 20px;
margin-right: 20px;
transition: all 0.5s ease;
opacity: 0.5;
}

.user-css .row.category-header h1 {
color: #ede68a;
font-family: Merienda;
}

.user-css .menuitems .user-css-image-thumbnail:hover {
opacity: 1.0
}

.user-css .user-css-image-thumbnail .portrait {
min-width: 100%;
border: 1px rgba(237, 230, 138) solid;
border-radius: 50%;
}

.user-css-extended h4 {
color: #ede68a;
}

.user-css .character-article-portrait {
border: 1px rgba(237, 230, 138) solid;
}

.user-css .category-title-icon {
color: white;
}

.user-css .label-danger {
background: #2f3032 5%;
border: 1px rgba(237, 230, 138) solid;
color: rgba(237, 230, 138);
font-family: MedievalSharp;
margin-top: 0px
}

.user-css .user-css-image-thumbnail .imageborder {
width: 100%;
border: 1px rgba(237, 230, 138) solid;
margin: 0px;
}

.user-css .faekinww .user-css-image-thumbnail {
transition: all 0.5s ease;
opacity: 0.5;
margin: 5px;
}

.user-css .faekinww .user-css-image-thumbnail:hover {
opacity: 100%;
}

.user-css .article-content-left {
border-right: 1px rgba(237, 230, 138, 0.3) solid;

Need help? Check out the CSS Styling Guide