Modify front page "featured images" slideshow

fsprorg · Member · Aug 9, 2014 at 1:53 pm
Copy link

Add topic to favorites
Hello,

I would like to locate the front page “featured images” slideshow right below the header image and menu just before the current content of “Inicio” and the Right side Widget. Right now the slideshow is located at the end of the page.

Also I would like to add the title of the related post to the featured image at the left hand corner in white color letters.

Finally, I would like to remove the “computer desktop” background of the slideshow and just have the slideshow without any background just the photos.

Thanks!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Aug 11, 2014 at 4:32 pm
Copy link
I can give you some CSS to help get you started, and I can also give you some pointers so you can learn to do future design work on your own.

To move an element on a page using CSS, absolute positioning is commonly used. If you are going to be moving things this way, you should have a good understanding of how it works and this is a really good tutorial about it:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Here is an example I worked on for you as a start. It moves the slideshow that is currently at the bottom of the home page to the top just below the main navigation:
```
.home #wrap {
	margin: 0 auto;
	max-width: 1040px;
	position: relative;
}
.home .container {
	padding-top: 630px;
}
.home #slideshow {
	position: absolute;
	top: 360px;
	background: inherit;
}
.home #slideshow .flexslider {
	top: 0;
}
```
Note that this CSS depends on the other custom CSS you have already added (i.e. the part that hides the slideshow background).

If you would prefer to have the slideshow a different size, you can try experimenting with the width of the #slideshow element. It may take you some work and experimentation to get the final version looking how you want. Another possible route would be to use a slideshow inside the home page itself so it sits just inside the main content area of that page:
http://en.support.wordpress.com/images/gallery/#adding-a-gallery-or-slideshow
designsimply · Member · Aug 11, 2014 at 4:33 pm
Copy link
Also I would like to add the title of the related post to the featured image at the left hand corner in white color letters.

I’m not sure which title you are referring to. When asking for support, please be specific. If you still need help with that please start a new help request and include a link to the page where the title can be seen and also mention the text of the title so it can be found easily.
designsimply · Member · Aug 11, 2014 at 4:34 pm
Copy link
Finally, I would like to remove the “computer desktop” background of the slideshow and just have the slideshow without any background just the photos.

I think you got this one covered by using the following custom CSS:
```
#slideshow .screen {
	visibility: hidden
}
```

No items found.