IP.Content - How to get IP.Content to look like forums using ip.wrapper

Discussion in 'Submissions' started by TheRevTastic, Jul 10, 2010.

  1. Horny

    TheRevTastic I don't want to be George Michael

    Likes Received:
    76
    Software You Use:
    IPB, XenForo
    In order for IP.Content to have the look and feel of your forums, you will need to use the IP.Wrapper. Doing this, you will need to tweak or create some files within IP.Content.

    Here is a step by step guide to making IP.Content blend in with your forums.

    STEP 1:

    • In the ACP, click on My Apps tab and then select IP.Content.
    • Click on Page Templates under Templates
    • Click Add Template and name is whatever you would like. I named mine AWiF Front Page in case I wanted to have different looks for different areas of IP.Content.
    • Add this to that newly added template:
    Code:
    <div id='container'>
{ccs special_tag="page_content"}
</div>
</div>
    This will add the container for your IP.Content articles and call up the page_content with the special tag.

    STEP 2:

    • Click on the Pages link in the left menu of IP.Content in the ACP
    • Edit or create an index.php file
    • Add this for the contents. Most of this might already be there, we are only adding the <br /> tag at the beginning for spacing.
    Code:
    <br />
{ccs special_tag="navigation"}
<div id='article_sidebar'>
{parse block="articles_menu"}
{parse block="ActiveUsers"} 
{parse block="recent_articles"}
{parse block="recent_comments"}
</div>
{parse articles}
    STEP 3:

    You will need to edit your css file for some padding issues and any color changes you want to make within the IP.Content area (menus, Article tilles, buttons and such)

    Here is a copy of mine css file, which is the default IP.Content css file, except I have edited it for fix some padding issues. You may have to tweak this more to get it to work for your site, but this will get you started:

    • In the ACP
    • Click on My Apps at the top
    • Click on IP.Content
    • Click on the Pages link in the left menu
    • Click on assets
    • Create a new css file and name it whatever you want.
    • Add this to this file:
    Code:
    /************************************************************************/
/* RESET (Thanks to YUI) */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } 
table {	border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%;	font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
hr { display: none; }
address{ display: inline; }

body {
background: #FFFFFF;
font-family: arial, verdana, tahoma, sans-serif;
font-size: 14px;
color: #000000;
}

a {
color: #000000;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}



#demo_site {
position: absolute;
right: 15px;
line-height: 150%;
top: 30px;
width: 500px;
background: #35404e;
color: #b2c3cc;
padding: 15px;
-webkit-border-radius: 15px;
font-size: 13px;
}



#container {
width: 950px;
margin: 0 15px 5px 15px;
padding: 5px;
overflow: auto;
}

#copyright {
width: 700px;
margin: 10px auto;
font-size: 11px;
text-align: right;
color: #728798;
line-height: 150%;
}

#menu_bar {
background: #2a353f url( {parse block="ipcontent_files"}/demo_images/menu_bg.png ) repeat-x;
margin: 0 15px;
padding: 8px 15px 0;
border-bottom: 12px solid #1b7cae;
overflow: hidden;
}

#menu_bar li {
float: left;
padding: 10px 18px 9px;
margin: 0 5px 0 0;
font-size: 15px;
background: #b6c9d4 url( {parse block="ipcontent_files"}/demo_images/menu_item_off_bg.png ) repeat-x top;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
border: 1px solid #cedee7;
border-bottom: 0;
text-shadow: #ffffff 0px 1px 0;
}

#menu_bar li.active {
background: #1b7cae url( {parse block="ipcontent_files"}/demo_images/menu_item_bg.png ) repeat-x top;
font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
text-shadow: #1a3d60 0px -1px 0;
border: 1px solid #156289;
border-bottom: 0;
}

#menu_bar li.active a {
color: #fff;
}

#menu_bar a {
text-decoration: none;
color: #1a3f5e;
}

#article_sidebar {
width: 215px;
float: left;
}

/*#category_list {
background: #2b333d;
padding: 10px;
}*/

