dreamish layouts. - Post a comment

help wrote
on March 30th, 2024 at 03:46 pm

you can see a live preview of this layout at test3

go to select journal style and choose "basic" by tess.

next, go to customize your theme - this is where you will be able to edit the header of your layout.

in the custom html header section you'll post this html:
<center> <div style="width:300px;"> <div style="width:86px; float:left;"> <img src="https://via.placeholder.com/310" style="width:80px; box-shadow: 0 0 0 1px #000, -4px -4px 0 0 #E2D6E8, 4px 4px 0 0 #C7D0EE; float:left;"> </div> <div style="float:left; margin-top:5%; padding-left:8px; text-align:left; line-height:6px; text-transform:uppercase; font-size:8px; font-family:arial narrow;"> <center> <font style="font-size:32px; text-transform:lowercase; line-height:25px; font-weight:lighter; text-shadow: 2px 1px 1px #D6C6F1, -2px -1px 1px #F1C6E9; text-align:center; font-family:planet;">namehere</font> </center> <p> <a href="">profile</a><p> <a href="">friends page</a> </div> </div> </center> you'll need to edit the polaroid to whatever image you'd like to be there. if you don't like the polaroid, this would be an easy spot to insert just a gif or some other clipart of your choosing.

in the custom css section you'll post this html:
/*-- Layout by elle layouts.dreamish.org ------------------------------------------- S2 Generations by Tessisamess tessisamess.insanejournal.com patreon.com/tessisamess tessisamess.gumroad.com ------------------------------------------- For information on this stylesheet go to: s2generations.dreamish.org --*/ /* REPLACEMENTS */ :root{ /* COLORS */ --headings-color: #000; --text-color: #222; --date-color: ; --lightest: #fff; --page-bg: #f8f8f8; --content-bg: #fff; --borders: rgba(0,0,0,0.1); --accent: #888; --links: ; --links-hover: ; --content-links: ; --content-links-hover: ; /* FONTS */ --main-font: helvetica,arial,sans-serif; --headings: monospace; --body-text: 13px; --nav-text: 9px; --subject-text: 9px; --entry-info-text: 9px; --entry-tags-text: 8px; --credit-text: 8px; /* DIMENSIONS */ --content-width: 620px; --page-inset: 30px; --side-width: 200px; --side-padding: 20px; --margin: 20px; --padding: 30px; --entry-padding: 30px; --entry-margin: 30px; --entry-content-margin: 10px; --entry-icon: 60px; /* IMAGES */ --bg-img: url()center fixed; --background-size:auto auto; --cursor: url(); --cursor-hover: url(); --private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat!important; --locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat!important; --customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat!important; } /* FONTS */ @font-face{font-family:planet;src:url(https://bejeweled.neocities.org/fonts/Guilty.otf);} @font-face{font-family:golden;src:url(https://bejeweled.neocities.org/fonts/SugarHearts.otf);} /* GLOBAL ELEMENTS */ .custom-element br{display:none;} *,*:before,*:after{box-sizing:border-box;} *:focus{outline:none;} form *{font-family:var(--main-font);} ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} ::-webkit-scrollbar-track{background:var(--page-bg);} ::-webkit-scrollbar{width:7px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--page-bg);border-radius:5px;} body{margin:0;padding:0;background:var(--page-bg) var(--bg-img);background-size:var(--background-size);font-family:var(--main-font);font-size:var(--body-text);color:var(--text-color);cursor:var(--cursor),auto;} a:link,a:visited,a:active{color:var(--links);text-decoration:none;cursor:var(--cursor-hover),pointer;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} a:hover{color:var(--links-hover);text-decoration:none;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);color:var(--headings-color);margin:0;font-weight:normal;} blockquote{} img{max-width:100%;} details summary{cursor:var(--cursor-hover),auto;} ul{} hr{} details{} code{} table{} .ljuser{font-weight:bold;} .ljuser a[href*='profile'] img{display:none;} .ljuser a[href*='profile']:before{content:'@';} /* PAGE SETUP */ #layout{min-height:100vh;} #layout-inner{max-width:var(--content-width);margin:0 auto;padding:var(--page-inset);} /* TOP NAV */ #nav-links{margin:0 0 var(--margin) 0;font-size:var(--nav-text);} .nav-links-inner ul{list-style:none;padding:0;margin:0;display:flex;} .nav-links-inner li{margin:0 8px 0 0;} .nav-links-inner li a{} .nav-links-inner li a:hover{} /* BOTTOM NAV */ .journal-nav{margin:var(--margin) 0 0 0;text-align:center;font-size:var(--entry-info-text);} .journal-nav a{} .journal-nav a:hover{} .journal-nav a.forward{} .journal-nav a.back{} .nav-separator{margin:0 5px;} /* CUSTOM HEADER */ #custom-header{margin:0 0 var(--margin) 0;} /* CUSTOM SIDEBAR */ #custom-sidebar{float:left;width:var(--side-width);} /* CUSTOM FOOTER */ #custom-footer{margin:var(--margin) 0 0 0;} /* CREDIT LINK */ #credit-link{position:fixed;bottom:0;left:0;padding:10px;opacity:0.5;font-size:var(--credit-text);text-transform:uppercase;letter-spacing:1px;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} #credit-link:hover{opacity:1;} #credit-link a{} #credit-link a:hover{} /* SIDEBAR & ENTRIES */ #content{} #content-inner{} #content-inner:after{content:'';display:table;clear:both;} /* ENTRY LIST */ #entries{} .sidebar-layout #entries{margin:0 0 0 calc(var(--side-width) + var(--margin));} .header-sidebar-layout #entries{margin:0 0 0 calc(var(--side-width) + var(--margin));} #tagpage-header{margin:0 0 var(--margin) 0;text-align:center;} #tagpage-header h2{font-size:var(--entry-info);font-family:var(--main-font);} #entries a, #entries a:visited{color:var(--content-links);} #entries a:hover{color:var(--content-links-hover);} /* ENTRIES */ .entry{ margin-top:120px; padding:var(--entry-padding); background:var(--content-bg); border:1px solid var(--borders); position:relative; background: rgba(255,255,255,0.5); box-shadow:0 0 1px #f6f6f6; box-shadow: 0px 0px 1px #ebe9f7; border-width: 2px 2px 0px 2px; border-style: solid; -webkit-border-image: -webkit-linear-gradient(right, #ffffff, #D3C9ED, #EDC9EC, #ffffff) 100% 1; -moz-border-image: -moz-linear-gradient(right, #ffffff, #D3C9ED, #EDC9EC, #ffffff) 100% 1; -o-border-image: -o-linear-gradient(right, #ffffff, #D3C9ED, #EDC9EC, #ffffff) 100% 1 border-image-slice: 1;} .entry-inner{} /* ENTRY HEADER */ .entry-header{} .entry-header-inner{display:flex;align-items:center;} .entry-header-content{width:100%;display:flex;justify-content:space-between;} /* .poster-info ~ .entry-header-content{width:calc(100% - var(--entry-icon));} */ .entry-header .poster-info{display:none;} .userpic{} .userpic img{width:var(--entry-icon); height:var(--entry-icon); margin:10px -15px 0 0;} .poster-info .user{} .poster-info .user .ljuser{} .poster-info .user .ljuser a[href*='profile']{display:none;} .poster-info .user .ljuser ~ .ljuser{} .outer-poster{position:absolute; top:0; right:calc((var(--entry-icon) + 10px) * -1); text-align:center; font-size:smaller; margin-left:-15px;} .outer-poster img{margin:0 0 5px 0; padding:5px; background:var(--content-bg); border:1px solid var(--borders);} .subject{} .subject a{} .subject h3{display:flex;align-items:center;font-size:var(--subject-text); display:none;} .subject h3 .security-icon{margin:0 5px 0 0;} .date-time{font-size:var(--entry-info-text);color:var(--date-color); display:none;} .date-time .at{margin:0 3px;} /* ENTRY CONTENT */ .entry-content{margin:var(--entry-content-margin) 0 0 0;} .entry-content-inner{} /* ENTRY TAGS */ .entry-tags{margin:var(--entry-content-margin) 0 0 0;font-size:var(--entry-tags-text); font-family: arial narrow; font-size: 6.5px; line-height: 7px; letter-spacing: 1px; text-transform: uppercase; padding-top: 0px; color: #979797; font-style: none;} .entry-tags a{} .entry-tags a:hover{} /* ENTRY FOOTER */ .entry-links{margin:var(--entry-content-margin) 0 0 0;font-size:var(--entry-info-text); font-family: arial narrow; font-size: 6.5px; line-height: 7px; letter-spacing: 1px; text-transform: uppercase; padding-top: 0px; color: #979797; font-style: none;} .entry-links ul{list-style:none;padding:0;margin:0;display:flex;justify-content:flex-end;} .entry-links ul li{margin:0 0 0 8px;} .entry-links li.tell,.entry-links li.add-mem,.entry-links li.track,.entry-links li.untrack{display:none;} .entry-links ul li a{} .entry-links ul li a:hover{} /* TAGS PAGE */ .tags-list .all-tags{list-style-position:inside;padding:0;margin:0;} .tags-list .all-tags li .tag-separator{margin:0 5px;} /* ARCHIVE PAGE */ .yearlinks{text-align:center;margin-bottom:10px;} .yearlinks-inner{text-align:center;margin-bottom:10px;} .years{list-style:none;margin:0;padding:0;} .years li{display:inline;padding:0;} .yeartable{border-collapse:separate;border:none;width:100%;} .dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--accent)!important;color:var(--lightest);} .yeartable td{border:none!important;background:rgba(0,0,0,0.05);padding:5px;} /* ICON REPLACEMENTS */ img[src*='entry/private.png'], img[src*='entry/protected.png'], img[src*='entry/groups.png']{width:0!important;height:0!important;padding:13px 0 0 16px!important;background-size:auto 100%!important;} img[src*='entry/private.png']{background:transparent var(--private);} img[src*='entry/protected.png']{background:transparent var(--locked);} img[src*='entry/groups.png']{background:transparent var(--customs);} /* header custom html */ #toplinks { position: absolute; visibility: visible; z-index: 0;} #h1{ position: absolute; visibility: visible; z-index:; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); transform: rotate(3deg); } #h2{ position: absolute; visibility: visible; z-index:; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); transform: rotate(-3deg); } /* my fonts */ @font-face {font-family: stari; src: url('https://bejeweled.neocities.org/fonts/OneWishScript.otf'); } /* ------ CONTROL STRIP ------ */ #lj_controlstrip { font-family: Archivo, sans-serif, sans-serif; background: transparent; background-image: none; padding: 5px 0px; border-bottom: 1px solid #f5ebf0; } #lj_controlstrip span { font-family: Archivo, sans-serif, sans-serif; color: #868686; font-size: 9px; text-transform: uppercase; } #lj_controlstrip a { font-family: Archivo, sans-serif, sans-serif; color: -webkit-linear-gradient(-45deg, #fc6fa2, #887dff); text-transform: uppercase; font-size: 9px; } #lj_controlstrip span.ljuser a { font-size: 9px; } #lj_controlstrip>div { padding: 0; } div#lj_controlstrip_loggedout_userpic { padding: 5px 10px; height: 50px; width: 0px; margin: 5px 10px; } div#lj_controlstrip_userpic { margin: 5px 10px; } div#lj_controlstrip_userpic img { border-radius: var(--icon-rounding); border: 4px solid rgba(255, 255, 255, 0.75); box-shadow: 0px 0px 0px 1px #f5ebf0; } div#lj_controlstrip_actionlinks { margin: 5px 10px; } div#lj_controlstrip_actionlinks a { margin-right: 4px; } div#lj_controlstrip_actionlinks .ljuser a { margin-right: 0px; } div#lj_controlstrip_actionlinks .ContextualPopup-trigger { display: none; } div#lj_controlstrip_search { text-transform: uppercase; margin: 5px 10px; flex-grow: 0; color: #868686; } div#lj_controlstrip_search a { font-family: Arial; font-size: 9px; } div#lj_controlstrip_search select { border: 1px solid #f5ebf0; text-transform: uppercase; padding: 2px; border-radius: 4px; line-height: 1; background: rgba(255, 255, 255, 0.75); color: #6f6d73; margin-bottom: 2px; } div#lj_controlstrip_search input { margin: 0; } #lj_controlstrip input { margin-left: 2px; text-transform: uppercase; width: auto; border: none; border-radius: 4px; font-size: 8px; padding: 4px; line-height: 1; border: 1px solid #f5ebf0; background: rgba(255, 255, 255, 0.75); color: #ccc2c8; letter-spacing: 0.25px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: none; } #lj_controlstrip_user .ljuser .ContextualPopup-trigger { display: none; } #lj_controlstrip input#xc_remember { height: 9px; width: 9px; margin-left: 6px; position: relative; top: 1px; } #lj_controlstrip label.checkboxlabel { text-transform: lowercase; } #lj_controlstrip a { background: -webkit-linear-gradient(right, #a08dd2, #df96dd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @font-face { font-family: planet; src: url("https://bejeweled.neocities.org/fonts/Guilty.otf"); } @font-face { font-family: golden; src: url("https://bejeweled.neocities.org/fonts/SugarHearts.otf"); things you'll want to edit here are how the entries look (the top bar on the entry box that is a gradient) and the link colors. if you scroll through the style you'll see how to change the colors in the very top section and then the entries when you scroll down and see the ".entries" section. you'll notice a lot of these look just like ij.

to get rid of the links at the top of the layout go to the text section and remove everything under navigation. this is also where you can change what the comment links say.

use this guide to see a breakdown of each section you can customize.