I am trying to render a complex XML document as webpage(FF only) using a stylesheet. In one of the tag the content itself is part of the a attribute value
<projectMember>
<Role roleType="CHANGE ADMINISTRATOR III"/>
</projectMember>
<projectMember>
<Role roleType="CHANGE ADMINISTRATOR I"/>
</projectMember>
I need to display the value of roleType in Firefox using css selectors. I dont want to use XLST or Javascript as modifying XML source is last option.
You might be able to use "content" and the attr css function.
To see a similar solution used to print the href of a link after the link in print media, goto http://www.alistapart.com/articles/goingtoprint/ and scroll down the page to the heading "Printed links"
it might look something like this in the end:
content: attr(roleType);
Related
I am trying to add a style attribute to an img tag in HTMLText markup view. But every time I save or publish, the attribute is stripped.
I found this documentation ("Setting options" - about half way down). So tried that in my /app/_config.php file and did a /dev/build:
HtmlEditorConfig::get('cms')->setOption(
'extended_valid_elements',
'img[style]'
);
After doing the above, img src was stripped. Because according to this documentation the tag rules completely replace existing rules for that tag. Which in Silverstripe's case are found in /vendor/silverstripe/admin/_config.php. The point is, this confirms the above config is definitely being used by Silverstripe.
But the style attribute is still being stripped out on save.
I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor.
Currently what happen when we put iframe in ckeditor.
<iframe src="http://www.lipsum.com/"></iframe>
It convert that iframe tag with a img tag with some special attribute and URL.
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">
Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.
<iframe src="http://www.lipsum.com/"></iframe>
So that If I want to perform a task in iframe so I can do that inside the editor.
Thank you in advance
Addition 2:
I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.
It should like this
Not like this
Finally, I have to make one line change in ckeditor.js at line number 8194:
return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);
To
return p;
So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that.
It is a little hack I used for this functionality.
Thank you Darko for help on this.
Problem solution:
In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:
return a.createFakeParserElement(b,"cke_iframe","iframe",!0)
into:
return (b)
Due to security reasons that option is by default disabled and this is the way how you can override it.
That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.
Addition:
Go on:
admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).
When you post iframe in ckeditor now make sure you don't post it inside any other tag.
ex.:
<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>
that will not work.
<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>
that will work
Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.
Addition 2:
From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).
Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.
ex:
<iframe src="http://www.lipsum.com/"></iframe>
is converted in:
<p><iframe src="http://www.lipsum.com/"></iframe></p>
You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.
So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).
Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:
Addition 3:
Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.
In new library there is an option you can try:
admin/config/content/ckeditor
There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
Go on admin/config/content/wysiwyg and select that library
When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.
I'm looking to create a content type which includes a field for an image file - simple enough. However, I want this image file to be displayed as a background-image. Do I have to create a custom node.tpl and include the image source in an inline style="background: url(sites/all/themes/theme/images/image.png);", or is there a more elegant way to do this, possibly including writing to a stylesheet from the field using JavaScript?
You can use drupal_add_css in a hook_node_view function, node preprocess script, or node template to add a style directly:
$css = "#bg-img {
background: url(/sites/all/themes/theme/images/image.png) left top no-repeat;
};"
drupal_add_css($css, 'inline');
Or, you can use a drupal setting and then reference it in a jquery script; look up drupal_add_js usage & examples with the 'setting' option:
drupal_add_js(array("moduleName" => array('bgImg' => $absolute_url)), 'setting');
Reference in jQuery using Drupal.settings.moduleName['bgImg']
IMO adjusting the node.tpl.php as you describe is perfectly sensible. Using drupal_add_css will let you set a background image on an element outside the node, eg the entire page. I've used jquery when I've needed more advanced positioning/resizing options.
Instead of reading documentations and digging into codes, just use Field Formatter CSS module (https://drupal.org/project/field_formatter_class) and get it done in minutes. It's a gem that you will find yourself using it over and over. It lets you add css classes and other options to each field in the "Manage display" of your custom content type. As for this particular case of serving a user-uploaded image as background, here is a screen capture. Add a class into the Field Formatter Class field, and then you should be able to reposition and resize further with css and jquery.
I'd like to display some XML in the browser, but add some custom color styling, etc., to certain attributes of tags. I am able to get an essentially blank external sheet recognized:
<?xml-stylesheet href="/css/testresult.css"?>
But this seems to have the effect of making the browser display the XML as if it were HTML, i.e. it only displays tag content text and not attributes. Is there any way to get the "raw" XML display view, but with just a few tweaks to styling?
Using Firefox if that's relevant.
The thing is, when Firefox displays XML files, it uses it's own parser, so I don't see how that could be influenced by your stylesheet, as the only function of the parser is to display XML in a readable way.
Maybe you can use XSLT you do what you need, but that would require some additional work.
http://www.w3schools.com/xml/xml_xsl.asp
Have yet to see any indication it's possible.
I am wondering if there is a way to use custom css for some specific text on my confluence page (not using embedded HTML).
Sorry this is an old question, but for the sake of people who search for an answer to this question: you can use span or div macros and use the custom css to apply whatever style you want to their contents.
If necessary, you could create custom div and span classes to allow for multiple styles to be applied to selections of text.
EDIT: Here is an example of the wikimarkup you could use to do this
{div:class=customCss|style=float:left; margin-right:50px}
Custom text in a div
{div}
So you can either use the div class and apply a style in the custom css for the confluence space, or you can use an inline style for the div.
You can do this ...
{composition-setup}import.css=/download/attachments/123456789/custom.css
{composition-setup}
That's if you've stored a custom.css file as an attachement. You'd obviously need to replace 123456789 with the actual attachment number.
You can also link CSS on an external site (with an absolute URL), but if you have any automatic URL formatting, that tends to mess it up everytime you change the document.
I use a User Macro that renders the $body in HTML. Then I can put whatever HTML tags I want in the wiki page within the user macro tag.
There could be a way to reach what you want to reach, but there is some information missing (from you). What confluence allows is the following:
If you have admin rights to the confluence wiki space, you could add there a custom style sheet that applies to all wiki pages. Else you could follow the answer of Mus.
Then you should analyse the wiki page in source form. So load a wiki page you want to style, and look at the source of that wiki page in your browser. Depending on your browser, this may be CTRL-U or something similar. Here in chrome, the page menu says View page source.
Try to find the defining selector for your wiki text you want to style in some form. A reasonable hack could be:
Find a wiki style that is not used by others. I have experimented with ~subscript~.
Find the HTML tags that are built by using that style. In my example, it was <sub>subscript</sub>.
Use your custom style sheet to style text of that style.
However, this may change the text where the style is used for its original sense :-(
You can specify custom CSS in your Confluence page via the div and span macros.
In recent Confluence versions (4.0 and later), you can do this as follows:
Type {div} or {span}. On typing the closing brace }, auto-complete will convert the text to a macro.
Left-click on the frame of the macro and select the Edit button
Enter the custom CSS into the Style field and close the dialog
Enter your text into the macro frame. It will then have the style you specified.