|
|
|
Forum Newbie
Group: Forum Members
Last Login: 8/12/2009 3:14:40 PM
Posts: 7,
Visits: 27
|
|
Hello everyone!
I finally figured out how to make a custom template, thankfully. I was so very confused at first, but after reading all of the 8 or so pages of Christine's tutorial on how to make a custom template, thoroughly, and then reading them 2 more times ... I finally figured it out. So, because I am SO thankful that this resource is here, I'd like to make an updated post of how to make a custom template since there have been a lot of great changes -- but ones that have made the custom template process a little different. So here we go . . .
1. Go to Appearance > Themes
Click on a basic pre-made template that you generally like because of the structure. Then, click the "Export Theme" button. Choose to save the file, and note the file name. This will be important in future steps.
2. Open the file.
There will be 10 files, all internet webpages. Right click on the first file and slide your cursor over the "Open With" selection and then click on "Notepad". A Notepad file will open up. Copy all that text.
3. Go back to the BISI website and click Appearance > Custom Templates
Copy the code from step 2 into the corresponding tab and click the "Update" button.
E.x. If you start with the "terms" page, then you must copy that code into the "Terms" tab, or your pages will be mixed up.
4. Repeat steps 2 and 3 for each file in the uploaded folder.
You can choose to leave out both the "my ebay" and the "Checkout CSS" tabs if they do not apply to you.
5. Note the zip file name from step one. This is your custom template number.
Now, go to the "Home" tab in the BISI website, to continue. You'll see a block of code that will look like this not too far down the page:
. . . if( $ Store.StoreTheme = = 1)
< link rel = "stylesheet" href = "http://public.mybisi.com/templates/01/_css/darkblue.css" type = "text /css" media = "screen" />
< link rel = "stylesheet" href = "http://public.mybisi.com/templates/01/_css/layout.css" type = "text /css" media = "screen" / >
#elseif( $ Store.StoreTheme = = 2)
< link rel = "stylesheet" href = "http://public.mybisi.com/templates/01/_css/brown.css" type = "text /css" media = "screen" . . .
This is only a section of it, but it should get the point across. So say for example, your zip file was called "template-2". You would scroll down to where you see "#elseif($Store.StoreTheme == 2)". In the next line, you will see a link with "brown.css" at the tail end (in this example). Whatever your template name is, you will find a colour, and the file type "css" after it. Copy this link and place it in a new browser. You will see a bunch of code pop up on the page. From your browser window, save the file. Depending on your browser window, this next instruction might differ slightly: click "File" and then click "Save As" or "Save Page As" ... whatever variation of "save" it says. Save this file as a Notepad document where you can find it easily.
6. Next, copy the "layout.css" link on the line below the one where you copied the coloured css file. Do the same with this one. Put the link in a new browser window and save the file as a Notepad document.
7. Go back to Notepad now, to the colour css file (in this example, it would be brown.css, but yours may differ depending on the template you chose). For every link you find in the file, you need to make a small adjustment. For every link, you must add "http://stores.mybisi.com" infront of every image link.
Ex. You would take:
/templates/03/_images/red/footer-divider.gif
And add http://stores.mybisi.com infront to make:
http://stores.mybisi.com/templates/03/_images/red/footer-divider.gif
Now save the file (Click "File" then "Save").
8. Next, go back to the BISI website, and click on Appearance > Custom File Manager.
Click on the "Add a File" button and select the "layout.css" file you saved on your computer. Now do the same thing again; add the colour css file from the other link (like brown.css, darkblue.css ... whatever template colour yours was) by clicking "Add a File" again and selecting it.
9. Once both files are uploaded, on the right hand side beside each file, it will say "View". Right click on that for the first file (layout.css, or the colour css file), and click on "Properties". A pop up window will come up and copy and paste the link that is in it, and move on to the next step.
10. Now, go to Appearance > Custom Templates.
Starting with the first tab, "Home", find the same links from before with the same template number as the one you downloaded. Replace the link with the one you just copied. For example, if you copied the "layout.css" file first, then replace the link that says: "http://public.mybisi.com/templates/01/_css/layout.css" with the link you copied. It should look something like this: "http://custom.buyitsellit.com/XXXXX/layout.css", where the "XXXXX" is your personal store number/reference code. Now do the same for the other css file. Go back to the Custom File Manager under Appearance (You can also access this by clicking the very last tab where all your custom pages are), right click on "View" and select "Properties". Copy the link in the pop up window and then replace the other link with the one you just copied.
Ex. If your Template was "template-2" this will be the block of code you focus on:
. . .( $ Store.StoreTheme = = 2)
< link rel = "stylesheet" href = "http://public.mybisi.com/templates/01/_css/brown.css" type = "text /css" media = "screen" />
< link rel = "stylesheet" href = "http://public.mybisi.com/templates/01/_css/layout.css" type = "text /css" media = "screen" />
You will have changed the two links here to:
. . .($Store.StoreTheme == 2)
< link rel = "stylesheet" href = "http://custom.buyitsellit.com/XXXXX/brown.css" type = "text /css" media = "screen" />
< link rel = "stylesheet" href = "http://custom.buyitsellit.com/XXXXX/layout.css" type = "text /css" media = "screen" />
Remember that the "XXXXX" in both links posted here will be replaced with numbers personal to your store. They could be anything ... 75789 or 14356, etc. so don't freak out. They are different for everyone. The text in red is the text that we are working with.
***Don't forget to click "Update" when you're done or you will loose your work once you close the window or log out!
11. Now repeat steps 8 and 9 for every other tab (custom page) you have code on. Click "Update" after each edit, or you can now click "Update All" once you have done editing all the pages.
12. Finally, check the box that says "Enable custom templates?". You can now look at your store by clicking the "Preview" button. Your store will look exactly like the template you chose. This is what you want. You can now tweak the colour css file to add different images, colours, etc. After you made the changes, save the Notepad file and upload it again in the file manager. Don't forget to delete the old colour css file that's in there first, or you can check the "Overwrite existing files?" box. This will automatically delete the file with the same name as the one you are trying to add.
Now you can continue to edit to your heart's content. Christine mentioned in her post that you should always back up your files, and I definitely agree. Just in case you make a mistake and don't remember exactly what you changed, it's good to have a copy of the file before you made the changes that didn't work. This is definitely HIGHLY recommended!
Thank you to everyone who posted on the forum for custom template help! Without all of your posts, I would not have a clue as to what I am doing, and now I am well on my way to making a great site! THANK YOU ALL SO MUCH! Good luck to everyone with all their website editing! I wish you all success!
Happy editing,
Jenni
___________________________________
Earth & Magick: Find your magick within!
SITE: www.EarthAndMagick.com
STORE: http://earth.mybisi.com
|
|
|
|
|
BISI Guru
Group: Forum Members
Last Login: 11/5/2009 6:59:08 AM
Posts: 348,
Visits: 2,166
|
|
Excellent instructions! Thank you for putting them together for everyone to follow. I think I'll add a link to my old instructions to go to this thread.
Christine
Your Virtual Fuller Brush Man
www.FullerBrush.myBISI.com
Shop for unadvertised Fuller Brush and Stanley Home Products specials at Fuller Brush Central
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 8/12/2009 3:14:40 PM
Posts: 7,
Visits: 27
|
|
Hehe thanks! I'm just glad I can contribute after you helped me through your post! 
Thanks,
Jenni
___________________________________
Earth & Magick: Find your magick within!
SITE: www.EarthAndMagick.com
STORE: http://earth.mybisi.com
|
|
|
|
|
Forum Guru
Group: Forum Members
Last Login: 8/15/2009 12:16:28 PM
Posts: 61,
Visits: 177
|
|
I am getting stuck at step 7. I have the grass.css and layout, which is templete 30.
I have layout.css and grassy.css
It doesn't have a color.css
When I access the css code, this is what I get:
body {
background: #7EA440 url(../../grassy/_images/grassybg.jpg) center top repeat-x;
}
Where do I add in the code? I must be doing something wrong? Help please!
Tammy
http://www.tammys-tienda.com
Follow my blog! 
http://tammystienda.blogspot.com/
|
|
|
|
|
BISI Guru
Group: Forum Members
Last Login: Today @ 7:55:57 PM
Posts: 2,499,
Visits: 3,537
|
|
Tammy - I think "grassy" is your "color". Most of them are called color words (DarkBlue, Green, Brown, etc) I suspect the people who worked out these directions did not realize there was one (ore maybe more than one) which did not use a color name.
If you consider "grassy" as "color" - do the directions make sense?
Cindy
-----------------
|
|
|
|
|
Forum Guru
Group: Forum Members
Last Login: 8/15/2009 12:16:28 PM
Posts: 61,
Visits: 177
|
|
Yes, it makes sense, thanks
What I am unsure of is the the urls in my css are picture links. This is right?
And also, I don't have the entire url, only the ....then the url, just as I copied and pasted. So I am not sure if I just use that or if I something won't work right if I do change it as is.
Tammy
http://www.tammys-tienda.com
Follow my blog!
http://tammystienda.blogspot.com/
|
|
|
|
|
BISI Guru
Group: Forum Members
Last Login: Today @ 7:55:57 PM
Posts: 2,499,
Visits: 3,537
|
|
tammystienda (4/26/2009)
Yes, it makes sense, thanks
What I am unsure of is the the urls in my css are picture links. This is right?
And also, I don't have the entire url, only the ....then the url, just as I copied and pasted. So I am not sure if I just use that or if I something won't work right if I do change it as is.
That is explained in step seven - how to make the urls complete.
yes, they are images - its images that are making the borders and stripes and such.
Cindy
-----------------
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 7/5/2009 6:34:11 AM
Posts: 5,
Visits: 20
|
|
| hi! i have got to step 5 and 6 but when i put links in another browser there is no code it just says straight away save, not save as and it says either all files or css which i left as css and when i opened it went into dreamweaver which i have but not used before, is this still ok to copy and paste from dreanweaver? kind regards, maggie
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 5/25/2009 2:27:44 PM
Posts: 2,
Visits: 14
|
|
| Worked perfectly, well done!
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 5/3/2009 4:54:49 PM
Posts: 6,
Visits: 24
|
|
I'm confused.
I have template 34
I am not seeing the "layout.css" line in the code. I'm stuck at step 5
|
|
|
|