startbootstrap / startbootstrap-clean-blog Goto Github PK

Hi, I am trying to include React on this theme...
Bootstrap is already replace and everything is fine, even the requirement with jquery.
Now I want to remove jquery also from the clean-blog.js
The option A is doing it with React 100%. (Is what I am going to do)
And the option B, for no expert users is to stop using jquery, and use Vanilla js.

Just that! good luck! .

When using Capybara to test a RoR application that uses this project's CSS, an error occurs as the sass gem parses the css.

The error is: ActionView::Template::Error: Invalid CSS after "...orm-group::not(": expected pseudo_expr, was ":first-child)"

I found reference to this same error on Stack Overflow from someone who encountered the problem when pushing a rails app that uses the blackrockdigital/startbootstrap-freelancer to Heroku. The post is located at http://stackoverflow.com/questions/29895297/sasssyntaxerror-invalid-css-after-orm-groupnot-expected-pseudo-expr

Hi David,
I am looking to provide some basic "starter repo's" for Metalsmith SSG, so I converted this template so it can be immediately edited and added to as a static site: https://github.com/metalsmith/startbootstrap-clean-blog. Thx to metalsmith's unopinionated nature, I had to alter almost nothing from the sources and was done in +- 2 hours. In the process of doing so, I wondered if perhaps startbootstrap could benefit from using metalsmith as the build pipeline: metalsmith can do all what the scripts files do and would allow users to write content in markdown and build more easily upon the existing template (and soon I will also add an esbuild bundler plugin).

I am aware static sites are not the only use case of these generic templates, but would argue the result is still more usable for any use case as the data is externalized. Also to be noted is that if you don't like the markdown, the content pages can also be pug templates (using @metalsmith/in-place)

It's also definitely a win for metalsmith because the alternative is (what I just did) forking the templates and manually keeping them in sync. Please clone the fork when you have some time and see if you like the added value it provides

The jekyll version used to have support for syntax highlighting.
StartBootstrap/startbootstrap-clean-blog-jekyll#8

It is gone.

Can you please add back the syntax.css file and include it?

Thanks!

