forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: brynn on September 18, 2013, 11:46:42 pm
-
Hi Friends,
I have my new gallery installed and successfully bridged with SMF 2.0.5 and Tiny Portal (all major accomplishments for me :o). 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 :)
-
Unfortunately you have to edit all of those images to adjust the color.
-
Well you never know ??? This is all uncharted territory for me, and I thought it couldn't hurt to ask.
Thank you very much ;D
-
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 :)
-
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.
-
- 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. ;)
-
Oh, sorry about that little typing error, guys :-[
That error does not exist in the file, however. Still no change in the bg color. :(
-
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?
-
Sorry, I accustomed to being able to edit messages.
/* 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;
-
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.
-
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 :o
Thanks again :)
-
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
-
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?
-
Oh, oops, I missed the last sentence of your message. I'll check that out right away.
Thanks.
-
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
-
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. "
-
"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.
-
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.
-
theme.html?
-
theme.html?
Sorry, had a brain fart there. :-[ I meant template.html file.
-
Looks like html files are not allowed. I'll try zipping it.
-
Never mind brynn, looks like you fixed it now anyway. It's now pointing to http://inkscapecommunity.com/ic_gallery/themes/ic_gallery_theme/style.css and your colour has now changed as you wanted. ;)
-
HEY!! It just worked!! I don't know what I did different! But it worked this time!
Ok then. I'll call that a very long day and shut down for the night, lol.
I don't know what happened, but going through the whole routine for the 5th or 6th time, I finally did something right.
Thank you so much, lurkalot.
I guess after you do something 4 or 5 times and it doesn't work, you just don't want to do it a 5th or 6th time. And I have no clue what I did different this time. Not a clue! But I'm going to end on a positive note, and just pick it up again tomorrow, lol ;D
At least now I know I had all the right steps, but somehow in the doing of it, things went wacky. You know, there really needs to be some way to streamline using the file manager, the code editor, the sftp client/uploader, the server, the browser, and the coffee pot, so that you don't have so many darn different windows and tabs and cups of coffee, and what-not, all going on, all at once!
Anyway, thanks again. The problem seems to be solved :)
-
No problem, glad you got there in the end.
You know that using Firefox with the Firebug addon can save you a lot of time, plus you can see where things are reading from. Chrome browser also has a "Inspect element" feature which does the same thing.
Please mark your topic solved. (again) ;)
-
And thanks to everyone else who offered support.
Marking this solved, and I won't be unmarking it. If I have another theme issue, I'll start a new topic ;)
-
Congrats! I am glad that finally everything works fine.
Regards.
-
Now I've finished customizing the classic_w_drop theme to match fairly well my forum. http://inkscapecommunity.com/ic_gallery/index.php At least I've got a color theme that matches. Someday, if I ever have enough skills to use my site's actual theme, I might do that. But I'm happy with this for now :)
Thanks again!
-
Looks good brynn. Just need to change you logo to match the rest of your site. But you're getting there. ;)
-
Oh, I didn't think that was an option! Any clues? That's a massive manual, and I haven't come across anything like that yet.
-
Start by simply changing the image. It is just a file in the theme folder. Once you have that done come back and we can advise on the css changes you may need to make to position and size it to fit your theme.
-
OH, you mean the "Coppermine" text and logo on the top left? I thought that might be unremovable. I was thinking lurkalot meant to put it where the gallery name and description are. Replacing something that's already there is way easier for me, than putting in something new, that didn't exist before.
Well ok, I can probably handle that. But if I'm going to go that far, at this point, I might as well try what the manual explains, to make it look just like my forum theme. And I understand the general idea of that process. But my forum isn't set up like the example in the manual, at least not that I can tell. I just need to gain a little more insight about how it's coded, so I know which parts to delete and where to insert the tokens.
Totally wild idea on my part -- I suppose simply putting the gallery into a Tiny Portal article won't work? I mean, that would automatically have my theme on it. Although I realize that the gallery is probably too complex for TP. But interesting thought, from my point of view ;D
Anyway, thanks for letting me know that this would be possible. I'll definitely keep it in mind. But for the moment, I'm going to leave it as is. In several months, I may have more insight, and be ready to take another giant step :)
-
Try replacing your template.html with the one I have attached below. We will probably have to adjust a little css but we can do this once you have it up. Remember to backup your old one first.
-
You did it for me?! OMG!! How very kind of you!
Ok, I switched it out. But it does still need some tweaking in a few places. Plus it doesn't show me as logged in (which I am logged in). Are you sure you want to get into this? I'm a little concerned about using it, because if anything ever went wrong, I might not know how to fix it.
But ok, I'm game if you are! I'll leave your template.html installed, and whenever you're back online, we can fix whatever needs fixing.
Thank you SO much!!
-
No problem. It is a bit late here right now so I will suggest the alterations tomorrow. If I am not online the changes are minor css adjustments so any of the team I am sure can assist. I think from my quick look that we simply need to take the float of the header and then adjust the background colour. But as I said, it is fast approaching midnight here. I'm in a meeting until about 7pm tomorrow so I will take a look after then if nobody else has joined in.
-
Ok, sounds good. I'm pretty sure I can handle the color changes, because I finally did get that working, lol.
I'm in the process of writing a little guide for my members, so if I can't remember a detail, I might replace the old template file, so I can look it up. Because for some reason, I'm not logged in when your template file is there. I wouldn't have a clue why that's happening. But anyway, if anyone wants to step in, and they find my modified classic_w_drop theme, just give it a few minutes. I'll just switch it for a few minutes, to get whatever detail I might need, and then switch it right back.
And thank you again, SO very much!!
-
OOhh....never mind about switching out the theme files. I appears that I'm logged into the gallery. But the forum part of the page shows me not logged in.....even though, again, I am logged in to the forum. But yeah, I completely can access the gallery. And I haven't announced it, or linked it to the forum yet, so no one will see it, except by chance.
Ok then, I'll keep an eye out for replies :)
-
If I have calculated the time zones correctly, it must be again, nearly midnight where you are. And unfortunately, I won't have any extended time available to work on the gallery, from now (Thurs afternoon) until late Fri night, or more likely, Sat. It sounds like you're time is 8 hours ahead of my time (just for the purpose of synchronizing our times of day).
So I'm going to go ahead switch out the template file (in case my part-time co-admin happens to visit) back to my modified classic_w_drop. Then when we've reconnected on Sat or Sun, I'll switch it back so we can work on it.
Actually, I don't know why I didn't think of this before (DUH!!) but I do have a moderately useful understanding of CSS. I might actually be able to fix most of those problems. The only part I won't be able to address at all, would be why it looks like I'm not logged in to the forum, when I am. But there's a good chance I can fix the CSS myself.
Well anyway, let's try and connect again on Sat or Sun. Or if that's not good for you, then whenever we can "rendezvous".
Thanks again for offering so much very kind assistance! You rock!! ;D See you soon :)
-
I've some spare time right now and try to help. Unfortunately it's not obvious what you're talking about without seeing the process :D However, it doesn't make sense to me why Coppermine won't show you as logged in by just switching the template.html file.
-
Since Phill gave approval to participate and assist, here is my contribution.
Regards
--Edited--
Changed table colors (zip file 2).
-
I've some spare time right now and try to help. Unfortunately it's not obvious what you're talking about without seeing the process :D However, it doesn't make sense to me why Coppermine won't show you as logged in by just switching the template.html file.
Sorry I didn't get back to all. The logged in box Brynn is talking about is generated by his forum app. I just inserted a static html block to display it with the intention of coming back and detailing the changes needed to make it dynamic once I had worked it out. First we needed to sort out 2 lines of css, one to center the header block and the other to set the background colour.
Unfortunately, I have been sick as a dog the last few days and still am a bit rough so not really felt like sitting in front of a screen.
-
Hello Phill, I hope you recover soon.
Practically I have continued with his idea and his initial work.
Regards.
-
Hi everyone,
Oh my gosh -- so many kind souls! Thank you Niecher, your 2nd set of files is very close. Feel better soon, Phill :)
Attached is a screenshot of Niecher's 2nd set of files installed into my theme, including some colored rectangles to help illustrate certain areas.
For Andre, when I said it looked like I wasn't logged in, please see the green and yellow rectangles. It's the forum part of the theme that looks like I'm not logged in. And which of course I realize that's probably because Niecher and Phill Luckhurst, neither one could actually be logged into the forum when they picked up the source code.
I'm not clear if those parts can ever be made to be functional? By functional, I mean that if a member is logged in, can it be made to look like the member is logged in when they are, and look like they're not logged in when they aren't. If so, I'm guessing you'll need the source code from a logged in state? Or maybe there will be a way for me to copy the changes Niecher made into the proper "logged in" codes?
For the pink rectangle. I noticed that Niecher had actually changed the blue tone of most of the dark blue bars to match my forum colors, which is something that I hoped to do later, when I have a better understanding of the various codes. However, (in the pink rectangle) the bar with the dropdown menus (from classic_w_drop) and all the buttons, are still in the original tone of blue. If you tell me where it is, I can probably change that myself. Or if it's easier for someone to just make a new file....well, I would appreciate whatever is easiest for you.
The only other area that seems "off" is the amount of space (#f6f6f6) between the coppermine part and the forum part, which I've indicated with dashed lines. The area between the blue dashed line and black dashed line seems to wide, to me. I'm guessing it's a combination of padding from coppermine and padding from the forum (portal). If that space could be cut in half (roughly) I think that would do the trick. But I don't know where to look or exactly what to change. If it turns out to be too much work to change that though, I could probably live with it ;)
And 1 last question. If we can get my forum's theme to work for Coppermine, like Niecher's files show, I won't need A) the gallery name and description or B) the link back to the forum, which in the classic_w_drop is in the Albums dropdown. So those can be changed in the same way they were created, i.e. Coppermine's Config page, correct?
Thank you all so very much!
-
Hi brynn,
I agree with Andre that coppermine gallery will not show the forum logging when the user is logged into the forum.
Here are some changes taking functionality to the upper right box, and also the points you commented in your last post have also been changed.
Admin buttons, users and albums are png files and for this reason keep the original blue. In this last change Album button is much more integrated.
For my taste I see the theme classic_w_drop truly integrated with the theme of your SMF forum. Dare to make changes yourself, you'll find it quite easy.
Regards.
-
Oh wow!! Thank you SO much, Niecher! Here it is, all uploaded: Inkscape Community Gallery (http://inkscapecommunity.com/ic_gallery/index.php)
Ok, so I understand that forum login shouldn't be needed for the gallery. I see you made that upper right box to function like some of the other user contributed themes. I'm ok with that. I like how it looks.
One thing I still don't understand:
Admin buttons, users and albums are png files and for this reason keep the original blue.
What about being a PNG file makes the color change not possible? OH! I know! They are images, that's why. You can't change their color by changing code, because they're images. So I could edit the images, probably. After all, Inkscape is a graphics editor, lol :D Although the color isn't a bad shade -- it sort of matches anyway.
Thank you so much, Niecher, and Phill Luckhurst, and lurkalot and Andre, and if I've missed anyone, thank you too! Seldom have I been so impressed with both a software and its support community!! You all have won my praise on all accounts :D
-
Yes, I think these buttons are well on your theme. Put them in the images folder of the theme classic_w_drop.
Regards.
-
Omgoodness, you are just too kind!
I put them in themes/classic_w_drop/images, and uploaded. But I don't see the changes take place in the gallery. I wonder if they should go in ic_gallery_theme/images?
Oh yes. I put them in ic_gallery_theme, and now they show up just fine.
Thank you SO much!
-
Hi Niecher, or whoever knows how to do this, or tell me how. I was just writing a little guide for my members, and I logged in as a non-admin, to make sure I was giving the proper descriptions. But when logged in as a non-admin, 2 User Tools menu items are missing -- Favorites and Documentation. Or maybe they should go in the box in the top right corner?
I wonder if you or someone can either replace those, or tell me how? It seems like it shouldn't be very hard to do, but I don't know where to look. It seems like it might be in the php, where this info should go?
Thank you very much :)
-
In the menu tab Gallery can see "IC Forum, Album List, .... My Favorites, Top Rated ..."
Documentation is for administrators, but you can put in the gallery settings as custom link "http://inkscapecommunity.com/ic_gallery/docs/en/" to be seen by users or the FAQ link you are creating.
Now you have as a custom link, the link to your forum, and this is repeated with the Forum tab which is the same link.
Regards.
-
Ooohh, ok, I see it now! Sorry about that. :-[ I had not noticed the menu on the Gallery tab.
Thank you, Niecher :)