Log in

No account? Create an account

Previous Entry | Next Entry

Layout Width

  • May. 29th, 2010 at 5:49 PM
I was wondering if someone could explain to me how to change the width of the entries of this layout. As of right now, it's very narrow and I'd like to make it wider. I've gone through the CSS and tried adjusting various components, such as #alpha, but that didn't stretch the background of the entries as well.

The layout can be viewed in my journal.

/* Template: (#33) The Pause That Refreshes */
/* Date: August 18, 2007 */
/* S2 Style: Mixit */
/* Available at http://community.livejournal.com/thefulcrum/ */
/* Made by Liz a.k.a. grrliz.livejournal.com */

* {margin: 0px; padding: 0px; }

font {font-family: inherit; font-size: inherit; color: inherit;}

html {font-size: 100%; /* IE hack */ }

body {
margin: 0px;
padding: 0px;
background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_bg4.png) center bottom no-repeat fixed #ffffff;
color: #666666;
font-family: arial, verdana, tahoma, sans-serif;
font-size: 62.5%;
text-align: center;

a, a:link, a:visited, a:active {color: #0098bc; text-decoration: none;}
a:hover {color: #ea026b;}

blockquote {margin: 0.8em 3em 0.8em 1em; padding-left: 30px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_blockquote.gif) top left no-repeat; color: #999999; font-size: 1.5em; font-family: Cambria, georgia, "times new roman", serif; line-height: 1em; }

input, textarea, select {background: #ffffff; color: #666666; border: 1px solid #0098bc;}

h1, h2, h3 {font-family: Cambria, georgia, "times new roman", serif; font-weight: normal; line-height: 1em;}

/* ----------------------------------------- */
/* ---------- PAGE STRUCTURE --------------- */
/* ----------------------------------------- */

/* -- don't touch the stuff below -- */

#page, #header, #content, #footer {position: relative; top: 0;}
#alpha, #beta, #gamma {display: inline; float: left; position: relative; top: 0;}
#footer {margin: -1px 0 0 0; /* HACK - removes space between content and footer */}
#page-inner, #header-inner, #content-inner, #alpha-inner, #beta-inner, #gamma-inner, #footer-inner {position: static;}
#header-inner, #alpha-inner, #beta-inner, #gamma-inner {overflow: hidden; /* hide content that is larger than the element dimensions */}
#alpha-inner[id] { overflow: visible; } /* FF MAC & PC will clip pager-top when accessing page anchor */

/* -- don't touch the stuff above -- */

#container-inner {min-height: 100%; text-align: left;}

#page {position: relative; width: 760px; margin: 0px auto; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_bg5.png) top right no-repeat transparent; font-size: 1.1em; line-height: 1.5em; text-align: left;}

#header {position: relative;}
#header-inner {margin: 0px auto;}

#content {text-align: left;}

#alpha {width: 520px;}

#beta {width: 240px; color: #333333;}

/* ---------------------------- */
/* ---------- HEADER ---------- */
/* ---------------------------- */

#header-content {overflow: hidden; position: relative; height: 120px; margin: 0px 10px; text-transform: uppercase;}

#header-text {font-weight: bold; text-transform: lowercase;}
#header-text ul.nav {margin: 0px; padding: 0px; height: 3em; text-transform: lowercase; }
#header-text ul.nav li {float: left; display: inline; margin-right: 21px; text-align: left;}
#header-text ul.nav a {display: block; margin-top: 20px; padding: 25px 0px 0px 0px; font-weight: normal;}
#header-text ul.nav a:hover {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_nav.gif) 50% -79px no-repeat;}
#header-text ul.nav li.current a {background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_nav.gif) 50% 0% no-repeat; color: #0098bc;}

#header-name {position: absolute; bottom: 0px; left: 0px; margin-right: 237px; padding-bottom: 5px; font-size: 2.5em; font-weight: normal; font-family: Cambria, georgia, "times new roman", serif; line-height: 1em; }
#header-name a {color: #f5bb00;}
#header-name a:hover {color: #ea026b;}
#header-description {display: none; color: #aad71c; font-size: 1em; letter-spacing: 0.1em;}

.lj-view-friends #header-name {font-size: 2em;}

/* ----------------------------- */
/* ---------- ENTRIES ---------- */
/* ----------------------------- */

/* previous and next links */
.stream-header {display: none; text-align: center;}
.stream-footer {margin-bottom: 3em; margin-right: 10px; text-align: right;}

/* entry container */
.asset {margin-bottom: 1em;}
.asset-inner {}

.asset-header {padding: 20px 0px 0px 0px;}
.lj-view-entry .asset-header {padding: 0; }

/* entry subject */
h2.page-header2 {position: relative; padding: 20px 0px 0px 0px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_entryheader.png) top center no-repeat transparent; font-size: 0px; text-transform: lowercase;}
h2.page-header2 a {display: block; margin: 0px 11px 0px 10px; padding: 5px 20px 15px 20px; background: #0098bc; color: #ffffff; font-size: 20px; line-height: 20px; text-decoration: none;}
h2.page-header2 a:hover {color: #d7f3fa;}
span.lj-entry-securityicon {position: absolute; top: 30px; right: 30px;}

/* {width: 100%; height: 16px; margin: 0px 30px; background: url(33_flocked.gif) top left no-repeat;} */

/* date and time section are below the comments section */

/* entry body, meta, tags */
.asset-content {min-height: 150px; padding: 10px 30px; background:url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_entrybody.png) top center repeat-y transparent; }

/* entry text */
.asset-body {padding: 1.4em 0 0.9em 0;}

.asset-body a {font-weight: bold; border-bottom: 1px solid #ea026b;}
.asset-body a:hover {border-bottom: 1px solid #aad71c;}
.asset-body ol {margin: 1em 3em;}
.asset-body ul {margin: 1em 2em; list-style-type: none;}
.asset-body ul li {padding-left: 15px; background:url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_pinkstarbullet.gif) 0px 4px no-repeat transparent;}
.asset-body dt {color: #ea026b; border-bottom: 1px solid #cccccc; font-weight: bold;}
.asset-body dd {padding: 5px 10px 5px 30px; }

/* username and userpic */

.asset .ljuser {display: inline !important;}
.asset .ljuser a {background: #ffffff; color: #666666;}

.user-icon {float: right; margin-left: 5px; padding: 1px; background: transparent !important; text-align: center;}
.user-icon img {border: 3px solid #aad71c;}
.user-icon span {padding: 1px 0px; background: #ffffff !important; text-align: center;}
.user-icon span a img {border: 0px;}
.user-icon a {background: #ffffff; color: #666666;}

/* mood, music, location */
.lj-currents ul {margin: 0px; padding: 0.4em 0 0 0; border-top: 1px solid #dddddd;}
.lj-currents ul li {list-style: none;}
.lj-currents img {display: none;}

.entryMetadata-label {font-weight:bold;}
.entryMetadata-content {margin-left: 2px;}

/* --- tags --- */
.asset-tags {}
.asset-tags-header {
display: block; float: left;
width: 3.5em; /* matches .asset-tags-content width */
height: 100% !important;
margin: 0px; padding: 0px;
font-size: 1em !important;
.asset-tags-list {margin: 0 0 0 3.5em; padding: 0px; list-style-type: none;}
.asset-tags-list li {display: inline; padding-right: 5px;}
.asset-tags-list a {white-space: normal !important;}

/* comments bar */
div.asset-meta {clear: both; padding: 0px 0px 20px 0px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_entryfooter.png) bottom center no-repeat transparent; }
ul.asset-meta-list {margin: 0px 11px 0px 10px; padding: 5px 20px 0px 20px; background: #aad71c; list-style-type: none;}
li.asset-meta-comments {display: inline; margin: 0px 10px 0px 0px; text-transform: lowercase;}
li.asset-meta-comments a {color: #ffffff;}
li.asset-meta-comments a:hover {color: #5a7504;}

/* date and time */
div.asset-header div.asset-meta {background:url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_entrybody.png) top center repeat-y transparent; }
div.asset-header ul {position: absolute; margin: 0px !important; padding: 0px 30px !important; }
div.asset-header li.item {position: absolute; top: px; left: 30px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_dateli.gif) bottom right no-repeat #ea026b;}

abbr.datetime {display: block; width: 160px; padding: 5px 0px;
background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_dateabbr.gif) bottom left no-repeat transparent; color: #ffffff;
font-size: 1em;
text-transform: uppercase;
text-align: center;

.prevnext, .prev, .next {padding: 5px 0px;}

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

.widget {width: 240px; padding-bottom: 25px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_widgetfooter.png) bottom center no-repeat transparent; color: #ffffff;}
.widget-inner {margin: 0px; padding: 0px;}

.widget-header {padding: 18px 20px 5px 60px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_widgettop.png) top center no-repeat transparent; font-size: 1.8em; text-transform: lowercase;}
.widget-content {padding: 5px 20px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_widgetbody.png) top center repeat-y transparent; }

.widget ul {list-style-type: none;}
.widget li {padding: 2px 0px; border-bottom: 1px solid #b9e52e;}
.widget a {color: #ffffff;}
.widget a:hover {color: #5a7504;}

/* profile */
.about-me-widget {display: none; text-align: center;}
.about-me-widget .widget-header a {color: #666666;}
.about-me-widget .widget-header a:hover {}
.about-me-widget dl, .about-me-widget dd, .about-me-widget dt {margin: 0px; padding: 0px; width: 100%;}

/* calendar */
.calendar-widget {}
.calendar-widget table {width: 100%; text-align: center;}
.calendar-widget p {margin: 5px 0px; padding: 0px; text-align: center;}
.calendar-widget tr:first-child a, .calendar-widget tr:first-child a:hover {background: transparent !important; border: 0px; font-weight: bold;}
.calendar-widget td a {display: block; width: 100%; border: 1px solid #b9e52e; background: #0098bc;}
.calendar-widget td a:hover {display: block; width: 100%; border: 1px solid #b9e52e; background: #ea026b; color: #ffffff;}

/* link list */
.typelist-widget li.item {margin: 0px; padding: 0px; }

/* tags */
.categories-widget .widget-footer {padding: 20px 0px 0px 0px;}
.categories-widget li.item {margin: 0px; padding: 0px;}
.categories-widget li.tag {display: inline; padding: 0px 1px; background: none; }

/* post summary */
.archive-widget li.item {margin: 0px 0px 5px 0px; padding: 0px;}

.links-widget .widget-list .item {
margin-bottom: .2em;
border: none !important;

.widget-list .tagcloud {
list-style: none !important;
display: inline !important;
color: #ff0000 !important;
white-space: nowrap !important;
border-left: 0 !important;
width: 100% !important;

/* syndication, LiveJournal link, designer link */
.designed-widget {display: none;}

/* ----------------------------------- */
/* ---------- COMMENTS PAGE ---------- */
/* ----------------------------------- */

/* Comments ---------------------------------------*/
#comments {padding: 0px 0px 30px 0px; background: url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_entryfooter.png) bottom center no-repeat transparent;}

.comments-body {padding: 10px 30px; background:url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_entrybody.png) top center repeat-y transparent; }

div.comments-inner h2 {display: block; margin: 0px 11px 0px 10px; padding: 20px 20px 15px 20px; color: #ffffff; font-size: 2em;}

.comment {margin-bottom: 0.8em; padding: 0.8em 0; border-bottom: 1px solid #cccccc;}

.comments-nav {margin: 0px; text-align: center;}

/* --- reply, freeze, screen, etc --- */
.comment-links {margin-top: 0.9em; font-weight: normal; text-align: right; font-size: 1em;}
.comment-subject {font-weight: bold; }
.comment-date {margin-top: 0.9em; margin-bottom: 0.9em;}
.comment-date abbr.datetime {width: 100%; background: none; color: #666666; text-align: left;}

/* Fix height in IE */
.comment {height: 1%;}

/* Quick Reply ---------------------------------------*/
.quickreply {margin-top: 1em; width:90%; padding-top: 5px; padding-bottom: 10px;}

#commenttext, #subject {width: 90%;}

#comment-form {width: 500px;}

/* ------------------------------ */
/* ---------- ARCHIVES ---------- */
/* ------------------------------ */

/* Calendar/Archive ---------------------------------------------------------------------- */

ul.year {text-align: center; padding: 0px;}
ul.year li {display: inline; padding: 0px 5px;}

table.yeartable {margin-left: auto; margin-right: auto; padding: 10px; background: #ffffff;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #cccccc;}
table.yeartable td.yearday {background-color: #e9e9e9; text-align: center;}
td.yearmonth {border-style: none; font-weight: bold;}

dd.viewsubjects {margin: 0 0 .75em .75em;}

.lj-view-month table {}
.lj-view-month widget table {margin: 0px !important;}

/* -------------------------- */
/* ---------- MISC ---------- */
/* -------------------------- */

/* monthly archives ---------------------------------------*/
.lj-view-month #alpha-inner {padding: 20px 0px;}
.lj-view-month dl {background: #ffffff;}

/* tags page ---------------------------------------*/

.lj-view-tags h2.page-header2 {background: none; color: #ea026b; font-size: 2em;}
.lj-view-tags #alpha-inner {padding: 0px 10px;}
.lj-view-tags #alpha-inner ul {padding: 15px 5px 5px 5px; background: #ffffff; list-style-type: none;}
.lj-view-tags #alpha-inner ul li {padding-left: 15px; background:url(http://img.photobucket.com/albums/v388/grrliz/other/layouts/free/33_pinkstarbullet.gif) 0px 4px no-repeat transparent;}

/* Sponsored Plus ---------------------------------------*/

#ad-5linkunit {
clear: both;

#ad-leaderboard {
margin-bottom: 10px;

/* Utility Code --------------------------------------------------- */

/* clear floats, inspired by positioniseverything.net/easyclearing.html */
.widget .user-pic:after {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0.1px;

/* float in post bodies around enclosures */
.asset-body {
height: 1%;

/* Win IE < 7 */
* html #header-name a { word-wrap: break-word; }



( 3 comments — Leave a comment )
Jun. 7th, 2010 12:55 pm (UTC)
Sorry I've let this go without a response for so long, but I don't have much time any more to help people with major modifications of customized themes like grrliz's. It looks like there are a lot of images to this layout, and if they're fixed-width, may mean you're out of luck when it comes to changing the width.
Jun. 7th, 2010 11:13 pm (UTC)
Oh, I see. She said that it was possible to change the width, so I had hoped it would just be a few tweaks to the css, but guess not. Thanks for your time, anyway!
Jun. 8th, 2010 04:23 am (UTC)
I don't see how it would be done without changing the width of the images in something like Photoshop. The images that make up the entry header and footer are fixed at 520px wide, the same as the #alpha width setting, so it's not going to be as simple as changing some CSS.
( 3 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars