startbootstrap / startbootstrap-agency

A one page HTML theme for agencies created by Start Bootstrap

Start Bootstrap - Agency

Agency is a one page, agency portfolio theme built with Bootstrap created by Start Bootstrap. This theme features several content sections, a responsive portfolio grid, modal windows for each portfolio item, and a working PHP based contact form.

Preview

View Live Preview

Status

Download and Installation

To begin using this template, choose one of the following options to get started:

• Download the latest release on Start Bootstrap
• Install using npm: npm i startbootstrap-agency
• Clone the repo: git clone https://github.com/StartBootstrap/startbootstrap-agency.git
• Fork, Clone, or Download on GitHub

Usage

Basic Usage

After downloading, simply edit the HTML and CSS files included with dist directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the index.html file in your web browser.

Advanced Usage

Clone the source files of the theme and navigate into the theme's root directory. Run npm install and then run npm start which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the package.json file to see which scripts are included.

npm Scripts

• npm run build builds the project - this builds assets, HTML, JS, and CSS into dist
• npm run build:assets copies the files in the src/assets/ directory into dist
• npm run build:pug compiles the Pug located in the src/pug/ directory into dist
• npm run build:scripts brings the src/js/scripts.js file into dist
• npm run build:scss compiles the SCSS files located in the src/scss/ directory into dist
• npm run clean deletes the dist directory to prepare for rebuilding the project
• npm run start:debug runs the project in debug mode
• npm start or npm run start runs the project, launches a live preview in your default browser, and watches for changes made to files in src

You must have npm installed in order to use this build environment.

Contact Form

The contact form available with this theme is prebuilt to use SB Forms. SB Forms is a simple form solution for adding functional forms to your theme. Since this theme is prebuilt using our SB Forms markup, all you need to do is sign up for SB Forms on Start Bootstrap.

After signing up you will need to set the domain name your form will be used on, and you will then see your access key. Copy this and paste it into the data-sb-form-api-token='API_TOKEN' data attribute in place of API_TOKEN. That's it! Your forms will be up and running!

If you aren't using SB Forms, simply delete the custom data attributes from the form, and remove the link above the closing </body> tag to SB Forms.

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the theme overview page at Start Bootstrap.

About

Start Bootstrap is an open source library of free Bootstrap themes and templates. All of the free themes and templates on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.

• https://startbootstrap.com
• https://twitter.com/SBootstrap

Start Bootstrap was created by and is maintained by David Miller.

• https://davidmiller.io
• https://twitter.com/davidmillerhere
• https://github.com/davidtmiller

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Copyright and License

Copyright 2013-2023 Start Bootstrap LLC. Code released under the MIT license.

startbootstrap-agency's Issues

FOUC

Before the background in the first above the fold section is rendered, there is a long delay during which the top section has no background image. It's long enough to be very noticeable, so it comes across as a FOUC.

The solution I found is to inline the image in index.html:

<header style='background-image: url("data:image/image/png;base64,

That's obviously sub-optimal, so I thought you should be aware. If you know of another fix or even just more understanding of the cause, I'd be interested to learn.

Broken: Auto-Scroll (Mouse Middle-clicking)

When auto-scroll is used, the site will lock up the mouse and cause the site to not beable to move.

Recreate Issue: Simply go to the site demo @http://ironsummitmedia.github.io/startbootstrap-agency/ and click the middle button of on your mouse's scroll wheel.

This mouse icon will turn into this (icon demands on OS/Browser)

Map image giving problems

Hi, the map image keeps showing on the screen as if the column was set to:

. Does anyone have a solution to this problem? And client mail doesn't seem to be getting through to me.

Scrolling in Modals Stopped working

When I open up one of the portfolio modals I can no longer scroll using the mouse wheel or arrows. Page up and down work just fine. I am using Chrome 43 and Win7 64. IE works just fine. When I open Dev tools in Chrome scrolling starts working instantly.

