Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Information

Hey guys! Now for something I'm REALLY excited about. 👀 A few months back I had the passing thought that I wanted to make a Switch Lite entirely out of code with no image, so I set out to do it and here we are! This switch only needs one image: The screen gif or image.

While the thumbsticks don't do anything, all buttons are links! If you don't need them you can easily change that by turning the links into div containers instead. Don't worry, this is easy: you just change the a href="" title="" to div instead, and the closing </a> into </div> to finish. So, for example, <a href="" title="link4" class="a-down">▼</a> would become <div class="a-down">▼</div> to remove the link without breaking the arrow pad! This is especially useful if you're utilizing the popup menu and don't need the four extra links.

Speaking of the menu, that's easy to use or not use! It's just a matter of using the plus and minus buttons as open and close links or not. If they're just divs, no menu; if we turn them into anchor links: Menu! I've provided both versions below to make that easy.

And, of course, I haven't left you high and dry on colors: The page background is recolorable and you can keep the pattern without messing it up, the Switch can be any color you want, and I've also included an extra spec to add a background image to the Switch in case you want a "skin" instead of a factory color. Enjoy! 💖

Please note: I have NOT included specs to resize the Switch itself. It would just be way too involved; sorry!

Layout Coding

/*-- PRETENDO SWAP - TESSISAMESS - 2022 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*--

Find more fun stuff at:
	tessisamess.insanejournal.com
	tesscodes.dreamwidth.org
	patreon.com/tessisamess

--*/

/* REPLACEMENTS */

:root{
/* COLORS */
	--text-color: #222;
	--date-tags: #999;
	--lightest: #fff;

--page-bg: #E4F3D1;
	--content-bg: #f9f9f9;
	--accent: #FD7F83;
	--borders: rgba(0,0,0,0.1);

--switch-bg: #FD7F83;
	--switch-buttons: #ebebeb;
	--switch-text: #bfbfbf;
	--switch-borders: rgba(0,0,0,0.8);

/* FONTS */
	--main-font: calibri,arial,sans-serif;
	--headings: Pretendo;
	--title-font: Pretendo;

--body-text: 10px;

--title-text: 30px;
	--subtitle-text: 20px;
	--nav-text: 12px;

--side-text: 12px;
	--side-titles: 27px;

--entry-titles: 15px;
	--entry-info: 8px;

/* DIMENSIONS */
	--margin: 10px;
	--padding: 40px;
	--entry-icon: 25px;
	--icon-radius: 100%;

/* IMAGES */
	--bg-img: url(https://cdn.discordapp.com/attachments/851970510397112340/1028412756690468996/pattern.png)fixed;
	--switch-screen: url(https://media.tumblr.com/acc794ac26029891f0934e60553579c3/8ddd0fbba7912541-ee/s540x810/7cb00c072a9c083df9ab59d271e7b4fbd1eea18f.gif)center;
	--switch-skin: url()center;

--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:Pretendo;src:url(https://dl.dropbox.com/s/xiab3nhq4tkol83/Pretendo.ttf);}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:3px;}
::-webkit-scrollbar{width:3px;background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.3);border-radius:3px;}

*, *:before, *:after{box-sizing:border-box;}
body{margin:0;padding:0;background:var(--page-bg) var(--bg-img);font-family:var(--main-font);font-size:var(--body-text);color:var(--text-color);}

blockquote{font-style:normal;margin:10px;padding:10px;border:1px solid var(--borders);border-left:2px solid var(--accent);}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;color:var(--accent);}
img{max-width:100%!important;}
ul{list-style:square;}
hr{border:none;border-bottom:1px solid var(--borders);}
summary{cursor:pointer;}
summary:focus{outline:none;}

a, a:visited, a:active{color:var(--text-color);text-decoration:none;-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(--accent);text-decoration:none;}

.ljuser{font-weight:bold;}
.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}
.ljuser a[href*="asylum"][href*="profile"]:before{content:'#';}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;padding:var(--margin);}

