Official S2 Customization Community [entries|friends|calendar]
Official S2 Customization Community

[ userinfo | greatestjournal userinfo ]
[ calendar | greatestjournal calendar ]

[ Haven ] Edit Link on Entries [18 Oct 2007|02:34pm]
layouthack
Haven: Edit Link on Entries

This will add the EDIT and the MEM link to the bottom of your entries (next to the "Comments" link).

Step One: Create a theme layer if you haven't already. Instructions are here.

Step Two: Append the following code.

If you already have a theme layer, scroll down to the very end of it and append the following code.

( Code Below -- lengthy )

[ Flexible Squares ] Edit Link on Entries [05 Sep 2007|10:30am]
layouthack
Flexible Squares: EDIT link on Entries

This will add the EDIT and the MEM link to the bottom of your entries (next to the "Comments" link).

Step One: Create a theme layer if you haven't already. Instructions are here.

Step Two: Append the following code.

If you already have a theme layer, scroll down to the very end of it and append the following code.

( Code Below -- lengthy )

[ kunponent1 ] HTML in Sidebar [02 Jul 2007|12:58am]
layouthack
Kunponent1: HTML in Sidebar.

Step one: Create a layer. Instructions are here.

Step two: Paste the following into your new layer

layerinfo "type" = "theme";
layerinfo "name" = "YOURNAMEHERE";
set show_free_text = true;

function print_free_text(Page p) {

### Do not edit these.

var string header = "";
var string content = "";

### First Component.

$header = """Custom Component Title""";
$content = """Custom Component Content: You can have HTML here.""";

print_comp_header($header);
print $content;
print_comp_footer();

### Second Component.

$header = """Custom Component Title""";
$content = """Custom Component Content: You can have HTML here.""";

print_comp_header($header);
print $content;
print_comp_footer();

}

[ SMOOTH SAILING ] HTML in Sidebar [27 Jun 2007|03:58pm]
layouthack
Smooth Sailing: HTML in Sidebar.

Step one: Create a layer. Instructions are here.

Step two: Paste the following into your new layer

function Page::lay_print_sidebar_freetextbox() {
    var string myhtml = "<a href='http://www.urlgoeshere.com/'>link text</a>";
    $this->lay_print_sidebox_top($*text_sidebox_freetext_title);
    """<div class="sideboxContent" id="freetext">$myhtml</div>""";
    $this->lay_print_sidebox_bottom();
}


This will override the first free text box.

The code below will override all other free text boxes. You can use this code to override any of the free text boxes from 2 to 10 by changing instances of the number 2 to the coordinating free text box.

function Page::lay_print_sidebar_freetextbox_2() {
    var string myhtml = "<a href='http://www.urlgoeshere.com/'>link text</a>";
    $this->lay_print_sidebox_top($*text_sidebox_freetext_2_title);
    """<div class="sideboxContent" id="freetext2">$myhtml</div>""";
    $this->lay_print_sidebox_bottom();
}


Please note:

  • Quote marks used in URLs for links or images must be the single quote '

  • You will need to go into Customize and enable the text boxes under the Sidebar tab. You may also set or change the order of the text boxes here.

[ FLEXIBLE SQUARES ] HTML in Sidebar [18 Jun 2007|01:13pm]
layouthack
Flexible Squares: HTML in Sidebar.

Step one: Create a layer. Instructions are here.

Step two: Paste the following into your new layer

( here be code )

[ FLEXIBLE SQUARES ] Tags in Sidebar [18 Jun 2007|01:05pm]
layouthack
Flexible Squares: Tags in Sidebar.

Step one: Create a layer. Instructions are here.

Step two: Paste the following into your new layer

( here be code )

Adding CSS to a Layer [08 Jun 2007|07:47pm]
layouthack
Because of the differences in code between GreatestJournal and LiveJournal, layouts that were designed for LiveJournal may not be completely compatible with GreatestJournal.

For example, on LiveJournal, many of the S2 layouts include a tab for Custom CSS. That may not be available for the S2 styles found here.

You can still use custom CSS. One way is to build it right into your custom layer.

If you don't have a layer already created, go here for instructions. Otherwise, go to Advanced Customization and select the layer you wish to modify.

Put the following below the block of text that starts with layerinfo.

### Custom CSS
function Page::print_custom_head() {
"""
<style type="text/css">
standard CSS formatting information goes here.
}
</style>
""";
}
### Custom CSS End


The text in red will be replaced with the CSS you wish to use. Do not change any of the green text.

S2 Transmogrified — Adding a Header Image [17 Jan 2006|06:26pm]

camomiletea
Transmogrified layout allows users to enter custom CSS via the Customization Wizard. This tutorial will explain how you can use this opportunity to add a header image to the top of your journal.

First you will need to upload the image you are going to use to a webspace that allows remote loading to GreatestJournal. You may wish to upload it using the GreatestJournal image hosting section or the Gallery. Then follow the steps below:

1. Go to the Customize page: http://www.greatestjournal.com/customize/

2. Click on the button "Customize" or "Edit Customizations".

3. Click on the CSS tab at the top of the wizard interface.

4. Put a checkmark in the box "Override default". Depending on your browser, you may also need to click once on the empty area of the page in order for the text field to appear.

5. Copy the following code into the provided field:

#header {
		padding-top: 150px;
		background-image: url("http://www.example.com/image.jpg") !important;
		background-repeat: no-repeat !important;
		background-attachment: scroll !important;
		background-position: top center !important;
		}


6. Replace the 150 in teal with the height of your header image in pixels. Replace the URL address in light-green with the address your image is located at.

7. (optional) If you would like to center your title and subtitle below your header image, you can add the following code as well:

#header h1,h2 { text-align: center; }


8. Click the "Save" button at the bottom of the page.