#category_list h2, #recent_articles h3, #recent_comments h3, #article_search h3,
#video_info h2 {
background: #104560;
color: #fff;
font-size: 13px;
padding: 6px 10px;
font-weight: bold;
margin-bottom: 3px;
}

#category_list h2 a {
font-size: 10px;
float: right;
color: #8297ac;
font-weight: normal;
}

#category_list ul a {
color: #30587f;
text-decoration: none;
display: block;
padding: 8px 12px;
background: #e6f1f7;
border-right: 10px solid #c9e2ef;
}

#category_list ul a:hover {
background: #c9e2ef;
color: #2b333d;
border-right: 10px solid #a9d3e9;
}

#category_list ul ul {
margin-top: 3px;
}

#category_list ul ul li a {
font-size: 11px;
padding: 6px 12px 6px 25px;
}

#category_list li {
font-size: 12px;
margin: 0 0 3px 0;
}

#category_list li.active a {
background: #995f8a;
color: #fff;
border-right: 10px solid #732d60;
font-weight: bold;
}

#article_search form {
background: #e6f1f7;
padding: 5px;
}

.site_callout {
margin: -15px -15px 30px -15px;
/*margin-bottom: 15px;*/
padding: 15px;
background: #e6f1f7;
color: #406579;
border-bottom: 1px solid #c9e2ef;
overflow: hidden;
font-size: 12px;
}

#forum_info {
background: #d5e3eb;
border-bottom: 1px solid #afcddd;
color: #ccdfe9;
padding: 20px 10px;
margin: -15px -15px 15px;
display: none;
}

.left {
float: left;
}

.right {
float: right;
}

.clear {
clear: both;
}

.hide {
display: none;
}

.section_title, .post_form h2 {
font-size: 22px !important;
color: #646464;
font-weight: bold;
border-bottom: 2px solid #cbcbcb;
padding-bottom: 3px;
margin-bottom: 10px;
}

.no_messages {
clear: both;
color: #1c2837;
padding: 10px 30px 10px 0px;
}

.desc {
font-size: 11px;
color: #858585;
} 

/* Media section */

#videos h2 {
background: #104560;
color: #fff;
font-size: 13px;
padding: 6px 10px;
font-weight: bold;
margin-bottom: 3px;
}

#videos h2 .rating {
float: right;
}

#videos_menu {
width: 250px;
margin-right: 10px;
}

#videos_latest {
margin-bottom: 25px;
}

#videos_latest, #videos_recent, #video_view, #video_category {
background: #f0f6f9;
width: 700px;
}

#videos_hot {
background: #f0f6f9;
width: 250px;
overflow: hidden;
margin-top: 15px;
}

#videos_latest h3 {
font-size: 18px;
margin-top: 10px;
}

#videos_recent, #video_category {
overflow: hidden;
}

.video_thumb {
padding: 10px;
width: 140px;
height: 140px;
overflow: hidden;
margin: 5px;
background: #fff;
float: left;
}

.video_thumb img {
margin-bottom: 5px;
}

