BS Callout Question
3 posters
Page 1 of 1
BS Callout Question
I found out you can do this with Bootstrap.
http://codepen.io/ShadesOfJay/pen/ogqKzy
So, I was wondering how I can make these into buttons somehow?
So, that when I click the button it makes something like this
[success][/success]
http://codepen.io/ShadesOfJay/pen/ogqKzy
So, I was wondering how I can make these into buttons somehow?
So, that when I click the button it makes something like this
[success][/success]
Re: BS Callout Question
what is a bootstrap thing?
Worst Nightmare- Forumember
- Posts : 107
Reputation : 2
Language : English
Re: BS Callout Question
@ShadesOfJay Something like this ?
You can use bbcode tables and add classnames or styles to them.
Thank you.
Title contentMessage content |
- Code:
[table style="width:100%;background:#FFF;padding: 20px;margin: 20px 0;border: 1px solid #5CB85C;border-left-width: 5px;border-radius: 3px;color: 777;"][tr][td][h4][color=#5CB85C]Title content[/color][/h4]
Message content[/td][/tr][/table]
You can use bbcode tables and add classnames or styles to them.
Please refrain from asking questions in other user's topics. If you have a question please open your own topic : https://help.forumotion.com/h7-post-a-new-topicWorst Nightmare wrote:what is a bootstrap thing?
Thank you.
Re: BS Callout Question
Okay. I like that. But, I was wondering like just the bar and text. No white background.... The BS callouts are without backgrounds. I have the CSS and HTML for them. I just do not know how to make it into a button and a BBCODE for the editor.
Re: BS Callout Question
Go to Administration Panel > Modules > JavaScript codes management > Create a new script
Title : Your choice
Placement : In all the pages
Paste the code below :
To create a custom button, you can paste this as much as you want in the script above :
open : Your opening tags
close : Your closing tags
image : The image of your button
I put the bootstrap classnames in there, so I'd assume all you'd need is the CSS. You may need to set the width to 100% for the tables.
Title : Your choice
Placement : In all the pages
Paste the code below :
- Code:
$(function(){$(function(){
if (!document.getElementById('text_editor_textarea')) return;
button({
open : '[table class="bs-callout bs-callout-default"][tr][td][h4]Default Callout[/h4]',
close : '[/td][/tr][/table]',
image : 'YOUR_IMAGE'
});
function button(o) {
var a = document.createElement('A');
a.className = 'sceditor-button';
a.innerHTML = '<div style="background:url('+o.image+')"></div>';
a.onclick = function() {
$('#text_editor_textarea').sceditor('instance').insertText(o.open, o.close);
};
$('.sceditor-button-fahide').after(a);
};
})});
To create a custom button, you can paste this as much as you want in the script above :
- Code:
button({
open : '[table class="bs-callout bs-callout-default"][tr][td][h4]Default Callout[/h4]',
close : '[/td][/tr][/table]',
image : 'YOUR_IMAGE'
});
open : Your opening tags
close : Your closing tags
image : The image of your button
I put the bootstrap classnames in there, so I'd assume all you'd need is the CSS. You may need to set the width to 100% for the tables.
Re: BS Callout Question
Hope this isn't asking too much, but could you explain the code in sections as to I am curious about how it works? I am a little bit confused.
Re: BS Callout Question
The function at the bottom of the main script is our constructor :
( I added some comments // )
We can then repeatedly call this function to create as many buttons as we want, like so :
Also, since we're adding the code to in all the pages, we want to make sure not to run the code when the editor isn't present, so we add a return condition :
The exclamation point inverts the condition, meaning it'll trigger if text_editor_textarea is null.
( I added some comments // )
- Code:
function button(o) {
var a = document.createElement('A'); // creates our link
a.className = 'sceditor-button'; // adds the sceditor button class
a.innerHTML = '<div style="background:url('+o.image+')"></div>'; // sets the inner content and image
a.onclick = function() {
$('#text_editor_textarea').sceditor('instance').insertText(o.open, o.close); // applies the tags on click of the button
};
$('.sceditor-button-fahide').after(a); // adds the button to the sceditor
};
We can then repeatedly call this function to create as many buttons as we want, like so :
- Code:
// creates a table similar to the bootstrap callouts
button({
open : '[table class="bs-callout bs-callout-default"][tr][td][h4]Default Callout[/h4]',
close : '[/td][/tr][/table]',
image : 'YOUR_IMAGE'
});
// just plain bold and italic
button({
open : '[b][i]',
close : '[/i][/b]',
image : 'YOUR_IMAGE'
});
Also, since we're adding the code to in all the pages, we want to make sure not to run the code when the editor isn't present, so we add a return condition :
- Code:
if (!document.getElementById('text_editor_textarea')) return;
The exclamation point inverts the condition, meaning it'll trigger if text_editor_textarea is null.
Re: BS Callout Question
So, where do I edit the tags? and how does the CSS interact with that? I am really confused. Lol.
Re: BS Callout Question
You'll add the CSS in your stylesheet.
Administration Panel > Display > Colors > CSS stylesheet
In the script, I've setup a button for the default callout :
In the code above you'll see :
open : The opening tags
close : The closing tags
image : The image for the button. Replace YOUR_IMAGE by the URL of your image.
When the table is posted, the CSS should style it.
Administration Panel > Display > Colors > CSS stylesheet
In the script, I've setup a button for the default callout :
- Code:
button({
open : '[table class="bs-callout bs-callout-default"][tr][td][h4]Default Callout[/h4]',
close : '[/td][/tr][/table]',
image : 'YOUR_IMAGE'
});
In the code above you'll see :
open : The opening tags
- Code:
[table class="bs-callout bs-callout-default"][tr][td][h4]Default Callout[/h4]
close : The closing tags
- Code:
[/td][/tr][/table]
image : The image for the button. Replace YOUR_IMAGE by the URL of your image.
When the table is posted, the CSS should style it.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum