Baldur's Gate 3

Tags: video game, baldur's gate 3, bg3, video game, gaming, gaming, dnd, dnd, dungeons and dragons, dungeons and dragons, customizable, customizable, intro animation, intro animation, baldurs gate, baldurs gate
Description:

Customizable Baldur's Gate 3 layout complete with game font, custom cursor, custom interest topics, and intro animation! If you happen to use this layout or even if you just enjoy it please consider leaving a comment and/or leave a kudos as it helps with visibility!
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by RiviR (https://layouts.spacehey.com/layout?id=93558) -->

<style>
/*if you want to edit the scrollbar, I recommend using the code from N30V3N0M at https://blog.spacehey.com/entry?id=11476 just be sure you add it after the end of this code to be sure that there isnt any conflicts!*/

:root{

/*this section will be where you can edit images and gifs used within this layout*/
	--intro-animation:url("https://i.ibb.co/WFsjjgZ/intro-screen.gif"); /*this adjusts the image or gif for the intro animation*/
	--profile-background:url("https://i.ibb.co/FhmSp9G/bg3-main-menu-screen.gif"); /*this is the main background for the profile*/
	--mouse:url("https://i.ibb.co/ZfKHRYL/gloves.png");/*This is for the custom cursor*/
	--logo:url("https://i.ibb.co/drZ98YF/logo.png");/*this changes the logo image*/
	--online:url("https://i.ibb.co/b5H8w65/bg-f8f8f8-flat-750x-075-f-pad-750x1000-f8f8f8-removebg-preview.png");/*This is the online icon*/
	--supporter:url("https://i.ibb.co/pdmHNKg/300px-Shining-Honour-die-design-webp-removebg-preview.png");/*this is the supporter award image*/
	
/*this is various colors used in this layout.*/
    --main-background: rgba(49, 39, 37, .9);/* this is the color of the profile background. to chage the transparency, change the fourth number anywhere between 0 and 1, 0 being completely transparent and 1 being not transparent at all.*/
	--section-background: rgba(0, 0, 0, .8); /* this is for the sections like "comments" and "interests". change the transparency the same way you would for the profile background.*/
	--buttons: #22160Dff; /*this is the background of the buttons you see.*/
	--border:#604729ff; /*this is the border for buttons and different sections*/
	--button-hover:#8C613Bff; /*this is what the buttons change to when you hover over them*/
	--text-color: #F3F1E5ff; /*this is the color of the body text. Unfortunately the header text is a bit complicated to code so i wont be able to make that easily editable. However, I will be sure to mark where exactly that code is, and explain how to change it there!*/
	--link-hover: rbga(5, 64, 80, 1); /*this is the color for hovering over links. Mostly the view mores but this will also include the contact section as well*/
	--notification: #043547ff;/*this is what the nav buttons will change to if there is a notification*/
	
/*this section is the different fonts.*/
	--header-font: 'Uncial Antiqua'; /*this is for all headers.*/
	--body-font: 'Alegreya', serif; /*this is for everything else that is not a header*/
	
/*this is for the border radius. This will determine how rounded elements are.*/
	--curve: 8px;

/*this will customize your blurb headers */
    --about-me: "Character Sheet";
    --wiltm: "";/*this is the Who Id Like To Meet header. I have it set to hidden by default, but if youd like to have your own text here, just type it in between the quotes.*/

/*this is the customization for the "links" section*/
    --links: "My Other Socials";

/*this is for customized interest topics.*/
	--topic1: "Games";
	--topic2: "Music";
	--topic3: "DnD Class and Race";
	--topic4: "BG3 Companion";
	--topic5: "Animal";
	--topic6: "Food";
	
/*that is all for the root! this should make everything fully customizable in the code. Anything that is an outlier will be visibly marked with three exclamation points with an explanation */
	  
	}

/*this is the intro animaton*/
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image:var(--intro-animation);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position:center;
	animation: yourAnimation 7.8s ease 0s 1 normal forwards;
	pointer-events: none;
	}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

/*this is for the cursor.*/
* {
	cursor: var(--mouse), auto !important;
	}
	
/* this is the background of the main profile*/
body, .bodycontent{
    background:var(--profile-background);
    background-attachment: fixed!important;/*this is what allows the background to scroll with you. change "fixed" to "scroll" if you want this feature turned off*/
    background-size: 100%; /*fits the background to the device being used. Mobile phones will just have a repeating background. if you don't mind it looking stretched out when using phones, add a 100% right before the semicolon.*/
    border-color:#00000000;
    border-width:55px; 
    border-style:dotted;
	}
/*this changes the main profile body*/
.profile{
    background: var(--main-background);
    padding-top: none!important;
    border: solid 3px; /*change the border style and size  here. You can find a bunch of different styles online, solid is just the one i thought personally looked best, but ridge and groove also look good too imo.*/
    border-color:var(--border);
    
}	
/*this wil make sure there isnt any weird gaps in the layout. Without the "main" section, a strip of white will be present in between the nav buttons and the main profile body*/
main{
background: none!important;
padding-top: 0px;
	}

