More Documentation on how to create themes

Change Page: 12 > | Showing page 1 of 2, messages 1 to 30 of 38
Author Message
IceDog
  • Total Posts : 32
  • Reward points : 3355
  • Joined: Dec 28 '08
More Documentation on how to create themes - Thu. Jul 16, '09 12:25 AM
0
[Helpful answer received] / [List Solutions Only]
That single post in the forum just lightly touches the surface...

I'm trying to adapt this theme http://demo.phpbb3styles.net/AeroGreen to AspPlayground.net, but feel as though I'm a three year old playing in a 747 cockpit.

My skills in html, css, and asp.net are rated as intermediate, but it seems an expert would be busy for days doing it.  Anyone have any tips?
<message edited by IceDog on Thu. Jul 16, '09 1:04 AM>
FreddyD
  • Total Posts : 834
  • Reward points : 41160
  • Joined: Mar 02 '02
  • Location: Louis Lake
Re:More Documentation on how to create themes - Thu. Jul 16, '09 12:45 AM
0
[This post was marked as helpful]
I got a couple tips for you:

first, use FireBug as described in this kb: http://www.aspplayground.net/forum/Customizing-the-CSS-Use-Firebug-m398562.aspx

second, the table wrapper (the big orange frame) is actually defined in the App_themes/original/appg.skin file.
The 4 definitions are used everywhere in the forum. So you just have to change these and the wrapper will be totally different (as in the case for the classic and original themes):

<ASPPG:ForumHeaderSC runat="server">
<ImageStyle ImageOpenFile="plus.gif" ImageCloseFile="minus.gif" CssClass="opencloseimg" />
<HeaderWrapperTopTemplate>
<%--<table cellpadding="4" cellspacing="1" class="mainHeader"><tr><td class="heading">--%>
<div class="for_left"> <div class="for_right"><div class="for_bg"> <div class="for_icon"></div> <div class="for_title">
</HeaderWrapperTopTemplate>
<HeaderWrapperBottomTemplate>
<%--</td></tr></table>--%>
</div></div></div></div><div class="tb_border_left"><div class="tb_border_right">
</HeaderWrapperBottomTemplate>
</ASPPG:ForumHeaderSC>

<ASPPG:ForumHeaderSC runat="server" skinid="ForumMessageHeader">
<ImageStyle ImageOpenFile="plus.gif" ImageCloseFile="minus.gif" CssClass="opencloseimg" />
<HeaderWrapperTopTemplate>
<div class="for_left"> <div class="for_right"><div class="for_bg"> <div class="for_icon"></div><div style="float:right;" class="for_title nxtprv"></div> <h1 class="for_title">
</HeaderWrapperTopTemplate>
<HeaderWrapperBottomTemplate>
</h1></div></div></div><div class="tb_border_left"><div class="tb_border_right">
</HeaderWrapperBottomTemplate>
</ASPPG:ForumHeaderSC>
 
 
<ASPPG:ThemeableLiteral runat="server" skinid="WrapperStart"
Text=' <div class="top_left"><div class="top_right"><div class="top_bg"></div></div></div> <div class="tb_border_left"><div class="tb_border_right">' />

 
<ASPPG:ThemeableLiteral runat="server" skinid="WrapperEnd"
Text='</div></div> <div class="bottom_bg"></div><br />' />
IceDog
  • Total Posts : 32
  • Reward points : 3355
  • Joined: Dec 28 '08
Re:More Documentation on how to create themes - Thu. Jul 16, '09 12:49 AM
0
Thank you again, FreddyD.
IceDog
  • Total Posts : 32
  • Reward points : 3355
  • Joined: Dec 28 '08
Re:More Documentation on how to create themes - Thu. Jul 16, '09 4:14 AM
0
[This post was marked as helpful]
Watch my progress...
http://collegesymposium.com/default.aspx?settheme=Aero

It would still be nice to have a better guide.  Such as a description of each control, where it is, etc.
Samuel
  • Total Posts : 11785
  • Reward points : 168350
  • Joined: May 23 '01
Re:More Documentation on how to create themes - Thu. Jul 16, '09 12:16 PM
0
Excellent!!! This is incredible you can make such drastic change in such short amount of time!

I will be producing a more detailed doc on the theme system shortly.

