site is Live!! i love this program!

Bootstrap Studio Help
1

http://www.victorianvintagespeedway.com/index.html

couple of questions though! can i stop the first tag saying "index"? its just annoying!

i loaded a couple of carousels with images in the gallery section, and i liked it (the pics are bigger!) but i need to be able to put an on/off button on there, is that possible?

its a bit rough, particularly the headings are smudged, i only used yellow text because the last site had it, not real keen on it though!

please if you have a chance to have a look, let me know how to improve it! best wishes and thanks JO - (53 year old with NO training in web building, and doing this for the club for my hubby! ie, please be a little gentle!!)

2

This link: http://www.victorianvintagespeedway.com Points to your index too without the /index.html behind it. If you want to completly remove the /index.html from your site, just point to this http://www.victorianvintagespeedway.com instead of index.html.

3

You also need to select your images to be to be responsive as on xs breakpoiints the images are very wide.

4

Not a bad job for someone with no experience at all doing websites. Here's my suggestions.

Lose the puke green/yellow text color. Go for a much lighter banana yellow type rather than the neon type and that should work well.

Definitely do as Chris suggested and set all your photos to be responsive for 2 reasons. First it will do as he mentions, adjust the size. Second it will center them within their confinements so your gallery sliders won't be off centered like they are now. You can do this in the Options panel in the top right where you add your links and settings to some of the parts of a website. Photos always have a checkbox for adding responsive settings to it. Always do this for your photos to help them be placed and sized better.

On your Cars and Drivers page, there are no links for the lightbox gallery to open the small photos. Looks like the default names of the files are there yet. Add the links to the small photos in there so your lightbox gallery will work. Don't forget to upload the smaller gallery photos as well.

On your Contact Us page all the photos are linked photos. Was this intentional? Will they have links when you click them to go somewhere else? If not, then I would suggest changing that setup to an image setup rather than a link setup. Once again be sure to add the responsive checkbox. Also be sure to add the email setup to your email links. Right now they are dead links and don't do anything. You need to add the email address in the URL box for them and put mailto: in front of them like so: mailto:person@emailaddress.com Add that to each URL box for each email (with the correct email address of course lol) and that should make your email addresses work.

There are other things that are minor and not "necessary" for the site to work. The Calendar being in Table form is huge and will not be real phone friendly, but it will work. You may want to check out some of the calendar sites like Google, LoCalendar and a handful of others that offer free online calendars. Almost all of them provide you with code you can put into a Custom Code box to display the calendar on your website. I tend to use LoCalendar when I can for my clients as it has the most features of all the ones I've tried so far. Google calendar will do fine if you don't have to print it out at all, it loses it's usefulness a bit if you do, but it's still workable.

All in all, the changes needed are small and easily rectified, and you did a great job for your first time!

5

hey, thanks for all the info, much appreciated!

so first i fixed that ugly text colour, although it gave me some grief! 3 pages seem to leech the old colour onto the other pages, and i went though every line checking the colour code, fixed to codes, but its still happening! i might have to redo those pages!! yuk!! though i did find if i upload the assets from the index at the end, it fixes it!! overwrites it i guess!

i fixed the email addresses, thanks for that.

i changed the url on the home button to the full address but im still getting "index" on the tab. any ideas please?

i marked all the photos responsive, and yeah, i didnt know what a light box was, so i have changed the pics to images, thanks for that, it was certainly weird connecting to a table!!

i have used carousels in the gallery, i like the large sized pics and i found the off button for the auto rotate, and now its great! (i need more photos, these are all the ones ive taken, and the camera is new to me too!!)

i might investigate the lightbox thing for the drivers and cars page later, when i get a break, and i will also check out those calendars, cant thankyou enough for all your assistance, all of you, but especially Jo for the epic post, really appreciate it. cheers, God its 2am again, this gets addictive! have a good one guys xxx

6

Looking better and the link fixes help a lot too. You might want to go with a little more yellowish text color such as something around this color #ffdfa8 which would be more in line with the logo. When you do your colors for your text, you don't need to change it everywhere on every link or text paragraph. The best way is to change the color of the default P or Paragraph tag. Seems like you may have done that already though so if so then you're doing well there.

