SCROLLING IMAGES ON HEADER

  • shit101 · Member ·

    I have the gridspace theme and wanted to customize my layout so that I have four infinitely scrolling images at the very top, replacing the one current image.

    This is the gridspace css sheet legend
    * 1. Resets
    * 2. Structure
    * 3. Fonts
    * 4. Header
    * 5. Menu
    * 6. Content
    * 7. Portfolio Grid/List
    * 8. Post Formats
    * 9. Images & Media
    * 10. Forms
    * 11. Comments
    * 12. Tables
    * 13. Sidebar & Widgets
    * 14. Footer
    * 15. Buttons
    * 16. Messages
    * 17. Clear Floats
    * 18. Icons
    * 19. WordPress.com style overrides
    * 20. Responsiveness: Tablets
    * 21. Responsiveness: Mobile
    * 22. Retina Icons

    What html should I input and where should I input it under?
    I tried using following the instructions to this blog http://designshack.net/articles/css/infinitephotobanner/ but it just scrolls the entire blog content.

    The blog I need help with is: (visible only to logged in users)

  • timethief · Member ·

    What html should I input and where should I input it under?

    Does the Custom Design upgrade let me edit HTML?
    No. The Custom Design upgrade allows you to edit fonts and CSS only. You can change the appearance of a theme, but not its HTML markup, PHP code, or content. Read the full section here http://en.support.wordpress.com/custom-design/#frequently-asked-questions

  • shit101 · Member ·

    New question would be what would be the CSS for scrolling images on the header.

  • timethief · Member ·

    Gridspace is a premium theme. We Volunteers answering questions on this support forum do not have access to premium themes. Staff support comes with the upgrade but there is a backlog of folks waiting.

    Read-access to the premium themes forum is now open to all users so you can search to see if your question has been previously asked and answered there. The premium theme forums are at http://premium-themes.forums.wordpress.com/ with separate sections for each theme. http://premium-themes.forums.wordpress.com/forum/gridspace

    If you are not successful when searching there is a link for the specific Premium Theme support forum for your theme under Appearance -> Themes in your blog’s Dashboard, but do note that the premium theme must be active and you must be signed in as the user who purchased it in order to see it and post to it.

    Theme description: http://theme.wordpress.com/themes/gridspace/
    Live demo site: http://gridspacedemo.wordpress.com/

  • shit101 · Member ·

    [UPDATE: Code removed by staff because it was too much for one forum reply. It’s better to link to the CSS if it’s long or just post CSS relevant to the question.]

  • timethief · Member ·

    Why did you post that here? When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing.

  • shit101 · Member ·

    Yes i understand, but since you do not have the access to the style sheet, I’m just posting it here for people to see.

  • timethief · Member ·

    Staff have access to the Stylesheet. Staff are the ones who are going to help you and that’s not likely to be any time soon as there is a considerable backlog of bloggers waiting who posted before you did. I think you are more likely to be looking at days than hours when it comes to getting CSS editing help.

  • designsimply · Member ·

    I have the gridspace theme and wanted to customize my layout so that I have four infinitely scrolling images at the very top, replacing the one current image.

    That’s a pretty freaking awesome tutorial. Here’s how you can take the example from http://designshack.net/articles/css/infinitephotobanner/ and use it on your blog”

    First, you’ll need to add HTML. Add it to a text widget in the sidebar. Here is some example HTML you can use based on the tutorial and using some random images from your header and latest posts: 

    <div class="photobanner">
	<img class="first" src="http://shit102.files.wordpress.com/2012/11/cropped-cropped-img_6344.jpg" alt="">
	<img src="http://shit102.files.wordpress.com/2012/11/img_7426.jpg" alt="">
	<img src="http://shit102.files.wordpress.com/2012/11/img_0036.jpg" alt="">
</div>

    To add more images, you would just add more “img” lines with different image links in them.

    After that, copy the following CSS (only slightly modified from the tutorial) into your Appearance → Custom Design → CSS editor and click the Preview button:

    .photobanner {
	height: 563px;
	margin-bottom: 80px;
	position: absolute;
	top: 0;
	width: 3550px;
}

/*keyframe animations*/
.photobanner .first {
	-webkit-animation: bannermove 30s linear infinite;
	-moz-animation: bannermove 30s linear infinite;
	-ms-animation: bannermove 30s linear infinite;
	-o-animation: bannermove 30s linear infinite;
	animation: bannermove 30s linear infinite;
}

@keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-moz-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-webkit-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-ms-keyframes bannermove {
	0% {
		margin-left: 0;
	}

	100% {
		margin-left: -2125px;
	}
}

@-o-keyframes bannermove {
}

100% {
	margin-left: -2125px;
}
}

.photobanner img {
	max-height: 563px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}

.photobanner img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
	-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}

    That’s pushing the edges of what CSS can do these days. Pretty neat! Note that these CSS3 rules will only work in the latest browsers, and in the case of Internet Explorer, the animations and transitions won’t work in any version so far except IE10. You can refer to these charts for reference:

    * http://caniuse.com/#feat=css-animation
    * http://caniuse.com/#feat=transforms2d
    * http://caniuse.com/#search=transition

    Aside: Everyone has access to the stylesheets. CSS is visible by looking at the links in the header code so there’s no need to post entire sets of code in the forums and also anyone that knows how to work with CSS can see them. :)

  • The topic ‘SCROLLING IMAGES ON HEADER’ is closed to new replies.