Icons

Nov 17, 2011 13:10

Journal Preview: soundoftrees
Style Name: Flexible Squares
Account Type: Paid

Problem/Question: On some computer screens (it works fine on both my widescreen laptops; but since some friends reported that my journal-layout isn't working properly for them I checked and could detect that the problem occurs mostly while using normal-width screens) the icons (on the left side next to the entries) are not visible anymore, because they're too far left. The only way to make them visible is to zoom-out by which the text becomes too small to read. Is there any way to fix this? Thanks in advance!

Im using a slightly altered version of a layout originally made by thehappyhour, that can be found here.


/* -------------BLUE SKIES FROM PAIN----CSS BY thehappyhour @ ginandscotch-------------- */

body
{background-color:#FCFCFC;
background-image:url(http://i332.photobucket.com/albums/m325/bridgetshoeless/ioiiiiiiip.png);
background-position: absolute;
background-repeat:repeat;
background-attachment:fixed;
text-align: justify;
}

::-moz-selection
{background: #FFFFFF;
color: #DDDDDD;}

.title {
display:none;}
{
color:#CD7F89;
font-family:"Georgia", Century Gothic;
font-size:60px;
text-align:center;
position:absolute;
text-transform:lowercase;
line-height:10px;
margin:-111px -30px;
padding:10px;
letter-spacing: -2px;}

.title:first-letter {color: #AC6B73; font-size:60px;}

.subtitle {
display:none;}

/*----------- ENTRIES&CONTENT -----------*/

#content
{
background:transparent none repeat scroll 0 0;
margin:0px auto;
width:950px;
}

.subcontent {
margin:0 auto;
background:#FFFFFF
}

#maincontent
{
background:transparent none repeat scroll 0 0;
border:0 none;
color:#666666;
font-family:"georgia",arial,sans-serif;
font-size:9px;
margin: 10px;
padding:0;
text-align:left;
width:655px;
}

.clear
{height: 15px;}

.entry
{
color:#888888;
font-family:"Trebuchet MS",verdana, calibri,sans-serif;
font-size:12px;
line-height:1.2;
text-align:justify;
}

.entry_text
{
margin-top: -10px;
min-height: 140px;
padding: 20px;
}

.subject, .subject a, .subject a:hover
{
color:#879bb6!important;
background-color: transparent!important;
font-family: "century gothic", arial, sans-serif!important;
font-size: 23px!important;
text-transform:lowercase;
font-weight:none;
text-align:center!important;
letter-spacing:0px;
border-bottom:none!important;
margin-top:-1px;}

.datesubject
{
background:#FCFCFC;
background-image: url('http://i332.photobucket.com/albums/m325/bridgetshoeless/background_date-subject.png');
text-align:right!important;
text-align: center;
padding:10px 5px 5px 23px;
}

.date
{
color: #000000;
background-color: transparent!important;
font-family: "trebuchet ms", sans-serif;
text-transform: lowercase;
font-size: 8px;
letter-spacing:1px;
margin-right:12px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

/*------------ CURRENTS ------------*/

.currents {text-transform:lowercase;
text-align: left;
padding-right: 20px;
padding-left: 20px;
margin-top:-25px;
line-height:11px;
}

.currentlocation, .currentmood, .currentgroups, .currentmusic {padding: 2px 0 2px 14px; background: transparent none no-repeat scroll 0 50%}
.currentlocation {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/currentloc.gif)}
.currentmood{background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/currentmood.gif)}
.currentgroups {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/currentgroups.gif)}
.currentmusic {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/currentmusic.gif)}

.currents strong {display:none!important; }

.currents div { display: block; }

.ljtags {
border-left: 5px solid #638E99;
padding:10px;
text-transform:lowercase;
margin: 50px 0 0 0;
}

.ljtags a:link, .ljtags a:hover {color:#BBBBBB; border:none;}

ul.ljtaglist {background-color:#F1F1F1; padding:20px; list-style:none;}

/*--------------- SIDEBAR STUFF ---------------*/

#sidebar
{background:#FCFCFC none repeat scroll 0 0;
color:#555555;
float:right;
font-family:"trebuchet ms",Georgia,serif;
font-size:11px;
width:250px;
margin-left: auto;
margin-right: auto;
margin-top:0;
padding:0;
text-align:left;
}

#sidebar_text, #sidebar text, .sidebar_text, .sidebar text {background-color:#000000;}

.sbarheader
{padding: 0px 5px 0px 5px;
}

.sbarbody
{line-height:20px;
padding:10px 10px 0;
background-color:#FCFCFC;
color:#333333; }

.sbarbody2
{padding:25px;
background-color:#FCFCFC;
;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited
{color: #638E99; font-size:10px; font-style:normal;}

div#sidebar a:hover
{color:#6D9BA7;
text-decoration: none;
font-size:15px; font-style:normal;
}

ul.sbarlist
{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:15px 0 0 0;
padding: 0px;
}

li.sbaritem{
background:#fff url(http://i332.photobucket.com/albums/m325/bridgetshoeless/lisbaritem.png) repeat fixed 0 0;
border-bottom:1px solid #88C1D0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:2px 2px 2px 5px;
}

li.sbaritem a {
background:;
color: #6D9BA7;
border:0;}

li.sbaritem a {
background:;
color: #6D9BA7;
border:0;}

li.sbartitle
{border:0;
background-color:#FFFFFF;
background-image: url('http://i332.photobucket.com/albums/m325/bridgetshoeless/background_date-subject.png');
color:#879bb6 ;
font-size:12pt;
font-family: century gothic;
list-style-type: none!important;
text-align:left;
}

#sidebar_summary,#sidebar_tags, #sidebar_calendar { display:; }

td.sbarcalendar {background:#FCFCFC;
color:#555555;
padding:0 0 0 2px;}

table.calendar {width:90%; padding:5px; background:#ffffff;}

td.sbarcalendarposts {background:#FFFFFF;
padding:0 0 0 2px;}

/*------------ CALENDAR ------------*/

ul.year { background-color: transparent; margin: 0px; color:#638E99; font-size:15px; font-family: georgia, Geneva, sans-serif;text-align: center; padding: 20px;}

ul.year li {display: inline;}

table.yeartable {margin-top: 0; background-color: #FFFFFF; padding: 20px; width:630px;}

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

table.yeartable td.yearday { background-color: #EEEEEE; text-align: center;}

td.yearmonth {border-style: none;}

/*--------------- HEADER&FOOTER ---------------*/

#header {
background: transparent;
text-align: left;
color: #aaaaaa;
margin:20px;
}

ul.navheader{
padding:0px 0;
letter-spacing:-0.5;
text-transform: lowercase;
text-align:left;
margin:0 auto;
}

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

.headerimage
{
background-image:url(http://i56.tinypic.com/6p2534.jpg);
background-repeat: no-repeat;
position: relative;
width: 950px;
height: 350px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

div#header a, div#header a:link, div#header a:visited {
color: #acacac;
font-size: 12pt;
padding: 12px;
background: transparent url(http://i332.photobucket.com/albums/m325/bridgetshoeless/background_date-subject.png) repeat scroll 0 0; font-family: "calibri", arial;
text-transform: lowercase; }

div#header a:hover {
color: #acacac;
font-size: 12pt;
padding: 8px;
background: transparent url(http://i332.photobucket.com/albums/m325/bridgetshoeless/background_date-subject.png) repeat scroll 0 0; font-family: "calibri", arial;
border-bottom:none!important;
text-transform: lowercase; }

div#header li.view {
font-family:"calibri", arial;
color:#acacac;
font-size: 12pt;
padding:8px;
background-color: #FCFCFC;
background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/lisbaritem.png);
border:0;
text-transform:lowercase;
}

#footer {
background-color:;
padding:0;
text-align:left;
margin:0 auto;
text-transform: lowercase;
z-index: 100;
width:750px;
float:left;
text-align:right;
}

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

ul.navfooter li {
list-style: none;
margin: 0 5px 0 5px;
display:inline; }

.clearfoot {}

div#footer a, div#footer a:link, div#footer a:visited
{
font-family: "georgia", trebuchet ms, arial, sans-serif;
color: #638E99;
font-size: 25px;
text-transform: lowercase;
letter-spacing: -0.5px;
padding:9px;
}

div#footer a:hover {color: #FFFFFF;
font-family: "georgia", trebuchet ms, arial, sans-serif;
color: #638E99;
font-size: 25px;
text-transform: lowercase;
letter-spacing: -0.5px;
padding:9px;
}

#footer .viewing { display:none; }

/*------------ USERPICS ------------*/
.userpic {
position: relative;
float: left;
margin-left: -140px;
margin-top: 43px;
margin-bottom:-13px;
text-align: center;
border-style: solid;
border-width: 0px;
background: transparent!important;
font-family: century gothic, sans-serif;
font-size: 9px;
z-index: 15; }

.userpicfriends {
position: relative;
float: left;
margin-left: -140px;
margin-top: 43px;
margin-bottom: -13px;
text-align: center;
border-style: solid;
border-width: 0px;
background: transparent!important;
font-family: century gothic, sans-serif;
font-size: 8px;
z-index: 15;
color:#ffffff;}

.userpic img, .userpicfriends img {
padding: 12px;
background: transparent url(http://i332.photobucket.com/albums/m325/bridgetshoeless/background_date-subject.png) repeat scroll 0 0; }

.userpic img:hover, .userpicfriends img:hover
{
padding:12px;
background:#FCFCFC url(http://i332.photobucket.com/albums/m325/bridgetshoeless/userpichoverjpg.png);
border: 0;
}

.userpicfriends a font, .userpicfriends a
{
font-family: georgia;
font-size: 9px;
color: #373737;
padding:0px;
background:#transparent!important;
}

.userpicfriends a:hover font, .userpicfriends a:hover
{color: #6D9BA7;
background:transparent!important;
padding:0px;}

span.ljuser a {color: #BBBBBB;
font-family: tahoma, sans-serif;
font-size: 10px; border-bottom:none!important; font-style:normal; text-transform:none;}

span.ljuser a:hover {color: #6D9BA7;
font-family: tahoma, sans-serif;
font-size: 11px; border-bottom:none!important; background-color:transparent!important; font-style:normal; text-transform:none;}

.defaultuserpic {
display: none; }

/*--------------- LINKS&THELIKE ---------------*/

a, a:link, a:visited {
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
color: #88C1D0;
background-color: none;
font-weight:none;
text-decoration:none;
text-transform:;
font-style:normal;
border:0;
}

a:hover
{
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
color: #638E99;
font-style:normal;
background-color:transparent;
font-weight:none;
text-decoration:underline;
text-transform:;
cursor:default;
border-bottom:0;
}

/*------------ POPUP&CONTROLS ------------*/

div.ContextualPopup .Content {
padding: 10px;
margin: 4px 59px 4px 4px;
background:#F8F8F8!important;
font-size: 9px;
color:#BBBBBB;
font-family:century gothic;
border: 1px solid #CCCCCC;
font-weight:none;
}

div.ContextualPopup div.Inner {
position: relative;
top: -2px;
left: -2px;
background-color:transparent!important;
color: #CCCCCC!important;
border:0;
}

div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: none;
color:#CCCCCC!important;
}

div.ContextualPopup div.Inner a:hover {color:#BBBBBB!important; background-color:transparent;}

div.ContextualPopup .Relation {font-family:century gothic, calibri, trebuchet ms;
font-size:14px;
letter-spacing:-1.4px;
font-weight:italic;
text-transform:none; }

div.ContextualPopup .Userpic img {
border:0px solid #F4F4F4;
margin:0 -10px 0 0}

#lj_controlstrip { background:#FCFCFC; }

#lj_controlstrip a { color: #BBBBBB;}

#lj_controlstrip a:hover { color: #CCCCCC; text-decoration:none;}

#lj_controlstrip_statustext {
color:#AAAAAA;
}

#lj_controlstrip input{
background-color:#ffffff;
color: #bbbbbb;
font-family: calibri;
font-size: 9px;
border:1px solid #F3F3F3;
font-weight:bold;
letter-spacing:-1px; }

/*---------- BLOCKQUOTE&STRONG&CODE&MOAR ----------*/

strong {color:#6D9BA7;}

u {text-decoration:none; border-bottom:2px solid #638E99;}

blockquote, code
{
width:;
padding: 30px;
color: #BBBBBB;
line-height: 11px;
font-size: 15px;
font-family: "courier new",arial;
border: 3px solid #EEEEEE;
background: #FAFAFA;
}

/*------------ COMMENT STUFF------------*/

.comments
{
font-family: georgia, arial, sans-serif;
font-size: 10px;
top: 0px;
padding: 20px;
color: #BBBBBB;
text-align: center;
position: relative;
}

div.comments a, div.comments a:link, div.comments a:visited
{
font-family: "georgia", arial, sans-serif;
color: #CCCCCC;
font-size: 22px;
text-transform: lowercase;
padding: 3px;
letter-spacing:-1px;
}

div.comments a:hover
{
font-family: "georgia", arial, sans-serif;
color: #DDDDDD;
font-size: 22px;
text-transform: lowercase;
padding: 3px;
border-bottom: 0px solid #3c99a6;
background-color:transparent!important;
letter-spacing:-1px;
}

/*------------ COMM PAGES & MORE ------------*/

.datesubjectcomment
{
color: #DDDDDD;
background-color: transparent!important;
padding: 5px;
margin-top: 0px;
}

.userpiccomment
{
position: relative;
float: left;
padding: 0px;
margin-right: 10px;
text-align: center;
border-style: solid;
border-width: 8px;
border-color: #EFEFEF;
background:;
font-family: Trebuchet MS, sans-serif;
font-size: 9px;
z-index: 15;
width:80px; height:80px;
}

.userpiccomment img
{
border: #222222 5px solid;
}

.userpiccomment img:hover
{
border: #222222 5px solid;
}

.box

{
background-color:#FCFCFC;
background-image:url(http://i332.photobucket.com/albums/m325/bridgetshoeless/comments.png);
border-style: none;
border-width: 0px 0px 0px 0px;
border-color: transparent!important;
padding: 5px;
clear: left;
border:0;
color:#666666;
}

input, textarea
{
background-color: #FFFFFF;
color: #AAAAAA;
font-family: century gothic;
font-size: 11px;
border-style: solid;
border-width: 1px;
border-color: #AAAAAA;
}

textarea.textbox
{width: 100% !important;}

.reply
{
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: trebuchet ms, sans-serif;
font-size: 10px;
line-height: 125%;
background-color: #FFFFFF;
color: #BBBBBB;
}

.replytosubject
{font-weight: bold;}

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

.commentbox
{
margin-left: 0;
background-color: #FFFFFF;
background-image: url();
color:#BBBBBB;
font-size:10px;
font-family:trebuchet MS;
padding: 15px;
margin: 20px;
border:2px solid #EAEAEA;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited
{
color: #638E99;
}

.datesubjectcomment a:hover
{
color: #dddddd;
font-style:none!important;
}

.commentboxpartial
{
border-color:;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}

.commentinfo
{
background-color: #FFFFFF;
margin-top: 0px;
width: 100%;
}

.skiplinks
{
font-family:"trebuchet ms", arial;
color:#6D6D6D;
text-align: center;
font-size: 9px;
padding:9px;
background-color: #FCFCFC;
background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/background_date-subject.png);
border:0;
text-transform:lowercase;}

li.viewing {display:none; visibility:hidden; font-size:0px;}

/*------------ LITTLE ICONS ------------*/

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0; } .subject img {vertical-align: middle !important;} img[src*="icon_protected.gif"]{background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/protected.png);} img[src*="icon_private.gif"]{background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/private.png);} img[src*="icon_groups.gif"]{background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/key.png);} .ljuser img[src*="syndicated.gif"]{background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/syndicated.png) !important;} .ljuser img[src*="newsinfo.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/newsinfo.png) !important;} .ljuser img[src*="partnercomm.gif"]{background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/partnercomm.png) !important;} .ljuser img[src*="sponcomm.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/sponcomm.png) !important;} img[src*="btn_del.gif"]{background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/btn_del.png);} img[src*="btn_scr.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/btn_scr.png);} img[src*="btn_unscr.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/btn_unscr.png);} img[src*="btn_freeze.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/btn_freeze.png);} img[src*="btn_unfreeze.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/btn_unfreeze.png);} img[src*="btn_track.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/btn_track.png);} img[src*="btn_tracking.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/btn_tracking.png);} img[src*="btn_tracking_thread.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/btn_tracking_thread.png);} img[src*="anonymous.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/anonymous.png);} img[src*="openid-profile.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/openid-profile.png);} img[src*="userinfo.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/userinfo.png);} img[src*="talk/none.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/talk-none.png);} img[src*="help.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/help.png);} img[src*="pencil.gif"],img[src*="btn_edit.gif"] {background-image: url(http://i332.photobucket.com/albums/m325/bridgetshoeless/pencil.png);} .ljuser img {width: 0; height: 0; background: transparent url(http://i332.photobucket.com/albums/m325/bridgetshoeless/snky1djpg.png) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: text-bottom !important;} .ljuser img[src*="userinfo.gif"] {background: transparent url(http://i332.photobucket.com/albums/m325/bridgetshoeless/snky1djpg.png) no-repeat center left !important; padding: 16px 16px 0 2px !important; } .ljuser img[src*="community.gif"] { background: transparent url(http://i332.photobucket.com/albums/m325/bridgetshoeless/34esrozjpg.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important;}

questions

Previous post Next post
Up