In your code I am seeing that you have set height and width settings for many of your images. You should instead, resize those images to the largest size you need (which is definitely smaller than what you're using), then set them to be responsive and that will take care of the height and width automatically for you. I've created a standard class that I add to all my custom style sheets these days to help center photos, columns, rows, and many elements. You can easily do this by adding a class in the CSS like so:

.centered {
  float: none;
  margin-right: auto;
  margin-left: auto;
}

Then just give the "centered" class to any items you want to be centered other than text. Text has it's own centering setup in the settings of the Options so they don't need that, but images and many times containers such as divs, columns and rows you'll want to be centered and using that class makes it easier to do so.

Hope that helps and good luck!

7

thanks for the info. um, i have no idea how to set the default P! i had a look but cant see it!

re pics, yeah your right, i had a lot of trouble lining up pics, centering them and getting them to match up, which is why i used the light box, which of course i completely stuffed up!!

i did resize, but not enough, i was a little afraid of making them too small! could you please suggest a size? (my camera is new, and it takes a lot bigger pics than im used too!)

thanks for the code, when i get some time i will try that out. i really appreciate all your help. page is looking much better!

cheers Jo

and merry Christmas to all of you xxx

8

Don't be so hard on yourself lol. Play with the app and experiment with things, that's the best way to learn how things work. I would highly suggest that you try some online courses on HTML and CSS and get a little bit more comfortable with what you're looking at code wise. There are a lot of free tutorials out in the web, just do a google search and you'll find lots to choose from.

By the way, you didn't stuff up that lightbox as much as you think. It was actually working fairly well, the only thing that was missing was the links to the larger images. I would try it again if I were you and just be sure that the large image links are correctly set. For sizes of the photos I would suggest some easy experimentation with https://placehold.it/ where you can create links to placeholder images. This will help you get used to image sizes. What I did was create them then I copied the images to my computer so I could use them as needed in various sizes. I wouldn't make the larger sizes any larger than 600px X 800px / 800px X 600px, but they don't have to be that large either. If you're not sure how to copy images from a web page here's what to do to get the placeholder images copied.

1. Go to the website placehold.it 2. Copy the link that has the black highlight for the size 350x150 http://placehold.it/350x150 3. Use that link to generate various different sizes by altering the numbers of the size such as: http://placehold.it/200x200 4. Put the link into your browser's address bar and go to it and it will bring up just a grey image with the size on it. 5. Right click that image and choose Save Image As... (or whatever variation of Save As your browser uses). Save the image(s) to a location on your computer that you will remember for future use. I would suggest to create a folder on your desktop or in a easy to recall location to put them all in. 6. Now import them either all at the same time (you can import a lot of images at once from the same location) or one at a time and try them till you get the right size you need. 7. Once you have the size you need, replace one of your images with it. Trial and error till you get the right size you want. Then you will know what size to resize your images to for your lightbox small images and for any other images you want to use. 8. Resize your images and replace them in your project and see how that goes. I would start with one or 2 images first to test the waters. :)

Always keep in mind that it's much better to have an image be a little bit larger than needed than it is to have it too small for the spot allotted. So be sure when you're resizing that it's large enough to fill the space you want to put it in, yet not larger or much larger than that space.

As for changing the P that would be in the Styles window, but I told you the wrong place to change that sorry. What you need to do for that is change the color: setting in the Body class of the CSS. I'm assuming you probably did that already so the places you'll need that I can see will be the Body, H1, H2, H3, H4 and that should take care of most of that text coloring. Find those in your CSS by clicking on the Heading to get to each Heading's in your page on the visual preview. Then look at the Styles window of the app and it will bring up any classes that are connected to that item that is selected. I'm assuming you've already changed them so you'll just need to get to them again and change the colors of them. Let me know if you need more assistance here and if you to share your Bootstrap Studio project file then, I'd be happy to help walk you through where they all are.

Merry Christmas to you and everyone at BSS and on the forums, and a Happy New Year as well. I'll be a bit scarce for the next 1 1/2 weeks on vacation, but I'll answer as I can get to internet lol. Have a great holiday everyone!