Ipsoom Center template

[lexoyo]

• download then follow instructions bellow
• preview

Ipsoom Center is a 4 page template, for you to make your business or showcase website. It is made with Silex, and it is hosted for free on github pages.

As you can see, this template uses a lot of CSS in order to add transitions, and advanced text styles.

Instructions

To make your own website based on this template, download the archive here, unzip it to your Dropbox and open the file /templates/perso1/editable.html with Silex editor (online).

Then edit the texts, change the links and publish your site online (file menu, then "publish")

Related templates

• Beautiful about me page template
• Tech tools template
• Clean & Square creative commons template for Silex

[salutlouis]

Hi dear Silexians,

First, a big thank's for your very nice job

I have used this template to build my site. Second version with Silex 2.0, the first was build with Silex 1.7

You can see on: http://www.montres-mar.ch

Don't hesitate to comment

[lexoyo]

Looks nice!

A few points which you could make better

• the logo could be bigger (use css letter-spacing maybe?)
• the logo is underlined on roll over (use css :hover property)
• "accueil" menu item is not clickable everywhere, there must be something over it?
• there are 2 images at the bottom of "accueil" which are not found
• "read more" buttons:
  • underlined on roll over
  • do not open a page?
  • in english not french

Tell me if you need help Bye!

[salutlouis]

Thank you for your replay

I try to make an effect on the header. I want to move it with scroll, but block on the top of the screen.

Something like this: http://desgeeksetdeslettres.com/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css

Any idea?

[lexoyo]

Yes you can use the same code as in your example

You will want to add the css class votre_menu_ou_votre_image_ou_votre_element to a container containing your menu. And replace #votre_menu_ou_votre_image_ou_votre_element by .votre_menu_ou_votre_image_ou_votre_element because we do not use IDs in Silex but CSS classes

Also there is a typo in the code sample: >= should be >=

[salutlouis]

Ok. I'm trying, without result... Have you try on your side? I make a new project with a BG, an image and a container. I insert a text box in the container. JS script: CSS style:

And I give a CSS class to the container:

Thank you for your help

[lexoyo]

No I did not try but this should work

You see in the CSS box, that there is position: inherit; and this may take precedence over your position: fixed;

Try to remove position: inherit; or to change .floatable position to position: fixed !important;

In fact you should not even set CSS in the CSS box... Since Silex will overwrite it when you drag/drop

[salutlouis]

Nice, it work's. But I must change manually the position of the script just after the "<div class" of the container. It's create a problem with left, I must set different values for both positions (depending from width...).

Thank's to comment

[lexoyo]

Oh right! You simply should run your script after the page is loaded:

$( document ).ready(function() {
  // put your code here 
  // the one with $(window).scroll
});

[salutlouis]

Nice, thank you. I delete the script in HTML and add in the JS script editor: That's all

But I must always give two differents positions for "left". Do you have an idea?

[lexoyo]

I would need to see the website

[salutlouis]

I have update it now. http://www.montres-mar.ch To view the slide: Collection -> Millésime 2008

I have to work, but it's a first idea

[lexoyo]

Ah ok I see why you have to set left, this is because initially the menu is in the container which is centered. So you just have to center the menu when it becomes fixed, try this:

.bande.floatable {
  position: fixed;
  left: 50%;
  top: 0;
  margin-left: -480px;
}

Where 480 is half of the menu's width

[salutlouis]

I have update a new version I have 2 questions:

• I want to open all windows on the top. Is it possible?
• I want to translate my site. I have read this: "I mean that backnode will be the perfect tool for translating a website as soon as it has a template system". What is the better way?

[lexoyo]

Nice!

I want to open all windows on the top. Is it possible?

You mean in a blank window? This is bad practice really

I want to translate my site. I have read this: "I mean that backnode will be the perfect tool for translating a website as soon as it has a template system". What is the better way?

I guess you will have to duplicate your whole website... I will think about something simple Maybe with Jekyll... If you use your website as a jekyll template?

[mattrunyon]

In the css for this template, a few lines at the top should probably be changed dealing with the html element transitions.

Instead of display: block !important;

it should probably be display: none;

and then change display back to block for active elements. The way it currently is causes some issues with html elements from different pages overlaying each other and preventing elements on one page from being clicked.

As a test, embed a youtube video at the same position and same size on 2 different pages using an html element box. You should be able to click on one to play, but not the video on the other page.

Example of what I changed the CSS to in my site is below

/* transition */
        .silex-runtime .paged-element {
            transition: all .15s ease-out;
            opacity: 0;
            display: none;
        }
        .silex-runtime .paged-element.paged-element-visible {
            opacity: 1;
            display: block;
        }

[lexoyo]

Thank you very much @mattrunyon for the bug report and fix With your solution, do you still have page transition?

[mattrunyon]

I thought I did, but when I changed the transition to a longer time, I realized I didn't. Apparently you can't use transitions when you change the display property as well.

But I found a different solution that works as well with transitions. Just add a visibility property to each of the blocks like so

.silex-runtime .paged-element {
    transition: all .15s ease-out;
    opacity: 0;
    visibility: hidden;
    display: block !important;
}
.silex-runtime .paged-element.paged-element-visible {
    opacity: 1;
    visibility: visible;
}

Note that this mainly works since the elements are absolutely positioned. If the elements weren't absolutely positioned, you'd probably want visiblity: collapsed. I got the answer from http://stackoverflow.com/questions/886742/difference-between-visibility-collapsed-and-visibility-hidden

[lexoyo]

Thank you @mattrunyon for pointing this out

Here is someone with the same issue, and this is where I will put a solution. https://github.com/silexlabs/Silex/issues/328

I have also updated this template to fix the issue as of now.