I've succesfully installed the Facebook Like module by fekke.
However when i add this module to layer (for example homepage) nothing is showing up except the Title.
When inspecting the widget with firebug i get the following code (only copied the main elements, the full code is not shown belong due the length):
<div class="zone zone-tripel-second">
<article class="widget-tripel-second widget-facebook-like-widget widget">
<header>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
<fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" colorscheme="" font="Lucida Grande" action="like" width="450" show_faces="show_faces" href="http://localhost:30320/OrchardLocal/" fb-xfbml-state="rendered">
</article>
</div>
Related
My Stripe Form isn't showing properly. Here is the screenshot.
I included the stripe script tag in my head tag. Added the form and the css and javascript per instructions in stripe docs.
I thought maybe some other links or scripts are overwriting the stripe script so I tried to uncomment them, but nothing changed the stripe form.
I also made sure than my classes aren't overwriting each other.
<head>
...
<!-- Stripe -->
<script src="https://js.stripe.com/v3/"></script>
...
</head>
<body>
...
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
...
</body>
Figured it out. I just ended up making my own styles tho it took some time.
In a bootstrap website like www.teachyourselfpython.com, the welcome and the resources section (if you scroll down) are WHITE. That is, the background colour is white.
I have tried various things and it is not obvious to me where to put the code or what to put, to change that white background for each section (but not affecting the rest) to a light grey.
For example the 'Our resources' section on the page is BLACK, but I cannot see the code that turns it black.
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<p></br></br></br></p>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Resources</h2>
<h3 class="section-subheading text-muted">A Better way to learn Python.<h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Unlike other books, websites and resources on Python, our customisable and hugely comprehensive, not to mention pedagogically tested power points, can be used by both teachers (to teach) and students for independent learning.</p>
<p>On subscribing to a series, interactivity and embedded videos can be accessed, together with all the python task and challenge solution files.</p>
<p></br></br></br></p>
Sign Up Today!
</div>
<div class="col-md-6" style="text-align:center;">
<div class="jetpack-video-wrapper"><iframe src='https://www.slideshare.net/slideshow/embed_code/64063652' width='80%' height='288' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
</div>
</div>
<div class = "row">
<p></br></p>
</div>
</div>
</section>
Can anyone suggest the best method to make a very simple tweak (simply to the main index page) to turn the white parts of the background light GREY
Source code: www.teachyourselfpython.com can be used for demo (in terms of where to insert what)
I have tried adding this under each section
<!-- About Section -->
<section id="about">
<div class="container" style="background-color: #ce0818;opacity:0.8;">
but this turns the block 'red' (or whatever colour) and not the entire WIDTH of the website, this being the problem.
In context of our resources - you should put that background css to the section div not in container div
<section id= 'about' style="background:black;padding: 60px 0;
text-align: center;">
and to change the background to light grey write it in tag like
<body style="background:#cccccc !important;">
This is inline method which is not preferred much . You can use external css and write your css there and include that file in page
To use an external style sheet, add a link to it in the section of the HTML page:
example:
<link rel="stylesheet" href="styles.css">
and write
body{
background:#cccccc;
}
#about{
background: #24242a;
padding: 60px 0;
text-align: center;
}
or can include that css code in that page inside head tag example:
<head>
<style>
//write your style code here
</style>
</head>
teachyourself have that css written in css/main.css file
Using Framework7, I created a toolbar. It worked great for the iOS theme. However, when I tested it on the material theme, it was on the top. I found some Framework7 documentation that pointed me to the "toolbar-bottom" class. However, the page-content acted as if the toolbar was still on the top, and the padding-top property was incorrect. I would not like to hard code overrides on the Framework7 css.
Here is my structure:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="page-content">...</div>
<div class="toolbar toolbar-bottom">...</div>
</div>
TL;DR read the docs you dumb OP
See this documentation page. In order for the CSS to work correctly, the toolbar must be before the page-content. Your format should look like this:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="toolbar toolbar-bottom">...</div>
<div class="page-content">...</div>
</div>
I'm using Ratchet to build a prototype for a mobile app.
I have a
<nav class="bar bar-tab bar-footer">
...
</nav>
element in page A and page B.
When using data-transition from page A to page B (using push.js), the element disappears.
Another element
<header class="bar bar-nav">
...
</header>
is displaying in both page A and B.
Any idea?
Did you have
<nav class="bar bar-tab bar-footer">
...
</nav>
in
<div class="content">
block?
Try use this structure:
<header class="bar bar-nav">
...
</header>
<div class="content">
...
</div>
<nav class="bar bar-tab">
...
</nav>
Same issue, If I refresh page B, the menu will appear again.
Had a similar issues with ratchet v2.0.2.
My case: two pages A and B. When transitioning from A to B the footer would not display. A refresh on B would display the footer. Page A did not have a bar-footer, page B did.
Reading through the docs I've found the statement that bars are updated based on their presence in the original page.
So the workaround: make sure that all pages have the bar blocks when the transition is made with push.js
I am testing lungo framework, and by reading their examples (http://lungo.tapquo.com/howto/prototype), it does not work.
I am using their skeleton code:
<body class="app">
<section id="main" data-transition="">
<article id="main-article" class="active">
test.
</article>
</section>
<script src="components/quojs/quo.js"></script>
<script src="components/lungo/lungo.js"></script>
<script type='text/javascript'>
Lungo.init({
name: 'example'
});
</script>
</body>
I have no errors in my console. What can be causing the issue?
Thanks in advance.
If that's all of your HTML, then you're missing a whole bunch of CSS files, etc. Could you share a JS fiddle or longer code example? The way you're not getting any JS errors implies to me you may well be missing some CSS. Also, what version of Lungo are you using? How did you obtain it?
Lots of questions :) However, I created a basic Lungo JSfiddle a while ago - http://jsfiddle.net/otupman/vz59n/ - try that and see if it works. In the "External Resources" section you'll find the CSS & JS I'm including to make it work.
The simple code I'm using (as S/O won't let me post a JSFiddle link without code) simply looks like this:
<section id="main" >
<header data-title="JsFiddle Lungo">
<nav class="left">
<a data-icon="home"></a>
</nav>
</header>
<article class="active" id="first_article">
<strong>Simple Example</strong>
Second article
<br/>
Second section
</article>
<article id="second_article">
<strong>Second article</strong>
First article
<br/>
Second section
</article>
</section>
All of the CSS/JS files are coming from Lungo's example, for example, one CSS is http://lungo.tapquo.com/example/components/lungo/lungo.css