HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Theme Help

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#21580 (In Topic #5197)
Avatar

Fan in action

Ok, I want to make some themes for this thing, yet I have not one clue where to start. I looked at the tutorials, and they dont really explain "how" to modify the template, or "which" files need to be edited for things to change…I looked at some files, and they didnt explain anything. And most of them are CSS files anyway (only does color not the actual design).

So is it possible for someone to point me in the right direction on which files to edit to actually change the way it looks (like move menus, blocks, links, the whole thing, not just color)? I would really appreciate it. If I get help, I will work on making some and releasing to the site, but I just have no clue where to even start.

Thanks.
Back to the top
 
Posted
Rating:
#21582
Avatar

Sure, I'll try and be a help to you since I'd like to encourage the creation of more themes. But I need to mention that you're going to need to know at least the basics of HTML. Because without that it'll be a bit of a drawn out process.

If you can be more specific on what it is you want to do, that will help me better tailor a response to you. But going on what you had,

Looks to me like the three things that you mentioned (moving menus, blocks, navigation links, etc) are all elements which happen to not be related to templates. The menu navigation links can all be customised through our menu editor (accessible via the adminzone, or by clicking "edit menu" under each menu). Blocks are edited in the same way - they're simply pieces of comcode. Edit them by clicking "edit page" on one of the side panels.

