ScotchBonnet
Scotchsour's Place for Layouts, Codes, Icons, Mood Themes...
Previous Entry
Layout .01 - S2 Dear Diary : Baroque 
Next Entry
5th-Dec-2007 08:18 pm
I would like to thank [info]babyelefant for the last minute help to get this layout working properly.




Preview of Baroque Layout
[Click Here for Preview]




Press for bigger size of Baroque Layout


Details
layout available: two-column-left
custom colors : in stylesheet
best view: : 1024x768 or higher
browser checked : Firefox, Internet Explorer
works with : Free, Paid, Nav Bar (Unknown with Plus)
available at : http://asylums.insanejournal.com/scotchbonnet/
based design on : http://www.freecsstemplates.org/ornate
images used : sweetie, famfamfam, pdphoto, freecsstemplates



Instructions
How to Style? (using the InsaneJournal customize journal area)
1. In insanejournal's navigational menu, go to journal > customize journal or press the link.
1a. The first page you see is Journal Display that shows four tabs. The first is highlighted as Basics. Look below for Style System and make sure the radio button is highlighted for:
S2 - For users who don't know HTML or CSS, or make only minor alterations.
2. 2. Press Tab for Custom Options. You can either scroll down or press Custom CSS in the Selection area.
3. Look for : Use layout's stylesheet(s) and say No. In the Custom external stylesheet URL You leave blank.
4. Look for : Custom stylesheet and copy/paste Baroque's stylesheet.
5. Save Changes.
6. It will save and look for : "Your settings have been saved. View your Journal."
7. Go view Journal.
8. You're Done.
9. Thank you for trying this layout.



Instructions
How to Style? (using the LiveJournal new customize journal area)
1. In livejournal's navigational menu, go to journal > customize journal or press the link.
1a. The first page you see is Journal Display that shows four tabs. The first is highlighted as Basics. Look below for Style System and make sure the radio button is highlighted for:
S2 - For users who don't know HTML or CSS, or make only minor alterations.
2. Under (2. Select a New Theme), go the search box and type dear diary. Once the layouts appear go to the bottom and in the drop down choose (all).
3. Find and press (apply theme) to "striking by martin atkins" and then press (customize).
4. Under (customize your theme), press custom css.
5. Under custom css > page > where it states: ("Use layout's "Base Weblog" stylesheet") say no. In the Custom external stylesheet URL You leave blank.
6. Add the css into the custom stylesheet textarea.
7. Press "save changes".
8. In the blue box where it says your current theme, press on your journal's name.
9. You're Done.
10. Thank you for trying this layout.



Extras
Implement CCS into Theme Layer
(Paid/Permanent Users)
If I offer a theme layer, follow any of the links below on how to implement into any of mine into your journal. Thank you.
[info]s2bloggish Tutorials by [info]carriep63:
1. Creating a Theme Layer(using Livejournal new customized area)
2. Using CSS with a Theme Layer
[info]scotchbonnet Tutorials by [info]scotchosur:
1. Creating a Theme Layer(for InsaneJournal users)
2. Create a Style(Coming Later...)



CSS Code
InsaneJournal Cascading Style Sheet



LiveJournal Cascading Style Sheet



*Remember, the Cascading Style Sheets only have the name of the images but no direct address to show them in your journal.
You must upload them to a server or file storage and replace them into the css to get them to work.*



For Paid/Permanent Accounts
If you wish to have tags, extra textbox and metadata function to work in your journal, please click here for code.

Images
If using, please don't hotlink. Upload to another storage online, try photobucket or imageshack.

On each image link, right click [Save target as] or [Save Link as] to your computer (downloading) then upload them to a server or personal storage to use.


Main Images
banner | logo | calendar flower | entry flower | bullet | sidebar container image | sidebar container top image | background body image

Mini Images
lj user image | lj community image | newspaper image | privacy image : friends lock | privacy image | previous | memories | tell a friend | edit tags | edit entry | next | track | screen | unscreen | disconnect |freeze | delete




Optional
download baroque the zip file includes: a html file with css and images.
Note: The link will go to Megaupload. There is a 45 second wait to non-members.


Credit
If you keep the image in the layout (logo), then it isn't necessary to have a link in the sidebar. However, if you wish to remove the the image then I would appreciate it.

Questions
If you have questions, please ask in comments. I'll try to get to you. If you are not part of InsaneJournal, please leave a name so I'll at least know who you are. :)


