modify existing theme (newb)

[brynn]

Hi Friends,
I have my new gallery installed and successfully bridged with SMF 2.0.5 and Tiny Portal (all major accomplishments for me  ).  Now I want to make it look at least similar to my forum's theme.  I've read most of the way through http://inkscapecommunity.com/ic_gallery/docs/en/theme_create_matching_page_tutorial.htm#theme_matching, and even performed the steps up until I start editing the code (with the tokens).  And I think I generally get the idea how it works.  It looks like I could even get the portal tabs, just like the forum pages (with gallery where forum goes).

But I have another idea in mind.  The Rainy Day theme is a pretty good match to my forum/portal style, except for the colors.  And it seems like it should be a fairly simple matter to change some of the colors....the ones defined in the CSS stylesheet (such as the background, e.g.).  But the graphics at the top of the page, the bold sort of stripes or bands across the top, appear to be created with several individual GIF images.  Actually more than several.  It looks like around 25 small to tiny images.

I guess those would be what I've seen called "slices"?  So if I wanted to change the colors, wouldn't I have to open those image files and change the colors (using a graphics editor)?  Since the gallery is for graphics (rather than photos) I wouldn't have a problem doing that.  But as such a newb, I just wanted to make sure there's not some handy trick that I haven't learned yet.

Thanks for your help   

[Αndré]

Unfortunately you have to edit all of those images to adjust the color.

[brynn]

Well you never know    This is all uncharted territory for me, and  I thought it couldn't hurt to ask.

Thank you very much   

[brynn]

Hi again,
Sorry for marking solved, and then unmarking it.  I'm still on this topic, now with a different idea.