(Let me know if I throw out a term you don't understand, by the way).

I will say, if you have some HTML knowledge, then just poking through GLOBAL.tpl will be a lot of what you might want to change. Take a look through and try to read anything that says <div class="blahblah"> or <div id="blahblah">, because these will shed a lot of light on what it is you're looking at.

I'll pick a template to pick apart with you - but let me know if there's a specific section you want me to walk through.

This is NEWS_PIECE_SUMMARY.tpl (as of version 3.0.6) - it's the template that controls how your the news summaries appear in the main_news block (on your front page, by default).

Code

{+START,BOX,{$TRUNCATE_LEFT,{NEWS_TITLE},70,1,1} ({DATE*})}
   {+START,IF_NON_EMPTY,{CATEGORY}}
      <div class="newscat_img">
         <img class="blend" src="{IMG*}" title="{CATEGORY*}" alt="{CATEGORY*}" />
      </div>
   {+END}

   <div>
      {NEWS}
   </div>

   <br class="float_passer" />

   <div class="news_goto">
      <a title="{NEWS_TITLE}" href="{FULL_URL*}"><!-- <img class="blend" src="{$IMG*,pageitem/goto}" title="{!VIEW} / {!COMMENTS}" alt="{!VIEW} / {!COMMENTS}" /> -->{!VIEW}{+START,IF_PASSED,COMMENT_COUNT} ({COMMENT_COUNT*} {!COMMENTS}){+END}</a>
   </div>
   <div class="news_by">
      {!SUBMITTED_BY,<a href="{AUTHOR_URL*}" title="{!_AUTHOR,{AUTHOR*}}">{AUTHOR*}</a>}
   </div>

   <br class="float_passer" />
{+END}

Once you get past all of the {!_$*}'s and capital letters everywhere, you'll notice this really isn't much more than a basic HTML page. In fact, pass this into an HTML editor if you have one - it should be fairly content ignoring the symbols it doesn't understand and giving you a fairly decent interpretation of what this page looks like (depending on your editor and the template you're editing).

Code

{+START,BOX,{$TRUNCATE_LEFT,{NEWS_TITLE},70,1,1} ({DATE*})}

This line is starting a new box. The part after BOX, is the title section, and in there we are taking the title of the post, truncating it to 70 characters or less, and adding the date next to it in parenthesis (read it from the inside out).

Code

  {+START,IF_NON_EMPTY,{CATEGORY}}
      <div class="newscat_img">
         <img class="blend" src="{IMG*}" title="{CATEGORY*}" alt="{CATEGORY*}" />
      </div>
   {+END}

The {+START} and {+END} bits work kind of like an if statement in a programming language. In this case, only if {CATEGORY} (which is a variable in this case) has something in it, will it render the image category. Meaning, if someone hasn't chosen a category by some means, this won't try to show the image section.

Clever, huh?

Code

   <div>
      {NEWS}
   </div>

<br class="float_passer" />

This part is simple HTML - inside a new division we're going to put the news (or the news summary, as the case may be). The <br> exists just to make sure we're not going to have any wrapping problems around the category image.

Code

  <div class="news_goto">
      <a title="{NEWS_TITLE}" href="{FULL_URL*}"><!-- <img class="blend" src="{$IMG*,pageitem/goto}" title="{!VIEW} / {!COMMENTS}" alt="{!VIEW} / {!COMMENTS}" /> -->{!VIEW}{+START,IF_PASSED,COMMENT_COUNT} ({COMMENT_COUNT*} {!COMMENTS}){+END}</a>
   </div>

Again - look for the <div class="blahblah"> to guide you. In this case, news_goto, it's fairly easy to decipher that this is the part where we "go to" the news, or the "view" link at the bottom of the summaries.

You can see here we have a commented out reigon, which is ocPortal's "Go to" icon. You can uncomment this if you like (by removing the <!-- and --> sections) to see what it is. Again, the rest of this is just HTML with some paramaters (variables) passed in. The START/END bits here are just making sure there are any comments before we try to "show" the number of comments.

Code

   <div class="news_by">
      {!SUBMITTED_BY,<a href="{AUTHOR_URL*}" title="{!_AUTHOR,{AUTHOR*}}">{AUTHOR*}</a>}
   </div>

   <br class="float_passer" />

Again, more HTML. Read the div to see that this is talking about who submitted this post.

Code

{+END}

This END is ending the box which we started on the first line.

So you see? It's not that bad. If you know HTML and can look past the symbols everywhere, you'll really feel right at home.

Above all, the best piece of advice I can give is to experiment. Take a certain <div> ... </div> and try moving it around in the template and see what changes. Try deleting certain sections and watch what happens (as long as you edit them inside ocPortal it will backup all of your changes for you). Or you can do what I do and just write "HIHIHIHI" in various places in a template and watch to see where it appears. Just remeber to delete them afterwards (as Chris can tell you – I've often forgotten to remove them when I submit templates into our code base ;)).

I hope this gives you a leg up, since I really feel ocPortal is pretty easy to edit template-wise, and I'd like to share that with you if possible.

Take a look at this tutorial ["Advanced Themeing"] written by Philip. It's a very detailed breakdown of our templates showing you what bits do what.

If you want to pick one or two pieces of ocPortal you want to customise, let me know and I'll do my best to breakdown what you can do to customise it.

Good luck. :)

Back to the top
 
Posted
Rating:
#21585
Avatar

Fan in action

Excellent work there man. I appreciate it very much! Didnt think I would get such a walkthough…

One sad thing is, it looks like alot of it is spread out into many different files rather then just one. But, ill find which one I need and make the changes accordingly.

Im sorry I didnt explain better. I do understand how to change the blocks links, how to move them and so on. I am looking to do something like what this site has. Something that has a completely different feel to it. I realize it would probably be easier for me to start a new template, but I will most certainly be just playing with the default at first till I see how its coded.

I like your little tip, "place HIHIHIHI in certain areas", LOL. Tis a good tip, I like.

I know HTML fairly well, and I should do alright. I can understand it in a normal stage, no way advanced though. I will try not to bother as I know how you guys are on the "paid" thing. Although, im hoping if I get many of these done, could THIS work be translated into some cms coding time maybe?

Im pretty good at graphics so thats not a problem…I will try to make them colorful and professional too (my sites more on the professional side).

I will post back here if I am able to crack this thing a little bit. Thanks again for the open response!
Back to the top
 
Posted
Rating:
#21588
Avatar

Community saint

I wish the Css was one file but I understand the templates as they are many files in IPB too.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#21590
Avatar

Fan in action

The CSS isnt the structure of the template. CSS is the cascading style sheets…which is basicly the colors. The TPL files is what you want to play with. I did for a little bit tonight, and I figured out somethings in the global and header file. I got some ideas for a drop down menu instead of a side menu, it would be cool. Although wouldnt be easy to do, so im not sure yet.

And too, you gotta know some HTML and PHP, as Allen mentioned. Maybe if a few of us get together, we can put our knowledge together and come up with a few of them. I wouldnt mind…I will need the help anyway, that dropdown will be hard.
Back to the top
 
Posted
Rating:
#21591
Avatar

Community saint

yes I know that and thats why I would like the CSS to be one file.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#21594
Avatar

NVDO2006 said

One sad thing is, it looks like alot of it is spread out into many different files rather then just one. But, ill find which one I need and make the changes accordingly.

There are actually far fewer files than there could have been. Due to the changes we made to Tempcode for version 3, we can now do loops and other complex programming blocks inside templates, meaning that we don't have to do them in code and needn't use two templates instead of one (e.g. we no longer have to have a surrounding template - a table header and footer, for example - and a template to be looped - the table rows, for example). :nerd:

amichan said

yes I know that and thats why I would like the CSS to be one file.

Personally, I would say it's better to have the CSS separated, as it means you're not forever looking for classes. I find that once a file gets past a certain size, it's quite hard to find stuff (especially if you don't know the name and thus can't search for it). Besides that, it's more efficient if CSS is only sent to the user when required, so the browser doesn't have to download the statistics CSS when you're just viewing the news. :)

Back to the top
 
Posted
Rating:
#21605
Avatar

NVDO2006 said

Excellent work there man. I appreciate it very much! Didnt think I would get such a walkthough…

One sad thing is, it looks like alot of it is spread out into many different files rather then just one. But, ill find which one I need and make the changes accordingly.

Take a look at this tutorial ["Theming your site"] if you haven't, already - it explains the reasons why we've spread things out.

The HTML is a different matter. ocPortal's HTML is split up into small sections, called "templates". These templates have several advantages:

  • First, splitting large complex pages down to individual templates allow those templates to be re-used, meaning there is less code to be maintained. It also allows sections of code that are repeated often to only be written in one place. This makes updating and maintaining your HTML a lot easier.
  • Second, we believe this makes editing an easier process. Instead of loading up an entire website to find the proper HTML to edit, one can simply call up a template, which is typically between 2 and 20 lines long. This means if you want to edit a specific section, you can load the template for that section and only have to work within that template.

At this time, there are about 1,000 templates that make up ocPortal and all of its add-ons. This may seem like a daunting number at first, but usually you'll find that you only need to edit a few of the major ones to achieve a new overall look that you desire.

I am looking to do something like what this site has.

If you're referring to the links at the top of the page, those buttons happen to be one huge flash animation, so there's actually not much HTML involved in that kind of edit. All he had to do (I'm guessing) would be edit TOP.tpl to add a new table, and just insert his flash animation.

The creator of that site visits these forums, so he might be able to tell you personally ;).

I will try not to bother as I know how you guys are on the "paid" thing.

In this particular case, as I've said, I will invite you to pick out one or two places where you're stuck or confused, and I'll do my best to walk through them for you. It seems like our themeing community has sort of been non-existant, and I'm willing to put a bit of time in to help give things a jump start. Given that you're among the first to activley prusue this and ask questions, I'll let you decide what you want me to talk about ;).