"Close Portfolio" button requires two touches on mobile to close.

Once the portfolio is opened on a mobile browser, the Close Portfolio button needs to be pressed twice to close.

Issue with classie.js?

I'm no js expert, so this may seem like a silly problem to be having, but I've been attempting to integrate this theme with a django backend. In the process of getting just the barebones static content to display properly, I hit one sticking point: a thrown error in classie.js, line 36, specifically: Uncaught TypeError: Cannot read property 'classList' of null. Obviously the classList property is returning null, probably from an inability to gather the classes of the navbar, but as I said, that's a wild guess since my js chops are pretty much nonexistent. Any insight?

How change the css code

Hi,

I can't change the image and the color.
How to do ?

thx

'border-bottom-color' css attribute on the navbar doesnt work

Adding border-bottom-color attribute to all the navbar classes doesnt work.

Most font size in rem, others in em

It would be a great idea if font sizes were movable according to device AND zoom level on the browser.
I suggest usage of rem for font size, and some em for specific cases (like empowering content with «large» class).
body { font-size:62.5%; } can be added to simply value human understanding (16px => 1.6rem on most devices)

see http://snook.ca/archives/html_and_css/font-size-with-rem

Responsive header background

I can not make visible the background of the header when accessed by mobile phone, appears only on desktop can assist me in what is happening?

Link where I put the project: http://eriverton.com.br/jsaude/

When I access the desktop in google chrome, and I do the responsive test, it appears normal, but when I access the phone directly, nothing appears.

The other settings are ok, only the background that does not appear.

Note, I'm Brazilian and I used the google traitor

Contact form on github pages

Trying to get the contact form working, changed the email on line 19 of contact_me.php however im still getting 405 method not allowed (not hosting locally)

add bower install

it will be great to support bower install

Nav bar, colors, portfolio modeals are out of whack on my live site; appears normal locally

Here's my site: www.dianawritescode.com
3 problems:

(1) You'll see that as you scroll down, the nav bar doesn't gain the black back-ground color like it is supposed to. That's what I see when I run my site on my local server.

But the live version doesn't have that, and so the nav bar links ("About", "Projects", "Contact", etc.) aren't visible when you scroll down because the font color is white, and it doesn't have its black back-ground color.

(2) The modals don't pop up when I click on each Project in my "Projects" section. Again, it pops up when I run the site locally, but not in the live version.

(3) The e-mail, LinkedIn and Github graphics in the "Contact Me" section, that are supposed to appear within each of the blue circles don't appear in the live version. Again, it appears when I run the site locally.

Help. Should I be updating something?

Instructions for the contact form

This is an amazing theme. Thanks a lot for building it! I tried getting the contact form to work, but I couldn't. I keep getting this message: "Sorry mike, it seems that my mail server is not responding. Please try again later!" Can you provide us with instructions on how to make it work? Thanks a lot!

Error in contact form

I'm using this template in a folder inside public_html and when I try to use the contact form, I get the error function from contact_me.js. Yet, if I create a simple PHP script to send emails, it works.

This is the folder structure
public_html
-- other non-related stuff/folders/websites/etc...
-- theme folder
-- index.html
-- js folder
-- css folder
-- all the other folders and files

I've checked the host PHP configs. It uses sendmail for emails and allows the POST method. What am I missing here?

Button and Navlink remain "focused" after being released

Hi,

while implementing the theme I noticed some inconsistency. For example:

• navigate to the Agency Live Demo
• in the top navbar click a button (team)
• after landing in the coresponding webpage section scroll up/down the page
• the original button (team) remains active even after leaving the coresponding section

I have found a js workaround but I am not sure how can it uploaded.

PS Behaviour observed in Chrome 40.0.2214.111 on Mac OS X 10.9.5 mavericks

Agency theme-nav bar problem on mobile devices

I am using the agency theme as a multi page theme but the problem I face is that when I switch to any page on my website other than the home page the navigation bar doesnt work. I dont know whats wrong. Can somebody help ?

