#70 - X-mas 2009

Dec 24, 2009 00:30

Finally, after another 3 months of silence, I have made you a new layout!

I had to rush this one terribly to get it finished in time, but I managed to release this before Christmas! Not much time to spare, but still ;). Because I rushed this one, it could be there are some glitches. Sorry if there are! Do leave me a comment and I'll try to fix it as soon as possible!

And without further ado, I wish you all Happy Festivities and I hope you'll enjoy the new layout!

Description Name: X-mas 2009 Description: Christmas layout in the traditional green/red/tan/gold colours mixed with a kitchy pattern and a couple of cute mini-icons.

General Information Layout Style: Expressive Tested in: Mozilla Firefox and Internet Explorer Best Resolution: 1024*768 and above Account Levels: Layout works with all account levels (Basic, Plus, Paid). [ How to change add orientation] Works with Navigation Strip: Yes [ How to enable/disable] Credit: Credit to me is implemented in the footer of the page.



{Bigger} {Live Preview}

Installation Go to Manage: Customize Select a new Theme:
  • Check the box next to 'Only show themes available to me'
  • Type 'Expressive' in the Search box
  • Click search
  • Apply any theme that you get in the search results
Choose a Page Setup
  • Plus accounts: Choose an Ad placement: First select Vertical and save; then pick inbetween Entries and save again
  • Apply the following: '2 Column (sidebar on left)' or '2 Column (sidebar on right)'
  • Click 'Customize Selected Theme'
Choose 'Custom CSS' from the menu on the left:
  • Use layout's "Base Weblog" stylesheet: No
  • Custom external stylesheet URL: Leave empty
  • Custom stylesheet: Paste the codes (given bellow) in the box

Hit 'Save Changes'

Images & Code The images and code are uploaded to my own accounts. If you want to avoid bandwidth getting exceeded it is recommended to upload the images to your own server.
If you upload the images to your own account, don't forget to change the URL's in the code!

Step 1: Basic Codes
Bellow you can find the basic codes, i.e. WITHOUT HEADER, for the layout. Paste these codes in the "Custom stylesheet" box.

