Extent of HTML Usage?

[Ciel!]

I ran a board on Jcink, which could handle a lot of custom, intense html when used between [dohtml] tags. However here, there are no [dohtml] commands, and when I strip them and put the code into the 'Source' button field, the HTML functionality also gets stripped way down.

 

For example, accordian tabs, newspaper layouts, etc. all vanish, but it's HTML design that's nonfunctional.

 

Is this expected? Is there anyplace which walks through what HTML is handled and not? Is there a way to make [doHTML] usable? Any workarounds?

[Ciel!]

Adding in a good example of what I'm trying to find out...

 

HTML used on Jcink that worked perfectly between [dohtlm tags]:

http://rpg-directory.com/thread-82138.html (this is the exact template I was using)

 

Now, on my new site, taking out the [dohtml] tags and putting all of this html into the Source section, all I get is:

http://mythandmen.com/index.php?/topic/7-application-template/

 

I'm trying to determine if there's a common theme to what HTML can and cannot be used, if I'm doing something wrong in how I'm inputting the code, or what? Any insight appreciated!

[Nathan Explosion]

Reason your example appears like it does - the inline css in your example is stripped out....simple as that. If may be CKEditor's use of ACF (Advanced Content Filtering) or it may be IPS using htmlpurifier to clean that content out.

[Ciel!]

So, that leads to my next question...

 

Can I undo whatever is being done and NOT have it stripped out?

[Ciel!]

Ughhh, so I figured out how to add CSS Classes into the editor through the ACP so it should stop parsing those out, but now I'm still stuck here...

 

Attached screenshot 2 shows the layout I see when I enter code into Source, then click out of Source to view the result.

Screenshot 1 shows the code that -actually- posts once I hit the post button...all CSS still gets parsed out.

Screenshot 3 shows where I entered classes in the ACP, for reference.

 

Am I still missing something in translation between the input/preview and the posting, where it strips things?

[opentype]

5 hours ago, Ciel! said:

...all CSS still gets parsed out.

It would be better to show the code as BEFORE and AFTER. I don’t know what is supposed to be there or not right now. But I do see CSS classes like “app_title”, “app_inside” and so on. If that’s the code after posting, they are preserved, aren’t they?

I also don’t understand your ACP screenshot. What are these combinations like “.accordeon li” meant to do? That’s not a class name and therefore will probably do nothing. 

[Ciel!]

10 hours ago, Ciel! said:

Adding in a good example of what I'm trying to find out...

 

HTML used on Jcink that worked perfectly between [dohtlm tags]:

http://rpg-directory.com/thread-82138.html (this is the exact template I was using)

 

Now, on my new site, taking out the [dohtml] tags and putting all of this html into the Source section, all I get is:

http://mythandmen.com/index.php?/topic/7-application-template/

 

I'm trying to determine if there's a common theme to what HTML can and cannot be used, if I'm doing something wrong in how I'm inputting the code, or what? Any insight appreciated!

Hi @opentype. I just pasted back the original which shows all of the code that is -supposed- to be there, but is being stripped.

 

Are you saying I'm not including the right variables in that ACP CSS editor allowance section, maybe? I'm open to trying anything, lol. I'm stumped!

[opentype]

1 hour ago, Ciel! said:

Hi @opentype. I just pasted back the original which shows all of the code that is -supposed- to be there, but is being stripped.

So <div class="app_name"> becomes <div> ?

1 hour ago, Ciel! said:

Are you saying I'm not including the right variables in that ACP CSS editor allowance section, maybe? 

I haven’t used this section myself, but I would expect you are supposed to put just individual class name in there, so “app_name” for example, not “.app_name” nor “app_name ul li” or anything like that. 

[Ciel!]

Okay, tried that too.

 

Still the same thing! ALL of the header CSS code that SHOULD be:

<link href="http://fonts.googleapis.com/css?family=Wire+One|Geo|Russo+One|Economica" rel="stylesheet" type="text/css">
<style type="text/css">
#appheader {
width: 480px; 
height:300px;
background: #999; 
margin:0px auto;
}

#app_hover {
   width: 480px;
   height: 300px;
   position: relative;
   overflow: hidden;
}

#app_hover .app_inside {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
o-transition: all .5s ease-out;
   position: absolute;
   left: 0px;
   bottom: 0px;
   width: 480px;
   height: 300px;
}

#app_hover:hover .app_inside {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
o-transition: all .5s ease-out;
   top: -320px;
}

#app_container{
   height: 280px;
   width: 480px;
   padding: 30px 0px;
   background: #ddd;
   color: #111;  
   text-transform: uppercase; 
   font-family: 'Exo', sans-serif; 
   line-height: 100%; 
   padding-top: 10px;  
   text-align: center; 
   letter-spacing: 2px; 
   border:1px solid #111;
}

.app_title{
   display:block;
   font: 18px "Economica";
   line-height:16px;
   background: #14545a;
   color:#ddd;
   padding:10px;
   margin:0px auto;
   border-bottom:1px solid #131611;
   text-transform:uppercase;
}

#app span{
   display:block;
   width:50%;
   float:right;
   text-align:right;

}

