Create a custom theme
1
Applying IPB Wrapper to IP.Content
Posted by Shadow Wolf,
in
IP.Content
01 October 2010
·
624 views
Backing Up Files
Just like I did with IP.Board, I want to back up and clone the IP.Content Templates that I will be using and editing. Starting with the Front Page (1x2x2 Layout).
ACP -> My Apps -> IP.Content -> Article Templates
Front Page (1x2x2 Layout) is the default front page layout. I am going to Edit that template and then right click on the column and select "Select All". And then copy the information with "Ctrl+C". Now hitting back on the browser I'll return to the previous page and can select "Add Template" and then "Add Frontpage Template" from the drop down menu.
Template Title: For this we'll call it PDX Gaming
Template key: pdx_gaming_frontpage
Template description: Theme template to be used with PDX Gaming.
Category: Select "Frontpage Templates" from the drop down.
Now it will automatically have in the template information for 1x2x2 template. However I am still going to right click on the column and select "Select All" and delete it. Then "Ctrl+V" to paste in the information that I copied before. Then click Save.
Why did I replace it if the information was already there?
It is a habit that you want to get into or at least I have, that I find useful. Before I make any changes to anything I either have all the information that I will change backed up on a "Scratchpad". For that I use a program called Notepadd++ but you can use textpad or wordpad. This contains all the previous information before I make changes. That way after I save, if there was something I didn't like then I can revert back simply just by copying and re-pasting my saved data back.
Modifying Article Template
ACP -> My Apps -> IP.Content -> Templates -> Page Templates
Just like we did before with the frontpage template, we are going to edit the IP.Content Demo template. Select everything and press "Ctrl+C" to copy it. Then backup and go to "Add Template" and create a new template to work with.
Template title: PDX Gaming
Template key: pdx_gaming_page
Assigning the New Frontpage Template
ACP -> My Apps -> IP.Content -> Frontpage Manager
There is a dropdown menu to the right of "Frontpage template". From that we are going to select the new Frontpage template, in this example it will be PDX Gaming and click Save Settings. Now when we make changes or edits we'll be able to see the changes after we save them.
Activating IPB Wrapper
ACP -> My Apps -> IP.Content -> Pages
The base demo install of IP.Content does not default to IPB Wrapper. We will have to set that up. That is really easy to do. Follow the path above and then select Edit Page for the index.html there. Click on the Page Details tab and look down the page until you see Use IPB Wrapper. Click on Yes and then click on Save and Reload.
Now click on Use Wizard. The only thing we are changing here is what the main template it is using is. We're going to scroll down to Template to start with" and from the drop down select PDX Gaming. Then click Continue, Continue, Continue, Continue Save.
If you refresh the Article Page you'll see some of the wrapper in effect but you'll also see a few things that are completely wrong. That is mainly because the template for the Articles has not yet been modified to work with the IPB Wrapper. You have a duplicate body, head tags, etc.
Modifying Page Template, Remove Duplicate HTML
ACP -> My Apps -> IP.Content -> Templates -> Page Templates
We need to remove the duplicate tags. We also need to put anything needed for IP.Content into the IPB Header part itself. If you didn't use IPB Wrapper and instead wanted to use its IP.Content side you wouldn't have this issue. However to get certain features like your User Login, profile, etc to show up at the top bar you would still have to bring aspects from IP.Board's header into IP.Content.
Just like we did before with the frontpage template, we are going to edit the IP.Content Demo template. Select everything and press "Ctrl+C" to copy it. Then backup and go to "Add Template" and create a new template to work with.
I like to start with the easiest parts to remove. We need to remove the closing tags for body and html. This will be handled by the IPB Wrapper so we don't need it in the article. Now everything from the top up to and including </ body id='ipboard_body' > will need to be removed. I am going to Select it and Copy it to my scratchpad to be used later, then delete it.
Now the formating will look a bit better, but you'll notice we lost of a lot of the CSS formating as well:
Create CSS for IP.Content
ACP -> My Apps -> IP.Content -> Pages
- assets
-- demo.css
Just like we did before with the frontpage template, we are going to edit the "demo.css" template. Select everything and press "Ctrl+C" to copy it. Then backup and go to "Add CSS Page" and create a new template to work with. Then paste in all the information.
Filename: pdxgaming.css
Folder to save in: /assets
Modify IP.Board Skin
ACP -> Look & Feel -> Manage Templates & CSS
-- Global Template
Remember that stuff we saved in our scatchpad. The < head > information. That will need to go into the IP.Board Header to make sure the .CSS for our page is loaded, amongst other things. How do I know what to replace and not too. I compare it. Remember if you read the "About Me" how I said I know the basics, enough to make me dangerous but not necessarily a programmer. I have no idea what is really needed. I mean I could if I had time test each line and see if I'm missing something by not having it in. However this is being written by the average user perspective. Most aren't going to know what to do. Simply copy what isn't duplicated in this case:
When your done, essentially you'll have something like this:
Honestly at this point, the hard stuff is basically done. Everything at this point is CSS and HTML editing. You are going to have some 'div' that go over the border image or alignment will not match up. It'll take a bit of work but if you use some of the tools in my tools of the trade article, this actually becomes fairly easy to do.
Just like I did with IP.Board, I want to back up and clone the IP.Content Templates that I will be using and editing. Starting with the Front Page (1x2x2 Layout).
ACP -> My Apps -> IP.Content -> Article Templates
Front Page (1x2x2 Layout) is the default front page layout. I am going to Edit that template and then right click on the column and select "Select All". And then copy the information with "Ctrl+C". Now hitting back on the browser I'll return to the previous page and can select "Add Template" and then "Add Frontpage Template" from the drop down menu.
Template Title: For this we'll call it PDX Gaming
Template key: pdx_gaming_frontpage
Template description: Theme template to be used with PDX Gaming.
Category: Select "Frontpage Templates" from the drop down.
Now it will automatically have in the template information for 1x2x2 template. However I am still going to right click on the column and select "Select All" and delete it. Then "Ctrl+V" to paste in the information that I copied before. Then click Save.
Why did I replace it if the information was already there?
It is a habit that you want to get into or at least I have, that I find useful. Before I make any changes to anything I either have all the information that I will change backed up on a "Scratchpad". For that I use a program called Notepadd++ but you can use textpad or wordpad. This contains all the previous information before I make changes. That way after I save, if there was something I didn't like then I can revert back simply just by copying and re-pasting my saved data back.
Modifying Article Template
ACP -> My Apps -> IP.Content -> Templates -> Page Templates
Just like we did before with the frontpage template, we are going to edit the IP.Content Demo template. Select everything and press "Ctrl+C" to copy it. Then backup and go to "Add Template" and create a new template to work with.
Template title: PDX Gaming
Template key: pdx_gaming_page
Assigning the New Frontpage Template
ACP -> My Apps -> IP.Content -> Frontpage Manager
There is a dropdown menu to the right of "Frontpage template". From that we are going to select the new Frontpage template, in this example it will be PDX Gaming and click Save Settings. Now when we make changes or edits we'll be able to see the changes after we save them.
Activating IPB Wrapper
ACP -> My Apps -> IP.Content -> Pages
The base demo install of IP.Content does not default to IPB Wrapper. We will have to set that up. That is really easy to do. Follow the path above and then select Edit Page for the index.html there. Click on the Page Details tab and look down the page until you see Use IPB Wrapper. Click on Yes and then click on Save and Reload.
Now click on Use Wizard. The only thing we are changing here is what the main template it is using is. We're going to scroll down to Template to start with" and from the drop down select PDX Gaming. Then click Continue, Continue, Continue, Continue Save.
If you refresh the Article Page you'll see some of the wrapper in effect but you'll also see a few things that are completely wrong. That is mainly because the template for the Articles has not yet been modified to work with the IPB Wrapper. You have a duplicate body, head tags, etc.
Modifying Page Template, Remove Duplicate HTML
ACP -> My Apps -> IP.Content -> Templates -> Page Templates
We need to remove the duplicate tags. We also need to put anything needed for IP.Content into the IPB Header part itself. If you didn't use IPB Wrapper and instead wanted to use its IP.Content side you wouldn't have this issue. However to get certain features like your User Login, profile, etc to show up at the top bar you would still have to bring aspects from IP.Board's header into IP.Content.
Just like we did before with the frontpage template, we are going to edit the IP.Content Demo template. Select everything and press "Ctrl+C" to copy it. Then backup and go to "Add Template" and create a new template to work with.
I like to start with the easiest parts to remove. We need to remove the closing tags for body and html. This will be handled by the IPB Wrapper so we don't need it in the article. Now everything from the top up to and including </ body id='ipboard_body' > will need to be removed. I am going to Select it and Copy it to my scratchpad to be used later, then delete it.
Now the formating will look a bit better, but you'll notice we lost of a lot of the CSS formating as well:
Create CSS for IP.Content
ACP -> My Apps -> IP.Content -> Pages
- assets
-- demo.css
Just like we did before with the frontpage template, we are going to edit the "demo.css" template. Select everything and press "Ctrl+C" to copy it. Then backup and go to "Add CSS Page" and create a new template to work with. Then paste in all the information.
Filename: pdxgaming.css
Folder to save in: /assets
Modify IP.Board Skin
ACP -> Look & Feel -> Manage Templates & CSS
-- Global Template
Remember that stuff we saved in our scatchpad. The < head > information. That will need to go into the IP.Board Header to make sure the .CSS for our page is loaded, amongst other things. How do I know what to replace and not too. I compare it. Remember if you read the "About Me" how I said I know the basics, enough to make me dangerous but not necessarily a programmer. I have no idea what is really needed. I mean I could if I had time test each line and see if I'm missing something by not having it in. However this is being written by the average user perspective. Most aren't going to know what to do. Simply copy what isn't duplicated in this case:
<link rel="stylesheet" type="text/css" media="screen" href="{parse url="app=ccs&module=pages&folder=assets&page=pdxgaming.css" base="public"}" />
<link rel="stylesheet" type="text/css" media="screen" href="{$this->settings['public_dir']}style_css/{$this->registry->getClass('output')->skin['_csscacheid']}/ipcontent.css" />
<link rel="stylesheet" type="text/css" media="screen" href="{parse block="ipb_css"}ipb_editor.css" />
{parse template="includeJS" group="global" params="array('sharelinks' => 'sharelinks', 'rating' => 'rating', 'editor' => 'editor')"}
When your done, essentially you'll have something like this:
Honestly at this point, the hard stuff is basically done. Everything at this point is CSS and HTML editing. You are going to have some 'div' that go over the border image or alignment will not match up. It'll take a bit of work but if you use some of the tools in my tools of the trade article, this actually becomes fairly easy to do.