/*this replaces the logo*/
.logo {

content:var(--logo);
width: 144px !important;
height: 48px !important;
	}

/* this gets rid of the background for the nav bar links (home, browse, etc.). It also fixes some odd padding issues with the nav buttons*/
nav ul{
    background: none!important;
    padding-top: 15px!important;
    border: none;
	}

/*these next few lines are where the buttons for the nav bar are actually made.*/
nav .links a{
	background:var(--buttons);
	font-style: normal;
	padding: 5px;
	padding-left:7px;
	padding-right:7px;
	border-radius:13px/50%;
	border-color:var(--border)!important;
	border: ridge 2px;
	border-right: groove 3px;
	border-bottom: groove 2px;
	opacity: .9;
	}

/*this makes the buttons look nicer*/
nav .links{
padding: 10px;
display: flex;
justify-content: space-around;
}

/*this changes the color of the buttons when you hover over them*/
nav .links a:hover{
	background:var(--button-hover)!important;
	text-decoration:none;
	color:var(--text-color)!important;
	border: groove 2px;
	border-right: ridge 3px;
	border-bottom: ridge 3px;
	}

/*this changes the notification bell to a custom picture. right now its nothing, but if you want to change it add a URL to the photo you want after "display"*/
nav .links li .icon{
	display: none;
	}
	
/*this changes the color of the footer and the header*/
.top, footer{
    background-color: rgba(49, 39, 37, .9)!important;
    padding-top:none!important;
    border: solid 3px;
    border-color:var(--border);
	}

/*these next two change the search bar and the text in the header*/
.search-wrapper input, button {
   background: var(--section-background);
   color: var(--text-color);
	font-family:var(--body-font);
	}
	
nav .top, nav .links a, .logout-btn, .logout-form {
	font-family:var(--body-font);
	}
	
/*this makes links italicized*/
a {
	font-style: italic;
	}
	
/*this turns link text a blue when hovering over them.*/
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active{
	color: rgb(5, 64, 80)!important; /*I'm not sure why, but the root variable refuses to work here. If youd like to change this color, just replace the rgb with the corresponding color code you would like*/
	}
	
/*this gives the non header text its color*/
p, .count, a, nav .top, .online, .awards a{
    color:var(--text-color);
    font-family: var(--body-font)!important;
	}
	
/* gives the text the gold appearance and added a border. this is not my code. I got this bit from the website https://addisonlegere.com/blog/gold-text-with-css-image/ */
h1, h2, h3, h4{
  color:  #D5AD6D;
  font-family:var(--header-font);
  background: -webkit-linear-gradient(transparent, transparent),
              -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, 
                                           rgba(213,173,109,1) 26%, 
                                           rgba(226,186,120,1) 35%, 
                                           rgba(163,126,67,1) 45%, 
                                           rgba(145,112,59,1) 61%, 
                                           rgba(213,173,109,1) 100%);
  background: -o-linear-gradient(transparent, transparent);
			  -webkit-background-clip: text;
			  -webkit-text-fill-color: transparent;
 	}
	
/*this is where the online image is changed. it may look funky from your perspective with the edit profile link, but it looks fine from other people's point of view*/
.online img{
	font-size: 0;
	}
	
.online:before{
	display:inline-block;
	width:15px;
	height:15px;
	content:"";
	background:var(--online); no-repeat 0 0;
	background-size:100%; 
	animation: blink 3s;
	animation-iteration-count: infinite;
	}

/*this changes the color of the "online" text*/
.online{
	color:var(--text-color);

/*i dont like this bit of code because the blinking is out of sink, but if you want the "online" text to blink as well, just remove the astrisks and slashes before "animation" and after "infinite;"*/

/*animation: blink 3s;
animation-iteration-count: infinite;*/
	}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

	}
	
/*the next two sections both get rid of the vanilla supporter logo, and replaces it with a new one in that order*/
.supporter img{
	font-size: 0;
	}

.supporter:before{
	display:inline-block;
	width:15px;
	height:15px;
	content:"";
	background:var(--supporter); no-repeat 0 0;
	background-size:100%;
	}

/*this makes the various sections dark and adds a border around all of them*/
.contact, .mood, .table-section, .blog-preview, .friends, .profile .blurbs .inner{
    background:var(--section-background)!important;
    border:solid var(--border) 2px!important;
    border-radius: var(--curve)!important;
	padding: 2px;
	text-align: center;
	}
	

/*this gets rid of the heading background for each section*/
.contact .heading, .friends .heading, .profile .table-section .heading, .profile .friends p{
    background: none!important;
    text-align: center!important;
	}

/*this adds a background and border to the details and profile photo section.*/
.details{
    background-color:var(--section-background);
    border:solid var(--border) 2px;
    height:160px;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
	}

