I'm attempting to automatically add a class to all links created when clicking the "link" button in tinyMCE. I've found this snippet in the tinyMCE docs:
// Adds a class to all paragraphs in the active editor
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select('p'), 'myclass');
I think this will be what I need if I change it to apply to anchors.
Question 1: Think this will work? Know of a better way to do it?
Question 2: How and where do I add this snippet to my theme? The theme I'm working with has a tinyMCE folder in the functions directory.
Thanks!
So I ended up doing a jQuery fix rather than going through tinyMCE. Code as follows:
jQuery(document).ready(function(){
$("#content a").addClass("link_color");
});
Related
Hello I have the following problem: I have my website made in Wordpress, and I have a 3D Cover Carousel plugin there, which shows me a gallery of photos in 3d. The thing is that when I click on the image I want the link to be opened in a NEW tab. In the plugin settings there are no such an option. The plugin html is a short code added to my page. So the only thing I can change is Additional css. So is there any options to make a link be opened in a new tab only with css?
As it was previously stated here, there is no way to do this with pure CSS.
If you can use JavaScript, you can target the item and add it the attribute target="_blank".
document.getElementById("element").setAttribute("target", "_blank");
document.getElementById("element").setAttribute("target", "_blank");
You can add this piece of js in your footer.php file.
Another method is to add a js file and include it using wp_enqueue_script function in your function.php file.
I am new at wix and editing a website and want to add css in a page. but not found any option for css.
Anybody know how to add custom css code in wix website?
Thanks
You can do this by embedding inline styles to every page, via creating a chunk of custom css code contained between <style> and </style>.
Go to your site's dashboard.
Click Manage Website on the left.
Click Tracking & Analytics.
Click + New Tool **and select **Custom from the dropdown.
Set up your custom code:
Enter your custom code.
Select the relevant domain. Note: This option will appear only if you have multiple domains.
Enter a name for your custom code.
Add Code to Pages: Select which pages to add your code to:
**All Pages: **Click the dropdown to select an option:
Load code once.
Load code on each new page.
**Choose specific pages: **Begin typing the name of the relevant pages and then click the checkbox next to the relevant page.
Place Code in: Select where the code snippet in placed in your site's code:
Head - as noted by #Daniel Gurtner, avoid this because it'll insert it BEFORE any of the inherent styles, which makes it mostly useless here.
Body - start
Body - end Note: I'd recommend adding your style chunk here to avoid having a delay effect on your loading
Click Apply.
Wix keeps on updating this but I have found where the place described in the most voted comment is for now. I don't have enough "reputation" to add a comment to the thread, hence why this is an answer.
Go to Settings and scroll to Advanced(the last section) and you can see Custom Code. The rest of the steps are the same.
Click Add on the left in the editor.
Click More → Embeds.
Drag the HTML iframe to the site.
Click your iframe and click Edit Code.
Then type:
<style>
/* CSS Code */
</style>
As of 2022, you can add it from your Wix Dashboard under Settings > Advanced > Custom code.
Click the Add Custom Code button. Enter your CSS in the Paste the code snippet here: textarea. Make sure to wrap it within <style type="text/css"></style> tags. Set the Code Type as "Essential" as it doesn't require user consent to load.
Note: You won't be able to see your CSS from the page editor nor Preview mode. You have to Publish it and view it from the frontend.
Wix Add Custom Code screenshot
Follow these steps to add CSS in Wix.
Go to your site’s dashboard.
Click Manage Website on the left.
Click Tracking & Analytics.
Click + New Tool **and select **Custom from the dropdown.
Set up your custom code:
Enter your custom code.
Select the relevant domain. Note: This option will appear only if you have multiple domains.
Enter a name for your custom code.
Add Code to Pages: Select which pages to add your code to:
If you need more help with Wix Web Development visit wix.com/forum.
I just tried it on 6th Sep 2021. Yes it is possible to add CSS & JS custom code.
At the same place of writing custom HTML code
For CSS code add,
<style type:"text/css"> CSS CODE HERE </style>
For JS Javascript code add,
<script> JS CODE HERE </script>
The steps in previous answers did not work for me. It seems the interface has changed.
The following steps work with the new UI:
Go to your site's dashboard
Click settings in the left sidebar
scroll down to the "Advanced" section
Click "Custom Code"
All carriage returns within the embedded code will show up as \n on the output, rendering the code non-functional.
You could also achieve this by setting the .html property of your object (#id) in Velo.
The following example adds a drop shadow to your object with id equal to #id:
$w("#id").html = "<p style='filter: drop-shadow(1px 8px 4px #4444dd)'>test</p>"
Below snippet shows the result in pure HTML.
<p style='filter: drop-shadow(1px 8px 4px #4444dd)'>test</p>
You can't. This is not a feature provided by Wix.
ref. other ref.
I have created my own drop down menu in html&css. So,anyone can guide me how, i can add my self made dropdown menu to my own custom WordPress theme ?
I don't want to use any Plugin because it would not give me same look as my own drop down menu.
Thanks In advance.
Its not clear if you already have any register_nav_menus. If you have any registered menu, you need to call it through wp_nav_menu and use you own css in style.css of your theme. After adding your css in style.css, you need to check this css hierarchy of Unordered List generated by wp_nav_menu.
You can also check Menu_Item_CSS_Classes section in wp_nav_menu documentation.
If your theme don't have any register_nav_menus, add this in your functions.php file to make it more managale in future.
Pretty straightforward. Somewhere in your theme you should see a function called wp_nav_menu:
<?php wp_nav_menu(); ?>
This is the default navigation. Replace it with your own HTML, and add the CSS to the style.css file. If there's any JavaScript, you'll obviously need to include that on the site, too.
I'm creating a Wordpress App. It consists on using custom fields on custom type, for managing personal projects.
My issue: I want to add the admin editor (tinyMCE) on frontend. Considering that I can have many textareas that will begin TinyMCE editors. So, I used this code:
PHP (on theme functions.php):
// TINY-MCE EDITOR ON FRONTEND
add_filter('wp_head','add_tinymce_editor');
function add_tinymce_editor(){
wp_admin_css('thickbox');
wp_enqueue_script('wp-tinymce');
wp_enqueue_script('tinymce');
wp_enqueue_script('editor');
add_thickbox();
}
JS (on theme single-projects.php):
jQuery(document).ready(function(){
// EDITORS
tinyMCE.init({
mode : "specific_textareas",
theme : "simple",
editor_selector :"tinymce_enabled"
});
});
On JS I set the "editor_selector" with a Class for all textareas that will begin tinyMCE editors. I cannot assign a single ID for each textareas because these can be 4 or 5 or 6, or more!!!
HTML: (on theme single-projects.php):
<textarea name="new-task-description" id="new-task-description"
class="tinymce_enabled required"></textarea>
Each textarea is present on Jquery UI Accordions.
Now, my problem is, on Firebug (or browser console) I get this error:
tinyMCE is not defined
What's wrong?
thanks in advance!!!
With Wordpress 3.3 you can use wp_editor() which is a lot easier.
http://codex.wordpress.org/Function_Reference/wp_editor
The right way to include scripts is add_action('wp_enqueue_scripts', 'tinymce_editor');
If tinymce is not defined the file tiny_mce.js has not been loaded on the page. Make sure the file gets loaded eigther directly or with the means wordpress offers.
Wordpress Tiny MCE editor and WP own editor both has button for <blockquote> . if we select any text and press this buttom then it wraps that text with <blockquote>.....</blockquote>.
I want to change this output to this
<blockquote><div class="quote_start"><div></div></div><div class="quote_end"><div></div></div>...................................</blockquote>
How can i do this manually or is there any wordpress plugin which can do the same?
I want to change behaviour of blockquote button in bot editor TinyMCE and WP own html editor?
I'm not sure you can use this to add that many divs but tinymce's valid elements config parameter does allow you to replace tags.
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements
For instance:
tinyMCE.init({
valid_elements : "blockquote/div[class=quote_start]"
});
Would replace all blockquote tags with a div with the quote_start class.
A better way might be to ignore tinymce here and write a filter for the functions.php file of your theme. http://codex.wordpress.org/Plugin_API/Filter_Reference/the_content. Find all the instances of blockquote and replace it with the code you want.
Maybe adding your own button could also be an option?
Some starting point could be this:
http://www.deliciousdays.com/tinymcebuttons/
and/or this:
http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor/addButton
hope it helps? Greetz, t..
If you want the same functionality in two different editors, you're probably better off writing (or looking for) a Wordpress filter that can replace the code. There's this one but it doesn't seem to be able to handle regular expressions (which you would need to replace HTML tags). Maybe this one can do what you need: Text Filter Suite
Getting both TinyMCE and Quicktags requires mods in two places. Here's how to do the Quicktags:
http://website-in-a-weekend.net/extending-wordpress/diy-wordpress-unraveling-quicktags-wordpress-plugins/