Just Cakes Demo

• 5 Color variations to choose from.
• Orange(default), Pink, Green, Purple and Light Blue.
• Responsive design (i.e. template looks and works fine on varied device screen resolutions)
• Beautiful slider (minimum 3 slides required)
• Section headlines have H2 level. (Font Used: Cambria)
• Neatly commented clean HTML code for useful reference when editing page templates.
• 6 sub-page templates (About, Our Cakes, Price, Blog, Single Post and Contact)
• Google maps integration in Contact Us page.
• 4 footer columns (Contact Info, Work Times, Social Media Shares and Blog Post Highlights)
• HTML and CSS code is successfully ✔ checked and validated as HTML5 from official Markup Validation Service

Open up 'HTML files' You will find sections in the HTML source code are commented appropriately where you can edit and change info as per your requirements.

To change logo please do following:

- In styles/screen.css file line 28, please find:

#top h1 a, #contact h1 a { display: block; overflow: hidden; width: 100%; height: 100%; background: url(../images/sprite-a.png) no-repeat; text-indent: -3000em; }

now…

1. If your logo is image, then replace URL in above style to your actual logo image.
2. If your logo is text, then remove background completely from above and also remove text-indent: -3000em;… and then you will need to edit html file as explained in next line/note.

Note: In all html files, on line 20, please find <h1><a href=”./” accesskey=“h”>Just the best Cakes</a></h1>, please replace 'Just the best Cakes' with your site name. However this text doesn't appear on front if you use logo image but it is good to keep it for SEO benefits.

Tip: You might need to play with values of #top h1 on line 28 too to make your logo fit perfectly. Use of Firebug (a browser plugin/add-on)is recommended when editing css.

For some reason, if you want to switch off responsiveness of the template, its very easy. Logically, we just need to disable the media queries and remove overflow:hidden; properties of elements to tell them to flow to right in case of screen is smaller.

So, the steps to make Justcakes non-responsive are:

1. Please open styles/screen.css in your code editor software.
2. On line 708, please find commented text /* Responsive ——— */, remove all content below this line. (This is removal of media queries.)
3. On line 12 in html{} please find overflow-x:hidden; and replace it with min-width: 1200px;
4. In head tag of each html file you will find: <meta name=“HandheldFriendly” content=“True”> <meta name=“MobileOptimized” content=“320”> <meta name=“viewport” content=“width=device-width”> These are meta tags related to mobile view, you can choose to delete them or keep them based on your decision. (I recommend deleting them)

Thats all , the responsive will be off now.

Note: Line numbers can change with time, so please search the term in the file (if you can't find it on correct line number given below)

Open up 'index.html' See HTML code inside <div id=“featured”>…</div> (by default there are 5) and put in relevant image source path to configure images. Note: Images must be width=“850” height=“460”

Open up 'index.html'. See and edit HTML code inside <aside class=“slider-a”>…</aside> (by default there are 2 testimonials)

To add more testimonials, copy that whole <div> block which includes a <h4>, <figure> and <p> and duplicate it.

Note: Images in <figure> tag must be width=“57” height=“57”

Open up 'email-action.php'. On 3rd line, which should be this line define('SITE_EMAIL', 'yourname@email.com');, only change yourname@email.com That's all.

Open up 'scripts.js' from folder javascipt. Search for this line $('#map').gmapembedd('London'); and edit these latitude and longitude co-ordinates(for example : $('#map').gmapembedd('40.765266,-73.973007'); ). Use this site to find co-ordinates

Open up 'index.html'. Search for this comment <!– Footer starts –> and edit sections inside it as needed. Repeat your changes in all other HTML files