/*=================================================================================================================================================*/ /*------------------------------------------------------- LAYOUT 70: X-mas 2009 ----------------------------------------------------------*/ /*------------------------------------------------------------- S2 STYLE: EXPRESSIVE --------------------------------------------------------------*/ /*----------------------------------------------------------------- DATE: DECEMBER 2009 ----------------------------------------------------------------*/ /*------------------------------- AVAILABLE AT GAWARIEL_DESIGN (http://community.livejournal.com/gawariel_design/) -------------------------------*/ /*--------------------------------------------- CREATED BY GAWARIEL (http://gawariel.livejournal.com/) --------------------------------------------*/ /*---------------------------------------------------------- IMAGES MADE IN PHOTOSHOP CS ----------------------------------------------------------*/ /*=================================================================================================================================================*/ /*----------------------------------------*/ /*---------- GENERAL FORMATTING ----------*/ /*----------------------------------------*/ * { margin: 0; padding: 0; } body { margin: 0; padding: 0; background: #E0CB6E; text-align: center; font-family: lucida sans unicode, sans-serif; font-size: 64.5%; color: #06301B; } a{ color: #D21313; text-decoration: none; font-family: georgia, serif; } a:hover{ color: #A78900; } img { border: 0; } .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/user.png); padding: 18px 0 0 18px!important; } .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/community.png); padding: 18px 0 0 18px!important; } blockquote { width: 80%; margin: 10px 20px; padding: 10px; color: #E0CB6E; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/blockquote.jpg); border: 2px solid #004020; border-left: 5px solid #004020; } /*------------------------------------*/ /*---------- PAGE STRUCTURE ----------*/ /*------------------------------------*/ #container { width: 100%; margin: 0 auto; text-align: justify; } #container-inner { padding: 10px; } #alpha, #beta { display: inline; /* HACK - Win IE float bug workaround */ float: left; position: relative; top: 0; } #alpha-inner, #beta-inner { position: static; overflow: hidden; /* hide content that is larger than the element dimensions */ } #alpha { width: 78%; } #alpha-inner, #beta-inner { padding: 10px; } #beta { width: 210px; background: #004020; border: 1px solid #EFCB00; } /*----------------------------*/ /*---------- HEADER ----------*/ /*----------------------------*/ #header { height: 582px; } #header-name, #header-description { display: none; } /*--------------------------------*/ /*---------- NAVIGATION ----------*/ /*--------------------------------*/ ul.nav { width: 100%; padding: 515px 0 0 0; list-style-type: none; text-align: center; font-family: Californian FB, georgia, serif; text-transform: uppercase; font-size: 1.8em; letter-spacing: 0.1em; } ul.nav li.item { display: inline; padding: 0 10px 0 10px; } ul.nav li.item a { font-weight: normal; color: #E0CB6E; padding: 20px 10px; } ul.nav li.item a:hover { color: #EFCB00; text-decoration: none; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/nav.jpg) no-repeat center; } /*-----------------------------------*/ /*---------- PREVIOUS/NEXT ----------*/ /*-----------------------------------*/ .stream-footer, .stream-header { display: block; margin: 0 0 0 20px; } .stream-footer { margin-top: 20px; } a.prev { font-size:0px; display:block; width:119px; height:51px; background:url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/back.jpg) no-repeat top left; visibility:visible; float:left; line-height:0px; } a:hover.prev{ background:url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/back.jpg) no-repeat bottom left; } a.next { font-size:0px; display:block; width:119px; height:51px; background:url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/next.jpg) no-repeat top left; visibility:visible; float:right; line-height:0px; } a:hover.next{ background:url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/next.jpg) no-repeat bottom left; } .prevnext { font-size:0px; line-height:0px; clear:both; } .prevnext a { line-height:0px; font-size:0px; color:#E0CB6E; } /*-----------------------------------*/ /*---------- ENTRY STYLING ----------*/ /*-----------------------------------*/ .asset { clear:both; padding: 12px; } .asset-body { text-align: justify; font-size: 1.3em; line-height: 1.5em; padding: 0 0 0 40px; } .asset-body ol { margin: 10px 0 10px 50px; } .asset-body ul { list-style: none; margin: 0 0 0 28px; } .asset-body ul li { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/list-item.png) no-repeat top left; padding: 0 0 0 20px; } .asset-body textarea { font-size: 0.9em; } /*------ SUBJECT ------*/ h2.asset-name.page-header2 { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/subject.png) no-repeat center left; font-size: 3.3em; letter-spacing: 0.1em; text-align: left; font-weight: normal; padding: 0px 0 0px 40px; } /*------ ENTRY DATE ------*/ .asset-header .asset-meta-list { margin: 10px 0 10px 90px; text-align: left; } .asset-header .datetime { display: block; color: #A78900; font-size: 1.2em; text-transform: uppercase; font-style: italic; letter-spacing: 0.1em; } /*------ USERICON ------*/ .asset .user-icon { float:left; position:relative; margin: 10px; background: transparent!important; text-align: center; } .user-icon img { padding: 9px; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/pattern.png) center; border: 1px solid #004020; } .user-icon span{ background:transparent!important; } span.ljuser a b, .user-icon .ljuser a{ color: #D21313; font-size: 1.0em; } span.ljuser a:hover b{ color: #A78900; } span.ljuser img { background: none; padding: 0; } /*------ METADATA ------*/ .lj-currents { margin: 40px 0px 0px 200px; font-family: georgia; font-size: 1.1em; text-align: left; color: #866B00; } .lj-currents .entryMetadata-label { margin-right: 10px; font-variant: small-caps; } .lj-currents ul{ list-style-type:none; background:url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/meta.jpg) no-repeat top left; padding: 40px 0px 5px 20px; } /*------ ENTRY TAGS ------*/ .asset-tags { margin: 15px 0px 0px 200px; font-size: 1.1em; } .asset-tags-list { list-style-type:none; background:url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/tags.jpg) no-repeat top left; padding: 40px 0px 5px 20px; } .asset-tags-list li.item { display:inline; } .asset-tags-header { display:none; } /*------ ENTRY COMMENT LINKS ------*/ .asset-meta-list { text-align: center; margin: 40px 0 0 0; list-style-type:none; } .asset-meta-comments { list-style-type:none; display: inline; font-family: georgia, serif; font-size: 1.8em; line-height: 3.0em; text-transform: uppercase; } li.asset-meta-comments { padding: 0 3px 0 0; } li.asset-meta-comments a { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/comment.png) no-repeat center left; font-weight: normal; padding: 5px 5px 5px 30px; } /*------ DIVIDER ------*/ .asset-footer { height: 100px; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/divider.jpg) no-repeat center; margin: 0; } /*-------------------------------------*/ /*---------- SIDEBAR STYLING ----------*/ /*-------------------------------------*/ /*------ GENERAL ------*/ .widget { clear: both; margin: 0 0 50px 0; padding: 0; text-align: justify; font-size: 1.2em; line-height: 1.4em; color: #E0CB6E; } .widget a{ color: #EFCB00; } .widget a:hover { color: #D21313; } h3.widget-header { color: #EFCB00; font-size: 2.0em; letter-spacing: 0.1em; font-weight: normal; text-align: left; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/sb-title.jpg) no-repeat bottom center; padding: 0 0 25px 0; } h3.widget-header a { color: #EFCB00; } .widget-content { padding: 10px 5px 10px 10px; } .widget-footer { padding: 20px 0 0 0; background: none; } .widget-footer a{ float: right; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/website.png) no-repeat center left; padding: 0 0 0 20px; } ul.widget-list { margin: 0; padding: 0; } /*------ PROFILE WIDGET ------*/ .about-me-widget { text-align: center; } .user-pic { position:relative; text-align: center; margin: 0; padding: 8px; } .user-pic img { padding: 9px; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/pattern.png) center; border: 1px solid #E0CB6E; } .profile-username, .profile-name { text-align: left; margin: 0 0 5px 0; } .profile-name a{ float: right; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/website.png) no-repeat center left; padding: 0 0 0 20px; margin: 0 0 50px 0; } /*------ LATEST MONTH WIDGET ------*/ .calendar-widget .widget-content { margin: 0; } .calendar-widget table { text-align: center; margin: 0 auto; } .calendar-widget table td { text-align:center; } .calendar-widget table td a{ font-weight: bold; } .calendar-widget table th { background: #D61A1A; border: 1px solid #737E45; text-align: center; padding:1px 0px 1px 0px; } /*------ LINKS WIDGET ------*/ .typelist-widget .widget-list { list-style: none; margin: 0 10px 0 5px; } .typelist-widget li.item { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/list-item.png) no-repeat center left; line-height: 2.5em; padding: 0 5px 0 20px; letter-spacing: 0.1em; } /*------ TAGS WIDGET ------*/ .categories-widget .widget-list { list-style: none; } .categories-widget li.item { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/list-item.png) no-repeat center left; line-height: 2.5em; padding: 0 5px 0 20px; letter-spacing: 0.1em; } .categories-widget .tagcloud { text-align: center; } .categories-widget .tagcloud li { background: none; display: inline; padding: 0; } /*------- SUMMARY WIDGET ------*/ .archive-widget .widget-list { list-style: none; } .archive-widget li.item { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/list-item.png) no-repeat top left; margin: 15px 0; padding: 0 5px 10px 20px; border-bottom: 1px solid #737E45; } /*------ CUSTOM TEXT WIDGETS ------*/ .customtext-widget .widget-content { text-align: justify; padding: 60px 15px 0px 15px; } /*------ NOT DISPLAYING OTHER WIDGETS ------*/ .syndicate-widget,.powered-widget,.designed-widget { display: none; } /*----------------------------------*/ /*---------- ARCHIVE PAGE ----------*/ /*----------------------------------*/ .yeartable { width: 80%; margin: 0 auto; clear:both; padding: 10px; } td.yearmonth { font-family: georgia, serif; font-weight: normal; color: #D21313; font-size: 3.3em; letter-spacing: 0.1em; padding: 0 0 20px 0; } td.yearmonth a { margin: 0 0 0 120px; text-align: right; font-size: 12pt; } .yearday { background: #D61A1A; border: 1px solid #737E45; color: #E0CB6E; text-align:center; padding:2px; font-size: 1.2em; letter-spacing: 0.1em; font-family: georgia, serif; } td.yeardate div { text-align:center; padding:4px; border: 1px solid #737E45; } td.yeardate div a { font-weight:bold; } ul.year { list-style-type:none; margin: 10px 0 0 20px; padding:0; } ul.year li { display:block; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/year.jpg) no-repeat top center; text-align: center; width: 119px; height: 51px; float:left; font-size: 20px; line-height: 22pt; margin: 0 10px; padding: 13px 0 0 0; color: #EAD795; } ul.year li a { color: #EFCB00; text-decoration: none; font-weight: normal; font-size: 1.0em; } ul.year li a:hover { color: #737E45; } /*---------------------------------*/ /*---------- PAGE FOOTER ----------*/ /*---------------------------------*/ #footer{ clear:both; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/sig.jpg) no-repeat bottom right; float: right; width: 208px; height: 100px; margin: 0 0 20px 0; } /*-----------------------------------*/ /*---------- COMMENT PAGES ----------*/ /*-----------------------------------*/ /*------ COMMENT BOXES ------*/ h2.comments-header { text-align: center; font-family: georgia, serif; font-size: 3.3em; letter-spacing: 0.1em; color: #D21313; font-weight: normal; } #comments .comment{ margin:10px 50px 20px 50px; padding: 10px; color: #E0CB6E; background: #004020; border: 1px solid #EFCB00; } html*#comments .comment{ width: 90%; } #comments .comment a{ color: #EFCB00; } #comments .comment a:hover { color: #D21313; } #comments .comment-odd .comment-links, #comments .comment-even .comment-links { padding: 2px; clear:both; text-align: right; font-size:1.0em; } #comments .comment-odd .comment-links a, #comments .comment-even .comment-links a{ font-weight: normal; } .comment .user-icon { float:left; position:relative; margin: 0 10px 10px 0; } .comment-meta { text-align: left; font-size: 1.3em; font-family: georgia, serif; } .comment-body { padding: 5px; text-align: justify; font-size: 1.0em; line-height: 1.5em; font-family: lucida sans unicode, sans-serif; } .comment-subject { text-transform: uppercase; text-decoration: underline; font-size: 1.2em; color: #EFCB00; margin: 3px 0 0 0; padding: 0; } .comment-date { display: block; text-align: right; color: #A78900; font-size: 1.0em; text-transform: uppercase; font-style: italic; letter-spacing: 0.1em; } .comments-nav { text-align:center; font-size: 1.3em; } .comments-nav a{ font-weight: normal; } /*------ REPLY PAGE ------*/ hr { display: none; color: #737E45; } .quickreply { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/blockquote.jpg); border: 1px solid #004020; } textarea#commenttext.textbox { width:90%; } form#postform { width: 80%; margin: 20px auto; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/70_X-mas%202009/blockquote.jpg); border: 1px solid #004020; color: #E0CB6E; padding: 10px; font-size: 1.2em; } form#postform a{ color: #EFCB00; } form#postform a:hover { color: #004020; } textarea, input#subject.textbox, select { background: #E0CB6E; border: 1px solid #737E45!important; margin:0px 10px 8px 0px; font-family: lucida sans unicode, sans-serif; font-size: 1.1em; color: #004020; line-height: 1.5em; padding: 2px; } input { font-family: lucida sans unicode, sans-serif; } option { background: #004020; border-bottom: 1px solid #000000!important; color: #E0CB6E; letter-spacing: 2px; } select { background: #004020; color: #E0CB6E; } /*==========================================================================================================================*/ /* -------------------------------------- PASTE ALL EXTRA CODE UNDERNEATH THIS LINE --------------------------------------- */ /*==========================================================================================================================*/
Step 2: Add a header
As mentioned, adding the basic codes to your stylesheet box will yield you a layout WITHOUT a header. You will need to paste another portion of code to the BOTTOM of your stylesheet to have a header:

#container { background: url(URL TO YOUR CHOSEN HEADER) no-repeat top center; }

Happy Holidays! Happy Holidays All I want for Christmas (for bookworms like me ;) )

Merry Christmas! Happy Boxing Day!

Happy New Year! (01) Happy New Year! (02)

Happy New Year! (03) Happy New Year! (04)



If you have further ideas for headers, don't hesitate to leave a comment!

Troubleshooting Before asking any questions, make sure you read all information above thoroughly and that your question isn't adressed in the FAQ. If your problem still isn't solved, you are welcome to ask your question here.

layouts: account status: plus, layouts: [s2], layouts: [s2]: expressive, layouts: account status: paid, layouts, layouts: account status: basic

Previous post Next post
Up