Thanks Freddy for your help too.
ASPPlayground.NET
~ see our Version 4 plans here

IceDog
  • Total Posts : 32
  • Reward points : 3355
  • Joined: Dec 28 '08
Re:More Documentation on how to create themes - Thu. Jul 16, '09 10:29 PM
0
[This post was marked as helpful]
Thanks, Samuel.  I was up from midnight to 11 am working on it.

My method of attack:
-Directly editing the css and skin files on my server (using a windows file share) (this way I could see the change instantly by refreshing)
-Using Firebug (Inspect function is developer's best friend)
-Checking the html of the site by visiting http://validator.w3.org/check?uri=http%3A%2F%2Fgoogle.com  (replace google.com with your site)

By checking the html with the w3 Validator, you can see HOW your skin templates are being applied to the page.  Then add/remove tags as necessary to get the html and style perfect.

I also copied and pasted a lot of the code from the phpbb skin to the aspnet skin, then made sure the necessary css classes were moved over. (one at a time!)


Question:
Samuel, I had to change the showtime.js file to reference different forum/topic images.  I know the showtime file is global, so it messed up my other themes.  I couldn't just rename the file to overwrite the theme's image, because I went from gif to png.  I could just bite the bullet and move them all to gif, but if images could be dynamically assigned by theme, that would open the door to more images/image types.

When I'm finished with this skin (a lot to do), I'll zip it up and email it to you Samuel.  Maybe others would like to use it.
<message edited by IceDog on Fri. Jul 17, '09 9:51 AM>
Samuel
  • Total Posts : 11785
  • Reward points : 168350
  • Joined: May 23 '01
Re:More Documentation on how to create themes - Fri. Jul 17, '09 12:19 PM
0
Thanks for your willingness to share. Unfortunately, at the moment the images needs to be in gif format.

We don't have a way to tell what images a theme is using (there are just too many) and therefore we need to dictate the image file name + ext.

Sorry for the inconvenience, and really looking forward to your theme!
ASPPlayground.NET
~ see our Version 4 plans here

FreddyD
  • Total Posts : 834
  • Reward points : 41160
  • Joined: Mar 02 '02
  • Location: Louis Lake
Re:More Documentation on how to create themes - Tue. Jul 21, '09 1:55 PM
0
excellent skin you got there Icedog! really looking forward to test it on my site!
JustBob
  • Total Posts : 22
  • Reward points : 2225
  • Joined: Jul 21 '09
Re:More Documentation on how to create themes - Wed. Jul 22, '09 10:31 AM
0
Icedog, your forum really looks good.   Would like to utilize it when you are happy with it.


Guest
Re:More Documentation on how to create themes - Wed. Jul 22, '09 6:35 PM
0
Thanks... I'll be finishing it next week.  Still have to figure out the forum icon issue.  Converting the images to gif screw up the opacity fade.

If you guys think something doesn't look good, please tell me.  I'm not a very good designer.

I'm going to ComicCon '09 this weekend, so I should have it done early next week. 


By the way, I hope to transfer more themes from php forums to AspPlayground.  Any suggestions on another?
Samuel
  • Total Posts : 11785
  • Reward points : 168350
  • Joined: May 23 '01
Re:More Documentation on how to create themes - Thu. Jul 23, '09 4:27 PM
0
FYI, I updated the original theme/template doc to cover the wrapper control in detail with some pictures.
ASPPlayground.NET
~ see our Version 4 plans here

FreddyD
  • Total Posts : 834
  • Reward points : 41160
  • Joined: Mar 02 '02
  • Location: Louis Lake
Re:More Documentation on how to create themes - Wed. Jul 29, '09 12:14 PM
0
hi icedog,
 
How did it go packing your excellent aero green theme? Can't wait to see it available.
 
By the way, since you asked , I think these ones are good general purpose themes as well:
 
http://demo.phpbb3styles.net/CA+Gen2
http://demo.phpbb3styles.net/pardus
 
Thanks in advance for sharing the theme!
cmpenney
  • Total Posts : 467
  • Reward points : 6905
  • Joined: Jul 13 '05
Re:More Documentation on how to create themes - Tue. Aug 4, '09 9:57 AM
0
I'm working on converting the AeroBlue as well: http://www.masm.org/mForums/default.aspx?settheme=AeroBlue


I'm almost finished and when done I'll post it. Is there a forum here for posting themes? Like the Mod Forum? I looked around and didn't find anything.

Once this is done then I plan to try the submerged one next: http://demo.phpbb3styles.net/subMerged
http://www.masm.org/mForums
Samuel
  • Total Posts : 11785
  • Reward points : 168350
  • Joined: May 23 '01
Re:More Documentation on how to create themes - Tue. Aug 4, '09 12:11 PM
0
A skin forum will be set up under this category. Thanks cmpenney for your willingness to share!

IceDog has sent me his Aero theme. I am finishing the test and will post it in the forum soon.
ASPPlayground.NET
~ see our Version 4 plans here

IceDog
  • Total Posts : 32
  • Reward points : 3355
  • Joined: Dec 28 '08
Re:More Documentation on how to create themes - Tue. Aug 4, '09 10:12 PM
0
cmpenney


I'm working on converting the AeroBlue as well: http://www.masm.org/mForums/default.aspx?settheme=AeroBlue


I'm almost finished and when done I'll post it. Is there a forum here for posting themes? Like the Mod Forum? I looked around and didn't find anything.

Once this is done then I plan to try the submerged one next: http://demo.phpbb3styles.net/subMerged


Nice job, cmpenney.    It looks really good.  (Looks better than mine  )

@Samuel:
Feel free to modify it in any way.  I'm no expert compared to you.

@FreddyD:
Hopefully it's good enough to post here. I'll let Samuel be the judge of that.
Thank you for your URL's.  Unfortunately, they aren't exactly my taste. 
But you make a good point, "general purpose" themes.  The Aero themes really limit
What do you guys think about converting these:

http://demo.phpbb3styles.net/eTech
http://demo.phpbb3styles.net/Avalon+Cyan
http://demo.phpbb3styles.net/DVGFX2
http://demo.phpbb3styles.net/Hestia


I hope to do a better, more thorough job this time.
cmpenney
  • Total Posts : 467
  • Reward points : 6905
  • Joined: Jul 13 '05
Re:More Documentation on how to create themes - Wed. Aug 5, '09 4:25 AM
0
IceDog


Nice job, cmpenney.    It looks really good.  (Looks better than mine  )

I don't know about that. I'll admit that a did take a peak at how yours was done to get me started so you are owed as much credit as I am on it. I just have a few more tiny things I want to address and then I should be done with mine.
 
http://www.masm.org/mForums
cmpenney
  • Total Posts : 467
  • Reward points : 6905
  • Joined: Jul 13 '05
Re:More Documentation on how to create themes - Wed. Aug 5, '09 9:50 AM
0
I think I'm happy with the theme now. Should I send it to you Sam or just go ahead and post it in the new forum?
http://www.masm.org/mForums
Samuel
  • Total Posts : 11785
  • Reward points : 168350
  • Joined: May 23 '01
Re:More Documentation on how to create themes - Wed. Aug 5, '09 10:31 AM
0
Hi cmpenney,

Feel free to just post to the new forum, unless you made changes to other files outside the 2 theme directories.
ASPPlayground.NET
~ see our Version 4 plans here

FreddyD
  • Total Posts : 834
  • Reward points : 41160
  • Joined: Mar 02 '02
  • Location: Louis Lake
Re:More Documentation on how to create themes - Wed. Aug 5, '09 11:32 AM
0
@FreddyD: But you make a good point, "general purpose" themes. The Aero themes really limit
What do you guys think about converting these:
http://demo.phpbb3styles.net/eTech
http://demo.phpbb3styles.net/Avalon+Cyan
http://demo.phpbb3styles.net/DVGFX2
http://demo.phpbb3styles.net/Hestia

 
I think Hestia looks very nice.
Guest
Re:More Documentation on how to create themes - Thu. Aug 6, '09 5:48 AM
IceDog
  • Total Posts : 32
  • Reward points : 3355
  • Joined: Dec 28 '08
Re:More Documentation on how to create themes - Thu. Aug 6, '09 9:48 AM
0
cmpenney


IceDog


Nice job, cmpenney.    It looks really good.  (Looks better than mine  )

I don't know about that. I'll admit that a did take a peak at how yours was done to get me started so you are owed as much credit as I am on it. I just have a few more tiny things I want to address and then I should be done with mine.
 

lol. I thought I recognized the telerik:radmenu images... No problem.


I think I like my version of Hestia better than the original.
Anyone have any ideas with this one. The navigation menu is alright looking, but the "Post" buttons within a forum are a step-down in my opinion. 
FreddyD
  • Total Posts : 834
  • Reward points : 41160
  • Joined: Mar 02 '02
  • Location: Louis Lake
Re:More Documentation on how to create themes - Thu. Aug 6, '09 12:10 PM
0
to be frank with you IceDog, yours does look better than the original!! I am unable to see the Post buttons though on your site.

By the way, did you notice that in the Aero package Samuel posted, he simply name the png files with .gif extension? It is a strange workaround to me but it flat out works! Browsers still manage to know what type of images they really are.
cmpenney
  • Total Posts : 467
  • Reward points : 6905
  • Joined: Jul 13 '05
Re:More Documentation on how to create themes - Thu. Aug 6, '09 1:58 PM
0
Looking good IceDog!  Just posted mine today too. I'm finishing up a sitewide theme intregration tool and then I plan to start on the Submerged one next.

http://www.masm.org/mForums
Guest
Re:More Documentation on how to create themes - Thu. Aug 6, '09 6:09 PM
0
FreddyD


to be frank with you IceDog, yours does look better than the original!! I am unable to see the Post buttons though on your site.

By the way, did you notice that in the Aero package Samuel posted, he simply name the png files with .gif extension? It is a strange workaround to me but it flat out works! Browsers still manage to know what type of images they really are.


I haven't downloaded it.  He could have just cut out the small bits of transparent material.  I didn't do it because I felt it lost some of the glassy feel when I tried it.  I didn't know that simply renaming the extension would work.  Awesome.


Thanks for the compliment!  Actually, I made the 'Post'/'RSS'/'Thread Options' buttons transparent and their children have the same background as the children on the navbar.  I guess I have to work on it some more. 
Guest
Re:More Documentation on how to create themes - Thu. Aug 6, '09 6:11 PM
0
cmpenney


Looking good IceDog!  Just posted mine today too. I'm finishing up a sitewide theme intregration tool and then I plan to start on the Submerged one next.


Sweet. I know a person who also was working on an Aero Green theme.  Seems to be the more popular choice, lol.  Good luck on the Submerged.  Keep us updated.
IceDog
  • Total Posts : 32
  • Reward points : 3355
  • Joined: Dec 28 '08
Re:More Documentation on how to create themes - Thu. Aug 6, '09 6:29 PM
0
I always forget to login.
cmpenney
  • Total Posts : 467
  • Reward points : 6905
  • Joined: Jul 13 '05
Re:More Documentation on how to create themes - Thu. Aug 6, '09 8:09 PM
0
I will...Probably won't geet much done this weekend. I have two weddings to attend but hopefully I'll have something to show off towards the beginning of next week.
http://www.masm.org/mForums
cmpenney
  • Total Posts : 467
  • Reward points : 6905
  • Joined: Jul 13 '05
Re:More Documentation on how to create themes - Tue. Aug 11, '09 9:03 PM
0
Well I got a good start...Still need to do some tweaking here and there:

http://www.masm.org/mForu...spx?settheme=Submerged

http://www.masm.org/mForums
IceDog
  • Total Posts : 32
  • Reward points : 3355
  • Joined: Dec 28 '08
Re:More Documentation on how to create themes - Sat. Aug 15, '09 5:28 PM
0
cmpenney


Well I got a good start...Still need to do some tweaking here and there:

http://www.masm.org/mForu...spx?settheme=Submerged


Looks real good!  I definitely prefer that theme with your forum than the aero-blue.  Just because it's more fitting to your theme.

Don't forget to change the smallcat cell.  
cmpenney
  • Total Posts : 467
  • Reward points : 6905
  • Joined: Jul 13 '05
Re:More Documentation on how to create themes - Mon. Aug 17, '09 5:24 AM
0
Thanks.. I still have a hand full of things to work out but got side tracked with the mobile theme project.
http://www.masm.org/mForums
Change Page: 12 > | Showing page 1 of 2, messages 1 to 30 of 38