Either of the previous options -- making the gallery look just like my forum, via the instructions in "Create a theme that matches your overall site layout" in the manual; or changing the colors of an existing theme using a graphics editor; will take me some time, study, and no doubt a lot of trial and error.  So in order to get the gallery up and running sooner, I have another idea.  (And after it's up and running, I can work on more these more elaborate themes, in my own time.)

Now I've chosen classic_w_drop theme, dl'd, installed, configured in the gallery and working.  I want to change a couple of colors which appear to me to be defined in the css (style.css).  But when I make the first change, I can't get it to be actually displayed on the gallery.  Here are my steps:

   
• First, I copy classic_w_drop, rename it to my custom theme name.
• Change all the references from themes/classic_w_drop to themes/new_theme.
• Changed in style.css, template.html and theme.php
• Saved
• Upload via SFTP (Bitvise)
• Configured gallery to display new_theme.

And now to customize it:

   
• Open style.css in my new_theme, in Notepad++
• Locate the body selector, background property, which has a value of #cccccc
• Change the value to a different color #3268888 (which is the bg color of my forum)
• Save changes
• Upload via SFTP (Bitvise) and overwrite new_theme

And I've even looked at my server to make sure style.css in new_theme shows that change.  And it does.  But I can't see the change in the gallery itself.  I've tried multiple refresh/reloads, closing and re-opening the gallery, resetting the theme back to curve and then back to my new theme.  But the bg color remains the same as before.

Can someone tell me what I'm doing wrong?  Or explain whatever I've apparently misunderstood?

Thank you very much

[Niecher]

And now to customize it:

   
• Change the value to a different color #3268888 (which is the bg color of my forum)

Use this one: #326888

Regards.

[lurkalot]

   

• Change the value to a different color #3268888 (which is the bg color of my forum)

Can someone tell me what I'm doing wrong?  Or explain whatever I've apparently misunderstood?

To many digits in there brynn  See Niecher's post above. 

[brynn]

Oh, sorry about that little typing error, guys 

That error does not exist in the file, however.  Still no change in the bg color. 

[brynn]

I see there's a list of colors just above the body selector.  I haven't added the color to that list.  But I think that list is just comments that don't affect the code.  Although I could be wrong?

[brynn]

Sorry, I accustomed to being able to edit messages.

Code Select Expand

/* Colors used in this style sheet:
    Hex 000000 = RBG   0,   0,   0 = black
    Hex 5F5F5F = RBG  95,  95,  95 = light black
    Hex BDBEBD = RBG 189, 190, 189 = dark grey
    Hex D1D7DC = RBG 209, 215, 220 = medium grey
    Hex CCCCCC = RBG 204, 204, 204 = medium grey
    Hex E4E4E4 = RGB 228, 228, 228 = medium grey
    Hex EFEFEF = RBG 239, 239, 239 = dark white
    Hex FFFFFF = RBG 255, 255, 255 = white
    Hex 005D8C = RBG   0,  93, 140 = dark blue
    Hex 0033CC = RBG   0,  91, 104 = medium blue
    Hex 0E72A4 = RBG  14, 114, 164 = light blue
    Hex 840084 = RBG 132,   0, 132 = purple
    Hex 00529B = RGB   0,  82, 155 = blue
    Hex BDE5F8 = RGB 189, 229, 247 = cyan
    Hex 4F8A10 = RGB  79, 138,  16 = dark green
    Hex DFF2BF = RGB 223, 242, 191 = light green
    Hex 9F6000 = RGB 159,  96,   0 = dark brown
    Hex FEEFB3 = RGB 254, 239, 179 = light brown
    Hex D8000C = RGB 216,   0,  12 = red
    Hex FFBABA = RGB 255, 186, 186 = pink
    Hex D63301 = RGB 214,  51,   1 = red
    Hex FFCCBA = RGB 255, 204, 186 = pink
*/

body {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background : #326888;
    color : Black;
    margin: 0px;

[phill104]

Yes, those are just comments to make it easier for people to find the colours they want to change.

Please post a link to your site so we can advise on the exact changes to make.

[brynn]

http://inkscapecommunity.com/ic_gallery/index.php

It's the medium gray bg that's behind everything.  I actually have checked the displayed color, and it is indeed #cccccc.  And since the body selector in style.css indicates #cccccc, that would seem to me to be the proper place to change it.  But I'm such a newbie 

Thanks again 

[lurkalot]

Just edited style.css line 44 in Firebug, and it gives me,

I'm not sure what you renamed your theme to, but it's using the stylesheet from here, http://inkscapecommunity.com/ic_gallery/themes/classic_w_drop/style.css which is still #cccccc   

Please double check you followed this part of the docs http://inkscapecommunity.com/ic_gallery/docs/en/theme_create.htm#theme_create_rename

[brynn]

The new theme is called ic_gallery_theme.  Why isn't it using the stylesheet of the new theme?

I following the instructions for renaming the file, and changing themes/old_theme to themes/new_themes in all 3 files (style.css, theme.php, template.html).

And I have the new theme enabled in Config > Themes.

What did I do wrong?

[brynn]

Oh, oops, I missed the last sentence of your message.  I'll check that out right away.

Thanks.

[brynn]

Oh no, I followed that absolutely to the letter.  I must be misunderstanding some part of it then   :-\

If anyone can perceive from my comments what I might be misunderstanding, please let me know.  Meanwhile, I'll peruse it for the millionth time 

Thanks

[lurkalot]

The new theme is called ic_gallery_theme.  Why isn't it using the stylesheet of the new theme?

I following the instructions for renaming the file, and changing themes/old_theme to themes/new_themes in all 3 files (style.css, theme.php, template.html).

And I have the new theme enabled in Config > Themes.

What did I do wrong?

In your theme template.html file, did you change the url to the css file? I think you'll find it's still pointing to the original one in the classic_w_drop theme folder

"Edit the files to reflect the theme name
Use a plain text editor (in this example, we will use notepad.exe), open your_coppermine_folder/themes/my_theme/template.html. Find "themes/classic" and replace with "themes/my_theme" (may exist in the file several times, so make sure to replace all occurrences of "themes/classic" with "themes/my_theme"). Save your changes. Then do the same thing for the files theme.php and style.css. "

[brynn]

"Edit the files to reflect the theme name
Use a plain text editor (in this example, we will use notepad.exe), open your_coppermine_folder/themes/my_theme/template.html. Find "themes/classic" and replace with "themes/my_theme" (may exist in the file several times, so make sure to replace all occurrences of "themes/classic" with "themes/my_theme"). Save your changes. Then do the same thing for the files theme.php and style.css. "

I just followed those steps for the 3rd or 4th time.  All the instances of themes/classic_w_drop  have been changed to themes/ic_gallery_theme in style.css, template.html and theme.php for ic_gallery_theme.  I don't understand why it's using the classic_w_drop style.css and not the ic_gallery_theme style.css.

[lurkalot]

I just followed those steps for the 3rd or 4th time.  All the instances of themes/classic_w_drop  have been changed to themes/ic_gallery_theme in style.css, template.html and theme.php for ic_gallery_theme.  I don't understand why it's using the classic_w_drop style.css and not the ic_gallery_theme style.css.

Please attach your theme  template.html file to your next post.

[brynn]

theme.html?

[lurkalot]

theme.html?

Sorry, had a brain fart there.     I meant template.html file.