High Resolution Slider

Posted in : Read WP
wondertracker
Participant
1 March 2013 at 18:48
#3960
Hi,

I am using a slider on the homepage… To have the slide display correctly on retina display I added that to custom css:
```
.flexslider .slides img { max-width: 800px; }
@media screen and (max-width: 400px) {
	.site-title img { max-width: 70%; }
}
```
It works but it breaks the center alignment…. and the arrows are outside of the slides…

Thank you for your help
Mehmet S.
Keymaster
1 March 2013 at 20:08
#3963
Don’t add any custom css code. Use the inline_slider shortcode to add a slider to the Homepage template. Max content width is 780px for that page. So add your images to the Media Library @2x size for retina displays.
```
[inline_slider]
[slide src="put-your-image1-file-url-here"]Slide one title[/slide]
[slide src="put-your-image2-file-url-here"]Slide two title[/slide]
[/inline_slider]
```
Mehmet S.
Keymaster
1 March 2013 at 21:16
#3965
if you are using the Full width Page template as a homepage add custom css for center alignment:
```
.flexslider {
display: block;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
```
– change 800 value for different width sizes.
wondertracker
Participant
1 March 2013 at 21:17
#3966

Thank you… I am using the Full width Page template … But resizing the slides to 780px… worked…

wondertracker
Participant
1 March 2013 at 21:27
#3968

How can I get rid of the arrows in the slides ?

Many thanks
Mehmet S.
Keymaster
1 March 2013 at 21:30
#3969
```
.flex-direction-nav { display: none; }
```
wondertracker
Participant
1 March 2013 at 21:49
#3970

Thank you !

;-)

jnewall
Participant
5 March 2013 at 03:33
#4039

Hi Mehmet,

Can you tell me where I have to implement your above comment in regards to how to using the inside slider short code to add a slider? I’m not sure where the inside slider short code is, or where I should add that piece of CSS code that you provided?

Mehmet S.
Keymaster
5 March 2013 at 03:37
#4040

All custom css codes goes to Theme Options > Style > Custom CSS area. And put the inline slider shortcode to the content editor of any page or post.

jnewall
Participant
5 March 2013 at 03:43
#4041

Hm, I may be way off. What I’m trying to do is put a permanent picture below the title of my blog, And this inline slider may not even be the right solution. Do you have any idea on how to have a permanent picture on the homepage of my blog?

jnewall
Participant
5 March 2013 at 04:20
#4042

Also, can you tell me how I can format a post that JUST has the writing, and none of the ‘posted in about on March 13th’. I want this to be as simple as possible, so I’d like to just be able to have the post displayed with the title and nothing else.

Thanks.
Mehmet S.
Keymaster
6 March 2013 at 05:13
#4066
– You can add a picture to content editor by using the Add Media button above the editor.

– Paste the code below to Theme Options > Style > Custom CSS box to hide the detail information of the posts:
```
.blog-posts .post .entry-meta { display: none; }
```
thekitchencurator
Participant
7 March 2013 at 15:26
#4114

If you wanted to remove the detail information of the posts except for the date in the following format – Thursday 7th March 2013 would you paste the below code to > Custom CSS?

.blog-posts .post .entry-meta { display: l jS Y; }

dmkcreative
Participant
6 May 2013 at 15:07
#5684

Can you make different versions or sizes of the flexslider for your site so that if I wanted a full-width one on the home page and smaller ones elsewhere? If so, how would I do that?
Mehmet S.
Keymaster
8 May 2013 at 01:55
#5703
Use column shortcodes to restrict the slider width.

Example 1: Full width slider
```
[inline_slider autoplay="true"]
	[slide alt="" src=""]Put you slide title here.[/slide]
	[slide alt="" src=""]Put you slide title here.[/slide]
	[slide alt="" src=""]Put you slide title here.[/slide]
[/inline_slider]
```
Example 2: Half width slider
```
[column width="6"]
	[inline_slider autoplay="true"]
		[slide alt="" src=""]Put you slide title here.[/slide]
		[slide alt="" src=""]Put you slide title here.[/slide]
		[slide alt="" src=""]Put you slide title here.[/slide]
	[/inline_slider]
[/column]
```

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item

Read WP - Minimalist WordPress Blog Theme

by pixelwars