Active link of the main nav

On firefox and Edge (not on Chrome) whe we click on a link in main nav, the active link is not set properly.

Potential migration to new org

I am opening this issue hoping to get into contact with @dorin1995. If you're out there, you own the organization name 'StartBootstrap' on GitHub and am wondering if you could relinquish it somehow. If you see this mention please get back to me! Thanks!

Do you have this template adapted for wordpress or do you know how to?

Thanks for your good work

anchors don't work properly with fixed navbar

If I make an anchor, (<a name="anchor"></a>), without the navbar, it shows properly, but the navbar covers the top 70px of the content. How can I make it so that the header won't cover the content?

gulp dev crashes and creates empty minified js files

vagrant@scotchbox:/var/www/public$ gulp dev
[03:25:05] Using gulpfile /var/www/public/gulpfile.js
[03:25:05] Starting 'browserSync'...
[03:25:05] Finished 'browserSync' after 65 ms
[03:25:05] Starting 'less'...
[03:25:05] Starting 'minify-css'...
[03:25:05] Starting 'minify-js'...
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 ----------------------------------
[BS] Serving files from: ./
internal/child_process.js:298
    throw errnoException(err, 'spawn');
    ^

Error: spawn EACCES
    at exports._errnoException (util.js:860:11)
    at ChildProcess.spawn (internal/child_process.js:298:11)
    at Object.exports.spawn (child_process.js:339:9)
    at module.exports (/var/www/public/node_modules/opn/index.js:79:24)
    at Object.utils.open (/var/www/public/node_modules/browser-sync/lib/utils.js:174:23)
    at Object.utils.openBrowser (/var/www/public/node_modules/browser-sync/lib/utils.js:164:23)
    at EventEmitter.events.service:running (/var/www/public/node_modules/browser-sync/lib/internal-events.js:45:23)
    at emitOne (events.js:82:20)
    at EventEmitter.emit (events.js:169:7)
    at /var/www/public/node_modules/browser-sync/lib/browser-sync.js:260:19

Disabling nav mobile toggle for tablet media queries

Wonderful theme!

I'm wondering how to untoggle the mobile navigation look (dropdown button) for tablet-sized devices (480px and up). Unfortunately, the mobile nav clashes with my tablet design of a site i'm working on.

I've read through all the jquery and js files, but can't seem to find where I could change this.

Many thanks!

SASS Support

It would be interesting to have the option of using "sass" instead of "less".

Contact Form not working with Github.io

Any solutions to the form via gh-pages?

logo and image

Hi,

I want to add a logo or image next to the text in navbar-brand before nav-item".
But i've a big image and not a little image.

How can i do it please ?

Update to Font Awesome 4.2

Need to update to Font Awesome 4.2

Add extra individual modal-content?

Sorry, might be stupid question. But I can't figure out what is the problem.
I could add more portfolio-hover to index.html but when I try to make the 7th+ modal-content,
it stopped to work. It only shows the modal-content from 6th.
What & Where do I need to adjust?

Many thanks!

Carousel

Hi, would you please send me how to add bootstrap modal carousel in the gallery? I've already tried with some examples but none of them works with this version of bootstrap css.

Error by clicking the portfolio hover

error when you click the hover portfolio, when I click on an item it opens, then some and keep the home screen darkened.

Link not returning to original colour

If you click on a link in the top nav bar e.g "Team" the text of the link will change colour but this will not return back to the original white colour even if you scroll back up the page.

Use with angular 2?

Hey, is it possible to use this template with angular 2 (or later) ?

Contact Form Does not Work

I have tried changing the email address couples of times, but it resulted the same.. I have no idea why.. Anyone experienced this before?

Placeholder text in Contact form

Any idea why you can't see any of the Placeholder text in Contact form from a laptop or PC? It's clearly visable on mobile browsers. Please take a look at the attached image.

