LCARS Star Trek Layout

Tags: star trek, scifi, lcars

Description:

Going where no layout has gone before.... (lol get it? get it??)

Fair warning: this will look like crap on mobile. I specifically designed this for desktops.

The layout comes with a Janeway online icon, but you can change it to whatever you want! Just look for .online in the code and change out the url

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ꜱʜᴇʟʙᴢ (https://layouts.spacehey.com/layout?id=214) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500&display=swap');

body{
background-color: black;
background-image: url("https://www.rxwallpaper.site/wp-content/uploads/the-paper-wall-star-trek-desktop-wallpaper-brilliant.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 150px;
cursor: url(https://cur.cursors-4u.net/symbols/sym-7/sym610.ani), url(https://cur.cursors-4u.net/symbols/sym-7/sym610.png), auto !important;
}
nav .top {
background-color: black;
}

.online { visibility: hidden; } .online img { content: url("https://media1.tenor.com/images/f6d7ee24793f3ab74a7416fc75fd0ccb/tenor.gif?itemid=14421749"); animation-name: none; visibility: visible; height: 90px; width: 90px; }

.blog-preview {
background-color: #f8991d;
border-radius: 5px;
padding-left: 10px;
}

a {
color: white;
}

main {
font-family: 'Barlow Semi Condensed', sans-serif;
color: #ab75ff;
background-color: black;
position: relative;
overflow: scroll;
width: 870px;
height: 450px;
top: 327px;
left: 80px;
border-style: solid none solid solid;
border-color: #c65a5a;
border-radius: 25px;
padding: 10px;
scrollbar-width: none; 
}
main::-webkit-scrollbar {
  display: none;
}


.general-about .profile-pic img{
border-radius: 25px;
}

nav .links {
background-color: black;
text-align: center;
}

.profile-info {
background-image: url('https://i.pinimg.com/originals/aa/2f/ba/aa2fba231f3c70034d0a122e9a1f5a75.gif');
background-size: cover;
}

div.col h1 {
font-family: 'Barlow Semi Condensed', sans-serif;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: #6599ff;
 }

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
border-color: #6599ff; 
border-radius: 4px;}

.profile .blurbs .heading, .profile .friends .heading {
background-color: #ab75ff;
border-radius: 4px;}

div.row {
background-color: black;
border-radius: 4px; }

}


element.style {
}
.details-table td p {
    margin: 0;
    word-break: break-word;
}
p, ol li {
    font-size: 0.875em;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.details-table td:first-child {
background-color: #fe9900;
color: white;}

.details-table td:nth-child(2) {
background-color: white;
color: black;
}

.comments-table {
border-color: black;
}

.comments-table td:first-child {
background-color: #fe9900
}

.comments-table td:nth-child(2) {
background-color: #6599ff;
color: white;
}

.profile .friends .person p {
color: white;
}

footer {
position: relative;
top: 350px;
background-color: black;
color: white;
}

footer .links a {
color: white; }

footer .copyright a {
color: white }

.details-table td p a {
color: white }

h4 {
color: white;
}
.profile .blurbs .section h4 {
color: white;
}

.count {
color: white;
}
 
</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 7 of 7 comments ( View all | Add Comment )

rozz/omri	1699940156 USING THIS OMG ^_^ Report Comment
ScottXD	1691627834 I. Love. This. Report Comment
Cain	1682522442 the most layout ever !!! Report Comment
Tina \| infinitelyLovesick	1659058843 Where do you write your About Me and how do you change the online sign? Report Comment
james	1613326624 Love it! Report Comment
Laurie	1613007874 I like this background much appreciated. Many I found I am not impressed with. Thank you. Report Comment
Katie	1611589213 If I wasn't on mobile I'd 100% use this. It's so cool. Report Comment thanks!! Yeah, i had to force the main section to be the exact size of the background where it fits, so it made mobile not look too great :( I want to try to make a simpler version of this so it looks good on mobile too! by ꜱʜᴇʟʙᴢ; 1611590275; Report Seriously you did a fabulous job. I know how hard it is to do what you did. by Katie; 1611590410; Report