I'd like to show you how to set up the
combre project file for developing a new
website before you even open the project
file I highly recommend you duplicate it
in finder and rename it to whatever
project working on this will ensure that
the original file that you have isn't
corrupted and you can always use it to
start a new project file without
anything
changing we're just going to pretend
that I've duplicated my file and this is
a new website that I want to start
working on we're going to call this
website overview and it's going to be in
a subdomain of stacks spacecamp.com
I have M running in the background and
I'll use it so that I can preview the
files and show you a few tricks that
will help you get started
when you open the project file the start
here page will show what I'm going to do
is I'm going to select the start page
Legend and holding
box I'm going to select them and just
drag them down undering used Pages
because I'm not going to use them for
now so what I'm left with is home blog
admin sitemap 404 and
sandbox be sure to go into enal settings
and set your web address as well as in
the publishing settings so you can use
total CMS without any issues in the
original version of kumbre in the CMS
core Swatch with Insight
Styles I had macros to CMS ID strings
checked as well as toggle preview set to
all
true in this version I've disabled
macros to CMS ID strings and set toggle
preview to pull from CMS
as it seemed to be a bit confusing for
some
users the reason why I had this set to
macros to cmsid strings in particular
was because since there are so many
macros within kumbre it could take
minutes actual minutes just to preview
any simple change that you wanted to
make now that I'm running M everything
is local and so I'm not having to tax my
server for those changes to come down
and so I'm able to preview my project
file a lot faster
so I'm going to leave macros to CMS ID
strings unchecked and I'll actually pull
from CMS for all the different
toggles that way I get an accurate
version of the website that I'm trying
to develop if you're not using M I
highly recommend that you check the
macros to CMS ID
strings this will allow you to preview
your changes in your project but it's
going to show the actual macro instead
of any CMS data that you've added to
your admin portal
in order to view those changes
accurately you'll need to actually
publish to your web server and then
visit the page to see the page changes
that you've made so now that we've set
our web address in general and in
publishing there are a couple of things
that we need to do first we should add
our total CMS license so that we can
actually use total CMS
properly to do this we're going to
select site top which is a partial we're
going to double click on site top and
within site top we'll have this other
partial called site
Styles once we're in site Styles we have
a site Styles pin that we can open up
and see our site
Styles most of the swatches that are in
kbre are not kept in sight
Styles this is so you are able to use
the swatches throughout the website and
not have them be dependent upon site
Styles itself
the only swatches with ins sight styles
are CMS core font awesome 5 and a Google
font everything else can be found in
Swatch pallets throughout the entire
project so choose CMS core paste in your
license close the pen back out and then
over on the left we'll twirl down and go
to admin
homepage
scroll all the way to the bottom double
click on the TCMS admin core partial and
then select admin
core paste in your license here and
check the register CMS
button back out and preview your page
once the total CMS registration window
pops up you'll be able to click the
register button and that's it now go
back to edit mode double click on the
TCMS admin core again select admin core
and uncheck the box that says register
CMS back out again and you're done you
can twirl up the homepage to hide the
admin
homepage let's preview our
website so far since I'm running M this
will be a fast
preview you'll notice that the project
looks like it's
empty I assure you it's not we just need
to add content and set certain settings
for things to start to appear let's go
ahead and publish our
website now that our website has been
published we can visit the admin page
for our website the admin page is
whatever URL you have with the for/
admin at the end of
it the default password is demo 123 at
symbol let me show you how to set a
super admin password to ensure that
you're never locked out of the admin so
you can always help your clients if they
need you back in the project file on the
admin page you'll notice that there's a
page save partial doubleclick on that
partial and open the
pin page safe is default but if you
don't have page safe you can always use
total CMS protect click on the page safe
stack and under
passcodes set your super admin password
for this demo the password is still
going to be demo 1 23 at symbol once
youve set your password go ahead and
close the pin and back out now you can
publish those pages and the settings
will reflect on the admin on the user
facing side once we've unlocked our
admin portal you'll notice something
strange the not found the request re
ested URL was not found on This Server
isn't something to be scared of also the
question mark up here is just the logo
that we have yet to
set if you come down to settings and
under site URL type in your URL for your
website for our site URL it's overview.
Stacks spacecamp.com
don't forget the forward slash while
we're here we'll go ahead and add our
site logo we'll click save in the upper
right corner and now when we refresh
you'll see that our admin portal is
looking very
nice the reason for this site URL is
extremely
important let me go ahead and give you
an overview of the different settings
that are here site title site URL and
site description are used in SEO helper
along with a lot of other settings
throughout this admin portal
the contact info is used to show in the
footer and various other places
throughout the website that you'd like
it to show settings for the contact info
for SEO is what SEO helper uses for the
structure data all of this is
automatically injected into the website
and used wherever you have the
structured data messaging info is what
is used to tell the forms that are on
the website what the from address the
from email name the two address and the
two names will go to social media is
where you can toggle on and off the
various social media platforms that
you'd like to use hours of operation are
used in the footer and on the contact
page you can have default or custom
set default is what's used within SEO
helper so I highly recommend that you
set this
regardless there's a cookie policy that
you can use under sight
components you can turn on and turn off
various components compents throughout
the website you can turn on
announcements cookie disclaimer messages
updates and other components here within
the menu you can show credits message
button phone number and social media in
the footer you can have your logo
contact credits hours of operation
privacy policy and social media show or
not here you can set a footer image or
you can have just a color if you use a
color you can type in the hack code for
the color you'd like if you have a logo
that is a darker logo and your image or
your color that you've chosen for the
footer is dark as well you can choose an
alternate logo which may be a light
version of that logo so that it'll pop
when it's on top of the dark background
or vice
versa under settings code is where you
can put in different various code
Snippets like for Google analytics or
Google tag manager or any other kind of
code that you need for your
website there's also an Import and
Export feature that's built built into
total CMS here you can type in your
total CMS license number we can save
that and then we can launch the import
utility
tool and the nice thing is the
convenience of having a copy total CMS
license here copy that and we can paste
it right in we can also launch the
export tool and do the same
also under settings we can set our
password this is the password that you
can set for your user or your client
that's different from the one that
you've set in the project
itself each settings page also has this
little refresh page button clicking this
will refresh the page and not the entire
page since this is an
offsite if you select to refresh the
page using this it will refresh
everything and take you back to the
dashboard
speaking of the dashboard there are
quick links here to help you to add and
edit content on the Fly you can of
course add or remove any blog type page
that you want selecting the plus will
take you to the blog form for you to add
a new post for you to add to your
website clicking the actual name will
take you to the list so that you can see
all the different posts that you have if
you twrl down you'll notice that you
have all the different page types that
you can edit settings for
selecting the homepage you'll be able to
add a banner title Banner subtitle add
images for impact and then down here you
can start to edit the content for the
various sections throughout the
website each page has a section called
page
settings this is important because this
is the page title that is fed into SEO
helper as well as the page description
and the social share
card the link link title is what will be
in the menu on the front facing pages so
that your users will be able to navigate
throughout your
website if you do not have a page link
title in this version of kumbre the link
itself in the menu will not show so it's
important that if you want the menu item
to actually show you need to put
something into the link title to
demonstrate this I'll go ahead and I
will name this
home I'll save the link title and we
will visit our web
page you'll notice that home is now up
here if I go to about us you'll notice
something
strange we get a not found the request
URL was not found on the server error
it's the same for Affiliates books
campaigns contact and so forth we'll go
over in a moment why this is but for now
I'm going to show you that if I put in
blog for the page link title save it and
refresh the front-facing page you'll
notice that my menu is starting to flush
itself out now why did we get the error
when we clicked on these Pages if you
notice when I hover over about us
Affiliates or books down in the address
preview in the bottom left corner you'll
see that it says in use- Pages SL books
SL admin dbooks Das
page the reason why it's showing that is
because if we go into our project file
about us Affiliates view book s
campaigns and all those other pages are
undering used Pages they haven't been
published to the server yet so how do we
clean up our admin portal so that it
only shows the pages that we're actually
using within the project file choose the
admin page and scroll down until you see
page content buttons and blog list ad
buttons when you open the pen you'll see
all the different pages that are in the
project file since we're only using home
and blog we can get rid of the rest
but we don't have to delete them because
maybe one day in the future the client
might want an about us page they may
want to start showing off books they may
want to run campaigns or have a contact
page instead of deleting them we can
just move them down here at the bottom
to an unused menu items pen this is set
to do not publish content which means
that these menu items will not publish
and when we're done we can just collapse
the pin and they'll be out of our way
so let's do that
now okay I've selected all the pages
that we're not using and I'm dragging
them into the unused menu items pin
closing it up and I'll do the same for
the blog list add
buttons I'll open that up and I'll
select the various pages that we're not
using now that I've selected all my blog
Pages I'll drag them into the unused
menu items pin and I'll close it
up
if your version of kbre does not have
these pins in it it's very simple to add
them or you can download the latest
version of kumbre and they'll be there
for you to copy into the current project
file that you're using all this is
simply is a pin set to red slim note do
not publish content and display warning
then I've gone in and I've typed up and
used menu items and that's
it I'm going to close my pin and then
publish my
page now that my page has been published
I can go back to my admin portal and
refresh the
page and now when I click on pages
content I only see the two pages that I
want to use in my project
file the same for add edit
content only the blog is showing which
means that now I can just focus on the
pages that I'm using in the project file
if I twirl down the admin page you'll
see a few different admin sub Pages the
page that we set our URL on for our
website is under the admin settings
page this is where you can go in and add
various other settings that you need to
add for the entire
website for right now though we're going
to click on admin dashboard and we're
going to scroll down to where our quick
links are
what I'll do for this is I'll add a
pen I'll set it to red slim note do not
publish content and display
warnings now what I'll do is I'll take
the different cells that I'm not
using so I am going to use blog post and
what I'll do is I'll just drag those
into the
pen
close it up and now when I publish I'll
just have the one quick link and later
on if I need to add any more I already
have these sets so I don't have to worry
about
them but if there is another kind of
blog list that you need to add you can
always do it by copying and pasting and
then changing the names and links and
since we're not using events I'll go
ahead and select that pen turn on do not
publish content and display
warnings and just for good measure I'll
go ahead and set it to
Red now I'll publish and see the changes
that I've made now my admin portal is
starting to look clean and ready to
use back in the project file on the
homepage there are a couple of little
things that I wanted to make you aware
of there are a few features that I've
added that are really nice for your
clients one of which is a light box
announcement
message this as well as at the very
bottom the cookie disclaimer are both
set to do not publish content and
display
warning you can always uncheck do not
publish and display warning and use the
features as you wish I'll go over what
these different features are in future
videos as well as top of page
announcements the kumbre project file
heavily uses pins and
partials my recommendation to any user
both familiar with and new to Foundation
6 in total CMS is to just create a new
project file from the existing kumbre
file and go in and just tear it apart go
in and break things double click on
everything you can and find out what it
is and just look and see where it is and
see if you can figure out how it works
this setup is actually good for people
to go and watch the blog in 30 minutes
by Joe from Weaver space this blog is
set up exactly like he set his up in
that video if anything this is is a
great learning tool for you to use so
you can learn the basics of how to set
up a Blog using total CMS and Foundation
6 once you have the foundation set for
total CMS blog you'll be able to then
understand the rest of the pages that
have blogs on
them because all of these like courses
credits drink menu all are just copies
of what the blog is with the name and
the CMS ID
changed now that our project is more or
less set up we can go in and start
adding content so that we can see what
our page is going to look like I'll go
to the homepage under Pages content and
type and welcome to my
website save that and we'll preview
this now we can drag in an image or two
into the bannner images impact
section allow those to upload refresh
our page and now our images start to
show under the homepage
section under section one I'll toggle on
show I'll drag in an image and I want my
image to show so I'll turn it
on I'll keep the position set to left
set float to yes the size I'll make 33%
and I'll put margins of 24 all the way
around
I'll go ahead and save this reload our
page and here's our
logo but we need some content over here
so under my section title I'll say who
we are and then I'll put in some dummy
text
I'll save
that and just to show you that this can
wrap I will add some more
text refresh and now we're starting to
see our website come to life
next I'll go on to Mid page Banner I'll
toggle on show and I'll drag in an
image then I'll save refresh the page
and now the image shows up as a mid page
Banner this one doesn't look the best
but I'm sure you can find one that's a
lot better since we're not using
Services we we don't have to turn it on
but we may want something in the section
that's above
services so we can turn this on and put
in some dummy text
here maybe we want this to be a bit
bigger so we'll make it
24 we'll hit save refresh our page and
now you can start to see your page is
really starting to take
form if I go back into settings and I
come over and I scroll down to contact
info I can put in my email
address toggle on show put in my phone
number the phone number link and my
address I'll toggle on show for the
phone number and the address as well and
save once I refresh my page you'll
notice that the information is not
showing why is that
turning on show will show it in various
places but there is a master switch that
you can set to actually turn it on and
off and that is found in the site
components so under footer I can turn on
contact refresh the page and now the
contact will actually
show this is in case you have contact
information like the phone number email
and street address and only want to show
one two or three of
them so if I were to go back into
contact info and turn off the email and
refresh the
page the email no longer
shows this is so you can control the
content that is shown at a more granular
level if you'll notice something here in
the footer it says designed by graphic
got
LLC graphic goo is the name of my web
design company you you can change this
of course to be whatever you want it to
say next to it it says copyright 2023
this will automatically update based on
the server timestamp so it's always up
to date and you don't have to worry
about it watch what happens when I type
in the site title of overview and save
it I'll just refresh the page and now
the copyright with the website title
shows in the footer if we click on blog
you'll notice it's a pretty basic simple
page
and what's going on with the
banner well what's really nice is if you
click on blog under Pages content you
can actually set its own individual
Banner title as well as
subtitle I'll just call this blog and
say Enjoy the
reading I'll click save refresh the page
and there's my banner and
subtitle but what about the background
what's nice about the combre project
file is I've made it very simple for you
to get things up and running as quick as
possible by default everything is set to
use
F6 you can toggle on use impact and if
you go into the impact settings you can
say same as homepage or you can do
custom for this page if you leave it at
save as homepage and refresh you'll
notice it's using the same images that
the homepage was using but you can go
back and say custom for this page and
add your own images and they'll be
unique to this
page since we're using a Blog I'll go
back into admin go to my homepage
settings and I'll scroll down and toggle
on the show for blog post header and
I'll type in latest blog
posts I'll save this and I'll go ahead
and turn on the divider between reviews
and blog
posts because what this will do is it
will turn on a divider that will be
between that and the about
Services just to make things a little
nicer I'll refresh my homepage scroll
down and see that the divider has been
turned on and we have latest blog posts
with a nice view all button that will
take us to our view of our blog
list since we don't have any blog posts
just yet nothing shows but we can easily
go back into add edit
content we can click on the plus button
to add a new blog post and type in a
title we can set a summary and
description we'll just type in some
dummy text but not too much dummy
text and under content will type in more
dummy text
you can add an image and type in some
extra content if you'd
like set an
author genra is fiction category is demo
and we'll add a tag for foundation 6 and
total
CMS we'll just copy this and paste it
into
here and you can add more images for a
gallery but for now we'll click save
we'll preview our page and there's our
blog
post now if I click on this it takes me
to a not
found why is
that well if you've watched the blog in
30 minutes video you'll know that you
actually have to go into your project
file twirl down the blog page to see the
blog view
page
and in here we
preview and what we do is we just take
this text and copy it say submit to set
the server settings and then in
publishing we edit our HT access
file paste that in save and
upload and now when we go back I'm going
to refresh for good
measure click read more and now it
works here are our tags here's our
content our
image you can even share if you're using
the shared stack from Weaver
space if you have other blog posts
they'll show up here as other posts you
may be interested in and if we go to the
homepage and scroll down latest blog
post shows under the latest blog post
section so you can see how very quickly
you can have a very nice and clean
website with tons of content going
through and setting all this up up
manually would take you a very long time
and the kbre project file allows you to
cut through all of that and just get to
designing I hope you found this video
interesting and
helpful in future videos I'll go over
SEO Helper and how it's integrated into
the combre project file as well as other
aspects that makes the combre project
file work the way it
does
that