1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Minimalistic Web Template

Discussion in 'Free Website Templates' started by Mimoun, Jan 7, 2012.

  1. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Keep things simple with this Minimalistic Website Template. Easy to customize and easy to navigate, this is the template of choice if you're looking for a fuss-free solution to building your new website.​

    Web design sub pages:

    [​IMG] [​IMG] [​IMG]

    This website template will work with all modern web browsers.

    What is included:
    • HTML files source code
    • CSS file source code
    • Images: compressed versionsminimalisticwebtemplate
    • The design source, in this case, the PSD files
    • Sliced PSD file (Photoshop source design)

    Third party Stock Photos licensed from Veer:


    Third party fonts used:
    Font details coming soon.......

    Credit details coming soon......

    Version 2
  2. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Minimalistic Website Template upgraded to version 2: simplified the navigation structure by removing all arrows and the scroll bars.
  3. Cahyle

    Cahyle New Member

    Hey I've recently started editing this for my girlfriend's website, and for the 'Blog' page, I've changed it to a gallery page of her paintings (it's a website for her art portfolio).
    For the gallery of her paintings, I've tried using a full-screen pop-up of each of her paintings using the 'Facebox' image viewer described here: http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
    However, there seems to be an issue with the template CCS and the CCS implimented with the 'Facebox' viewer, as the Navigation Menu items (text and images) is overlayed over the Facebox pop-up. Is there a way to alter the CCS for this template so it overlays over all images in the page with no issues?
  4. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    It's hard to solve your problem without your code. Do you have a live version of the template hosted on the internet? If not just add it to a zip file as an attachment. I think your problem can easily be solved by adding or removing some z-index value in the css file.
  5. Cahyle

    Cahyle New Member

    Cheers for getting back to me so quickly!
    If you go to http://www.laurahinshaw.com/paintings.html and click on the 'FULL SCREEN' link at the top of the page (above 'Blog Title Number One', that shows you what happens with the error. Thanks.
  6. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Just as I thought it's a z-index problem:
    Edit this in your style.css file change the z-index value of the navigation tag from 9990 to 9:
    ul.navigation {
        background-image: url("../images/border-dashed.gif");
        background-position: center top;
        background-repeat: repeat-x;
        list-style-type: none;
        margin: 0 0 50px 8px;
        padding: 5px 0 0;
        position: relative;
        width: 200px;
        z-index: 9;
    I just tested the code change with firebug it should work with this change if not let me know.
  7. Cahyle

    Cahyle New Member

    Superb. Thanks for your help!
  8. Cahyle

    Cahyle New Member


    I've another query regarding the subpages:

    The blue 'inner background' (behind the content text) is coded as such:

            #page .header .footer .body #content .content{
    However, on the contact page, I've only written a couple of lines of text. Therefore the background image only repeats until this stops, as shown here:


    Is there a way for the 'inner background' to have a height of at least 546 px, so that it fills the page without cutting out, and for it to then repeat past that if necessary?

  9. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Minimalistic Website Template updated to Version 3.
    A sample error fix added an extra " in this part:
  10. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    There are many ways to solve your last problem, here is an easy one: just add a bunch of line breaks inside the end of the div with the class name content.
    Also change your other line breaks from:
  11. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    I would write the HTML br tag without the forward slash / like this <br> (easy to remember and not mess up)
    The line break tag in HTML is a empty tag meaning there is no END TAG
    A paragraph tag would have an open and close like this
     <p>some info</p>
    if you were working in XHTML then the tag would look like this
    <br> tag must be properly closed, like this: <br />
    You might also consider using as a
    <meta charset="UTF-8" />
    instead of
    <meta charset="iso-8859-1" />
    as you are taking requests for paintings from people from anywhere on earth.
    "ISO-8859-1" is the Latin-1 (western European languages) encoding. Most non-English files (text for headings, titles, prompts, button labels, etc.) are in UTF-8. Which means that when when someone of a non-English location is viewing your page or uses the contact page (if it had a form) the gibberish would be reduced. This would enlarge the viewing audience and possible buyers.
  12. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    I would agree UTF8 is the better choice; we use UTF8 for this website, and UTF8 or iso-8859-1 for the templates. We should be more consistent with all website templates, though, and just stick to UTF8.

    When it comes to the line break we use <br /> for backwards compatibility, however it is starting to become practically unnecessary. (Example serve your website in XHTML+XML without having to recode everything, but your DTD)
    You can use <br /> or <br> in this website template, however you cannot do this in HTML or XHTML:
    The /> may only be used optionally for void elements.
    Void elements can not contain any content, this counts for HTML as well as XHTML, XML and HTML5.

    It's also best to be consistent on one page (or better, the whole website) and stick to <br>, <br/>, but not both.

    Note this website template is coded with some HTML5 elements, but will work with a browser that only supports HTML4 because of the backwards compatibility nature of HTML5 or the fall back browser support for the elements.
  13. hi im new to this how do i start to edit this template?
  14. Pomegranate3

    Pomegranate3 New Member

    I am using this wonderful template for my local sports team and have changed the main image and menu buttons no problem but now that the image has changed, the active menu buttons have a background edge showing through. I created a menu-selected.png to replace menu-selected.jpg but when I did a search in dreamweaver through the code on the entire site there are no menu-selected.jpg. Does this have something to do with the sprite file (I have never worked with sprite before)? Is there a way to change those menu items to .png instead of ,jpg (or at the very least .gif)?
    Here is the site so that you can see what I mean: http://www.comoxvalleyringette.com/2012/index.htm
    Thanks for all your help and for creating such a great template.
  15. Cahyle

    Cahyle New Member


    I know this is an old post, but I'm still using this template for a website I'm doing.
    However, I see an issue with the '...images/bg-page-top-curve-black.jpg' image for the top curve of the box. When I restore my browser window from full-screen, to just a floating box on my computer, this image doesn't seem to allign with the rest of the content (goes to the left). Would I need to use a container to keep it alligned, or an expression to center this at all times?
  16. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Hi Cahyle,

    Can you post a screenshot and/or tell us which browser and operating system you use? It's going to be easier for others to help you out that way.
  17. Cahyle

    Cahyle New Member

    It's okay - I've managed to fix it, but all other users of this template need to watch out.
    As you can see below, with an un-maximised window, the header image is somehow shifted along left.
    The smaller the browser window, the further left it goes!
    Just to note for sharing purposes!
  18. hkrish

    hkrish New Member

    Hi the templates are very nice and attractive, thanks for the post.
  19. Brain Sculptor

    Brain Sculptor New Member


    You have made a very well balanced yet elegant design. Very good work. I so much want to use it, but I have one problem for now. Where it says "BLOG" in the sidebar in the navigation, I want to introduce sub-menus to the right. I tried but I just can't get it, please help.

    Thanks a million.