startbootstrap / startbootstrap-creative Goto Github PK
View Code? Open in Web Editor NEWA one page HTML theme for creatives by Start Bootstrap
Home Page: https://startbootstrap.com/theme/creative
License: MIT License
A one page HTML theme for creatives by Start Bootstrap
Home Page: https://startbootstrap.com/theme/creative
License: MIT License
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
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.
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).
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.
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.
Would be great to see a webpack version of this
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">×</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.
All the dependencies will not load. Dependencies include bootstrap, jquery, footawesome, etc..
My research shows that its a permission issue. How can i gain permission from a forked repo?
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
When I turn on SSL, I get the error;
Mixed Content: The page at 'https://anthonybirone.com/#contact' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'. This request has been blocked; the content must be served over HTTPS.
You guys need to have a way to detect if page is loaded in HTTPS or not and alter the script string based on that.
I am using Github for Hosting.
But my latest changes in Index.html are not visible on my website - vipulyadav.com
I changed the min-height of the navbar from 50px to 100px. the menu then collapses no matter what screen size i'm on. Then, I change it back to 50px, the menu stays collapsed. what??
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....
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
Firefox in PROD, gives error : TypeError: e(...).offset(...) is undefined[Learn More].
Looks like a known issue with Firefox. Works fine on Chrome
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.
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.
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
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!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.
After 'npm install' when I use command 'npm start', it deletes the 'vendor' folder.
I think it should have been back using 'function modules()' in gulpfile.js.
Also, any changes made to scss are not reflected to either of 'creative.css' or 'creative.min.css' file.
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?
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?
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.
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
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
Can you please advise how I change the on hover orange over the portfolio images?
Kindest regards
Aaron
Gallery section (portfolio): How to make the gallery working to only show the pictures from a specific category and not all pictures from all categories?
I download code from github, UI looks good but its not responsive. Do I need to do anything extra?
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?
Sorry! Just letting you know that the code line 92 is different in the preview and different in the downloadable code.
Thanks for the amazing theme!
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; } }
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!
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
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??
This is really a great and simple theme. Are there any plans to add a footer to this?
Can anybody help.. I want to put carousel instead of that header image..
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.
The creative template is incredible.
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
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!
They would be a nice addition because a single picture doesn't say very much about a project.
Are you guys planning on releasing a version using gulp?
Would be nice to change from using node modules to bower modules.
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.
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() {
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.