S2 Generator -- Adding Background Music [05 Nov 2003|08:58am]

chadtheley
Intro

The S2 style system is simple to configure (http://www.greatestjournal.com/customize/) if you want to edit colors, comment links or add in a background, but extended properties requires a lot more work.

This tutorial will walk you through the process of adding background music to your journal.

The 3 major steps are:
  1. Create a new top level layer.

  2. Edit the top level layer.

  3. Compile the top level layer.
It may sound complicated, but once you walk through the process, you'll be surprised at how easy it is.
( Read more... )

Using a Theme layer to override style sheets [04 Nov 2003|01:39am]

chadtheley
Intro
Theme layers extend the power of S2 by allowing you to override any part of a top layer's code.
In this tutorial, well go through the process of overriding a layout's print_stylesheet function. Don't worry, you don't need to have any experience with programming, but you do need to be familiar with Cascading Style Sheets.
Go here to learn about CSS.

The steps to overiding the style sheet are:
  1. Create a new Theme layer.

  2. Paste in the style sheet from the style that you are currently using.

  3. Edit the new Theme style sheet.

  4. Apply the changes to your layout.
( Read more... )

[01 Nov 2003|08:53pm]

chadtheley
Addition to the layout mentioned in the last post (http://www.greatestjournal.com/community/s2/1678.html):

Added in a wizard property to allow the user to change fonts.

[29 Oct 2003|10:00pm]

chadtheley
I've made more changes to S2 Generator that will allow users to customize more of the look via the Customization Wizard.


Fonts:
-Change the font used in the journal.

Background image changes:
-Specify placement of background image.
-Specify whether or not background image is fixed.
-Specify whether or not the background image repeats/tiles.

Borders around entries:
-Specify color.
-Specify width.
-Specify style/type (dashed, double etc.).

Borders around the header:
-Specify color.
-Specify width.
-Specify style/type (dashed, double etc.).

Borders around the navigation panel:
-Specify color.
-Specify width.
-Specify style/type (dashed, double etc.).


If you want to try out the updated layer, follow the instructions below to add the layer to your journal:
  1. Download the layer's code here.

  2. Go to the Your Layers page.

  3. In the "Create top-level layer" section, choose "Layout" from the selection boxed titled Type.

  4. Click the Create button to the right.

  5. You should now see a new blank layer with a couple of lines of code. Delete those lines, and paste-in the code that you downloaded in step 1.

  6. After you've pasted in the code, click the Compile button. You should get no errors.

  7. Now go to the Customize page.
    Note: If you are currently using S1, then you'll be given the option of using S2 on this page. Do it!

  8. Note: Switching layouts will cause your colors to revert back to the default colors for your current S2 style.
    In "Step 1: Layout," choose the new layer (GJ Generator Extended 0.31).

  9. Click the Change button.

Now when you click the Edit Customizations button at the bottom, you should see the added options in the Wizard.
It may take a few minute for all of the changes to propagate to your journal.

S2-specific issues [26 Oct 2003|09:10am]

chadtheley
I'm messing around with a layer based on S2 generator, and I've come up with a few issues:
  • The textbox where you edit the layer (http://www.greatestjournal.com/customize/advanced/layeredit.bml?id=XXXXX) is difficult to work with at a screen resolution of 1024x768 or smaller. The textbox is just too small, and its horizontal and vertical scrollbars don't work well beside the page's scrollbar.

  • The compile engine seems to be a bit slow. This may be a temporary GJ server speed/bandwidth issue.

  • There doesn't seem to be an easy link to http://www.greatestjournal.com/customize/advanced/.
    I know that we want to discourage people from going to that page unless they are familiar with S2 code, but it's very inefficient to not have this link available from the Customize page.

  • After changing background properties within the Print_Stylesheet function, the chages to the background's properties get compiled and saved, but the journal will not reflect these changes until AFTER you go to http://www.greatestjournal.com/customize/ and change the color value of the Entry Background property.
    It's almost as the system is caching the previous User Layer until that color value is changed.

  • If a new User Layer is dynamically generated by the system because of setting values at http://www.greatestjournal.com/customize/, the new User Layer is created without a default name.
    In the User Layer's code, there is an absence of the line layerinfo name = "";.

  • When setting property descriptions (for the Wizard) using "Des =", the description strings are HTML rather than S2 strings, and escape characters will not work. Use <br> instead of \n for a newline.

  • If you already have a layout, and you create a 2nd layout, and switch your
    journal to that layout, the User Layer of your previous layout is devnulled. :(

S2 (Generator) - Making entry boxes transparent [26 Oct 2003|08:05am]

chadtheley
Intro

The S2 style system is simple to configure (http://www.greatestjournal.com/customize/) if you want to edit colors, comment links or add in a background, but extended properties requires a lot more work.

This tutorial will walk you through the process of making the entries of your journal transparent.

The 3 major steps are:
  1. Create a new top level layer.

  2. Edit the top level layer.

  3. Compile the top level layer.
It may sound complicated, but once you walk through the process, you'll be surprised at how easy it is.
( Read more... )

S2 Backgrounds [26 Oct 2003|08:05am]

chadtheley
Intro

The S2 style system is simple to configure (http://www.greatestjournal.com/customize/) if you want to edit colors, comment links or add in a background, but extended background properties requires a lot more work.

This tutorial will walk you through the process of adjusting 2 background attributes for the S2 Generator style: whether or not the background is locked in place when the page scrolls, and background repeating.

The 3 major steps to adjusting these 2 attributes are:
  1. Create a new top level layer.

  2. Edit the top level layer.

  3. Compile the top level layer.
It may sound complicated, but once you walk through the process, you'll be surprised at how easy it is.
( Read more... )

navigation
[ viewing | most recent entries ]