Background
I am trying to add a Facebook Comment box into my Mediaskin php file, but when I use the code below the box appears on every page.
Code
<!-- /debughtml -->
</div>
<br />
<center><div class="fb-comments" data-width="800" data-num-posts="100" data-colorscheme="dark"></div></center>
<!-- /bodyContent -->
Question
How can I make the facebook comments appear only on read pages (pages with index.php?title= in the URL, but without &action=edit at the end of the URL?
Related
I'm in the process of updating my website and I am trying to optimise the website as much as possible. One of the things I'm trying to do is remove excess text and duplicate text/code.
I have around 20 pages and each page includes a button that pops up my privacy policy using the function below.
The page also imports .css for the pop up which includes mark up and script.
<!-- Begin Footer -->
<div class="mainText">
//site name etc
</div>
<div class="popup" onclick="myFunction()">
<div class="privacyButton">
Privacy Policy
</div>
<span class="popuptext" id="myPopup">
<!-- Policy Content -->
//html content like <p></p> and <strong> etc</strong>.
<!-- End of Policy Content -->
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<!-- End of Footer -->
How can I place this in a separate file and load it from the external file to save me having so much text on every page?
I've tried THIS to use a jQuery, but it doesn't work because of the nature of the pop up.
I've also tried placing only the content (which would still be better than nothing)
<!-- Policy Content -->
//html content like <p></p> and <strong> etc.
<!-- End of Policy Content -->
...in a separate .html file using
<link rel="import" href="/movedContent.html">
...but upon loading, it doesn't adopt the css from the popuptext class.
I'm unsure where to go from here or what to include in any external file in order for importing this on each page. Thanks.
Im trying to add a link to the infobig2.jpg image in my gallery section. I would also like to add another slide once you enter the gallery. My website is www.24kdesignz.com in the infographic section I want the pic to link to http://vs0022.businesscatalyst.com/
<img class="img-responsive project-image" src="assets/images/info.jpg" alt=""><!--Project thumb -->
<div class="hover-mask">
<h2 class="project-title">Infographic</h2><!--Project Title -->
<p>Illustrated | Icon Driven</p><!--Project Subtitle -->
</div>
<!--==== Project Preview HTML ====-->
<div class="sr-only project-description" data-images="assets/images/infobig.jpg,assets/images/infobig2.jpg" >
<p>Infographics – An Infographic is a visual representation of data and information that is presented through a series of design-centric graphics. Its sole purpose is to educate viewers on a topic in a simplistic way – with information that is easy to digest.</p>
</div>
</article><!--End Project Item -->
After inspecting your site it looks like you have a lot of plugins. The portfolio project section from your site's theme is injected using a jQuery library called "Masonry." Inside of your projects assets >> javascript folder there's also a file called "scripts.js" - this is where the theme author injects the images into the portfolio project items.
Solution: Images can't be links. You have to wrap it in an anchor tag. In your specific case, you're going to have to do it using jQuery.
Assuming your HTML markup looks something like this, add a unique id selector to the image you want to become a link:
<li id ="image2">
<img id ="uniqueId" src="/assets/images/infobig2.png">
</li>
Then use jQuery to grab it and wrap it in an anchor tag:
$("#uniqueId").wrap($('<a>', {
href: '/assets/png/' + data.uniqueId
}));
The other solution here would be to just add a link under the image using plain html if you don't feel comfortable editing your theme's jQuery code.
I have a (complex) toolbar panel which can be on top or bottom of a page (it's configurable). Is there any way to avoid copy/paste the toolbar in bottom of the page?
Here is code in copy/paste way:
<div id="topToolbar" data-ng-show="configs.toolbarPosition=='TOP'">
<!-- toolbar -->
</div>
<div>
<!-- inner page contents -->
</div>
<div id="bottomToolbar" data-ng-show="configs.toolbarPosition=='BOTTOM'">
<!-- exactly copy/pasted toolbar -->
</div>
Keep the tool bar html in separate file, and include where ever you need.
<ng-include src="'views/toolbar.html'"></ng-include>
Also if you needed add a controller for all functionality. This will help you to reuse your code.
you can check how components are made
and make component <toolbar></toolbar>
I want to add pages to a blog (in Blogger - https://www.blogger.com/home), but I want a different format and style for each of the pages on the blog.
I tried going to [Blog Name] -> Pages -> New page but the pages that are made uses the template of the main page, including the sidebar and header. Honesty, it looked no different from a blog post.
Can I create a completely blank page and add in all the HTML myself? Or is this not possible with Blogger?
Thanks!!
It is possible, but does require you to go into the editor and do some work.
Blogger uses xml, so you can write conditional tags. So above all of your content you could put the conditional tag, write up all of your HTML and then wrap the whole blog within the else statement.
Within the specific markup you'll need to include the whole tags for the content, like:
<!-- page title -->
<h1><a class='post-link' expr:href='data:i.link'><data:i.title/></a></h1>
<!-- page content -->
<data:i.body/>
otherwise you won't see whatever content you added within the page editor.
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/yourpageurl.html"'>
<!-- specific site markup -->
<b:else/>
<!-- All of the normal markup -->
</b:if>
Look here.
I want to update the BC page title tag so that it updates and shows the correct page title on every page. Right now it's in the website template and it needs to stay there for ease for customer editing.
{tag_pagetitle} Displays current page title. Must be used within the title tag of the template.
eg.
<!-- TemplateBeginEditable name="doctitle" -->
<title>{tag_pagetitle}</title>
<!-- TemplateEndEditable -->