kunzite (kunzite1) wrote in component_help,

  • Mood:

palImg update, stylesheet update, theme vs user layers

hey masterslacker! i did it! ... (to the best of my knowledge) ... we might want to test it out more, i tried it with my 3 styles (fire, grey, and halloween) and it all worked out. we had a blast with this entry of mine.
thanks to masterslacker for the original version of this code
this edit comes in one piece

# Because we are going to override the Page title, and there is no function to draw the component borders for such
# a thing, we need to do it all by hand. For the curved corner pieces, we need to match the color to the rest of your
# component. To do this, we need to set a variable to be used since it cannot be obtained from the stylesheet.
# To find out what it should be, we need to figure out what your current image urls are, and then use that to set the field.
# To obtain what the current image urls are, do the following. Take a look at your page source,
# (eg. View->Source in IE or View->Page Source in Mozilla/Netscape), and look for an img tag for the corners. One of mine looks like this :
# <img src="http://www.livejournal.com/palimg/component/curve-top-left.gif
/p0c5d4f114376d3293b0e6" {some more parameters like width, height, etc.} />
# Then you can set the variable to be whatever is after the "gif" INCLUDING THE PRECEEDING "/" as is shown in blue. I have set the value below
# to be the default color scheme's value. If you do not set this properly then the colours will not match up.

var string corner_color="/p0ffffff1b3b3b32e5e5e5";

var Color header        = $*header_bgcolor;
var Color headerMinus5  = $header->darker(50);
var Color headerPlus3   = $header->lighter(30);
var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);
# Start the new title component.
thanks to crschmidt for the original version of this code
this edit comes in three pieces seperated by asterisks. you are also changing the function that you are playing with. going from print_stylesheet() to Page::print_custom_head()

function Page::print_custom_head() {
var string palimg        = $*header_bgcolor.as_string->substr(1,6);
var Color  ltLineColor   = $*header_bgcolor->lighter(30);
var string ltLineString  = $ltLineColor.as_string->substr(1,6);
var string medLineString = $*header_bgcolor.as_string->substr(1,6);
var Color  dkLineColor   = $*header_bgcolor->darker(50);
var string dkLineString  = $dkLineColor.as_string;
<style type="text/css">
body {
background-color: $*main_bgcolor;
background-image: url("$*SITEROOT/palimg/component/bg.gif/p0$ltLineColor");


.dkLine  { background-color: $dkLineString; }
.medLine { background-color: $medLineString; }
.ltLine  { background-color: $ltLineString; }
hr       { color           : $medLineString; }
.divLine { background-color: $*header_fgcolor; }
.tabBg   { background-color: $*header_bgcolor; }



if you want one layout and set of components for multiple color schemes, you are in the right place. if not, you probably aren't interested in this section.
also keep in mind that this is how i am using s2 and that its not necessarily the right way to do it. the creators of s2 might have had a different idea, i'm not sure. anyway, let's get to the fun!

"user" layers are used for layouts and component setups. "theme" layers have the color information. i have one "user" layer that has all of the text altering "set" commands. it also contains all of my free text box components, print_entry() functions, print_stylesheet(), etc.

i have several "theme" layers. one is grey, another is composed of reds, and a third is composed of blacks and oranges</a>. i have one "style" for each "theme" layer i have. to create your "user" layer, go to this page and follow the instructions, except for the "type" of the layer, instead of it being a "theme" layer, you want a "user" layer. i'll let you in on a little tip. you want to name these layers in such a way that it's easy to connect them together in the future. i called my "user" layer "kunzite1_component_user1". i called it that cuz i'm kunzite1, its component layout, and my first "user" layer. do not put any color information in the "user" layer. the stuff you can try to play with can be found with the s2 documentation and with the component documentation. once again, no color information.

next order of business after getting your layout put together. we want to play with colors. to create your "theme" layer, go to this page and follow the initial instructions. do not put in any color info yet. take a look at the "name". i'd change this to something that reflects the arrangement of colors that you are putting in this theme. we will also use this same name for the "style" that we will create in the near future. i called my first one "kunzite1_component_grey". this is where you get to enter the color information (that i told you not to place in the "user" layer). the colors that you can play with can be found in the component documentation. in the end your "theme" layer should look something like this (but with a lot more color definitions):
layerinfo type = "theme";
layerinfo name = "kunzite1_component_grey";

set calendar_fgcolor = "#DDDDDD";
set header_fgcolor = "#BBBBBB";
set entry_link = "#FFFFFF";
set entry_fgcolor = "#DDDDDD";
set entry_bgcolor = "#999999";
set main_bgcolor = "#777777";

ok, now that we've got both a "user" layer and a "theme" layer created and defined, let's make a "style". let's go to the style page and make one. in the create style section of the page, let's put the same name as your "theme" layer into the textbox for the name of your new "style". choose the layout as component and hit the change button. select the "theme" layer (if you've been following, it should be the same name as the "style" we are setting up), and finally choose your "user" layer.

finally, everything should be set up. if you haven't received any errors along the way that is.

let's go back to the "style" page and preview the new "style". click on the link to the right of the newly created "style". take a look at it. if it's how you want it, great! if not, you might wanna tweak it a little. remember, if you've been following this, the layout information is in your "user" layer and your color information is in your "theme" layer.

if everything looks good, go back to the "style" page. click on the "use" button at the far right of the row of the "style" that you wish to activate for your journal. go to your journal, refresh if necessary, and you should now have the new layout and/or colors implemented.

if you want another color scheme, create a new "theme" layer. if you want a new layout, create a new "user" layer. rinse, lather, repeat.

here's really the basic idea behind "user" layers and "theme" layers. "user" layers contain static information and code that can change how multiple "themes" appear. if you do put color information into the "user" layer, it should be the same for all "theme" layers that are attached the "user" layer by using a "style".

### END LAYERS ###

that's my first attempt at a tutorial, ask any ?'s that you may have. i'm not very familiar with s2, so, i will try to answer your ?'s the best that i can.

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened