custom template

[sledge]

I been scouring the web trying to find information on changing the default CCS template to incorporate my custom template.

 

Same as you have done here :)

 

The lack of documentation has me a bit frustrated so I'm hoping you can help me.

 

Basically how do we change the CCS to use our custom templates?

[John]

Hi Sledge, thanks for joining.

 

What we've done here (we're not sure if its the best or easiest method yet either) is a two step process basically.

 

first we've created a new "Skin Wrapper" under page templates from the CCS admin area and used the following code

 

 <link rel="stylesheet" type="text/css" title="CCS CSS" href="http://www.ipbsetup.com/assets/ccs_sidebar.css" /> <div id='ccs_wrapper'> <div id='ccs_sidebar'> {parse block="welcome"} <hr /> {parse block="ipbnav"} <hr /> <h3>Recent Members</h3> {parse block="members"} <hr /> <h3>Top Posters</h3> {parse block="topposters"} <hr /> <h3>Active Users</h3> {parse block="activeusers"} <hr /> <h3>Custom Block Demo</h3> {parse block="custom"} </div> <div id='ccs_content'> {ccs special_tag="page_content"} </div> </div> <div class='ccs_copyright'> This is your copyright area </div> 

Then we created a new CSS file in the assests folder Pages -> assests -> Add New -> css file

 

 hr { display: block; border-top: 1px solid #8593a1; width: 90%; margin: 10px auto; height: 1px; } h1 { display: inline; font-size: 32px; color: #192b40; margin-bottom: 12px; } h2 { display: inline; font-size: 24px; color: #192b40; margin-bottom: 8px; } h3 { font-size: 22px; margin: 15px 0 12px; color: #192b40; } #ccs_wrapper { margin: 5px auto 8px auto; background: #fff; overflow: hidden; } #ccs_sidebar { background: #ecf0f4; width: 290px; padding: 15px; float: right; } #ccs_content { padding: 0px 5px 10px; margin-right: 3px; } .ccs_desctext { font-size: 14px; margin-left: 10px; display: block; } .ccs_date { font-size: 13px; color: #8e9aa7; } #ccs_news, #ccs_news .ccs_date { margin-left: 10px; } #ccs_news { margin-top: 20px; } #ccs_news li, .ccs_members li { margin: 10px 0; line-height: 130%; } .ccs_members { margin: 10px 0 4px 0; } .ccs_members .ccs_photo, #ccs_welcome_block .ccs_photo { float: left; margin-right: 6px; border: 1px solid #a7b5bf; height: 50px; } .ccs_members .ccs_member_block, #ccs_welcome_block .ccs_member_block { margin-left: 62px; } #ccs_activeusers h4 { font-size: 13px; margin-top: -10px; } #ccs_activeusers .ccs_desctext { color: #8e9aa7; margin: 0; } #ccs_custom { font-size: 13px; } #ccs_button { display: block; padding: 10px 30px; margin: 0 auto; background: #1b8272; color: #fff; text-decoration: none; text-align: center; -moz-border-radius: 6px; -webkit-border-radius: 6px; width: 50%; } #ccs_button:hover, .ccs_member_links a:hover { background: #299f8d; } .ccs_copyright { font-size: 13px; color: #727272; text-align: center; } .ccs_member_links { text-align: center; font-size: 13px; margin: 10px 0; } .ccs_member_links a { background: #1b8272; color: #fff; padding: 2px 8px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } #ccs_welcome_block table { font-size: 15px; } td.ft { width: 40%; } td.fc { width: 60%; } 

One last step you might have to take (We had CSS problems where the forums already used a definition, and CCS needed one to) we prefixed every CSS with the ccs_ then went into the blocks and simply edited the classes and id's of everything to include that prefix. Example the members block (CCS Admin -> Blocks -> Members Block)

 

 <ul id='ccs_members' class='ccs_members'> <if test="is_array( $records ) && count( $records )"> {parse striping="feed_striping" classes="row1,row2 altrow"} <foreach loop="$records as $r"> <li class='hentry {parse striping="feed_striping"}' style="height: 52px;"> <img src='{$r['pp_mini_photo']}' alt='Photo' class='ccs_photo' width='{$member['pp_mini_width']}' height='{$member['pp_mini_height']}' /> <div class='ccs_member_block'> <a href='{$r['url']}' rel='bookmark' title='{$r['title']}'>{$r['title']}</a> <br /><span class='ccs_date'><abbr class="published" title="{parse expression="date( 'c', $r['date'] )"}">{parse date="$r['date']" format="short"}</abbr></span> <span class='ccs_desctext'>{IPSText::truncate( strip_tags($r['content']), 32 )}</span> </div> </li> </foreach> </if> </ul> <br /> 

Then when we create a new page, we select the page tempalte as "Skin Wrapper" and "Use IPB Wrapper" set to yes.

 

[sledge]

Hello David,

 

I will give this a try and report back.

 

Thank you for your time.

[John]

No problem, be sure to let me know how it goes and I'll try my best to help you figure it out ;)

[sledge]

Grr,

 

Still a no go. The weird thing is the alternate.html wraps just fine.

 

but the index page is a mess (this does reside outside of my forum directory)

 

The other strange issue is I for the life of me can not find a assets directory via ftp but it does show in the page manager as a dynamic link.

[John]

Is the skin your using a freely available one? If so link me to it, i'm willing to set it up as a test here and get it working for you.

 

Also, I dont think CCS actually creates any folders or files. It merely serves the dynamically and lets you create them for organizational purposes.

[John]

You're all set sledge!

 

Thanks for stopping by for CCS support!

 

-Dave

[sledge]

Thanks a lot for the help Dave!

 

your site will now be in my IPB rotation :D

[sledge]

Hi John,

 

I notice you have changed some thing around here. Do you still have IP. Content set up ?

[John]

Hi John,

 

I notice you have changed some thing around here. Do you still have IP. Content set up ?

Hi! I have it disabled at the moment. I had some problems upgrading it to the latest version and need to get that sorted before re-enabling it...but it is coming back :)

[sledge]

Ok waiting for your fix lol :P

 

Invision Community Pages is so frigging frustrating at times for me :angry: