Login

der Warst · (This post was last modified: 2017-12-14, 05:00:20 by der Warst.)

Hello,

So I'm currently working on my new site and it's going along rather nicely. I'm using tempUser's CleanBlogGh theme and I'm currently in the process of customising it to my needs.

I'm building this landing page right now and I'm running into some quite specific design problems that I would be very happy to get some help with:

http://www.schaefersimon.de/getsimple

First, how would it be possible to display the page title in exactly the way it is right now, omitting the surrounding header? As it is right now, the header is lying over the animated boxes and they don't react when I'm hovering above them where the header is. I'd still like to have the title on top, but not the whole surrounding box. How do I do that?

Also: I managed to create a list out of the menu entries I styled to show as animated boxes. I'll make the box movements more random, but one thing at a time.
I would quite like to replace the boxes with thumbs of the respective pages' header images. I fiddled around a bit with stuff, but unsuccessfully so far. I thought it might be possible through the same component as for the backgrounds for the pages, but just inserting:

Code:
<?php get_component('cbg-head-bg-image'); ?>

as background image didn't work. And I'm not too sure where else to put that.

So if someone could point me into the right direction of how I could get there, I'd be really grateful. I guess most of this can be done quite easily, I just haven't worked with this kinda stuff for ages and my already pretty basic knowledge has gone rusty.

Thanks
Simon

datiswous · 2017-12-14, 22:23:48

Maybe you can post the code you used for the list of animated menu boxes, so that we can better see what you're doing.

der Warst · 2017-12-17, 06:02:42

I created a new template where this is inserted on at the beginning of the <body>:

Code:
<ul class="box">

            <?php

  $bc = return_i18n_breadcrumbs(return_page_slug());

  get_i18n_navigation($bc[0]['url']=='index'?return_page_slug():'index',1,99);

?>

      </ul>

This is the respective css:

Code:
.box {

  background-color: white;

  width: 100%;

  height: 100%;

  position: fixed;

  overflow: hidden;

     border: 1px solid red;

}

.box ul {

    display: flex;

    flex-direction: column-reverse;

}

.box li {

     text-align:center;

  display: block;

    flex: 0 0 auto;

  width: 150px;

  height: 150px;

  background-color:black;

  box-shadow:  5px 5px 5px rgba(0,0,0,6);

  position: absolute;

  -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;

  -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;

  -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;

  animation: moveX 12s linear 0s infinite alternate, moveY 10.4s linear 0s infinite alternate;

}

 .box li a {

     text-decoration: none;

     color:white; 

}

.box li:hover {

  animation-play-state: paused;

  -moz-box-shadow:10px 10px 7px red;

  -webkit-box-shadow: 10px 10px 7px red;

  box-shadow:10px 10px 7px red;

  -webkit-transform: scale(1.5);

  -moz-transform: scale(1.5);

  -o-transform: scale(1.5);

  z-index:5;

}

@-webkit-keyframes moveX {

  from { left: 0; } to { left: 480px; }

}

@-moz-keyframes moveX {

  from { left: 0; } to { left: 480px; }

}

@-o-keyframes moveX {

  from { left: 0%; } to { left: 480px; }

}

@keyframes moveX {

  from { left: 0%; } to { left: 95%; }

}

@-webkit-keyframes moveY {

  from { top: 0; } to { top: 280px; }

}

@-moz-keyframes moveY {

  from { top: 0; } to { top: 280px; }

}

@-o-keyframes moveY {

  from { top: 0; } to { top: 280px; }

}

@keyframes moveY {

  from { top: 0%; } to { top: 95%; }

}

Any ideas?

Login
Username:
Password:	Lost Password?
	Remember me