Here is the demo link of the Blogger theme I will be using : https://shareme-templatesyard.blogspot.com/ and here are I posted full Template code https://pastebin.com/n13RQGnC
I don't have my own blog yet. I have tried to remove <data:post.snippet/> in order to show full posts instead of snippets, but I couldn't find it for this specific template. I'm not a coder, so any help will be very much appreciated.
Thank you.
Do you mean that you want to show full posts on the homepage?
If yes, do the following:
Go to Theme > Edit HTML
click "Jump to Widget"
select "Blog1"
locate & find this line <b:includable id='postBodySnippet' var='post'> .. </b:includable>
Replace the entire line to below...
<b:includable id='postBodySnippet' var='post'>
<div class='container post-body entry-content' expr:id='"post-snippet-" + data:post.id'>
<data:post.body/> </div> </b:includable>
click Save Theme
Refresh your blog page to see the changes.
In addition you may want to remove the "Read More" link at Contempo homepage or index pages, here's how:-
Go to Theme > Customize
select Advanced
find & select
Add CSS add below:-
.jump-link {
display:none;}
Related
I am having an issue when I pull data into the WordPress website.
I use the code snippet below to print the category description.
<p> {{ currentTax.activeTerm.description}} </p>
It works fine, it prints description but it is not HTML output. Links, bold or other tags I enter in category don't show in the output.
For example it prints like this
This is description of the car category. In order to check cars check this link <a href="cars.php" > Cars</a>
It doesn't display a link, it shows text. Is there any way to quickly solve this issue?
You can do this with innerHTML property binding:
<p [innerHTML]="currentTax.activeTerm.description"></p>
See: Sanitization and security contexts
refer dangerouslysetinnerhtml or use iframe to load the content. But I prefer to use iframe
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
I'm trying to create a simple tool to ease the addition of tags in blog posts (not sure if I can mention the website, therefore i won't do it now).
I've inspected the code and I've noticed that when a tag is added, a new span is created between the divs post-form--tag-editor and tag-input-wrapper
<div class="post-form--tag-editor" data-subview="tagEditor">
-> TAG CODE here !! <span class=""> ::before This is a tag </span> <- TAG CODE here!!!
<span class=""> ::before This is another tag </span>
<div class="tag-input-wrapper" data-js-taginputfieldwrapper="">
<div data-name="tagInput" data-subview="tagInputField">
<div data-js="editor-wrapper" class="editor-wrapper" style="position: relative;">
Right now, my tool is injecting the necessary HTML to create dynamic spans and add new tags. I can see my "injected" tags in the webpage but when I submit the post the "injected" tags do not appear in the live post.
Since I'm able to see the "injected tags" shouldn't I be able to see them too when my post is submitted and live ? Am I using the wrong approach to achieve what I want?
Thank you in advance !
As a preface, I am using PhoneGap. When I click on a Category Title, I have taken that title and set it in sessionStorage. Now, I want to set the "back" button of a new PhoneGap page (which displays some information contained in that category) to that Category Title. The HTML code is shown below. To be specific, I want to change the text of the "a" element within the "header" element.
I guess a part of my question is, does the fact that I am using PhoneGap change how I can access the anchor tag? I've been trying to set the back button text right after the Category has been selected/clicked on. I have tried multiple things like:
$("adviceBodyNavbarHeader a").text(sessionStorage.getItem("catTitle"));
but I can't quite get it working, and it is getting quite frustrating =/
<div data-role="view" id="adviceBody" data-title="Advice Body" data-show="GetAdviceBody" data-transition="slide">
<header data-role="header" id="adviceBodyNavbarHeader">
<div class="navHeader">
<a class="nav-button" data-view="adviceTitles" data-align="left">Back</a>
<span id="adviceTitle" class="navTitle"></span>
</div>
</header>
<ul id="advice-body" data-role="listview">
</ul>
</div>
Your selector is wrong. You try to select a html element called adviceBodyNavbarHeader.
What you want to do is this: $('#adviceBodyNavbarHeader').text(sessionStorage.getItem("catTitle"));
Hope it helps.
Edited my post due to late brain inactivity.
Describing a scenario:
I am going through the code mentioned below.B asically I am trying to figure out how to program so that
when a user clicks on "Use Template" button , it gets inserted into an editor.
Page 1:
There are lot of templates present
When a user clicks on the "Use Template" button on , it gets inserted into an editor that is present in
the next page (Page 2).
Please find the code snippet below for the first two templates I am going through:
<div id="templatesWrap">
<div class="template" data-templatelocation="templateone" data-templatename="Template ONE" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templateone&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_010.jpg" alt="templateone">
</a>
</span>
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
</div>
</div>
<div class="template" data-templatelocation="templatetwo" data-templatename="Template TWO" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_011.jpg" alt="templatetwo">
</a>
</span>
<div class="templateName">Template TWO</div>
<p>
Use Template
</p>
</div>
</div>
And so on ....
How does the link "https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" is inserting the template into the editor which is located on the next page? I haven't understood the token part and lot's of ID's present in the link
which I think are thereason behind inserting the template.
Has anyone come across such link before? Please advise.
Thanks
MORE CLARIFICATIONS:
Thanks for your answer.It did help me somewhat. I have few more questions:
Basically, I am using TinyMCE 4.0.8 version as my editor. The templates, I am using are from here:
https://github.com/mailchimp/email-blueprints/blob/master/templates/2col-1-2-leftsidebar.html
Some questions based on "Tivie" answer.
1) As you can see in the code for "2col-1-2-leftsidebar.html " it's not defined inside <div> tags unlike you defined it in <div> tags. Do you think that I can still
use it using "2col-1-2-leftsidebar.html " name?
2)I believe,for explanation purpose, you have included
`"<div contenteditable="true" id="myEditor">replaced stuff</div>`
and
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
in the same page. Am I right? ( I understand you were trying to make an educated guess here, hence
just asking :) )
In my case, I have a separate page, where I have written code for buttons just like you wrote in editor.html like the following:
<button id="btn">Load TPL</button>. My button is defined inside <div class="templateContainer">.
Also, my templates are defined in a separate folder. So, I will have to grab the content(HTML Template), from
that folder and then insert into TinyMCE 4.08 editor. (Looks like two step process). Could you elaborate
on how should I proceed here?
More Question As of Dec 27
I have modifier my code for the template as follows:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
Please note, I have added an additional id attribute for the following purpose.
If I go by the answer mentioned in the Tivia's post, is the following correct?
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
My editor is defined like the following on Page 2 (Editor Page).
<div class="field">
<textarea id="sTextBody" name="sTextBody" style="width:948px; max-width:948px; height: 70%"></textarea>
</div>
I am confused, like, the script tag I have defined is in Page 1 where I have defined all the template related code
and the Page 2(Editor) page is a different page. It's simply taking me to Editor page (Page 2) and hence not working.
Please advise where I am wrong.
Thanks
MORE QUESTIONS AS of Jan 2
The problem Iam facing is as follows. Basically, for first template , I have the following code.
Code Snippet #1 where "Use "Template" button is present:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
And the function suggested in the answer is as follows:
Code Snippet #2 where Editor is present:
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
Since, I believe I first need to reach to that page after user clicks on "Use Template" button, where the editor is located, I have defined Code Snippet #1 on Page 1 and have defined the Code Snippet #2 and <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> as the very first two script tags in the Page 2 ( Editor Page). But still when I click on "User Template" button on Page 1, it's just letting me to next page and not loading the template into the editor.
Am I doing something wrong here? Please advise.
P.S. The problem I feel is somehow the click function on Page 2 is not getting activated with the temp1 id button mentioned on Page 1.
Thanks
Well, one can only guess without having access to the page itself (and it's source code). I can, however, make an educated guess on how it works.
The URL params follows a pattern. First you have a token that is equal in all templates. This probably means the token does not have any relevance to the template mechanism itself. Maybe it's an authentication token or something. Not relevant though.
Then you have the template identification (templateOne, templateTwo, etc...) followed by a HubId that is empty. Lastly you have a goalComplete=200 which might correspond to the HTTP success code 200 (OK).
Based on this, my guess would be that they are probably using AJAX on the background, to fetch those templates from the server. Then, via JScript, those templates are inserted into the editor box itself.
Using JQuery, something like this is trivial. here's an example:
template.html
<div>
<h1>TEST</h1>
<span>This is a template</span>
</div>
editor.html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div contenteditable="true" id="myEditor">
replaced stuff
</div>
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
</body>
</html>
Edit:
1) Well, since those templates are quite complex and include CSS, you probably want to keep them separated from you editor page (or the template's CSS will mess up your page's css).
However, since you're using TinyMCE, it comes with a template manager built in, so you probably want to use that. Check this link here http://www.tinymce.com/wiki.php/Configuration:templates for documentation.
2) I think 1 answers your question but, just in case, my method above works for any page in any directory, provided it lives on the same domain. Example:
<script>
$("#btn").click(function() {
$("#myEditor").load("someDirectory/template.html");
});
</script>
I recomend you check this page for the specifics on using TinyMCE http://www.tinymce.com/wiki.php/Configuration:templates
EDIT2:
Let me explain the above code:
$("#btn").click(function() { });
This basically tells the browser to run the code inside the brackets when you click the element with an id="btn"
$("#myEditor").load("someDirectory/template.html");
This is an AJAX request (check the documentation here). It grabs the contents of someDirectory/template.html and places them inside the element whose id="myEditor"