#app_name { 
   margin-top:30px;
   padding:30px; 
   font: 31px "wire one";
}
#app_details {    
   font-size:9px;
   margin:10px 20px;

}
#app_quote {
   text-transform:lowercase; 
   font-style:italic; 
   font-size:9px;
   margin:10px 40px;
}

#app {         
width:480px;
   padding: 10px 10px;
   background: #111;  
   margin:20px auto 0px auto; 
}

#revo_cred {width:480px; margin: 0px auto 20px auto; font-size:8px; text-transform:uppercase; text-align:center; }
#revo_cred a {font-weight:bold; text-decoration:none;}

.app_info {
   background:#ddd; 
   color:#111; 
   padding:10px; 
   height:200px; 
   overflow:auto;    }

.app_foot{
   display:block;
   font: 18px "Economica";
   line-height:16px;
   background: #14545a;
   color:#ddd;
   padding:10px;
   margin:0px auto;
   text-align:center;
   text-transform:uppercase;

}

/* Vertical */
.vertical3 ul li {
overflow:hidden;
margin:  1px;
}
.vertical3 ul li label {
padding:10px;
}
.vertical3 [type=radio]:checked ~ label, .vertical3 [type=checkbox]:checked ~ label {
border-bottom:;
}
.vertical3 ul li label:hover {
}
.vertical3 ul li .content3 {
height:0px;
border-top:;
}
.vertical3 [type=radio]:checked ~ label ~ .content3, .vertical3 [type=checkbox]:checked ~ label ~ .content3 {
height:300px;
}</style>
<div id="app">
	<div class="app_title">

And yet, when I view the source once it's POSTED, all that comes out is:

<link href="http://fonts.googleapis.com/css?family=Wire+One%7CGeo%7CRusso+One%7CEconomica" rel="stylesheet" type="text/css">
<div id="app">
	<div class="app_title">

EVERYTHING is stripped, and yet I've put every div class and CSS class into the ckeditor CSS exemptions.

 

Anyone know what's going on?

[opentype]

Wait, you want to DECLARE CSS in a single post? That’s not a good idea. The point to allow CSS classes is so you can define those classes in your site’s theme CSS and call them from within the post. But a post is not meant to be a full website – unless that full website is embedded within an iframe in the post. 

[Ciel!]

It's not a full website, no. It's a template that uses CSS to create it, stylistically. The way old 1.3 version of IPB software (aka Jcink) even allows for this! There should be some workaround for us to be able to utilize/create templates that have styling design like I'm trying to do here...

 

Previously, it was as simple as [doHTML] tags!

[opentype]

3 minutes ago, Ciel! said:

It's not a full website, no.

Well, it’s the stuff that belongs in the CSS HEADER, not in a single post. 

3 minutes ago, Ciel! said:

There should be some workaround for us to be able to utilize/create templates that have styling design like I'm trying to do here...

You can do CSS styling all you want in your theme. It’s just to terrible idea to try that in a single post. 

[Ciel!]

This is a very, very common usage of CSS within the forum roleplay community. Honestly, I struggle to see the issue with a tag or a system that allows for CSS to be used within a single post.

 

I'm looking to see if there is a way to do this, and how, as I'm not currently understanding it in IPB 4.1.9.

[opentype]

You can do inline styles, e.g.:

<div style="background-color:#FF0000;">Text with Red background</div>

That should be preserved. But it’s still something you would want to avoid. If you want styling in your post that repeats across several posts, put it in your global declarations. 

[Ciel!]

Hmmm...well, this one template I'm trying to use (and one other one) I use over and over again. I will have to look into what to add from this template, and what to call in a post, so things work, if worse comes to worse.

[Morrigan]

@Ciel! I'll see what I can work out for you. Most likely you will need to enable HTML for your users and have them click on the "source" button in the top left of the editor and then paste their template in there. While not advisable for most places a roleplay should work just fine. There should also be a way that you can create your own button that will apply the CSS automatically.

One last alternative is to force everyone to use a template created by you but allow them, for instance, to enter in their own image into it.

Let me know if you need help with any of those options.

 

Edit: Apparently there's been a huge change (I was testing the HTML/CSS thing and I ended up having the same problem). I'll look into it.

[Ciel!]

Hi @Morrigan

 

Yes, I definitely need help. I'm struggling bad, and cannot get any of the templates utilizing CSS to work. Could we touchbase and see if you may be able to help? I can give you credentials as needed. I appreciate any assistance!

[Morrigan]

Yeah. I'll send you my Skype stuff and when I have a spare moment I'll see what I can figure out.

[Colonel_mortis]

7 hours ago, Morrigan said:

Most likely you will need to enable HTML for your users and have them click on the "source" button in the top left of the editor and then paste their template in there.

I would very strongly advise against enabling posting as HTML for anyone other than people that you trust - when you enable it, that means that content submitted by that user doesn't get sanitised at all, so they can add script tags that steal login data (though there are safeguards to make that more difficult), exploit browser vulnerabilities to install malware on the user's computer, or just redirect them to a different site.

However, it sounds like you're already using post as HTML, but it's still stripping the CSS tags from your post. I'm not sure why that's happening, but it suggests that there might not be anything you can do about it aside from embedding it in the site's style.