theworkshop | Jul. 21st, 2016

/*--------------------------------
S2 Flexible Squares - 99. Impact
Layout by http://layout_lounge.livejournal.com/
PLEASE DO NOT REMOVE THIS SECTION 
----------------------------------*/
body{
 background-color: #07275d;
 background-image: url();
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: top left;
 background-size: cover;
 color: #888888;
 font-family: "Montserrat", arial, sans-serif;
 font-size: 14px;
 margin: 0px;
 }

a, a:link, a:visited { color: #004359; }
a:hover { color: #444444; }

blockquote {
 width: 80%;
 margin-left: 10px;
 padding-left: 10px;
 margin-left: auto;
 margin-right: auto;
 color: #444444;
 font-size: 14px; 
font-style: italic;
 text-align: left;
 border-left: 10px solid #E5E5E5; 
 }
img.special, i img { border: 10px solid #e5e5e5; }

b, strong { color: #298779; }
i, em { color: #D6002E; }
u { color: #2F6E8A; }
s, strike { color: #F6A000; }
q { font-style: italic; color: #D6002E; }
mark { background-color: #B7EBDE; }

.b-repost-item { display:none }

p, td{  }

code, kbd, pre, tt {font-family: "Montserrat"; }

/*--------------General------------*/
#content-outer { 
 position: absolute;
 width: 100%;
 height: 100px;
 background-color: #07275d;
 background-image: url(FLOWER HEADER IMAGE);
 background-repeat: no-repeat;
 background-position: center 65%;
 background-size: cover;
 z-index: -199;
 }

.headerimage {
 position: absolute;
 width: 100%;
 height: 120px;
 padding: 0px;
 background-image: url(http://i79.fastpic.ru/big/2016/0721/83/53a1a7801e6400cbdad7ac91a5669883.png);
 background-repeat: no-repeat;
 background-position: center center;
 background-size: auto;
 z-index: -10;
}

#content {   
 width: 70%;
 background-color: #ffffff;
 margin: 190px auto 0px auto;
 font-family: "Montserrat", arial, sans-serif;
 font-size: 14px;
 text-align: left;
 padding: 25px;
 z-index: 50;
 }

#maincontent {
 margin-top: 20px;
 margin-right: 290px;
 padding: 0px;
 }

.subcontent {
 padding: 0px 10px;
 font-size: 15px;
 color: #333333;
 }

.clear { height: 10px; line-height: 0px; margin: 0px; padding: 0px; }

/*---------------Header--------------*/
#header {  
 position: absolute;
 left: 0; top: 120px;
 width: 100%;
 height: 50px;
 padding-top: 25px;
 text-align: center;
 font-family: Montserrat, arial !important;
 font-size: 14px !important;
 text-transform: uppercase;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
 padding: 10px 10px 5px 10px;
 letter-spacing: 1px;
 line-height: 20px;
 color: #ffffff;
 text-align: left;
}

div#header li.view { 
 color: #ffffff;
 padding: 10px 10px 5px 10px;
 margin-left: 15px;
  }

div#header a:hover {
 color: #888888;
}

ul.navheader {
 list-style: none;
 line-height: 24px;
 margin: 0;
 padding: 0;
 }

ul.navheader li  {
 display: inline;
 list-style: none;
 }

.title, .subtitle { display: none; }

/*--------------- footer ---------------*/

.lj-view-recent #footer, .lj-view-friends #footer {
bottom: 10px;
padding:5px 0;
position:fixed;
left:0;
text-align:left;
text-transform:lowercase;
width: 200px;
z-index:99;
}

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: rgba(255, 255, 255, 0.4);
color: #ffffff;
font-family: "Montserrat", georgia,arial,sans-serif;
font-size: 20px;
margin-right: 20px;
padding: 20px 30px 20px 30px;
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#dddddd;
}

ul.navfooter{
margin:0 auto;
padding:0;}

ul.navfooter li {
list-style:none inside none;
padding: 0px;
display: inline-block; }

ul.navfooter li a {
float: right;
background-color: rgba(255, 255, 255, 0.4):
margin-left: 10px; 
padding: 20xp 10px 20px 10px;
 }

ul.navfooter li a:hover {  }

#footer .viewing { display:none; }

/*-------------Sidebar--------------*/

#sidebar {
 width: 280px;
 float: right;
 font-family: "Montserrat", arial, georgia;
 font-size: 12px;
 color: #888888;
text-align: left !important;
text-transform: uppercase;
 }

ul.sbarlist{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}

li.sbaritem {
position: inline;
list-style-type: none;
margin-top: 2px;
text-align: left;
}

li.sbaritem a {
color: #888888;
display: inline;
 }

li.sbaritem a:hover {
color:#555555;  }

li.sbartitle {
 margin-bottom: 5px;
 font-size: 18px;
 text-align: center;
 list-style: none;
 color: #cccccc; 
 border-bottom: 3px solid #cccccc;
 }

/*-For the Free Text Title-*/
h15 {
 display: block;
 margin-bottom: 5px;
 font-size: 18px;
 text-align: center;
 list-style: none;
 color: #cccccc; 
 border-bottom: 3px solid #cccccc;
 }

.sbarbody {
list-style-type:none;
 background-color: transparent;
 border: 3px solid #cccccc;
padding: 5px !important;
margin: 5px 5px 10px 5px;
}

li.sbaritem2 {
list-style-type:none;
 background-color: transparent;
padding: 5px;
margin: 5px 5px 10px 5px;
}

li.sbaritem3 {
list-style-type:none;
 background-color: transparent;
padding: 5px;
border: 0px solid #cccccc;
margin: 5px 5px 10px 5px;
}

li.sbaritem4 {
list-style-type:none;
background-color: transparent;
text-align: center;
padding: 5px;
border: 0px solid #cccccc;
margin: 5px 5px 10px 5px;
}

/*-Sidebar Links-*/
#sidebar_linklist  {
list-style-type:none;
padding: 10px; 
margin: 5px 5px 10px 5px;
 }

#sidebar_linklist li.sbaritem a {
 display:block;
 padding: 0px 0px 5px 0px ;
}