.layout-three-column-middle #alpha{margin:0;}
.layout-three-column-middle #beta{float:none;width:auto;}
.layout-three-column-middle #gamma{float:none;width:auto;}

/* HEADER */

#header{display:none;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:0;}
#alpha-inner{width:444px;height:255.19px;position:fixed;top:calc(50% - (255.19px / 2));left:calc(50% - (444px / 2));z-index:2;margin:0 auto;overflow:auto;border-radius:3px;}
.lj-view-recent #alpha-inner{padding:255.19px 0 0 0;}

#alpha a, #alpha a:visited{color:var(--accent);}
#alpha a:hover{color:var(--date-tags);}

.content-nav{background:var(--content-bg);margin:0;padding:var(--margin) 0 0 0;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{margin-bottom:var(--margin);font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:center;color:var(--accent);}
#sticky-note .entry-header h2{margin:0;padding:0;font-size:var(--entry-titles);}
#sticky-note .entry-text{padding:0;}
#sticky-note .entry-footer{display:none;}

/* ENTRIES */

.entry{margin:0;background:var(--content-bg);padding:var(--padding);position:relative;border-bottom:1px solid var(--borders);}
.lj-view-recent .entry:first-of-type{box-shadow:0 0 20px 20px var(--content-bg);margin:20px 0 0 0;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3{margin:0;padding:0;font-size:var(--entry-titles);}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);}

.lj-view-day .entry-datetime{display:none;}
.entry-datetime{font-size:var(--entry-info);color:var(--date-tags);text-transform:uppercase;letter-spacing:1px;}

.mid-entry-userpic{display:block;float:left;text-align:center;padding:0 10px 0 0;}
.mid-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);border-radius:var(--icon-radius);}
.outer-entry-userpic, .inner-entry-userpic{display:none;}

.pic-poster{position:absolute;bottom:var(--padding);left:var(--padding);text-align:center;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;}
.pic-poster img{display:none;}
.pic-poster a[href*="profile"]{display:none;}

.entry-content{margin-top:8px;}
.entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;}

.ljtags{margin:8px 0 0 0;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:var(--date-tags);}

.entry-metadata{display:none;}

.entry-linkbar{margin:0;font-size:var(--entry-info);text-align:right;text-transform:uppercase;letter-spacing:1px;}
.entry-linkbar ul{list-style:none;padding:0;margin:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;}
.entry-linkbar li a{display:inline-block;margin:8px 0 0 5px;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions], .entry-linkbar li a[href$=html]{display:none;}

/* ARCHIVE VIEW */

.yearlinks{background:var(--content-bg);text-align:center;margin:0;padding:10px 10px 0 10px;}
.year{list-style:none;margin:0;padding:0;}
.year li{display:inline;padding:0;}

.lj-view-archive .entry{padding:10px var(--padding) var(--padding) var(--padding);}
.lj-view-archive .entry-content{margin:0;}
.yeartable{border-collapse:separate;border:none;width:100%;}
td.monthlable, td.viewmonth{letter-spacing:2px;text-transform:uppercase;background:transparent!important;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.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;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha-inner, .lj-view-month #alpha-inner{padding:var(--padding);background:var(--content-bg);}

/* SIDEBAR */

#gamma{display:none;width:444px!important;height:255.19px;position:fixed;top:calc(50% - (255.19px / 2));left:calc(50% - (444px / 2));z-index:3;margin:0 auto;padding:20px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,0.7);align-items:center;justify-content:center;text-align:center;}
#gamma:target{display:flex;}
#gamma:target ~ #alpha{display:none;}
#beta-inner, #gamma-inner{font-size:var(--side-text);color:var(--text-color);}

.module{display:none;padding:0;background:transparent;margin:0;border:none;}

.module-header{display:none;background:transparent;border:none;text-align:center;line-height:0.5;}
.module-header h3{margin:0;padding:0;font-size:var(--side-titles);}
.module-header a, .module-header a:visited{color:var(--accent);}

#beta .module-customtext{display:block;}
.module-customtext .module-content{padding:0;}

#gamma .module-customtext2{display:block;margin:0 0 var(--margin) 0;}
#gamma .module-customtext2 .module-header{display:block;}
#gamma .module-customtext2 .module-content{border-radius:3px;background:rgba(255,255,255,0.7);border:1px solid var(--accent);padding:7px;}

#gamma .module-typelist{display:block;}
.module-typelist ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:9px;text-transform:uppercase;letter-spacing:1px;}
.module-typelist li{width:calc(100% / 4);}
.module-typelist li a{display:block;margin:2px;border-radius:3px;background:rgba(255,255,255,0.7);border:1px solid var(--accent);padding:3px 0;}

