Sign in to follow this  
mosravo

How Can i apply a New Theme to Processwire

Recommended Posts

Am new to processwire and there are certain things i want to do and i know they are possible, i have been able to install processwire, even install a Blog Profile. But now i want to change the theme of my processwire just as it is in WordPress, Because i saw a lot of site designed using processwire and their feel is great and you cant really tell if it was done with processwire from the front end, So how can i achieve this in Processwire. i will be grateful if some one can help here.

Share this post


Link to post
Share on other sites

Hi mosravo,

different to Wordpress and others, ProcessWire has no "theme as a package" logic. Its philosophy is to provide a content framework and an easy API, where a clean WordPress install confronts you both with a certain content logic (pages vs. articles) and a certain theme installed (and the call to action to download/try more themes).

So, if you discover certain projects and sites being realized with PW, the chance of this being a theme (as in: free download provided somewhere) is close to zero. But still, these projects can serve as a showcase for what's possible with PW.

Maybe lets compare it to a (fictional) lego product: one is already assembled on purchase and has 3 or 4 big chunks of lego bricks (and you still could go to nearly every single brick if you want to) - that would be WordPress. ProcessWire is more of a box of bricks of every possible form, preassembled if you want to ( = site profiles) but foremost provided with plans of possible outcomes ( = this forum, and the docs). But still, you have to "now your lego" to at least a small extent minimum.

  • Like 7

Share this post


Link to post
Share on other sites

Hi mosravo,

different to Wordpress and others, ProcessWire has no "theme as a package" logic. Its philosophy is to provide a content framework and an easy API, where a clean WordPress install confronts you both with a certain content logic (pages vs. articles) and a certain theme installed (and the call to action to download/try more themes).

So, if you discover certain projects and sites being realized with PW, the chance of this being a theme (as in: free download provided somewhere) is close to zero. But still, these projects can serve as a showcase for what's possible with PW.

Maybe lets compare it to a (fictional) lego product: one is already assembled on purchase and has 3 or 4 big chunks of lego bricks (and you still could go to nearly every single brick if you want to) - that would be WordPress. ProcessWire is more of a box of bricks of every possible form, preassembled if you want to ( = site profiles) but foremost provided with plans of possible outcomes ( = this forum, and the docs). But still, you have to "now your lego" to at least a small extent minimum.

Hi marcus, so what you are saying inorder word is that processwire doesnt have any theme, what it has is that one can style it to suite personal need right?

Share this post


Link to post
Share on other sites

Hi Mosravo,

Welcome to PW! 

That's right. You can use any HTML, whatever, you like with ProcessWire and style it as you wish. The Site Profiles you talk about are sort of something of convenience, ready made for those who wish to use them. And even then, once you've installed them you can bend them left right or centre as you wish. In other words, there are no ProcessWire themes.. :-)

  • Like 4

Share this post


Link to post
Share on other sites

Hi marcus, so what you are saying inorder word is that processwire doesnt have any theme, what it has is that one can style it to suite personal need right?

It doesn't have a theme system - but that means you can style it without any restrictions whatsoever. Stylewise, the better your HTML, CSS skills are, the better PW "theming" outcome is.

  • Like 3

Share this post


Link to post
Share on other sites

Since ProcessWire and its modules/plugins do not output any HTML by itself, you are completely free in how you wrap the data from the pages. This gives you as developer complete freedom how you present the data. You could use HTML, XML, or even just JSON. This is the reason why there are no themes for the front-end availabe.

  • Like 5

Share this post


Link to post
Share on other sites

Pals i do appreciate your clear explanation of the 'theme-less' processwire with freedom to style to suit personal need, but the question again is where do i start my personal styling and where do i go from here.? assumming i want to add a horizontal menu to the Blog Profile of this site (www.mcalleluyashow.mil.nf)? Please i need guidelines and where to begin.

Share this post


Link to post
Share on other sites

....... but the question again is where do i start my personal styling and where do i go from here.? assumming i want to add a horizontal menu to the Blog Profile of this site (www.mcalleluyashow.mil.nf)? Please i need guidelines and where to begin.

Aah, this now seems to be a slightly different question. What you are asking is about 'structuring' - the HTML...rather than 'styling'...the CSS, or maybe both? :-)...