#sidebar_linklist li.sbaritem a:hover {
}

/*-Sidebar Tags-*/
#sidebar_tags.sbarbody { 
height: 250px;  overflow-x: hidden; overflow-y: auto;
padding: 10px; 
margin: 5px 5px 10px 5px;
 }

#sidebar_tags .sbarcontent {   }

li.tagBox a { display:block; padding: 2px;  }

li.tagBox a:hover {   }

#sidebar_tags li.sbaritem a { display:block;  padding: 2px; }

#sidebar_tags li.sbaritem a:hover {  }

/*-Free Text-Blurb-*/
.sbarbody2 {  
padding: 10px; 
margin: 5px 5px 10px 5px;
 border: 3px solid #cccccc;
 }

/*-Sidebar Summary-*/
#sidebar_summary.sbarbody { 
padding: 10px; margin: 5px 5px 10px 5px;  font-size: 11px; height: 200px;  overflow-x: hidden; overflow-y: auto; 
}

#sidebar_summary li.sbaritem a {  }

#sidebar_summary li.sbaritem a: hover { }

/*-Sidebar Calendar-*/
#sidebar_calendar.sbarbody {  padding: 10px; margin: 5px 5px 10px 5px; }

table.calendar { width: 100%;  padding: 10px;}

td.sbarcalendar { padding: 3px; text-align: center; }