Note
If you see a staggered gradation in the images in your layout, which might result from your computer saving the images as .bmp only, I learned from [info]carriep63 that it is most likely due to the need to clean out your temporary internet files.
amused
Comments 
24th-Jan-2008 02:35 am (UTC) - Re: Layout doesn't work. :(
OK, I got it to work. I had to use the LJ version, and I removed all that code, like you said. :( Awww.... no tiny famfam icons. Are you going to try to fix that part? They're so cute!

Also... do you happen to know why the link list isn't showing on the sidebar? Or is that a paid-only thing?

[info]muse_minded if you want to check it out and see if it looks right.
24th-Jan-2008 03:31 am (UTC) - Re: Layout doesn't work. :(
OK, I got it to work. I had to use the LJ version, and I removed all that code, like you said. :( Awww.... no tiny famfam icons. Are you going to try to fix that part? They're so cute!

The LJ version? Really? There are certain things different I noticed between IJ and LJ to get this layout to work. The images that weren't under mini images for example has images pointing to IJ server, so using the LJ version won't show them.

The reason you kept receiving a proxy error because I wanted to stuff this layout with so much without using a paid/permanent account that I had exceeded the space allow for css. I reduce as much as possible to make it work so I don't know why it doing it now but if you want to try again:

1. add back a line of css under mini images one by one and see where it starts giving you an error.

2. remove small space such as:

.entryposter img[src="http://www.insanejournal.com/img/userinfo.gif"], collapsed entry
img[src="http://stat.livejournal.com/img/userinfo.gif"]{
background:url(16-member.png);
}
<.... see this space- remove it...>
.ljuser img, .entryicon img{
padding: 14px 16px 0 0 !important;
background-color:transparent;
width: 0;
height: 0;
background-repeat: no-repeat;
}

if that doesn't work try smooshing
ex:
a,a:hover {
color: #9E0000;
text-decoration: none;
}
to
a,a:hover {color: #9E0000; text-decoration: none;}

Tell me if this helped.
24th-Jan-2008 03:37 am (UTC) - Re: Layout doesn't work. :(
Also... do you happen to know why the link list isn't showing on the sidebar? Or is that a paid-only thing?

You mean the tags? Yes, unfortunately it is a paid function. I've written about it under paid/perm accounts in this layout.

muse_minded if you want to check it out and see if it looks right.

It looks lovely but I might be biased. :*)
24th-Jan-2008 03:28 pm (UTC) - Re: Layout doesn't work. :(
Good news! Taking out all the extra lines and flowing a few code boxes together instead of on separate lines saved enough space that it took the whole layout! :) Check it out. It looks fabulous!

Thanks for your help with this, and what a gorgeous layout! I hope you make more soon! :)
26th-Jan-2008 05:33 am (UTC) - Re: Layout doesn't work. :(
I am glad that it is working for you. I have two more in the pipeline with layouts. Of course I choose difficult layouts... stupid me. ^_^
26th-Jan-2008 02:50 pm (UTC) - Re: Layout doesn't work. :(
Actually... I hate to be a pain, but I noticed one last thing, and I bet it's simple. The comment links - once you have a comment, they appear like this: 1 commentLeave a comment. I have messed around with this and shortened the link to just 'comment' to see if it was some kind of a line or space issues, but no matter what the fields say, there are no spaces between the links once you actually have a comment. Is it possible to fix this?

Thank you so, so much. I made an actual link in my links list to your community here, too, so people can find you. :)
26th-Jan-2008 10:07 pm (UTC) - Re: Layout doesn't work. :(
Hmm, I can't see it. I look at it again on my journal and I see the dash between the 1 comment and leave comment. I am on the computer now so if want to show me a public post go ahead.
26th-Jan-2008 10:11 pm (UTC) - Re: Layout doesn't work. :(
OK, there is a first post that is public, and I commented there, and you can see it doing it.
26th-Jan-2008 11:05 pm (UTC) - Re: Layout doesn't work. :(
Are you using Firefox or IE? I see the dash in Firefox but not IE.
26th-Jan-2008 11:39 pm (UTC) - Re: Layout doesn't work. :(
IE.
27th-Jan-2008 01:50 am (UTC) - Re: Layout doesn't work. :(
IE6. as I believe this doesn't occurs in IE 7. I don't really use either IE's but I did try to make it work.

The separator can be seen in Firefox where you can turn it on and off but IE, nada and gives me headaches. I know it has something to do with the .entrycmdlinks li... I'll try to give you something for that or not if I can't in the meantime, I thought I fixed this but if your icons under your tags are small put this in the css:

*html .entrylinkbarpost a img {
padding:0px;
width:22px;
height:20px;
}

and if you are not seeing your mini icons in the content of your entries add this:

* html span.ljuser{
background-image: url(group.png) /*replace image address)!important;
background-repeat: no-repeat;
background-position: left middle;
padding: 0px 5px 0px 0px !Important;
}
* html span.ljuser img{
visibility: hidden;
}
27th-Jan-2008 01:53 am (UTC) - Re: Layout doesn't work. :(
sorry add this :

* html span.ljuser{
background-image: url(group.png) /*replace image address*/!important;
background-repeat: no-repeat;
background-position: left middle;
padding: 0px 5px 0px 0px !Important;
}
* html span.ljuser img{
visibility: hidden;
}
Code by masterslacker. Fiddled by userinfoscotchsour. This page was loaded on Mar 28th 2024, 8:25 pm GMT.