/*this sets the profile picture shape and adds a border*/
.profile-pic img{
    height:160px!important;
    width:160px!important;
    border-radius:500px;
    border:var(--border) 2px solid;
    object-fit:cover;
    overflow:hidden;
	}

/*this changes the background of the interest table*/
td{
    background:var(--section-background)!important;
    Font-size: 9px;
	}
	
/*this next string both gets rid of the default topics and adds custom ones. It does look messed up on mobile though, so if that bothers you delete this next bit up until the links header code comes up*/
.table-section:not(:last-child) .details-table tr td:first-child p{
	color: transparent!important;
	text-shadow: none!important;
	letter-spacing: -100px;
	}

.details-table tr td:first-child p::after{
  color:var(--text-color)!important;
  letter-spacing:normal!important;
  filter: brightness(95%)!important;
	}
	
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
  Font-size: 11px;
	}
	
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
  Font-size: 11px;
	}
	
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
  Font-size: 11px;
	}
	
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
  Font-size: 11px;
	}
	
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
  Font-size: 11px;
	}
	
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
  Font-size: 11px;
	}
	
/*this gets rid of the URL box*/
.url-info{
    display: none!important;
	}
	
/*this both changes the text for the links header and changes it's appearance*/	
.w-40 .table-section:last-child .heading h4{
	color:transparent !important;
	text-shadow: none !important;
	letter-spacing: -100px;
	}

.w-40 .table-section:last-child .heading::after{
    content:var(--links);
    font-family: var(--header-font) !important;	
    font-weight: bold !important;
    background: -webkit-linear-gradient(transparent, transparent),
                -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, 
                                             rgba(213,173,109,1) 26%, 
                                             rgba(226,186,120,1) 35%, 
                                             rgba(163,126,67,1) 45%, 
                                             rgba(145,112,59,1) 61%, 
                                             rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
    font-size: 15px;
	}
	
/*these fix some flow issues with the friends and comments sections and the mood and contact sections*/
.mood, .friends {
	padding-top: 8px;
	border-bottom: none!important;
	border-bottom-left-radius: 0px!important;
	border-bottom-right-radius: 0px!important;
	}

.contact, #comments{
	border-top: none!important;
	border-top-left-radius: 0px!important;
	border-top-right-radius: 0px!important;
	}

/*this fixes some issues in the friends section*/
DIV.friends:nth-child(3){
    text-align:center;
	}
	
.profile .friends .heading{
    padding-left:50px;
	}
.friends img{
    height:160px!important;
    width:160px!important;
    border-radius:500px;
    border:var(--border) 2px solid;
    object-fit:cover;
    overflow:hidden;
}

/*this helps center the comments heading*/
#comments .heading{
    padding-left:0px!important;
	}
	
/* this alligns the comments to the left to help it look nicer*/
table.comments-table p{
    text-align:left!important;
	}

/*this gives the comment borders its color.*/
#comments td{
    background-color:var(--section-background)!important;
    border:solid .5px!important;
    border-color: var(--border)!important;
    Font-size: 13px;
	}

/*this adds a scrollbox to the comments to help keep it tidy. If you dont like it just feel free to edit this part out! you can also change the size by changing the hieght higher or lower*/
#comments{
    overflow: scroll;
    height:320px;
	}
	
/*this makes the profile photes in the comments a circle and adds a border to them*/
.comments-table td:first-child img{
    height:90px;
    width:90px!important;
	border: var(--border) solid 2px!important;
    border-radius: 500px!important;
    Object-fit:cover;
	}

/*these next two help make sure the report button looks right*/
.comments-table .report{
    font-size:11px!important;
	}
	
.comments-table td:last-child img{
    height:12px!important;
    width:12px!important;
    Border:0px solid!important;
    Border-radius:0px!important;
	}
	
/*this gets rid of the "about me"*/
.blurbs .inner .section:nth-child(1) h4{ 
    font-size:0; 
	}
	
/* this replaces the about me with your own text*/
.blurbs .inner .section:nth-child(1) h4:before{ 
    content:var(--about-me);
    font-size: 18px;
    }

/*this gets rid of the "who id like to meet"*/
.blurbs .inner .section:nth-child(2) h4{ 
    font-size:0; 
	}

/*this replaces it with your own text*/
.blurbs .inner .section:nth-child(2) h4:before{ 
    content:var(--wiltk);
    font-size: 18px;
    }
	
/* this gets rid of the "blurb" heading*/
.blurbs .heading{
    display:none;
	}
</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 2 of 2 comments ( View all | Add Comment )
Deviiii(n)
1705781610
this is so frkin cool TT
Report Comment
💫lazy_virus23💫
1704402368
this is genuinely so amazing i love everything about it, I'm just wondering how did you do the music thing? I've never seen that before its so cool
Report Comment
That’s a layout by another creator on here!

https://layouts.spacehey.com/layout?id=36600

They do a really good job of explaining how to customize it in their description and the only thing you’ll really need is a YouTube link to the song you want on your pfp!
by RiviR; 1704514436; Report