td.sbarcalendarposts {  text-align: center; vertical-align: middle; border: 1px solid #eeeeee; }

/*-Sidebar Userpic-*/
.defaultuserpic {
width: 100px;
height: 100px;
padding: 10px;
margin: 5px auto 10px auto;
}

.defaultuserpic img { width: 100px; height: 100px; }

*-----------Entries-----------*/
.entry {  min-height: 200px; }

.entry_text {
 color: #444444;
 font-family: "Playfair Display", arial;
 font-size: 16px;
 line-height: 150%;
 text-align: left;
 font-weight: 550;
 margin-bottom: 0px;
 z-index: 50;
 }

p, td{ font-family: "Montserrat"; font-size; 14px; margin:0; padding:0; }

.entry img { max-width: 85%; margin: 5px;   }

hr { color: transparent; height: 1px; border-bottom: 1px solid #cccccc; }

.entry ul li, ol li, li {
 margin-left: 5px;
 padding: 1px 0px 0px 5px;
 line-height: 120%;
 list-style: normal;
 list-style-position: inside;
 }

.userpic, .userpicfriends {
 float: right;
 margin: 0px 0px 5px 5px;
 padding: 10px;
 width: 100px;
 height: 100px;
 text-align: center;
 color: #FFF!important; 
 background: #FFF!important;
 }

.userpic img, .userpicfriends img {
 width: 100px;
 height: 100px;
 }

.userpicfriends a, .userpicfriends font {
 margin: 0px 0px 0px 0px;
 position: relative;
 background-color: transparent!important;
 float: center;
 font-family: 'Montserrat', sans-serif;
 font-size: 11px;
 text-align: center;
 color: #000000;
 -webkit-transition: background-color 0.3s ease;
 -moz-transition: background-color 0.3s ease;
 -ms-transition: background-color 0.3s ease;
 -o-transition: background-color 0.3s ease;
 transition: background-color 0.3s ease;
 }

.userpicfriends a:hover, .userpicfriends a font:hover {color: #bbbbbb;  text-shadow: 2px 2px 6px #bbbbbb; }

.date  {
 margin: 0px 0px 0px 20px;
 text-align: left; 
 color: #bbbbbb;
 font-family: "Montserrat", arial, sans-serif;
 font-size: 12px;
 text-transform: uppercase;
}

.subject {
 padding: 0px;
 margin: 0px 10px 20px 20px;
 color: #333333;
font-family: "Playfair Display", open sans condensed, georgia, arial;
 font-size: 25px;
 text-align: left;
 text-transform: uppercase;
 }

.subject a, .subject a:link, .subject a:visited {color: #333333;}

.subject a:hover {color: #565656;}

.datesubject {
 margin: -25px 0px 0px -20px;
 padding: 0px;
 text-align: left;
 }

span.ljuser a b {
 padding: 2px 0 2px 0;
 color: #888888;
 font-weight: normal;
 }

span.ljuser a:hover b {
 padding-top: 2px;
 padding-bottom: 2px;
 color: #555555;
 font-weight: normal;
 }

.skiplinks {
 text-align: center;
 margin-top: -20px;
 margin-bottom: 20px;
 font-family: "Montserrat", Abel, arial, sans-serif;
 font-size: 10px;
 padding: 10px 10px 5px 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #999999;
 }

.lj-like {
 width: 100%; 
 clear: left; 
 float: left; 
 text-align: center; 
   line-height: 1 !important;
 margin-bottom: 15px;
}

.lj-like:after {
    border-collapse: collapse;
    clear: left;
    content: "";
    display: table;
}

.ljcut-link {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #eeeeee, #dddddd);
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#dddddd));
    border: 1px solid #dddddd;
    border-radius: 2px;
    box-shadow: 2px 2px 6px #eeeeee inset;
    text-shadow: 0px 1px 1px #eeeeee ;
   color: #dddddd;
}

/*-----Recent Posts ---*/
.entry--threeposts {
    margin-left: 0px !important;
 background-color: #ffffff;
 padding: 10px;
}

/*-----------  Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
border: 0px solid #e5e5e5;
background-color: transparent !important;
margin: 0px;
font-size: 9px;
font-family: Verdana;
color: #7F7F7F;
text-align: left; 
clear: left;
}

.currentlocation, .currentmusic { display:none; }

.currents strong, .currentmood strong, .currentmusic .currentlocation { font-weight: normal; }

/*-----Currents, tags, comment links-----*/

.ljtags, .currenttags {
margin: 0px 5px 0px 5px;
padding-bottom: 0px;
text-align: left;
color: #808080;
font-family: verdana; 
font-weight: bold; 
font-size: 10px; 
text-transform: uppercase;
}

.comments {
background-color: #eeeeee;
color: #888888;
 font-size: 12px; line-height: 130%; 
letter-spacing:-0.1em;
padding: 10px 5px 10px 5px;
margin-bottom: 50px;
position: relative;
text-align: center;
width:auto;
clear: left;
}

div.comments a, div.comments a:link, div.comments a:visited {
color:#88888888;
font-family: Montserrat, arial !important;
 font-size: 14px !important; line-height: 130%; 
line-height:1;
padding: 8px;
margin:0;
letter-spacing: 1px; 
text-align: center; }

div.comments a:hover {
color:#000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border-left: 0px solid #374C60;
letter-spacing: 3px;
}

/*------------Comments Page--------*/
.box {
 padding: 5px 5px 5px 10px;
 margin: 0px;
 text-align: left;
 clear: left;
 }

form div.box { text-align: left; }

center.comment-links {  }

div#footer.box { text-align: center; }

.commentbox {
 align: left; 
 padding: 5px; 
 margin: 2px 2px 10px 2px; 
 color: #000000;
padding-bottom: 5px; 
 }

.datesubjectcomment {
 margin-top: 10px;
 text-align: left;
 padding: 5px;
 font-size: 12px;
 color: #bbbbbb;
 }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
 color: #004359; cursor: crosshair; text-decoration:none; font-weight:none;}
  
.datesubjectcomment a:hover {
 color: #bbbbbb; cursor: crosshair; text-decoration:none; font-weight:none;}

.userpiccomment {
 margin: -2px 5px 5px 5px;
 padding: 10px;
 width: 100px;
 height: 100px;
 float: left;
}

.commentreply {
 font-family: "Montserrat", arial, sans-serif;
 position: relative;
 margin: 10px;
 font-size: 13px;
 color: #555555;
 }

.commentinfo {
 margin-top: 5px; 
 width: 100%;
 }

.replytosubject {
 font-weight: 300;
 color: #000000;
 font-size: 16px;
 }

div#content textarea  { width: 50%; }

/*-----------Calendar/Year/Archive Page----------*/

ul.year {  text-align: center;  padding: 5px; }

ul.year li {display: inline;}

table.yeartable { width: 710px; margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px; }

table.yeartable td.yeardate, table.yeartable td.yearday { color: #888888; border: 1px solid #cccccc; }

table.yeartable td.yearday { text-align: center; color: #888888; border: 1px solid #cccccc; }

td.yearmonth { color: #888888; border-style: none; }

/*-----------Tags Page---------*/

ul.ljtaglist {
 color: #888888;
 font-family: "Montserrat", arial, trebuchet ms, sans-serif;
 font-size: 15px !important;
 text-transform: uppercase;
 padding: 8px 8px 8px 75px;
 border: 0px solid #dedede;
 }

ul.ljtaglist li  {list-style: normal; width: 80%; }

/*----------SECTION: Tiny Icons----------*/
.currentlocation {
 background: url(http://i54.tinypic.com/msm1c0.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmood  {
 background: url(http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentmusic {
 background: url(http://i26.tinypic.com/2nv6qtf.jpg) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

.currentgroups {
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat left center;
 padding: 2px 0px 5px 18px;
 }

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock-unlock.png) no-repeat !important; 
 }

/* FRIENDS GROUP */
.subject img[src*="icon_groups.gif"]{
width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat !important; }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
 width: 0;
 height: 0;
 padding: 16px 0px 0 16px;
 background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/lock.png) no-repeat !important; 
 }

/* USER */
html body .ljuser img {
 width: 0 !important;
 height: 0 !important;
 background-repeat: no-repeat;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/muffin.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

html body .ljuser img[src*="userinfo.gif"] {
 width: 0 !important;
 height: 0 !important;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/muffin.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/* COMMUNITY */
html body .ljuser img[src*="community.gif"] {
 width: 0 !important;
 height: 0 !important;
 background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/coca_cola.png) no-repeat 0 0 !important;
 padding: 16px 0px 0px 16px !important;
 }

/*---------Fonts----------*/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1CUR-13DsDU150T1bKbJZejI.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1CfoVn-aGdXvQRwgLLg-TkDk.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: local('Playfair Display'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v10/2NBgzUtEeyB-Xtpr9bm1Cdhy5e3cTyNKTHXrP9DO-Rc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/*-----------Add-ons-----------*/
.social-roll {
 border-radius: 50%;
 -webkit-transition: all ease 0.3s;
 -moz-transition: all ease 0.3s;
 -o-transition: all ease 0.3s;
 -ms-transition: all ease 0.3s;
 transition: all ease 0.3s;
}
.social-roll:hover {
 box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
 -webkit-transform:rotate(540deg);
 -moz-transform:rotate(540deg);
 -o-transform:rotate(540deg);
 -ms-transform:rotate(540deg);
 transform:rotate(540deg);
}

.facebooklink {
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/facebookhovercircles.png) top;
 text-indent: -99999px;
 margin: 1px;
}
.facebooklink:hover {
 background-position: 48px 48px;
}

.twitterlink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/twitterhovercircles.png) top;
 text-indent: -99999px;
 margin: 1px;
}
.twitterlink:hover {
 background-position: 48px 48px;
}

.youtubelink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/youtubehovercircles.png) top;
 text-indent: -99999px;
 margin: 1px;
}
.youtubelink:hover {
 background-position: 48px 48px;
}

.rsslink{
 display: inline-block;
 width: 48px;
 height: 48px;
 background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/rsshovercircles.png) top;
 text-indent: -99999px;
 margin: 1px;
}
.rsslink:hover {
 background-position: 48px 48px;
}

.separator { height: 0px; }

Everything should work. It was a matter of having the code like clear: left; in the comments and currents. This made things align the way they should in posts.

Links in the sidebar for social media can be found: http://layout-lounge.livejournal.com/tag/help%20with%3A%20social%20media%20icons

The coding for these is in the layout already all you need to do is the coding for the sidebar in the free text section.

The edit links would be something you'd have to recreate with those icons in the sidebar free text section as well. Having an additional section would require a paid account.

Layout Lounge Workshop

just tinkering around

Jul. 21st, 2016

Coding for burninsnikers

Links

About

Tags

Summary