This is regarding the Bootstrap navigation component (http://getbootstrap.com/components/#navbar-default)

I have added the following HTML to the right area of the navigation bar:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</li>

However, on utilising this drop-down link, the links within the drop down menu are not visible unless you scroll down on the page (and thereby the links remain invisible if the page doesn't scroll).

I am happy to submit a fix for this.

JS file used in contact page is missing in js/ folder.

Adding js file from here: https://reactiveraven.github.io/jqBootstrapValidation/ fixed the error

https://github.com/BlackrockDigital/startbootstrap-clean-blog/blob/master/scss/_bootstrap-overrides.scss#L5

You are changing the padding of all the buttons with this. Maybe the padding should be set on specific buttons only else it makes the input-group buttons not match in height.

In the file index.php the background image is loaded from the web: $backgroundImage = 'https://source.unsplash.com/1600x900/?nature';

How can I include here own pictures on my webspace instead of the url?

Do I need my own license for https://source.unsplash.com/1600x900/?nature'?

When I modify any of the original text the social media buttons disappear... Any solutions?

I need to disable BrowserSync can someone help please!

I'm trying to insert an interactive map in the body of the bootstrap theme around line 73. I noticed the map only renders if I remove the line < div class="col-lg-8 col-md-10 mx-auto" >, but when that happens, the map renders over the page. If I keep the line in, the map is not visible.

I would like to serve different images as background in the <header class="masthead"> element. The actual image would be chosen with media query on the device's size (basically, always the same figure but with different file size).
I was wondering if it's something you've already done, or if you have suggestions/templates.
Cheers

Opera Test platform:

Version: 12.18
Build: 1872
Platform: Win32
System: Windows 7

Letters like g, j etc. have their bottom parts cutoff in the form

I try to run node index.js and get this error in ther browser

Hey there! Love this blog theme! I use it at http://ashfurrow.com/ and I've enjoyed learning from your code.

One thing is that intro-header's background colour isn't respected, at least on Safari. It's always white. I think that I've narrowed the problem down to these few lines:

.intro-header {
    background-color: @gray; 
    background: no-repeat center center; 

The first line sets the background colour, but it's overriden by the following background: specifier. I switched the order of the two lines and it worked for me.

Thanks again!

Using the envelope icon from FontAwesome does not work. It just shows an empty disc (circle).

<li class="list-inline-item">
    <a href="mailto:{{ $owner_email }}" target="_blank">
      <span class="fa-stack fa-lg">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fab fa-envelope fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>

Hi, For my web page I am using only the contact form, But I am having an issue with it's implementation I got constantly the message. Sorry it seems that my mail server is not responding. Please try again later!
Any recommendation to make it work in hosting live. Thanks in advance.

As per definition this is not an issue. I like your template and it's simplicity. Can I use it for my personal site blog. nothing professional. I honor copyrights.

This was working yesterday but when I ran NPM start today I got this error. I am new to using NPM. Error: Cant find module C:\inetpub\wwwroot\Sites\blog\startbootstrap-clean-blog-gh-pages\index.js

I try to run node index.js and get this error in ther browser

When adding my own links to the social buttons, they only work if I right-click and choose "open in new tab". If pressed "normally" it re-directs to a blank page, URL still says page adress. When tested in Edge I get an error message saying "This content can not be displayed in a frame". As far as I'm concerned there are no frames on the page that would cause this. I've also tried creating links outside of bootstrap the same problem occur with these.

Dear developpers,

I am using the template designed for Github.
The contact form implemented in this template use formspree.io to redirect emails as github only accept static pages (not php).K

Nevertheless, I have the message "Sorry XXX, it seems that my mail server is not responding. Please try again later".
The fact is I do not received the email from formspree.io to validate my account. I try several e-mail accounts, I do not received this email.

Do you have ideas to fix this?

best

When scrolling up in IE the navbar is showing, but hiding again when stop scrolling. To fix this replace

// Navigation Scripts to Show Header on Scroll-Up
jQuery(document).ready(function($) {
    var MQL = 1170;

    //primary navigation slide-in effect
    if ($(window).width() > MQL) {
        var headerHeight = $('.navbar-custom').height();
        $(window).on('scroll', {
                previousTop: 0
            },
            function() {
                var currentTop = $(window).scrollTop();
                //check if user is scrolling up
                if (currentTop < this.previousTop) {
                    //if scrolling up...
                    if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
                        $('.navbar-custom').addClass('is-visible');
                    } else {
                        $('.navbar-custom').removeClass('is-visible is-fixed');
                    }
                } else {
                    //if scrolling down...
                    $('.navbar-custom').removeClass('is-visible');
                    if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
                }
                this.previousTop = currentTop;
            });
    }
});

with

// Navigation Scripts to Show Header on Scroll-Up
jQuery(document).ready(function($) {
    var MQL = 1170;

    //primary navigation slide-in effect
    if ($(window).width() > MQL) {
        var headerHeight = $('.navbar-custom').height();
        $(window).on('scroll', {
                previousTop: 0
            },
            function() {
                var currentTop = $(window).scrollTop();
                //check if user is scrolling up
                if (currentTop < this.previousTop) {
                    //if scrolling up...
                    if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
                        $('.navbar-custom').addClass('is-visible');
                    } else {
                        $('.navbar-custom').removeClass('is-visible is-fixed');
                    }
                } else if (currentTop > this.previousTop) {
                    //if scrolling down...
                    $('.navbar-custom').removeClass('is-visible');
                    if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
                }
                this.previousTop = currentTop;
            });
    }
});

Hello,

I see you include 2 css file, 1 for bootstrap, and one for the theme
I try to compile 1 CSS file only with Sass, but i can't get it to work
How to achieve it ?
Here is what i've tried :

@import 'node_modules/bootstrap/scss/bootstrap';

@import "variables.scss";
@import "mixins.scss";
@import "global.scss";
@import "navbar.scss";
@import "masthead.scss";
@import "post.scss";
@import "contact.scss";
@import "footer.scss";
@import "bootstrap-overrides.scss";

As you can see, the btn-primary color is not overrided (default bootstrap blue ?) :

Thanks for your help

I wonder if you could add the project link in the details of the layout. It is adapted to be used in the pelican

https://github.com/gilsondev/pelican-clean-blog

Os: OS X 10.12.6
Browser: Chrome 63

I know the template has a pager. Could you add pagination too?

How to add a dropdown navbar with several options?
I'm changing the html files but I have some difficulties to make it well.
Thank you.

Please implement a scroll up button with smooth scrolling in pages. This is I guess rather easy to implement. I am talking about buttons that appear after you start scrolling down and then pressing them gets you to the very top of the page.

Nothing I do can get the contact form to work. Have change the line in the PHP file with an email account that isn't gmail/hotmail. Form submits but never receive mail.

I like this template and I was disappointed when I found there was no comments section on the single post page. :(

Hello,

Is there any way to have separate files for css?
One to import bootstrap and one for bootstrap overrided values?

missing
vendor folder
--> bootstrap file
-->font-awesome file
--> bootstrap file

Has anyone been able to figure out why the script will not allow for responsive videos ?

Subject says it all.