/* SWITCH */

.switch-outer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;}
.switch, .switch *{box-sizing:content-box;}

.switch{background:var(--switch-bg) var(--switch-skin);width:720px;height:310px;border-radius:60px;display:flex;align-items:center;justify-content:center;box-shadow:inset -1px -1px 5px 0 rgba(0,0,0,0.2),inset -3px -3px 12px 0 rgba(0,0,0,0.1),inset 1px 1px 3px 0 rgba(255,255,255,0.9),inset 3px 3px 6px 0 rgba(255,255,255,0.3),3px 3px 6px 0 rgba(0,0,0,0.1);overflow:hidden;color:var(--switch-text);line-height:1;text-align:center;}

.switch .glass{width:70%;height:92%;background:rgba(0,0,0,0.1);padding:10px 25px;border-radius:10px;box-shadow:inset 0 0 1px 0 rgba(0,0,0,0.6),0.5px 0.5px 0.5px 0 rgba(255,255,255,0.4);box-sizing:border-box;}
.switch .screen{height:100%;background:var(--switch-screen);background-size:cover;border-radius:3px;box-shadow:inset -4.5px -4.5px 4px 0 rgba(0,0,0,0.4),0.5px 0.5px 0.5px 0 rgba(255,255,255,0.4);outline:5px solid var(--switch-borders);outline-offset:-5px;}

.switch .left, .switch .right{width:15%;height:100%;padding:15px 15px 35px 15px;display:flex;justify-content:space-between;flex-direction:column;box-sizing:border-box;}
.switch .left{align-items:flex-end;}
.switch .right{align-items:flex-start;}

.switch .arrows{width:99%;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-gap:0;grid-template-areas:'. top .''left center right''. bottom .';line-height:22px;font-family:arial,sans-serif;font-size:12px;}
.switch .arrows a{background:var(--switch-buttons);color:var(--switch-text);border:1px solid var(--switch-borders);}

