Coder Social home page Coder Social logo

startbootstrap / startbootstrap-creative Goto Github PK

View Code? Open in Web Editor NEW
2.0K 99.0 3.1K 14.7 MB

A one page HTML theme for creatives by Start Bootstrap

Home Page: https://startbootstrap.com/theme/creative

License: MIT License

JavaScript 31.49% Pug 46.43% SCSS 22.09%
html bootstrap bootstrap4 bootstrap-4 bootstrap-theme bootstrap-template open-source free theme css

startbootstrap-creative's Issues

Changing Orange Color

Hi love your theme am just having trouble changing the orange to a green color.

Have spent 3 days on it to no avail.

Could you please assist.

Kindest regards

Aaron

Upgrade jQuery to avoid Prototype Pollution

Hi,
First, thank you for your work, it saved me a lot of time and fits perfectly to my needs.
It looks like there is a moderate vulnerability in the jQuery dependency.

Npm audit security report :
Moderate | Prototype Pollution
Package | jquery
Patched in | >=3.4.0
Dependency of | startbootstrap-creative
Path | startbootstrap-creative > jquery
More info | https://npmjs.com/advisories/796

Can you please update the jQuery dependency ? That would be awesome.

Have a good day.

PS : Same problem appears to some of your other repositories. I'll be reporting it when I see it.

Issue with Ad-Blockers

Hi, I am using this amazing template for a personal project, but, I find that when navigating through it, suddenly it jumps to top and the navigation bar goes transparent (I leave an OK image and an image with the issue).

1
2

To "fix" it, I had to disable adblock and popup blockers, weird. In order to avoid disabling this, I had to remove at the CSS (creative.css/creative.min.css) the following beginning lines:

body,
html {
  width: 100%;
  height: 100%;
}

Hope it helps to anyone with same problem.

A.

sticky footer

Thank you for the great theme.
I was trying to add ad sticky footer for the cookie notification bar but these styles seems not to work

html {
  min-height:100%;
  position:relative;
}
body {
  margin-bottom:60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

If I remove the position:relative from the html it's at the footer but not sticky.

modal window fade effect

If use bootstrap 4 modal window like

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

(example from https://getbootstrap.com/docs/4.0/components/modal/)

it's don't have any fade effect in that template in firefox browser.

None of the css files are working

I have been using this template for a project im working on. And the css wasn't working and a few days ago the css started working, like everything I changed actually starting showing. But today none of the css files are working again. (I deleted everything out of all the css files and my page still showed all the css)

P.S. I was wondering which of the css files I need to use, because there are multiple files)

Thanks in advance,

I

How to add images to gallery categories in the portfolio section?

Gallery section (portfolio): How do I configure the gallery to show images per categories only? Currently the gallery shows all images from all categories and not only the one that the user selects. How to make the gallery working to only show the pictures from a specific category and not all pictures from all categories? Any feedback is highly appreciated....

css missing msg on wp

I keep getting this message on Wordpress everytime I tried to download any of the free templates.

The package could not be installed. The theme is missing the style.css stylesheet.
I've tried everything but no avail

Top menu (Scrollspy) problem with Firefox

Hi.
If you try the demo with a browser other than Chrome you 'll notice that there is a problem with the top menu (Scrollspy).
I you play a little with that you will see that if you click on the "Services" the "About" href will be active, or if you click on the "Portfolio" the previous one will be active.
Anyway... something is going on with the active top menu.

Thank you.

Scroll Spy Is Not A Function

Im recreating this template in a project of mine but i keep getting the scroll spy is not a function error. Which is file is scroll spy referenced in.

The "About" Section

In this section below i am recreating it to be a "reviews" section and I would like to add a bxslider to add multiple reviews. How do i do this? Any help would be wonderful!

Thanks!
Emily

We've got what you need!


Start Bootstrap has everything you need to get your new website up and running in no time! All of the templates and themes on Start Bootstrap are open source, free to download, and easy to use. No strings attached!

Get Started!

Version 3

I am currently using the version 3 of this theme yet the branch for the v3 is gone. How can I use the version 3? I am using npm to install this theme.

Problem with background photo in the front page

I am using python 3.6 and django version 2.0.2.

When i incorporate the code into my app, the first page background is always missing (hence in white color). Others photos/ icons are just all fine.

Can anyone help?

How do you change a stroke color of hamburger icon?

I noticed
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)
shows a hamburger icon, but Is it possible to change three stroke colors?