Although, im hoping if I get many of these done, could THIS work be translated into some cms coding time maybe?

Is "THIS work" referring to your work or my walkthrough?

amichan said

I wish the Css was one file but I understand the templates as they are many files in IPB too.

Heh - no you don't ;). Our global.css file is huge - it's over 2,000 lines long. By breaking up each module into it's own CSS file, it not only makes many things easier to find in many cases, but ends up making things more efficient, as it doesn't have to spend the time to download classes it isn't going to need.

NVDO2006 said

And too, you gotta know some HTML and PHP, as Allen mentioned.

Actually, one little correction - you don't need to know any PHP to edit your templates. The only "programming" involved is our own "tempcode", which you can read about Here ["Tempcode Programming"] if you feel so inclined, but be ready to take notes - it's sort of complicated. The general premise however is that by having a fair understanding of HTML and CSS, you should be able to make most changes you could want to.

Back to the top
 
Posted
Rating:
#21615
Avatar

Fan in action

Thanks for the replys Philip and Allen.

There are actually far fewer files than there could have been. Due to the changes we made to Tempcode for version 3, we can now do loops and other complex programming blocks inside templates, meaning that we don't have to do them in code and needn't use two templates instead of one (e.g. we no longer have to have a surrounding template - a table header and footer, for example - and a template to be looped - the table rows, for example).
I see. Then yes, I guess I am glad that it is spread out.

If you're referring to the links at the top of the page, those buttons happen to be one huge flash animation, so there's actually not much HTML involved in that kind of edit. All he had to do (I'm guessing) would be edit TOP.tpl to add a new table, and just insert his flash animation.

The creator of that site visits these forums, so he might be able to tell you personally ;).
Im referring to the whole thing. The bars are different colors ontop of the blocks, the header is much diffierent, the footer is much different. There are alot of things different on there that is pretty cool (not my colors, but the design is cool). And Ive posted to the topic where he mentioned his site URL, asking for some tips on what he did. Hasnt responded. I dont think he comes here anymore.

In this particular case, as I've said, I will invite you to pick out one or two places where you're stuck or confused, and I'll do my best to walk through them for you. It seems like our themeing community has sort of been non-existant, and I'm willing to put a bit of time in to help give things a jump start. Given that you're among the first to activley prusue this and ask questions, I'll let you decide what you want me to talk about ;).
To be honest, im doing it because I need some different design for my site. I like the default non-the-less, but I dont want to use it while all the other 1,000 people who use this cms has the exact same look. I want to be alittle more creative. But im also doing it to help out, I do understand how hard it is to get a community going (based on what I do for forums).

