I might be asking the wrong question (I'm not a coder), but I'm attempting to paste HTML and the inline stylesheet into the text-side (HTML-side) of the Wordpress Visual Composer to create an email layout, and the finished product of that is the entire stylesheet written out above the un-styled HTML layout, so I'm assuming inline stylesheets are not supported in this composer.
Some back story for clarity, I'm using the plugin 'Download After Email' which only provides the standard Wordpress visual composer in order to create the email a user receives once they 'sign up'. This seemingly limits me to either jazzing up some text a little bit like I was using Microsoft Word (which isn't sufficient for a brand-focused business), or using raw standalone HTML, which isn't really sufficient for a properly formatted template.
Are there any plugins which may assist in adding CSS styling here that will work once it's displayed externally to the website, i.e. in an email browser?
Judging by the image, you have a regular editor but not Visual Composer, and this is very good because this is the only right direction! You cannot create email templates using the constructor (Visual Composer) since creating an email template requires special old school knowledge (Tables, inline styles) and clean markup. I advise you to take a ready-made template and change it to your own.
Example: https://colorlib.com/etc/email-template/3/index.html
What you need to know:
You need to use html tables
You need to use inline css
Use full src to display images (https://yoursite.wp/.../demo.jpg) the link you can get from the media post
Not recommended:
To use css styles in the header if you are interested in Gmail App support:
https://templates.mailchimp.com/resources/email-client-css-support/
Custom fonts
Visual Composer and any other constructor
Addition:
If you can use the shortcode system I recommend creating a mini plugin for you:
plugins/my-custom-emails [Root directory of new plugin]
plugins/my-custom-emails/my-custom-emails.php [Main php file of plugin]
plugins/my-custom-emails/emails/ [Directory for for all your templates]
plugins/my-custom-emails/emails/template1.html [First demo template]
my-custom-emails.php
<?php
/*
Plugin Name: My emails
Description: My custom emails
Version: 0.1.0
*/
define('MYCELS_DIR', plugin_dir_path(__FILE__));
add_shortcode( 'myemails', 'MYCELS_SHORTCODE' );
function MYCELS_SHORTCODE($attrs) {
if(empty($attrs['id'])) {
return 'ID required';
}
$ID = $attrs['id'];
$PATH = MYCELS_DIR . 'emails/'.$ID.'.html';
if(file_exists($PATH)) {
return file_get_contents($PATH);
} else {
return 'File with '. $ID . ' ID not exists';
}
}
template1.html
<div>
Template
</div>
And using:
[myemails id=template1]
Id = template name
If you want something very customisable this plug-in would work,
https://en-gb.wordpress.org/plugins/wp-html-mail/
It’s very good and would recommend!
With this you have full control over CSS and the HTML also comes with templates and has so much more control for what you need!
Related
I have a blog written in Python + Django.
Before I started use of WYSIWYG editor, to create a blog post preview I manually added custom html tag <post_cut/> and used python slice to show only a preview. It allowed to avoid issues with fixed length for preview or breaking html tags.
Now I added Django-CKEditor and it removes all html tags which "it doesn't understand".
I tried to do something with configuration (allowedContentRules, format_tags and etc.) but no success.
The questions is how to manage "post-cut" and how to do this using CKEditor.
P.S. it would be awesome also to have button for that.
Found the answer by myself.
You need to use extraAllowedContent if you want to add some extra tags.
Also found how to add custom button by creating a custom plugin.
But still looking for good solution that will utilize django-ckeditor
CKEDITOR_CONFIGS = {
'default': {
'extraAllowedContent': {
'post_cut': True,
},
# ...
# (other options)
}
}
I've been wanting to implement site-specific rich text css classes but have come onto an issue. I can't change anything global in this environment. The tutorials require me to change an EditorPage.aspx file. I am not able to do this. Is there any other way to set up site specific css classes for the rich text editor?
I'm on Sitecore 7.5.
Thanks!
This is very similar to a previous Stackoverflow question which I answered about Multtiple RTE Class Styles, which I followed up with a blog post which includes details about loading site specific css styles in Sitecore rich text editor.
Create a new EditorConfiguration class inheriting from Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration and override the SetupStylesheets() method. Then register that new Configuration Type in the 'core' database against your HTML Editor Profile, then set the source of the RTE field in your template to your to your Rich Text Profile.
In your SetupStylesheets() method you need to use an xpath query to get the list of site specific css files:
protected override void SetupStylesheets()
{
string id = WebUtil.GetQueryString("id");
string query = "/*/content//*[##id='" +id+ "']/ancestor::*[##templateid='{root-guid}']//*[##templateid='{style-folder-guid}']/*";
IList<Item> stylesheets = Sitecore.Context.ContentDatabase.SelectItems(query);
foreach (Item item in stylesheets)
{
this.Editor.CssFiles.Add(item["Stylesheet"]);
}
base.SetupStylesheets();
}
My Yii application has a particular section called 'Edit Profile' . It's a pretty data heavy section in the way a lot of data is pulled from db for this one .
However the problem is that I have tab pagination in this section . Because only this section uses tabs on the website I did not include the related CSS/Javascript files in the main layout header .These have been referenced in the view file itself . Because of this the tabs takes time to show up and the tab titles appear as a list first (for a second or two) and then get distributed into tabs with the correct UI . This is of course unacceptable behaviour . Is there any way to selectively include related js/css files into the header tag for this particular view or should I include it in main layhout file even though it won't be used in a lot of other places on the website thus possibly slowing down other pages .
Just specify the position for the file.
In your view where you are including the js or css :
// for js
Yii::app()->clientScript->registerScriptFile('url_of_file',CClientScript::POS_HEAD);
// for css
Yii::app()->clientScript->registerCssFile('url_of_file');
Recommended documentation: registerScriptFile() , and registerCssFile()
You can create your own layout in the layouts folder , where u can include all the required jquery scripts and css. U can then call your layout in the controller.
public function actionDoSomething(){
$this->layout = 'mylayout';
$this->render('myview');
}
I am using Text::MultiMarkdown to create HTML files from MultiMarkdown documents.
I would like all links to open in a new tab.
Is there a way to configure this behavior using a CSS template, or directly in the MultiMarkdown document (without explicitly writing HTML around each link in the MultiMarkdown document)?
Definitely not in CSS - that is only concerned with the way the elements appear, not how they behave.
It should be possible to add <base target="_blank"> to the head of the HTML document (using XSLT), but that's on par with adding it to each link.
In HTML and/or JavaScript you can only initialize the opening of a new window. The user is in some UAs able to force the opening of a new window as a new tab instead. But you can not control this behaviour.
In theory, you could do this with CSS3: http://www.w3.org/TR/css3-hyperlinks/ - however no common browser ever implemented this. The reason might be that it is a common believe that the choice of when a new window or tab is opened should be left to the user alone.
You can't do this in CSS but you can use the source.
You could subclass Text::MultiMarkdown and provide your own implementation of _GenerateAnchor, something similar to this might work:
sub _GenerateAnchor {
my ($self, $whole_match, $link_text, $link_id, $url, $title, $attributes) = #_;
if($url
&& index($url, '#') != 0) {
$attributes = $attributes ? $attributes . ' target="_blank"' : 'target="_blank"';
}
return $self->SUPER::_GenerateAnchor($whole_match, $link_text, $link_id, $url, $title, $attributes);
}
This is a bit kludgey as _GenerateAnchor isn't part of the public interface. You'd also need to use the OO interface rather than just the markdown function.
You could also contact the Text::MultiMarkdown author and see if he'll add a flag for this sort of thing. Maybe you could provide a patch to get things started.
You can also use HTML::Parser and friends to parse the HTML that comes out of Text::MultiMarkdown and add the target attributes yourself.
I want to wrap a mediawiki site inside another site - using the header.inc and footer.inc files that the rest of the website's html files use.
I'm not familiar with php, is there a 'masterpage' file somewhere I can put them in?
Your best bet would be to create a custom skin, or edit one of the default skins, such as monobook. They control most of the basic presentation code. Here is one short tutorial on creating a custom skin. The files usually live in the /skins/ folder; if you skim through one, you can find where the HTML begins and ends.
You can include another file using the PHP include function, like so:
<html>
...
<body>
<?php
include 'header.inc';
?>
...
For future reference in the LocalSettings.php you can also prevent users from using any other skin.
$wgDefaultSkin = 'myskin';
$wgAllowUserSkin = false;
$wgSkipSkins = array( "chick", "cologneblue", "monobook", "modern", "myskin", "nostalgia", "simple", "standard" );