In ckeditor editor and (ADDED) using Drupal 7
I click Html Source and paste:
<span><i class="fa fa-facebook"></i></span>
then ckeditor remove the a and the i elements to become:
<span></span>
The problem is that I can't put a i element inside an a element:
<i class="fa fa-facebook"></i>
How can I solve this?
I had a similar problem with the span element which I solved adding in the Custom JavaScript configuration:
config.allowedContent = true;
allowedContent means ONLY allow these entities. extraAllowedContent means allow these entities in addition to default ones. So you can use one of these:
CKEDITOR.replace('textarea_id', {
allowedContent: 'span i a'
});
Or
CKEDITOR.replace('textarea_id', {
extraAllowedContent: 'i a'
});
Related
I'm not that experienced with css and webprogramming to start with.
I want to enable the Content-Security-Policy header for my site but it warns me about a couple of lines for using inline stuff.
The lines looks like this:
<li><i class="fa fa-phone"></i></li>
<li><i class="fa fa-facebook"></i></li>
I'm trying to figure out how I would move the style= parameter to the css stylesheet.
In the CSS-file, can I just add something like this?
facebookbutton {
background: #2e39a4
}
phonebutton {
background: #9fa6ac
}
And then do something like this?
<li><a href="contakt" style="css-file-somehow" .....
Or is this done in a totally different way?
In HTML The tag will have class attribute
<i class="fa fa-facebook"></i>
The Class will have styles defined in CSS like below
.facebookbutton{
background:#2e39a4;
}
I use WordPress-editor and I want to display an icon within a "span"-tag like this:
<div id="question1" class="box-around">
<div class="box-left"><span class="fa fa-search" aria-hidden="true"> </span></div>
<div class="box-right">
<h3>Some Heading</h3>
Some Text
<span id="question1-answer"> </span>
</div>
</div>
Whenever I make a change in "visual", it removes the "span"-tag and looks like this:
<div id="question1" class="box-around">
<div class="box-left"></div>
<div class="box-right">
<h3>Some Heading</h3>
Some Text
<span id="question1-answer"> </span>
</div>
</div>
Oddly enough, the span at the bottom (id="question1-answer") is kept. Am I missing something? I already tried to set a whitespace " " within the tag, which will be converted to a " " (actual whitespace) after changing text in "visual" and used different tags as well.
Thanks!
Add this code in your active theme functions.php file.
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
A little more specific - allow empty tags if they have an id, name, class or style attribute:
function override_mce_options($initArray) {
$opts = '*[id|name|class|style]';
$initArray['valid_elements'] .= ',' . $opts;
$initArray['extended_valid_elements'] .= ',' . $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
Maybe I'm doing something wrong, but for me it works. Still I'm sure there's a better solution - it would be nice to be able to add only one specific tag to valid elements.
With the above answers (Val) the function will allow empty tags but this still may not work due to the theme structure or any page builder plugins you may have.
For example, I am using WPBakery page builder with custom functions. For my to allow an empty span with style (background for example) I added the above code to my functions.php and also placed a tag within the block.
The span block has a custom class .break to where the styling is created, I then set a display: none on the tag within the .break class so the styling remains but the extra space is removed.
<span class="break"><br></span>
.break br {display:none;}
Now the empty span tag should display as normal.
This is my component:
{{#link-to routeName class="list-group-item"}}
<i class="fa {{icon}} fa-fw"></i> {{text}}
{{/link-to}}
Which I use:
<div class="list-group">
{{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>
The expected html is:
<div class="list-group">
<a class="list-group-item" href="xxx">
<i class="fa fa-user fa-fw"></i> Personal details
</a>
...
</div>
But because ember wraps the components in a div, the bootstrap rules do not apply anymore and the list-group has a wrong style.
If I change the component tag to a, and remove link-to from the component template, I loose the flexibility of link-to - and I do not know how to set attributes (href, class) in the containing tag.
It seems I can not use an Ember component for this then? Or is there a way to tellink ember no to wrap my component in a div, or anything else really: in order for the CSS to work, the markup structure must not be modified.
I've not tried this myself but apparently you can create custom link-to components by extending Ember.LinkComponent. Something like this might work...
// app/components/icon-link.js
export default Ember.LinkComponent.extend({
classNames: ["list-group-item"],
icon: null,
text: null,
})
...
// app/templates/components/icon-link.hbs
<i class="fa {{icon}} fa-fw"></i> {{text}}
...
// wherever
{{icon-link 'my-account' icon="fa-user" text="Personal details"}}
Here's a related blog post which may help you also - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing
Is there a way to add HTML markup to the tooltip in materialize? I'm trying to arrange some data as definition list inside a tooltip. I tried to add it directly into the data-tooltip attribute but it doesn't seem to recognize the tags.
In materialize.js, around line 1258 make the following change to covert all tooltips to html.
// Change .text()
newTooltip.children('span').text(origin.attr('data-tooltip'));
// To .html()
newTooltip.children('span').html(origin.attr('data-tooltip'));
In the latest version you can use:
$(document).ready(function(){
$('.tooltipped').tooltip({delay: 50, tooltip: 'some text', html: true});
});
See http://materializecss.com/dialogs.html
In Materialize v0.100.2 is possible to use data-html attribute.
If is set data-html="true", then Materialize renders as $(...).html()
So this will be rendered as $(...).text()
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
And this as $(...).html()
<a class="btn tooltipped" data-html="true" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
I have the following setup:
<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group">
<button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button>
<button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<span class="fa fa-fw fa-caret-right"></span>
</button>
<ul class="dropdown-menu">
<li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>
</ul>
</div>
And I would like the icon in the dropdown to change from fa-caret-right to fa-caret-down when the dropdown list is visible. Is there any way to do this strictly with CSS?
You won't be able to change the attributes of HTML elements using CSS, you'll probably want to use jQuery instead.
Bootstrap has some nifty JavaScript going on, where you can execute your own scripts when boostrap elements inside your website is used.
Initialize dropdown using this inside jQuery.
$('.dropdown-toggle').dropdown();
When it's called you can hook different actions to it using the handles specified on the bootstrap docs.
on('show.bs.dropdown', function(){}); is just a fancy word for saying "on dropdown"
$('.dropdown-toggle').on('show.bs.dropdown', function () {
// All actions to fire after the dropdown is shown go here.
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
I know this is an old post, but I was looking for this solution and have one that works for me. You can target and change the pseudo element inside that span. When you click the button, doesn't the button add an open class? So, then the css would look like:
btn.open .fa-caret-right:before { content: "\e114"; }
Use the .open added to the button class.
The \e114 being the character of the down arrow.