Responsive background color of navbar breaks with external url

I added a list of social icons to the navbar and everything works fine with it until I fill the href tag with an url. At that point, the bar stops changing color when scrolled and always displays as transparent.

This is my code (working correctly):

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      <div class="container-fluid">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">G. Valentini</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
                              
        <div class="collapse navbar-collapse" id="navbarResponsive">                                    
          <ul class="nav navbar-nav navbar-right flex-row">
	    <li class="nav-item"><a href="#" class="nav-link px-2"><i class="fab fa-lg fa-twitter"></i></a></li>
             <li class="nav-item"><a href="#" class="nav-link px-2"><i class="fab fa-lg fa-youtube"></i></a></li>
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="ai ai-lg ai-researchgate-square"></i></a></li>
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="ai ai-lg ai-google-scholar-square"></i></a></li>
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="ai ai-lg ai-orcid"></i></a></li>              
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="fab fa-lg fa-github"></i></a></li>
	     <li class="nav-item"><a href="#" class="nav-link px-2"><i class="fab fa-lg fa-linkedin"></i></a></li>
          </ul>
            
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#news">News</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Research
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item js-scroll-trigger" href="#pols">Information in living systems</a>
                <a class="dropdown-item js-scroll-trigger" href="#robotswarms">Collective decisions in robot swarms</a>
                <a class="dropdown-item js-scroll-trigger" href="#kilogrid">Kilogrid</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#publications">Publications</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#stats">Stats</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

The above snipped works perfectly. When I populate the href field of the social icons with a url, for example:

<li class="nav-item"><a href="https://twitter.com" class="nav-link px-2"><i class="fab fa-lg fa-twitter"></i></a></li>

then the navbar stops changing color when scrolled. it seems this behavior only happens for large screen sizes while everything seems fine when the navbar is collapsed.

Making a post request for new article redirects to "Cannot POST /"

When trying to post a new article(story), I am redirected to a blank page that says "Cannot POST /"

I have the route set up as following:

  post '/stories' => 'stories#create'

and the controller action as:

def create
    @story = Story.new(story_params)

    if @story.save
      render json: @story, status: :created, location: @story
    else
      render json: @story.errors, status: :unprocessable_entity
    end
  end

not working on iphone

hello
the live preview works fine however the 1.0.2 available for download (so is the version available on github) does not work on iphone. works well on any other device.
any clue?
thanks

not responsive

I download code from github, UI looks good but its not responsive. Do I need to do anything extra?

Can't understand "collapsed" in index.html

Hi,

I am new to open-source and this is the first project that I cloned. I just wanted to draw attention to line number 43 in index.html. It is as shown

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>

I have doubt with class="navbar-toggle collapsed". What's the use of collapsed here? I searched, found about collapse but couldn't find anything related to collapsed. Am I missing something or is it just a typo?

Code line 92 different

Sorry! Just letting you know that the code line 92 is different in the preview and different in the downloadable code.

Get Started!

Thanks for the amazing theme!

header overlaps the navbar on IE11 browser

Header overlaps the top menu on IE11 browser.

Fix for IE 11 in creative.scss

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .my-auto .row { padding-top: 150px; } }

Header logo

Hi, i love the Creative theme, one question please... about adding a logo: i added a png (transparent, 24bit) logo with white writing (in creative.css-> .navbar-default .navbar-header .navbar-brand) and managed to make it change to dark writing as the sticky menu enter (creative.css-> .navbar-default.affix .navbar-header .navbar-brand),
but in mobile versions the background is white and then the default logo is not seen... (white on white). any solution for mobile version logo?
http://themarketplace.co.il/other/diamining/index.html#contact