.video_thumb a,
.video_mini_thumb a {
color: #30587f;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}

.video_thumb .time {
color: #979797;
font-size: 11px;
}

.video_thumb .rating {
margin-top: 8px;
display: inline-block;
}

.video_mini_thumb {
background: #fff;
padding: 10px;
overflow: hidden;
margin: 3px 0;
}

.video_mini_thumb .info {
margin-left: 48px;
margin-top: -3px;
}

/* Article styles relevant to the demo site */	
.articles, .post_form {
float: left;
width: 700px;
margin-left: 20px;
font-size: 13px;
}

.articles a:hover {
text-decoration: underline;
}

.articles .posted_info a,
.comment_wrap .posted_date a {
color: #6588b0;
text-decoration: none;
}

.articles .block-1,
.articles.type-1x2x2 .article_row {
border-bottom: 1px solid #d8d8d8;
}

.articles .links {
margin-top: 8px;
display: inline-block;
}

.articles .links a {
color: #1b7cae;
font-size: 11px;
}

.articles .links a.read_more {	
font-weight: bold;
}

.articles .article_body {
margin-top: 8px;
padding-top: 20px;
border-top: 1px solid #d8d8d8;
}

.articles.archives .subcats .subcat:first-child {
border-top-width: 4px;
}

.articles.categories .subcats .subcat:first-child {
border-top-width: 0px;
}

.articles .subcat h2 {
float: left;
width: 180px;
font-weight: normal;
}

.articles .subcat h2 .desc {
display: block;
}

.articles .subcat h2 img {
vertical-align: middle;
margin-right: 5px;
}

.articles .last_article {
margin-left: 200px;
}

.articles.archives .block,
.articles.categories .block {
padding: 10px 0;
}

.articles.archives .block .excerpt, .articles.archives .links,
.articles.categories .block .excerpt, .articles.categories .links {
margin-top: 5px;
}

.articles .children {
font-size: 11px;
margin-top: 8px;
float: left;
clear: left;
max-width: 180px;
margin-left: 20px;
line-height: 130%;
}

.sort_bar {
font-size: 11px;
padding: 6px 6px;
text-align: right;
margin: -10px 0 10px;
border-bottom: 4px solid #ebebeb;
color: #a3a3a3;
}

.sort_bar ul, .sort_bar li {
display: inline;
}

.sort_bar li {
margin: 0 0 0 10px;
}

.sort_bar li.active a {
background: #1b7cae;
color: #fff;
padding: 3px 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

#recent_articles {
margin-top: 30px;
}

#recent_articles a {
font-size: 12px;
}

#recent_articles li {
padding: 4px 10px 4px 0px;
list-style-image: url( {parse block="ipcontent_files"}/demo_images/bullet.png );
margin-left: 25px;
}

#recent_comments li {
padding: 5px 10px;
line-height: 120%;
}

#recent_comments .photo {
float: left;
margin-right: 10px;
}

#recent_comments .desc {
font-size: 11px;
}

#previous_bar {
background: #e8edf2;
border-top: 1px solid #c6d3e0;
text-align: left;
font-size: 14px;
font-weight: bold;
padding: 7px;
}

.utilities {
font-size: 11px;
position: relative;
bottom: -6px;
}

.utilties a:hover {
text-decoration: none;
}

.utilities img {
vertical-align: middle;
margin-top: -2px;
}

.topic_buttons {
overflow: hidden;
margin-top: 6px;
background: #FFFFFF;
padding: 4px 0;
margin-bottom: -10px;
}

.topic_buttons li {
float: right;
}

.topic_buttons li a,
.subscribe,
.add_link {
display: inline-block;
background: #edf2f5;
border: 1px solid #e8edf2;
margin-left: 5px;
/*background: url( {parse block="ipcontent_files"}/demo_images/button_bg.png ) repeat-x;*/
padding: 4px 7px 4px;
color: #7f96a3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 11px;
}

.topic_buttons li a:hover,
.subscribe:hover,
.add_link:hover {
background: url( {parse block="ipcontent_files"}/demo_images/button_bg.png ) repeat-x;
border: 1px solid #10435d;
text-decoration: none !important;
color: #fff;
}

.topic_buttons li img {
display: none;
}

.add_link {
position: relative;
top: -4px;
}

.post_form h4 {
font-weight: bold;
font-size: 15px;
margin: 5px 0;
}

.post_form fieldset > ul {
margin: 0 15px 15px;
}

/************************************************************************/
/* COMMENTS (& RELATED) STYLES */

#comment_list {
margin-top: 10px;
}

#comment_innerwrap .no-form {
margin-top: 4px;
}

.comment_wrap .comment {
line-height: 150%;
padding: 5px;
margin: 8px;
border-bottom: 1px solid #e7e7e7;
overflow: hidden;
}
.comment_wrap {
position: relative;
}

.comment_wrap .comment .photo {
float: left;
margin: 0 10px 10px 0;
}

.comment_wrap .comment h4,
.comment_wrap .posted_date,
.comment_wrap .comment .comment_content {
margin-left: 65px;
}