.switch .arrows .a-up{grid-area:top;border-radius:3px 3px 0 0;border-bottom:0;box-shadow:inset 0 4px 5px -3px rgba(0,0,0,0.5),inset -2px 5px 1px 0 #fff;}
.switch .arrows .a-left{grid-area:left;border-radius:3px 0 0 3px;border-right:0;box-shadow:inset 2px 2px 0 0 #fff,inset 2px -2px 4px -2px rgba(0,0,0,0.5);text-shadow:1px 1px 0 #fff;}
.switch .arrows .a-right{grid-area:right;border-left:0;border-radius:0 3px 3px 0;box-shadow:inset -1px 1px 0 0 #fff,inset -2px -2px 4px -2px rgba(0,0,0,0.5);text-shadow:-2px 2px 0 #fff;}
.switch .arrows .a-down{grid-area:bottom;border-top:0;border-radius:0 0 3px 3px;box-shadow:inset 0 -4px 5px -3px rgba(0,0,0,0.5),inset -1px -5px 1px 0 #fff;text-shadow:-2px 2px 0 #fff;}
.switch .arrows .a-center{grid-area:center;background:var(--switch-buttons);}

.switch .buttons{width:99%;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-gap:2px;grid-template-areas:'. x .''y . a''. b .';line-height:22px;font-size:17px;}
.switch .buttons a{color:var(--switch-text);background:var(--switch-buttons);border-radius:100%;height:22px;border:1px solid var(--switch-borders);box-shadow:inset 0 -3px 0 0 rgba(0,0,0,0.2),inset 0 3px 0 0 #fff,1px 2px 10px 0 #C64E50;}

.switch .buttons .b-x{grid-area:x;}
.switch .buttons .b-y{grid-area:y;}
.switch .buttons .b-a{grid-area:a;}
.switch .buttons .b-b{grid-area:b;}

.switch .minus, .switch .plus{font-family:impact;color:var(--switch-buttons);-webkit-text-fill-color:var(--switch-buttons);-webkit-text-stroke-color:var(--switch-borders);-webkit-text-stroke-width:1px;text-shadow:1px 1px 1px rgba(0,0,0,0.2);}
.switch .minus{font-size:35px;margin:0 -7px 0 auto;}
.switch .plus{font-size:38px;margin:0 auto 0 -7px;}

.switch .screenshot{width:22px;height:22px;background:var(--switch-buttons);border-radius:3px;box-sizing:border-box;padding:3px;box-shadow:0 0 0 1px rgba(0,0,0,0.3);margin:0 -5px 0 0;}
.switch .screenshot .inner{height:100%;border-radius:100%;box-shadow:inset 0 1px 0 0 rgba(0,0,0,0.4),inset 0 -1px 0 0 #fff;}

.switch .home{width:22px;height:22px;line-height:22px;background:var(--switch-buttons);margin:0 0 0 -5px;border-radius:100%;border:3px solid #8a807e;box-shadow:inset 0 1px 0 0 #fff,0 0 0 1px var(--switch-borders);}
.switch .home .inner{clip-path:polygon(50% 0%,100% 50%,86% 50%,86% 100%,14% 100%,14% 50%,0 50%);padding:5px 0 0 0;background:var(--switch-text);height:70%;width:78%;margin:3px auto 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.switch .home .center{background:var(--switch-buttons);width:6px;height:4px;}

.switch .joystick{margin:0 auto 10px auto;width:52px;height:52px;background:var(--switch-buttons);border:1px solid var(--switch-borders);box-shadow:2px 7px 15px 5px #C64E50;border-radius:100%;padding:5px;box-sizing:border-box;}
.switch .joystick .inner{width:100%;height:100%;box-shadow:inset 0 -4px 10px 0 rgba(0,0,0,0.2),inset 0 1px 2px 1px rgba(0,0,0,0.2),0 1px 0 1px #fff;border-radius:100%;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* ICON REPLACEMENTS */

img[src*="img/icon_private.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;}

img[src*="img/icon_private.gif"]{background:transparent var(--private);}
img[src*="img/icon_protected.gif"]{background:transparent var(--locked);}
img[src*="img/icon_groups.gif"]{background:transparent var(--customs);}

Switch Coding: With Menu

</div></div>

Switch Coding: No Menu

</div></div>

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title, then save.
♡ Fill in your Links List if desired, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:

♡ Layout Type: Three Column (Content in Middle)
♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Can choose No if you only want them on the friends page

♡ Link text to leave a comment: Comment
♡ Link text to read comments: 1 comment // # comments

♡ Fill in sticky note if desired.
♡ Body of custom sidebar module: Switch HTML coding
♡ Title to use for second custom text sidebar module: Your blurb title (optional)
♡ Body of second custom sidebar module: Your blurb (optional)

♡ Order of SECONDARY sidebar: Custom Text Two, Links
♡ Custom stylesheet: Input the CSS provided and save!

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Tags: codes: mockups, layouts, layouts: s2 complete style

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Layout: Pretendo Swap