I need to use an exotic font with tiny_mce, I edited the theme_advanced_fonts property and I am using the content_css property to link an stylesheets that defines my font family.
I can select the font from the menu but text is not displayed with that, so I have to edit the source html and the style property for the text to be rendered with the fontface I want.
Thats not a nice thing to ask to my clients.
What can I do?
I suggest you write your own plugin using a dropdown select list and updating the iframes head with the newly choosen css (font).
The code to set the css could look liek
iframe_id = ed.id;
with(document.getElementById(iframe_id).contentWindow){
var h=document.getElementsByTagName("head");
var newStyleSheet=document.createElement("link");
newStyleSheet.rel="stylesheet";
newStyleSheet.href="http:myerver.com/css/my.css";
h[0].appendChild(newStyleSheet);
}
Related
I'm trying to modify (by CSS) the dark gray "Contact Us" button that's at the bottom right side of the following site: coloraddicted.com.
This is a button created by an external app, so the code is inaccessible. I only have the following (external) page to refer to for the possibility of finding the right id: https://icf.improvely.com/icf-button.js?v=1479350309&shop=coloraddicted-com.myshopify.com
How can I find the "id" of the specific element in order to apply the
"overriding" CSS to it?
BTW, I have already tried several versions of the id's I see on the above mentioned external page but still haven't found the right one.
I can't remember all of them, but some I have already tried are:
#icf_button
#icf.click_button
#icf_contact_form button {
#icf_contact_form add_button {
Style Contact button by css has no effect, because right after user hover, js code excuted & override on.
You can put js code at the end of the body, to re-override on the library code (not the good way, but have to), example
let contactButton = document.querySelector('#shop-colorful-products-printed-on-demand-just-for-you > div:nth-child(38)');
contactButton.style.backgroundColor = 'white';
Demo image https://tinker.press/images/change-style-by-js-to-override-2017-01-17_090946.png
If you can't modify the button.js script you linked to, I don't think you can target this (reliably) in CSS. They style everything with that button using inline styles and just append it to body.
You could potentially use :nth-of-type (like https://icf.improvely.com/icf-button.js?v=1479350309&shop=coloraddicted-com.myshopify.com) but that would be super unreliable as I'm assuming you have a bunch of scripts and stuff on the site that dynamically append to the page, creating a variable number of divs as direct descendants of body. FWIW, nth-of-type(13) worked for me.
The element doesn't have an id, so you can't select it that way. But the site appears to be using jQuery, so you could try using :contains() to target the element based on its contents:
$( "div:contains('Contact Us')" ).css( "font-size", "2em" );
But that would target any div containing the text "Contact Us". You can use :filter to select divs that contain only the text "Contact Us":
$("div").filter(function() {
return $.trim($(this).text()) === "Contact Us";
}).css("font-size", "2em");
You could use jQuery to either apply CSS directly, or to give the element an id. This solution is kind of kludgy, but might work in a pinch.
Is there anyway I can access site CSS file and "ask" it to return the CSS style of the H1 element, or P or any specific element? (without primitive text scraping).
update: Server side solution also applicable
Pseudo code :)
CSSContent = (get CSS file content from external site)
$H1font-family = getStyle(csscontent, h1, get-font-family)
$H1font-size = getStylet(csscontent, h1, get-font-size)
It sounds like you want to override whatever is in the CSS. There are 2 ways of doing this (at least). One is by adding an additional class to the HTML tag; this solution is well outlined in another SO answer Overriding css style?
The alternative is to add inline style and add !important at the end, however the first solution is superior.
There is also the option of using e.g document.getElementsByTagName("H1") , which would identify all of a certain tag and then using that in a function to manipulate the style of that particular tag.
Hope this helps.
I'm using tinymce to edit some field in a web application.
I need to have an html result (after editing) with some specification.
For example: when I press enter tinymce create a new paragraph (that's ok, and I know this behaviour can be changed, but paragraph is ok).
What I need is a specific style to the paragraph be applied.
I saw there is the possibility to specify content_css, but this is a visual deformation of what is written in the edited html.
my need is when I press enter a paragraph with specific style (margin, alignmnent, ..) must be written directly in the edited html text.
e.g. <P style="margin-top:2px; margin-bottom:10px"> ...</P>
Is it possibile to define specific style to be applied to each html tags ?
I need this because after editing, the html content is used in another part of application, where I can not add additional style configurations.
Did you try that?
...
'content_css' : './path/to/your/styles.css',
...
styles.css
p {
margin-top:2px;
margin-bottom:10px
}
..I saw there is the possibility to specify content_css, but this is a visual deformation..
True, but don't forget that this visual deformation is extracted when you call tinyMCE.activeEditor.getContent().
Though, i'm not sure it will extract your specific styles applied to <p> (untested)
Check also here
UPDATED
Ok, i have another suggestion using HTML parsing using this.
$html = str_get_html("<div>add here your HTML from tinymce editor <p></p></div> test <p></p>");
foreach($html->find("p") as $p) {
$p->style = "margin:2px 0 10px 0";
}
$html_modified = $html;
The $html_modified should contain the <p> with margin applied.
Yes it is possible in tinymce. Just go to Tools -> Source Code of the editor toolbar. Write your HTML code with style there. You can try yourself.
We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.
Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.
The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();
If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas
I have a search page that is used in multiple places with multiple 'themes' throughout my site. I have a few divs that can have their background color changed based on a radio button selection (whether they are enabled or not). I can do this just fine by changing the css class of the div on the fly with javascript.
However, these themes could potentially change, and the background color is grabbed from a database when the page is created. Right now I do this in the C# codebehind:
string bgStyle = "background-color:" +theme.searchTextHeaderColor +";";
OwnerSearchHeader.Attributes.Add("style", bgStyle);
In the Javascript I need to change this color to make it look disabled, and when the user clicks back to this div I need to re-enable it by changing it back to its original color. But since I only knew this color in the code-behind, I don't know what it was in the Javascript.
So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Alternatively I could create a hidden element, assign it the 'enabled' style, and use that as a reference in the JavaScript when enabling my div. This seems like a hack but maybe its the easiest way. I'm still new to a lot of this, so I'd appreciate any suggestions. Thanks for the input!
So my thought was to create a css class in the resulting HTML page when the page is loaded with the background color I need. Then I could simply switch from the divEnabled and divDisabled class in the javascript. But I'm not exactly sure how to do that.
Yes, this is the anser; do this. In the <head> of your document add a <style> and put your CSS in there like so: (my Asp.NET is a little rusty so forgive me if it has some hicups ;) )
<style>
<!--
.divEnabled {
background-color:<%=theme.searchTextHeaderColor%>;
}
.divDisabled {
background-color:gray; /* or wtv */
}
-->
</style>
You could also put it in an external CSS file, which may be a good idea.
Then write some JavaScript to add/remove the class attribute (I'm going to ask that you don't call is the "CSS Class" ;) )
var ownersearchheader = document.getElementById("<%=OwnerSearchHeader.ClientId%>");
// changing the class attribute to `divDisabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivEnabled\b/, "divDisabled")
ownersearchheader.setAttribute("class", newClassAttribute);
// ... or,
// changing the class attribute to `divEnabled`
var newClassAttribute = ownersearchheader.getAttribute("class").replace(/\bdivDisabled\b/, "divEnabled")
ownersearchheader.setAttribute("class", newClassAttribute);
This is indeed a mouthfull, so, like #Haydar says, you might want to use jQuery, which offers easy-as-pie addClass(), removeClass() and toggleClass() methods.
You can use the jquery .toggleClass method.
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
Here is the link to the api doc.
Jquery API