I have a problem with Druapl 8.2.1 text editor and CKeditor, system keeps stripping - removing classes from "
And example of this:
<div class="social clearfix"> </div>
System renders:
<div> </div>
I can't configure the allowed elements, that was only possible in previous versions (config.allowedContent = true;)
Any help would be greatly appreciated
Ok, well after breaking my head thinking and re thinking in all I have already done I just did what it was left to do.
Since there is no way to modify the allowedContent in Drupal version 8.2.x... what I did before it was to create a "New text format and editor" but I had selected the option "Limit allowed HTML tags and correct faulty HTML" and in the allowed HTML tags field I had all the classes I wanted to be accepted:
<div> <div class> <div id><a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p> <br> <span>...
I just unchecked the "Limit allowed HTML tags and correct faulty HTML" and keep the "Correct faulty and chopped off HTML" option checked, saved and voila!!
Now Drupal keeps all my div classes.
Take into consideration that in the option "Text editor" I had selected "NONE", it do not work if "CKEditor" is selected.
:)
Related
Hello everyone,
I have a question about the Bemit convention, just to be sure how you use it and see a possible convergence for all devs :
If you have, for example :
"div" object, with a class "o-item"
with inside 2 elements
"o-item__title"
"o-item__text"
and imagine you want an item inside the title called "icon", let's see if you agree with me :
<div class="o-item">
<h1 class="o-item__title">
<span>Some text here for title</span>
<i class="o-item__title__icon"></i>
</h1>
<p class="o-item__text">Text of item</p>
</div>
Are you shock by the element with the classname : " class='o-item__title__icon' " ?
I know that all of us call him " class:'o-item__icon' ", but sometimes we can need the convention above.
(Explanation of the proposition : o-item__title__icon = Title is a part of Item Object, and Icon is a part of Title of Item Object)
Tell me your opinion, please !
Best regards.
BEM quick start guide says:
An element is always part of a block, not another element. This means
that element names can't define a hierarchy such as
block__elem1__elem2.
In case you need an icon to be part of the title - just add one more Block (called .o-title) to your code, Icon will be an Element of the Block .o-title.
<div class="o-item">
<h1 class="o-item__title o-title">
<span>Some text here for title</span>
<i class="o-title__icon"></i>
</h1>
<p class="o-item__text">Text of item</p>
</div>
This is called mixes in BEM, you can check how it works on the BEM site, but in few words, it means that you can have global styling (font-size, colors, etc.) for .o-title and its icon, that will be used everywhere on your site AND you can have the .o-item__title class to be used for title positioning in .o-item Block.
I was just wondering how to put a hyperlink after the text:
If you require any further information on PCSE, please visit the FAQ section of the PCSE website.- (HYPERLINK HERE)
<div class="panel-body">
<p>If you require any further information on PCSE, please visit the FAQ section of the PCSE website.-</p>
</div>
Thanks
You are ending the <p> and then adding the <a>. If you include the <a> in the <p>, it should be fine.
<div class="panel-body">
<p>If you require any further information on PCSE, please visit the FAQ section of the PCSE website.- </p>
</div>
Well, if div was big enought, it shouldnt break from starts.
Next, dont use "-". Dash character is used to break the line
Instear, use a non breaking char : ‑
You need to put the <a></a> tag inside the <p>...</p> tag.
In your case the solution would look like:
<div class="panel-body">
<p>
If you require any further information on PCSE, please visit the FAQ section of the PCSE website.-
</p>
</div>
I'm building a template for listings in which 90% of the text is the same, and just the item title and description is different. I don't want to have to mess with or edit the text that is the same in each one but at some point it references in the title which is different.
Is there anyway in just HTML5 or CSS3 that I could pull the title used previously to dynamically fill the content out? Almost as if it was a variable?
Eg...
Title Here (to be used again)
Unique description here
Content Thats Always The Same
You are looking at Title Here etc etc etc.
No Javascript or other languages please - at if can't be done in a hacky way with CSS3 or HTML5 at worst the most basic javascript available, but mostly javascript is blocked on the site i'm coding for.
If we're to do it with very simple Javascript here is example code from project...
<div class="content-inner block4 s-text" style="margin-top:-25px">
<h3>Title of Item.</h3>
<p style="text-align: justify;">This is all about the item etc etc etc</p>
<div id="WhatsIncludedBlock">
<div class="content-inner block4 s-text">
<h3>What's Included?</h3>
<p class="para">
<ul><a style="text-decoration: none; cursor: default;"><img style="padding-right: 7px; vertical-align:-1%;" src="http://images.com/bullet2.png" width="10px" height="10px" float="left" alt="bullet point" class="hover"></a>Brand new "Title of Item" direct from supplier.</ul>
Where "Title of Item" in the second block should be automatically pulled in from the H3 tag (which is unique, not all H3 tags will be the same obviously, we'd need to add whatever variable tags required here to make it copy later on)
As others have said, not possible with HTML5 or CSS3 unfortunately, so I ended up using limited javascript which should pass.
<script language="javascript">
var title1
title1 = 'Title of Item';
</script>
Called with
<p><script>document.write (title1);</script></p>
Where needed.
In modern browsers you can. But there will be drawback: it would be impossible to seclect or copy substituted text. See browser support of css variable on caniuse. Currently it is supported in FF 31+, Chrome 49+, Safari 9.1+/9.3+. No any support in IE, Edge 13- and Opera 12.
Anyway, I see no reasons to refuse using some templating engine like doT.
h3::after {
content: var(--title);
}
<section style="--title: 'First title'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
<section style="--title: 'The second one'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
<section style="--title: 'And the last'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
For days now I try to figure out why I get this error from Markup Validation (link is actual validation of the site. Do not mind other errors in it, the top <p> tag is the problem for now, other errors comes from database content I yet to fix) and Google's webmaster tools "Fetch as Google" also hates it. I am sure it is something very trivial.
Validator says:
"No p element in scope but a p end tag seen." As you can see I have p element too.
Google crawler says:
I assume the bright red color is error, they should have a color legend... anyway also I do not understand what is the problem with itemtype as well.
The actual code:
<header>
<h1>
<a itemprop="url" href="http://www.rovarvadasz.hu/"><img itemprop="logo" src="/images/header_bg.png" alt="Rovar Vadász"></a>
</h1>
<div id="contact" itemscope itemtype="http://schema.org/LocalBusiness">
<p>
<ul>
<li>Telefon: <span itemprop="telephone">06 (1) 630-3958</span></li>
<li>Nyitvatartás: munkanapokon <time itemprop="openingHours" datetime="09:00">9</time>-<time itemprop="openingHours" datetime="16:00">16</time> óráig</li>
<li>Fax: <span itemprop="faxNumber">06 (1) 240-1546</span></li>
<li>Mobil: <span itemprop="telephone">06 (20) 422-4558</span></li>
<li>E-mail: info#rovarvadasz.hu</li>
</ul>
</p>
</div>
</header>
Your errors are all minor but are caused by:
1) The p tag is automatically closed by the client because it hits the <ul> tag, so in effect your statement is:
<p> ... </p> <ul> ... </ul> </p>
This is because List elements should not be sub-elements of Paragraph elements. So the client browser tries to fix this but has a left over </p>.
2) Your line 75 itemprop is NOT within your div but is in the anchor within your header element. Your itemprop="logo" is free and not within any itemscope.
3) I also saw other errors your elements where closed with /> which is unneeded on HTML5
I am working on a website on which i show restaurants according to either categories, food, etc. So I have a listing page where I list the restaurants as per the filters applied by the user.
I have a SEO question.
It is said that using heading tags<h1>,<h2>... tags should be used for titles, and important items.
So this is what I did.
...
<div class="item">
<h1>Title of Restaurant</h1>
<h2>Address</h2>
<p>Description</p>
</div>
...
which, for design changes, was later changed to
[EDIT]
As per #Guffa's response, there should be minimum <h1> tags possible on the page.
Since the Title of the restaurant is important and I want it to be recognized as a heading rather than simple text, I'll use <h3> for it.
...
<div class="item">
<h3>Title of Restaurant</h3>
<h4>Address</h4>
<p>Description</p>
</div>
...
The scenario that <h4> tag has no text but rather a child node with a link.
So my question is when my page is indexed (second case), will the <h4> be recognized?
Or will it be completely ignored and thought of as a hyperlink?
Is filling the heading text with a very high text-indent a smart idea?
Or should i use the anchor as it is and apply a title attribute to it?
The h1 tag should be used for important information about the page, so you should really only have one on the page.
Having a listing with h1 tags means that the spiders get conflicting information about what's important on the page, and will likely ignore all of them.
As the h1 should be something like the title for the page, it doesn't make much sense to have a link inside it, as that link would go to the same page.