elem is null in classie.js addClass with Visual Studio and Umbraco

Hi togehther,
I use the Agency Theme for Umbraco and i develop with visual studio.

I recognize a nullpointer exception when i scroll down in the homepage so that the navbar should change like it is in your preview solution:

cbpAnimatedHeader.min.js:

classie.js:

The result of this is a navbar, that isn't changing their background:

A jQuery Code fixed this problem, but then the "active" class in the navbar isn't working correctly:

Do you have a solution for this?

jQuery Code:
$(function () {
$(window).scroll(function(){
if ($(this).scrollTop() > 300){
$('.navbar-default').addClass('navbar-shrink');
}
else{
$('.navbar-default').removeClass('navbar-shrink');
}
});
});

Included .js and .css files:

I just have to say that I love this look.

That's all!

Missing style.css at WP install

The theme gives an error when installing the zipfile wordpress:

Unpacking the package…

Installing the theme…

The package could not be installed. The theme is missing the style.css stylesheet.

Theme install failed.

Media buttons missing in <!-- Team Section -->

Thank you for the great template - saved me a lot of time.

Could you help me figuring out what I am doing funnily? The media buttons in the Team Section shows up when running locally, but not when uploaded to the server. Servers error log shows nothing.

Thank you for any advise,

Christian

TypeError: 'undefined' is not a function (evaluating '$('body').scrollspy({ target: '.navbar-fixed-top' })')

Using this template with angular-fullstack generator.
PhanthonJS throws this error and the bg from the menu once scrolling start isn't working.

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  TypeError: 'undefined' is not a function (evaluating '$('body').scrollspy({
    target: '.navbar-fixed-top'
  })')
  at /Users/akrv/Documents/dev/testlab/client/app/app.es5.js:56

http://southpaw.in:9000

no error message when sending contact form

I don't get an error message when the return on the form is false. I tested this by commenting everything in contact_me.php and placing return false on line 1.

How can I fix this?

Contact form doesn't work

When I put my email address in "contact_me.php", HTML page looks like correct working by showing the message "Your message has been sent."

However, there's no email in my inbox.

Where should I fix for right working in contacts section ?

.navbar-brand is different in bootstrap.min.css vs bootstrap.css

Hello,
I just figured out why my logo at the top-left corner of the page in the navbar was not lining up correctly. I believe it has to do with the navbar-brand:

bootstrap.min.css version
.navbar-brand{
float:left;
height:50px;
padding:5px 5px;
font-size:18px;
line-height:20px
}

bootstrap.css version
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}

That little bit of padding made the difference in how my logo was aligned.

Please forgive me if this has been resolved. I have been staring at code for over 2 hours before I found the discrepancy. :)

Portfolio Modal Problem

Open/closing modal makes some parts of the website move. How do I fit it?
Hope to hear from you soon.

Thanks!

Gitlab yaml

Has anyone made this page work with gitlab pages?

Can't upload agency theme to wordpress: "CSS stylesheet missing"

Hi Guys, your Agency theme looks great! It's exactly what I'd like to work with, but I'm having trouble uploading it to my server for wordpress. I've tried through both the wp/admin interface and through my FTP, CPanel. Can you please advise what the issue may be and how we might go about fixing it?

Cheers,
M

I found the issue same with css here also after fork

https://akarsh.github.io/
After forking this repo
I see the same css issue similar to freelancer template

Select Form Validation

How do we do form validation on select dropdown field with custom error message ? Using the same approach as in input and textarea field doesn't seem to work.

Closing modals with esc-key doesn't work

The portfolio modals can't be closed by pressing the esc key. I think the problem is that you forgot to add a div with class modal-dialog beneath the portfolio-modal div.

Content not resized to full width on mobile in landscape mode

On my moto x play content is not resizing to full screen when in landscape mode. screenshot :

Menu dropdown on mobile safari not auto close

How to make Menu dropdown on mobile safari auto close after choosing? Thank you