.comment_wrap .posted_date {
display: block;
}

.comment_wrap .comment h4 {
font-size: 1.1em;
margin-bottom: -3px;
clear: none !important;
}

.comment_wrap .comment h4 a {
text-decoration: none;
}

.comment_wrap .comment .comment_content {
padding: 10px 5px;
}

.comment_options {
float: right;
}

.comment_options li {
font-size: 0.8em;
font-weight: bold;
margin: 0 5px;
float: left;
}

.comment_wrap .rep_bar {
margin: -30px 0px 10px 0;
background: #e4ebf2;
font-size: 0.8em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 0 10px;
}

.rep_bar ul {
margin-top: 8px;
float: left;
}

.rep_bar ul li {
float: left;
}

.comments_title {
background: #d5dde5;
padding: 5px 10px;
color: #2b333d;
font-size: 14px !important;
border: 0;
margin-top: 15px;
font-weight: bold;
}

#leave_comment textarea {
width: 100%;
height: 70px;
}

.reputation {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.reputation {
font-weight: bold;
padding: 3px 8px;
margin: 6px;
display: block;
float: right;
}

.reputation.positive, .members li.positive {
background: #6f8f52;
}

.reputation.negative, .members li.negative {
background: #b82929;
}

.reputation.positive, .reputation.negative {
color: #fff;
}

.reputation.zero {
background: #dedede;
color: #6e6e6e;
}

.rte_emoticons { width: 100% }

/************************************************************************/
/* PAGINATION STYLES */

span.pagination.no_pages {
color: #acacac;
font-size: 0.9em;
padding: 10px;	
height: 15px;
display: none;
}

ul.pagination.top {
padding: 0 0 5px 0;
margin-bottom: 15px;
height: 18px;
}

ul.pagination.bottom {
padding: 5px 0 0 0;
margin-top: 15px;
height: 18px;
}

ul.pagination a,
ul.pagination li.active, 
ul.pagination li.pagejump,
ul.pagination li.total {
text-decoration: none;
padding: 1px 4px;
display: block;
}

ul.pagination li {
background: #fff;
font-size: 0.9em;
border: 1px solid #cfcfcf;	
margin: 0 2px 0 2px;
float: left;
}

ul.pagination li.total,
ul.pagination li.active {
background: none;
border: 0;
margin-left: 0px;
}

ul.pagination li.active {
color: #528f6c;
font-size: 1em;
font-weight: bold;
}

/* BBCODE */
strong.bbc				{	font-weight: bold !important; }
em.bbc 					{	font-style: italic !important; }
span.bbc_underline 		{ 	text-decoration: underline !important; }
acronym.bbc 			{ 	border-bottom: 1px dotted #000; }
div.bbc_center 			{	text-align: center; }
div.bbc_left 			{	text-align: left; }
div.bbc_right 			{	text-align: right; }
div.bbc_indent 			{	margin-left: 50px; }
del.bbc 				{	text-decoration: line-through !important; }
ul.bbc 					{	list-style: disc outside; margin-left: 30px; }
ul.bbc ul.bbc 			{	list-style-type: circle; }
ul.bbc ul.bbc ul.bbc 	{	list-style-type: square; }
ul.bbcol.decimal 				{ margin-left: 30px; list-style-type: decimal; }
ul.bbcol.lower-alpha		{ margin-left: 30px; list-style-type: lower-alpha; }
ul.bbcol.upper-alpha		{ margin-left: 30px; list-style-type: upper-alpha; }
ul.bbcol.lower-roman		{ margin-left: 30px; list-style-type: lower-roman; }
ul.bbcol.upper-roman		{ margin-left: 30px; list-style-type: upper-roman; }
hr.bbc 					{ 	display: block; border-top: 2px solid #777; }
div.bbc_spoiler 		{ 	}
div.bbc_spoiler span	{ 	font-weight: bold; }
div.bbc_spoiler_wrapper	{ 	border: 1px inset #777; padding: 4px; }
div.bbc_spoiler_content	{      }
input.bbc_spoiler_show	{ 	width: 45px; font-size: .7em; margin: 0px; padding: 0px; }
pre.prettyprint 		{ padding: 5px; background: #f8f8f8; border: 1px solid #c9c9c9; overflow: auto; margin-left: 10px; font-size: 11px; line-height: 140%; }

/* Quote boxes */
p.citation {
background: #d3e9dc url(http://localhost/ccs_111/public/style_images/master/citation_bg.png) no-repeat right;
color: #2b3730;
font-size: 0.9em;
font-weight: bold;
border-width: 1px 1px 0 3px;
border-style: solid;
border-color: #6fa987;
padding: 5px 8px;
}

div.blockquote {
background: #f3f9f6;
font-size: 0.9em;
border-width: 1px 1px 1px 3px;
border-style: solid;
border-color: #6fa987;
margin: 0px;
margin-top: 0px;
}

div.blockquote p.citation {
background-color: #e5d2e9;
color: #413544;
border-color: #ae7eb9;
}

div.blockquote div.blockquote {
background: #f9f5fa;
font-size: 1em;
border-color: #ae7eb9;
margin: -0px 15px 0px 15px;
}

div.blockquote div.blockquote p.citation {
background-color: #e9e7d1;
color: #474534;
border-color: #b2ab72;
}

div.blockquote div.blockquote div.blockquote {
background: #f9f8f3;
border-color: #b2ab72;
}

div.blockquote p.citation {
margin: 6px 15px 0 15px;
font-size: 1em;
}

div.quote {
padding: 12px;
} 

div.quote p.blockquote {
margin-left: -12px;
}

cite {
display: block;
font-weight: bold;
}

blockquote cite {
font-size: 1em;
}

/* Delete form */
#confirm-delete {
display: block;
margin-left: 12px;
float: left;
}
h2.maintitle {
font-size: 20px;
font-weight: bold;
}

.post_form p, .post_form fieldset {
padding: 12px 12px 4px 0px;
line-height: 170%;
}
    STEP 4:

    Next we need to create a call to the css file for IP.Content. We need to add this to the globalTemplate so it's called only when using the css (IP.Content) Thanks for Digial Photograph Forums for figuring this part of it out!

    • In the ACP
    • Click on Look and Feel
    • Click on the Skin you're using/editing
    • Click on the globalTemplate
    • Add this anywhere in the <head> tag
    Code:
    <if test="ipsRegistry::$applications['ccs']"><link rel="stylesheet" type="text/css" media="screen" href="{parse url="app=ccs&module=pages&folder=assets&page=cfcss.css" base="public"}" /></if>
    Be sure to change cfcss.css to match whatever you called your css file in IP.Content

    Done!
    TheRevTastic, Jul 10, 2010
    #1

  2. DavidMcHenry Senior Member

    Likes Received:
    49
    You should probably give credit to the original authors.
    DavidMcHenry, Jul 10, 2010
    #2
  3. Angelic

    Azhria Lilu Barry & Brad Bodyswapping?

    Likes Received:
    1,054
    Software You Use:
    IPB, XenForo
    Isn't that what he did there?
    Azhria Lilu, Jul 10, 2010
    #3

  4. DavidMcHenry Senior Member

    Likes Received:
    49
    No "A Walk In Faith" wrote the entire tutorial with collaboration from myself (Digital Photography Forums) on this subject. The line he credited with the thanks part was part of the original article.

    How to get IP.Content to look like your forums using the IP.Wrapper

    I dunno if you have access over there or not Azhria, but it appears as if he just went all copy and paste bandit style from their articles on IP.Content
    DavidMcHenry, Jul 10, 2010
    #4
  5. Angelic

    Azhria Lilu Barry & Brad Bodyswapping?

    Likes Received:
    1,054
    Software You Use:
    IPB, XenForo
    I'm not sure if I'm a member or not, but I'll go check it out.

    It's IPS forums, so I do have access.
    Azhria Lilu, Jul 10, 2010
    #5

Share This Page