Homepage CSS

Guild Exclusive

This is a guild-only feature. To get access, Join the Worldbuilder's Guild!

The world homepage is a good target for a special layout as it is different from all other pages. The code snippets below are intended to either be used as-is or to make minor adjustments to fit your needs. They either do common tasks or something very specific that is useful to many people. Always read the orange information boxes within the spoilers as they explain any extra steps necessary. Otherwise, you can just copy the code into your world's CSS.
Before reading this you should first check out the general world homepage customization guide to explore the options available with settings.
All examples in this article will only affect the world homepage as they include selectors unique to the homepage. You can ensure that your own CSS is only applied to the homepage by applying the code below.

 .user-css.page-world-homepage

World Heading

The top section of the world homepage.

Title

Default Title CSS - Click to Expand

.user-css .heading h1.world-title {
  font-family: alegreya sc,serif;
  font-weight: 700;
  font-size: 42px;
  padding-top: 10px;
  padding-bottom: 15px;
}

Subtitle

Change Font Size - Click to Expand

.user-css h1 .world-subtitle small {
   font-size: 20px;
}

Current Date

Default CSS - Click to Expand

.user-css h3.world-currentDate {
  font-style: oblique;
  font-size: 18px;
  margin-bottom: 20px;
}

Authors

Hide Authors - Click to Expand

.user-css .world-authors {
  display: none;
}

Smaller Section Text - Click to Expand

.user-css .world-authors p {
  font-size: 10px;
}

Default Author Link CSS - Click to Expand

.user-css .world-authors .author-item {
  font-family: kalam,cursive;
  font-size: 16px;
  padding: 10px;
}

Description

Hide Description - Click to Expand

.user-css .heading .subheading {
	display: none;
}

World Bookcase

The world bookcase contains the book covers of the categories which are configured to be displayed as such. The book covers are centred and begin a new line as soon as there is not enough space within the row. You can change the alignment of the covers by changing the code below to say right or left instead.
Default CSS - Click to Expand

.user-css .world-bookcase .bookcase {
  text-align: center;
}

Bookcover

The bookcovers can be embedded anywhere on WorldAnvil with the [book:category-id] BBCode. This is why it has its own guide.

Custom Content 4

The custom container between the bookcase and the table of contents an be targeted with the following class:
Center Align Text - Click to Expand

.user-css .user-custom-content-4 {
  text-align: center;
}

Content

1. World Heading
2. World Bookcase
3. Custom Content 4
4. World Content
   1. Table of Contents (Left)
   2. Category Content (Center + Right)
   3. Featured & Recent Articles (Center)
   4. Social Media (Right)
5. Homepage Footer

CSS Guides

Linked Guides

CSS for Basic Components

Related Guides

Guide to the World Homepage

Patreon Button

The patreon button, which appears below the bookcase, should not be changed or moved.

World Content

This section holds all the navigation elements of the homepage. You can customize some things here via settings, but many elements are set in stone. There are many CSS examples to hide, move or reorder these widgets.

Table of Contents (Left)

The table of contents contains the codex and any other navigational widgets. The codex, maps & timelines can be moved to another column via setting.

Custom Content 1

Justify Text - Click to Expand

This content field is only availble for Grandmaster+ guild members.

.user-css .world-content .user-custom-content-1 {
	text-align: justify;
}

World Codex

This is the primary navigation of your world. It contains a tree structure of every category and article in your world. Changing the icons of before the link is possible in the respective category or article.
Hide Codex - Click to Expand

.user-css .world-content .world-menu {
	display: none;
}

Hide World Meta Link - Click to Expand

This item can be hidden in the world meta editor and does not need to be hidden via CSS. But it always shows for you as the author of the world.

.user-css .world-meta-categories-link {
  display: none;
}

Timelines

Hide Timelines - Click to Expand

.user-css .world-content .world-timelines {
	display: none;
}

Maps

The CSS for the items of this list can be found here.
Hide Maps - Click to Expand

.user-css .world-content .world-maps {
	display: none;
}

Community Widget

The widget itself uses the same classes as the article sidebar panel. It is wrapped by a class do affect the entire widget.
Hide Community Widget - Click to Expand

.user-css .world-content .widget-community {
	display: none;
}

Followers Counter

The widget itself uses the same classes as the article sidebar panel. It is wrapped by a class to affect the entire widget.
Hide Follower Count - Click to Expand

.user-css .world-content .followers-counter {
	display: none;
}

Move Follower Count - Click to Expand

IMPORTANT: Copying this code will not copy the -signs. You have to write them in manually afterwards. And you need to replace [{] with { at the end of the media line. Play with the numbers behind top and left to position the widget. The media part ensures that it is only moved on big screens. If you wish to move it on smaller screens as well you need to adapt the numbers.

CSS snipped provided by Vince REDACTED

 media screen and (min-width: 1200px) [{] 
	.user-css .world-content .followers-counter {
  	box-shadow: none;
  	position: absolute;
  	top: -1450px;
  	left: 900px;
  	 	background-color: var(--b80
  }
  
	.user-css .world-content .followers-counter .panel {
  	margin-bottom: 0px;
	}
}

Change Widget Order

Change the order that the elements within the first column appear in.
Change Order - Click to Expand

This snipped can be used as is. Adjust the order by switching out the numbers.

CSS snipped provided by Hannah

.user-css.page-world-homepage .table-of-contents {
 display: flex;
 flex-direction: column;
}


.user-css.page-world-homepage .table-of-contents .world-menu {
 order: 1;
}


.user-css.page-world-homepage .table-of-contents .world-timelines {
 order: 2;
}


.user-css.page-world-homepage .table-of-contents .user-custom-content {
 order: 3;
}


.user-css.page-world-homepage .table-of-contents .followers-counter {
 order: 4;
}


.user-css.page-world-homepage .table-of-contents .world-maps {
 order: 5;
}

Category Content

The category content displays a preview of the category content when a category is clicked in the world codex. This container is hidden otherwise. It also moves both the center and right column down when opened.
Hide Category Content Panel - Click to Expand

.user-css #world-category-content {
  display: none;
}

Featured & Recent Articles Column (Center)

Custom Content 2

Justify Text - Click to Expand

This content field is only availble for Grandmaster+ guild members.

.user-css .world-content .user-custom-content-2 {
	text-align: justify;
}

Featured & Recent Articles

These sections are filled with article blocks. Their CSS guide can be found here.

Social Media Column (Right)

In the third column all the social media widgets are placed. This can be used to connect your world to your online presence.

Custom Content 3

Justify Text - Click to Expand

This content field is only availble for Grandmaster+ guild members.

.user-css .world-content .user-custom-content-3 {
	text-align: justify;
}

Social Widgets

The social widgets should not be changed as they are provided by external sources.
Default Order - Click to Expand

This snipped can be used as is. Adjust the order by switching out the numbers.

CSS snipped provided by Hannah

.user-css.page-world-homepage .world-content .col-md-6 {
 display: flex;
 flex-direction: column;
}


.user-css.page-world-homepage .user-custom-content-3 {
 order: 1;
}


.user-css.page-world-homepage .world-social-media {
 order: 2;
}


.user-css.page-world-homepage .world-social-discord {
 order: 3;
}


.user-css.page-world-homepage .world-social-twitch {
 order: 4;
}

World Homepage Footer

This includes the global copyright footer and the RSS feed button.

RSS Feed Button

Default CSS - Click to Expand

Not the !important. Some CSS trickery is required to overwrite this.

.user-css a.world-share-rss-feed-link {
	background: #8c0a0a;
	border-color: #000;
	color: #fff !important;
}