Thank you very much!

Links to portfolio

Hello, there!
I would like to know how to put a link to the image in portfolio. I don't want to open it in a pop-up.
Thank you

Too little vertical margin in the Contact section in mobile

There is too little vertical margin between the Contact section elements on mobile resolutions.

See how the envelope icon is almost touching the phone number. There should be more margin between those elements.

bootstrap_template_margin_issue

Version: 5.1.4
Browser: Chrome 75 with resolution set to "iPhone X" from dev tools

scrollSpy is not a function

Getting this error:

Uncaught TypeError: $(...).scrollSpy is not a function creative.js:20

Uncaught TypeError: Cannot read property 'classList' of null classie.js:36

How to get over it??

Footer

This is really a great and simple theme. Are there any plans to add a footer to this?

Page not rendered correctly by Googlebot

Nothing bellow banner is rendered by Googlebot when the desktop version is fetched and rendered through search console. Menu is nor rendered by Googlebot. This has potential consequences for SEO and indexing of all information on the page. Could be related to Googlebot using Chrome 41 to render pages.
795c9f90-4d69-4117-8e82-21f5a45f16a5

Button not centering on all display widths

Upon adding a button to this section of the theme, the button is correctly centered in my preview window, but if I extend it just a bit or to full width, it jumps to the left. I've tried but I cannot get it to work for the life of me.

screen shot 2016-03-16 at 7 13 31 pm
screen shot 2016-03-16 at 7 13 42 pm

Change image source for the gallery

I'm currently trying to changes the contents of the image gallery to different images as well as create another popup that will display a div containing an Iframe and text underneath.

How would I go about changing the magnific-popup to allow for such things??

Kind Regards

How do you get this file to deploy on Heroku

This is probably a n00b question, but I've been working with your template and trying to get it deploy on Heroku and I can't get it to deploy. Heroku detects it as a Node.js file but all of the documentation on deploying a Node.js file on Heroku does not sync with what you have so I figured you have a simple fix on how to get it to deploy. It needs a server.js or Procfile...is this something only Heroku requires or can I get this to deploy elsewhere easily? Thanks!

Gulp Support

Are you guys planning on releasing a version using gulp?

SUGGESTION for JS change.

Hei,

First: nice template. Create job :)

I do have one suggestion due to fact how Silverstripe CMS handles certain things. In js/creative(.min).js file
Row 8:
scrollTop: ($($anchor.attr('href')).offset().top - 50)
I would replace with
scrollTop: ($($anchor.attr('href').substring($anchor.attr('href').indexOf("#"))).offset().top - 50)

Or to make it more simple, Row 6 I would change from
var $anchor = $(this);
to
var $anchor = $(this).attr('href');
and then row 8 would be:
scrollTop: ($($anchor.substring($anchor.indexOf("#"))).offset().top - 50)

The reason is to make sure the anchor+name (for example #about) is forced to use. In Silverstripe all hrefs automatically get / in front of ANY URL. Meanwhile, it will work on any system anyways, due to the fact that return is always #+name (#about).

Of course - second option is to change template and js to use some other custom attribute, like data-value or any other similar.

Help with font icons

Hi how are you? i'm having problems to show the font icons when the page is already uploaded.
In my localhost its everything ok:
image
But when it's online it doesn't show the icons and the console says something like "slow network" blabla
image
Your help is really valuable for me!
Gracias! Saludos! :)

Collapse conflict

In v4, it appears the scrolling effect in creative.js is conflicting with the bootstrap collapse feature. In the current commit of Creative, collapse works with button tags, but not anchor tags, since it utilizes the # urls too.

It appears to be caused by this new method in creative.js:
$('a[href*="#"]:not([href="#"])').click(function() {

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.