How comfortable are you with HTML, CSS, PHP? The first two you definitely need to know, the third you need to know the basics. Answers to this will determine how much re-structuring you can do, especially with the 'work-horse' that is the Blog Profile. If it was just about styling, the place to start is to fire up Firebug (if in FF) or Chrome developer to examine the HTML output of the rendered Blog pages, note the names of the CSS ids and classes and the relevant lines in the CSS files where you need to make changes. Then you can change those as you wish (but you might want to do a back-up of the CSS file first). Ideally, you should be working locally first before uploading to the live site. 

If on the other hand you want to add things and move things around, you will need to dig into the code. Now, the Blog Profile uses some relatively advanced code and has all sorts of includes coming in from different files some of which also include other files, etc...Unless you are comfortable with PHP and ProcessWire API, I am afraid you will struggle. If you are willing to learn PHP (at least the basics) that is great and will serve you beyond ProcessWire if need be :-)....So, I can point you to look at main.inc and blog.inc (/site/templates/) since that is where the main magic happens, the former mainly for outputting stuff and the latter the engine room serving different things to main.inc, but it would not help you much if you were not comfortable with PHP and PW API.

Having said that, I am not in any way trying to discourage you. I am just recommending that you try and get the PW basics first (if you haven't done so already)...and the road ahead will be less bumpy  :D....

Edited by kongondo
  • Like 4

Share this post


Link to post
Share on other sites

@kongondo so explicit in your feedback and i love your approach, am getting to know things better. i am really comfortable with PHP, CSS AND HTML and with what you just explain now i will do the experiment and get back and i know how to work with the developer tools in FIREFOX OR BUG.

I am really grateful for your support and all those who contributed. making sense.

  • Like 4

Share this post


Link to post
Share on other sites

If you are comfortable with PHP, with PW you can have your cake and eat it too! I realize I didn't clarify what I meant by the 'basics'...apart from PHP, that's also mainly the 'simple' but powerful PW basic API that is documented here: http://processwire.com/api/ especially selectors, $page and $pages. If you get those under your belt you will be truly on your way. As usual, feel free to ask questions and we'll be here to guide you.... :-)

Edited by kongondo
  • Like 1

Share this post


Link to post
Share on other sites

Let me ask a basic question than.  Can I use a theme designer, such as Artisteer, export it as an HTML website and then edit it so that it connects up with Processwire?

  • Like 1

Share this post


Link to post
Share on other sites

I use Artisteer myself in combination with Processwire.

Just export your design as basic website template.

If you, before you export, put basic explanatory texts in your Artisteer design where you want your PW fields or menu appear, it is easy to replace them later with a normal editor with the necessary php from the PW API. But this will help no matter which design tool you use.

Change the extension of the files from .html to .php and add the pagefiles to the site/templates directory and in the admin add them as templates (Setup - Templates).

After that you can add the necessary fields to the templates (select the template for editing and click Add Field). 
Next step is to call the fields with php in your pagefiles in the places where you have put the explanatory texts.

Don't forget to edit the includes in the head tag as well according to the PW instructions.

With one page design in Artisteer you can now, through the PW admin, add multiple pages to your site.

Much more to say about this but I hope this basics help you get going.

  • Like 2

Share this post


Link to post
Share on other sites

Thank you reems for you feedback.   Is the Artisteer theme design you create very basic such as  a one page theme with a menu.  Or do you do more than that with Artistteer?

Thank you for you help.

Share this post


Link to post
Share on other sites

Hi Dwimar,

In this case I started with only one basic page created with Artisteer.

And that is enough if you want al the pages in the website to have the same structure and so in PW the same template.

That workes fine.

But in the Artisteer site that I already have online ( http://www.realconsult.nl ) I changed the homepage outside Artisteer and put a css grid (pocketgrid.css) in it to create the columns. If you look at the source of the realconsult site you see all the Artisteer css classes.

Later on I also put another menu in it. But it is not necessary, an Artisteer design will work well also without such extra's.

Another thing I did was to cut the template in three parts: head, body and footer and saved them as separate php files. In that case you only have to put all your includes in the head file once and include this head (and footer)  file in any other template you create with whatever system.

Share this post


Link to post
Share on other sites

@reems, i'm nitpicking here: You've exposed the edit link for guest users. If you don't really need it, it's better to show it only if a user is logged-in.

  • Like 1

Share this post


Link to post
Share on other sites

Hi Martijn, not nitpicking at all.

And not a bad idea.

Checked my profile settings but can't find that setting......it's clearly end of the week... ???


Congratulations by the way..... 1.500 likes milestone  :grin: 

  • Like 1

Share this post


Link to post
Share on other sites

.... hardcoded ??   .....template??

I look around but can't find.

If I log out and check my posts but I can;t edit in that case.

Strange....

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.