Is "THIS work" referring to your work or my walkthrough?
No no, my work. If say I make a few good themes, could it be translated into some coding time say? I have some template ideas, but I dont see how they will be easy, or if I will be able to do them…so if I do end up getting a few done, could I get something back like that in return? Its no real big deal, im just hoping, for my troubles.

Actually, one little correction - you don't need to know any PHP to edit your templates. The only "programming" involved is our own "tempcode", which you can read about Here ["Tempcode Programming"] if you feel so inclined, but be ready to take notes - it's sort of complicated. The general premise however is that by having a fair understanding of HTML and CSS, you should be able to make most changes you could want to.
I was almost certain I saw some php in the global and header tpl files. But it was too, 3 in the morning lol.

I might make some concept pictures in PS first, and post them up my ideas. I need to "see" what I want to do first and try to design around that. I have tons of ideas from other templates of forums and such. So when I have a few done ill post back.

Thanks again for the open responses.

UPDATE: Ok, as I said I would, I put some concepts together. I didnt have much time to play around with them today as weekends are busy for me. But, here are a few minute fixes that ive been thinking about. My *main* idea is to clean up the menus from the right and left. Leave room for everything else in the middle. I dont like browsing forums with the bar on the left and/or right, but I do like when I can get my links when they are above the forums. Its VERY convient. So, as in the pictures, you will see what im talking about. I can do flash menus, so thats no big deal (making them work with the system, thats another story…). Thats what these pictures are based off of, using the flash to make them either drop down or slide over. They are alittle basic, I know. If there is anything more specifc that should be in here, let me know.

Also, the colors are NOT the read deal lol. I just used these colors for ease of knowing whats going on. The graphix are important later. Right now, I got to get the design done (which I think wont be bad for either of these once I figure out how to get the flash bar to work right in it…).

Here they are. If you have questions, post. Let me know what you think. I saved PSD format so I can change it quickly to any requests. And colors too, let me know of some colors that are good, I can do that too.

I did end up figuring out which files do what now. I played with it for about an hour, and I learned of the files and what alot of the mumbo jumbo is lol. So these themes shouldnt be too long, maybe someday ill be able to do requests.

Ok, no more jibber jabber. Sorry, here:
Concept 1
Concept 2
Back to the top
 
Posted
Rating:
#22939
Avatar

Well-settled

NVDO2006 said

If you're referring to the links at the top of the page, those buttons happen to be one huge flash animation, so there's actually not much HTML involved in that kind of edit. All he had to do (I'm guessing) would be edit TOP.tpl to add a new table, and just insert his flash animation.

The creator of that site visits these forums, so he might be able to tell you personally ;).
Im referring to the whole thing. The bars are different colors ontop of the blocks, the header is much diffierent, the footer is much different. There are alot of things different on there that is pretty cool (not my colors, but the design is cool). And Ive posted to the topic where he mentioned his site URL, asking for some tips on what he did. Hasnt responded. I dont think he comes here anymore.

I wish I had seen this thread sooner but, alas, it had been awhile since I was visiting and I've only recently returned.  However, my ears were a burnin' and its nice that someone enjoys what I've done with The Political Voice.  Ironically, while I've gotten a generally positive reception to the site, the one criticism that has stuck since I created it has been about the colors.  Consequently, I'll likely be redoing the theme after the move to new servers.  But that's for another conversations….

About the top menu, Allen is correct, the menu that sits on the top (and one along the left) are actually flash animations with the appropriate code to insert it at a given point.  However, I did customize my site heavily, at least in my opinion, although not as much as someone with greater skill would be able to do.  If there is any interest still in my site I'd be happy to share that information.  Also, if anyone might be interested in using my site's theme I can look into creating a new 'theme' package of it and posting here.

-Aaron / PoliticalVoice

"Some mornings it just doesn't seem worth it to gnaw through the leather straps." - Emo Phillips

"Really don't mind if you sit this one out. My word's but a whisper, your deafness a SHOUT. I may make you feel, but I can't make you think." - From the album Thick as a Brick by Jethro Tull (written by Ian Anderson)
Back to the top
 
Posted
Rating:
#35642
Avatar

Community saint

 I thought I was onto something here but his site has been hacked.lol

Looking for the comcode for flash swf files so they can be inserted into the side panel menu.

Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: