Main Page Slider can look much better « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Shoutbox

closed

not resolved

Main Page Slider can look much better

30 posts from 6 voices

Started 7 months ago by ozgurpolat
Latest reply from Kriesi
This topic is closed
This topic is not resolved

Tags:

No tags yet.

ozgurpolat
Member

I have recently purchased this theme and a while ago I also purchased newscast theme. I have number of questions regarding shoutbox, which I really like but I think it needs improvement:

1. In newscast theme, in the accordion slider the text is on kind of light blue transparent background, here in the shoutbox it is just plain white background and it looks really ugly, something about it really annoys me though I like the theme, I dont like the text background. I noticed that someone already wanted to change this but couldn't and did not get any help and in the end he decided to change the theme all together. But I like this theme so, until I get what I want I willl keep bothering you. I want a transparent background "JUST LIKE THE NEWSCAST"!

2. When there are videos in the slider, and you scroll the mouse over the video, the text kind of slowly disappears, and you get the full video image, but if it is a plain picture in the slider, the text stays, can I make it like it is for the videos.

3. There are three thumbnails under the main slider and you can move these thumbnails with a scrolling box underneath. This was not so obvious to me, I was wondering if it would be possible at all to move the thumbnails slowly when the mouse goes over them.

4. Last but not least, the image gallery arrows and the way they behave in the shoutbox theme are different from newscast theme. In newscast you click on "next ->" and it keeps going till the end and when you click next it starts again. In shoutbox you click the arrow, you get to the end and the arrow disappears and you are looking for the arrow, you realize it is on the other side you have to go to the other side. I would like to be able to use the newscast gallery style in this theme, I don't like the arrows here. Is it possible?

I know this is too many, but I really think this is a great theme but needs improvement.

Posted 7 months ago #
Nick
Moderator
Hi,

1) To change that white color , you keep it white but change its transparency. In the code below I changed it to .80 from 1.0 (visible), with 0 being 100% transparent. (255, 255, 255) is the code for the color white, play around with these two sets of numbers to see how you like it styled best.

Please drop this code into Quick CSS in the backend of the theme or into the custom.css file.
```
.post_excerpt {
background: rgba(255, 255, 255, 0.80);
}
```
2) One is a Combo Slider the other one is an Image Slider. Have you tried using identical slider type? Youtube recently changed their imbed policy. Please read here how it expects the url to look http://support.google.com/youtube/bin/answer.py?hl=en&answer=171780 .

3) Please add this to Quick Css or custom.css to put a hover border around the images
```
a img, a:hover img {
border: 1px;
border-style: solid;
}
```
Your other option is to edit this image themes/shoutbox/images/skin-minimal/scrollbar-ui.png. that is the image with the right and left arrows on the sliding bar. You can add 'move me' or something in real small font or whatever else you feel will make visitors notice the scrollbar , though this is the first time I am hearing about such an issue.

4) I am sorry, could you show me the direct url to the page on newscast that you are comparing with? I looked at the demo and I can't seem to find what you are describing.

Thanks,

Nick
Posted 7 months ago #
ozgurpolat
Member

Hi Nick thank you for your reply and addressing each question. But I am quite new to css and wordpress. My temporary web site I set up to learn this theme is: ozgurpolat.com/shoutbox/

1. I did find the custom.css file and put in the following code:

.post_excerpt {
background: rgba(255, 255, 255, 0.80);
}

but it doesn't seem to work. I am not sure how I can 'add this to Quick Css!. I don't know how to do that. I could not find quick.css file but perhaps you are talking about something else.

2. I don't want to embed a video. I want to only see the text disappear when the mouse hovers over the image. You can see this is happening when a video is embedded into the slider but it doesn't happen when the mouse goes over the images. I don't intend to put videos into the slider.

3. Same as point 1, I updaded the custom.css file but it doesn't seem to work.

4. ozgurpolat.com/shoutbox/

I checked image gallery in newscast theme looks and behaves differently than the shoutbox.

Posted 7 months ago #
ozgurpolat
Member

Note:

1 and 3. I looked at the web site from another browser it seems like updating custom.css file actually worked but when I change to dark skin it doesn't work. I tried changing color values from 255 to 0 for the dark skin but it doesn't work.

3. It is very difficult to notice the sliding bar when the theme is dark and when I use my ipad to slide the slider, it doesn't work. I can not hold the slider to slide it like you do with the mouse. you have to click to the left or right of the slider to slide it. I am really surprised that no one ever complained about this. It just doesn't feel right there is something odd about its behaviour, or possibly it's just me, a dummy who doesn't know how to use the slider. But I am worried that there will be a lot of dummies like myself who will visit the web site and able to work it out. :)

Posted 7 months ago #
Nick
Moderator

Hi,

Quick CSS is located in the Admin > Choices > Theme Options > Layout and Styling :: right at the bottom of that page. You just need to paste the code in there and save the page.

Oh, you are using ios6? Kriesi is coming out with a series of updates for the themes that address the ios6 and its quirks. The first batch got release just a day ago. Please hang on.

Thanks,

Nick

Posted 7 months ago #
ozgurpolat
Member

Hi Nick,

Thanks I found the Quick CSS and put in:

.post_excerpt {
background: rgba(255, 255, 255, 0.80);
}

And it works but only with light skin, if I turn on dark skin, it doesn't work. I also tried to play with the colours and tried

.post_excerpt {
background: rgba(150, 150 150, 0.80);
}

but it doesn't seem to like it, background remains the same in the dark skin. Any ideas? :)

Thank you very much for your help, I really appreciate it.

Ozgur

Posted 7 months ago #
Devin
Moderator
Hi Ozgur,

In your second bit of css you are missing a comma after the second 150. That may be the issue. You can also try:
```
#top .post_excerpt {
background: rgba(51, 51, 51, 0.6);
}
```
Regards,

Devin
Posted 7 months ago #
ozgurpolat
Member

Hi Devin,

That was a typo error when I was writing the post, the actual code was correct but it doesn't work for the dark skin. Your suggestion, changing the code from;

.post_excerpt {
background: rgba(51, 51, 51, 0.6);
}

to:

#top .post_excerpt {
background: rgba(51, 51, 51, 0.6);
}

have solved the problem, thanks.

I also tried to change the text color (the text underneath the title) and put in into quick CSS;

body {
color: rgb(255, 255, 255);
}

but this changes the text color everywhere on the web page and it looks really bad. Is there a way to change this color only in the slider text?

Thanks for your help.

Posted 7 months ago #
ozgurpolat
Member

Hi Nick,

I have checked the version number on my ipad, and it is 5.0.1, the slider cannot be selected in this version and the only way to move it is to touch to the right or the left of the slider. so I don't think it is only a ios6 problem. Do you think this issue will be resolved for all the versions of ipad?

Posted 7 months ago #
Nick
Moderator
Hi,

I believe so. The response so far has been very positive from ipad/iphone users. Please hang on, updates will be out and Kriesi is working day and night to ensure everything is flawless.

The only text I see in the slider of kooks journal website is 'hello world'. the slider itself never loads for me. to change it you can use
```
#top .heading_clone {
bottom: 20px;
left: 20px;
font-size: 13px;
text-transform: uppercase;
padding: 0;
margin: 0;
color: rgba(66, 66, 66, 0.99);
}
```
Thanks,

Nick
I've added some other controls so if you want to move the text around the slider (bottom , left, etc...)
Posted 7 months ago #
ozgurpolat
Member

Hi Nick,

I have two themes from kriesi.at, one of which is newscast but the questions I ask in this post are referring to the shoutbox theme as I mentioned earlier, maybe you did not see it, and I set up this temporary web site to learn how to tweak the theme:

http://www.ozgurpolat.com/shoutbox/

so you can see what happens when I put in:

body {
color: rgb(255, 255, 255);
}

into quick CSS. I tried the code above:

#top .heading_clone {
bottom: 20px;
left: 20px;
font-size: 13px;
text-transform: uppercase;
padding: 0;
margin: 0;
color: rgba(66, 66, 66, 0.99);
}

for "shoutbox" and it doesn't do much. Please IGNORE kooksjournal.com and visit:

http://www.ozgurpolat.com/shoutbox/

You will see what I mean, I just want to change the colour in the slider not everywhere else, at the moment when I use

body {
color: rgb(255, 255, 255);
}

in quick CSS the color is changed throughout the site, and it doesn't look nice. In the slider, the default text colour is not good when the background is transparent so I would like to make the text colour white but only in the slider not in the entire site.

Thanks.

Posted 7 months ago #
Nick
Moderator
Hi,

Sorry about that. Saturday night and had a long day, got the themes mixed up for a moment. :)

But no fear, now I am back on track.

Please add this to the Quick CSS

1) color of title link on top of block of text within slider
```
#top .post_excerpt.entry-content a {
color: green; /*color without mouse over title link*/
}
#top .post_excerpt.entry-content a:hover {
color: blue;/*color when mouse over title link*/
}
```
2) Color of block of text within slider
```
#top .post_excerpt.entry-content p {
color: red;
}
```
If you want your slider image to stop jumping and being surrounded by a purplish border on mouse over , please *remove* the code below from Quick Css. It's too general so it targets everything on the site instead of something specific
```
a:hover, #footer a:hover, #footer .widget li a:hover{
color:#cf4797;
}
a img, a:hover img {
border: 1px;
border-style: solid;
}
```
This will do the trick.

Thanks,

Nick
Posted 7 months ago #
ozgurpolat
Member

Hi Nick,

1. (TICK)

Thank you very much for your help and I am putting a BIG TICK for question 1, now moving to the second question:

2. When you move the mouse over the video (doesn't matter if it is vimeo or your own embedded video content) in the slider, the text slowly disappears to the left of the slider. But this only happens when you have a video, now my question is, is it possible to create the same effect when we have the images in the slider?

Thanks

Posted 7 months ago #
Nick
Moderator
Hi,

Please try this.

Make a backup and open avia.js file located in the /js/ directory of the theme and find line 142 which should look like
```
video = $('.videoslide, .comboslide', this),
```
and replace it with
```
video = $('.videoslide, .comboslide, .imageslide', this),
```
Now I didn't test this, so be ready to revert back to the original file if things don't go according to plan, so make sure you have a backup of the file ready. Also please empty your browser cache , otherwise you may not see any changes.

Thanks,

Nick
Posted 7 months ago #
ozgurpolat
Member

Hi Nick,

2. (TICK!)

Yes it worked ! This is really cool. :) Thank you very much. You can check it out here:

http://www.ozgurpolat.com/shoutbox/

3. (TICK) , I am putting a tick to this one, because I feel that it requires significant amount of work to get the thumbnail pictures move slowly when the mouse goes over them, am I right?

4 This is my last question. Please visit the following link and click on the image in this post,

http://www.kriesi.at/themes/newscast/2010/03/06/why-doesnt-apple-rebrand-to-banana/

You will see that the gallery will open up and when you move your mouse over the picture, you will see an arrow and "NEXT" on the right side of the picture. Now, I already tried this in newscast, if I have more than one picture, I can keep clicking on the "NEXT" arrow, when it reaches to the last picture, if you click "NEXT" again it starts from the first picture.

In Shoutbox theme, if you open up a gallery, it will look similar to the newscast gallery but, YOU WILL NOT SEE "NEXT" arrow in the gallery and when you reach the last image in the gallery, the arrow on the right disappears and to start again you have to move to the left side and go back. Whereas in NEwscast gallery you don't have to do that you can just keep clicking on the next and it will start from the first picture.

My question is, why the designer did not use the same gallery for both themes, they almost look identical, but the one in Newscast behaves much better. And My question is how can I use the gallery of newscast in shoutbox theme?

Thanks

Posted 7 months ago #
Nick
Moderator

Hi,

Both of the themes have been updated and should be available on Themeforest. Please be aware that any changes you've made to the template files will be overwritten by the update, so keep a backup copy of your current website so that you can transfer the updates if required. It is much better to use child themes so that during future updates your modifications to the templates do not get deleted. When you've updates see if the slider is more inline with your suggestions.

Thanks,

Nick

Posted 7 months ago #
ozgurpolat
Member

Hi Nick,

I completely deleted the shoutbox in my host, and installed a fresh version of shoutbox theme I downloaded from themeforest today.

First thing, there is no CHANGE WHAT SO EVER in terms of its behaviour on IPAD. Are you sure you guys have tested this on IPADS? I cannot move the slider, and I am using IPAD2 ios 5.0.1

I haven't noticed any change in the slider either in terms of its look and behaviour.

Now, Are you sure that Themeforest is providing the latest files, if so are you sure that you gave them the latest files?

please take a look at the new fresh installation here and if possible try it with an ipad:

http://ozgurpolat.com/shoutbox/

Regards

Posted 7 months ago #
Dude
Dude

Hey!

Yes, you're using version 1.3 and it's the latest version. However based on the changelog I'd say that Kriesi didn't fix the IPad issue yet. I'll mark this thread for Kriesi's attention.

Best regards,
Peter

Posted 7 months ago #
ozgurpolat
Member

Hi,

I have recently seen a slider on various web sites which are quite similar to shoutbox, but the difference is that instead of the slider that you hold and move with the mouse, they have two big buttons with an arrow on each side as you press them left or right, the thumbnails move. I am not sure how easy to implement this but it can be an alternative.

Posted 7 months ago #
Nick
Moderator

Hi,

Please provide a url to the slider you describe.

There is a multitude of custom sliders available as plugins. That is the beauty of Wordpress, that you can always swap out the features to customize your theme the way you want it to look.

Here is a new slider that i personally like http://www.parallaxslider.com/mouseinteraction.php

Thanks,

Nick

Posted 7 months ago #
ozgurpolat
Member

Hi Nick,

I hope you understand what I mean, on the main page there is a big slider and underneath there are small thumbnails and you can slide them with a small slider using your mouse. As you remember there is still an issue in Ipads, that you cannot pick the slider and move. I don't want to change the whole slider, because I like it, but instead of using the sliding button, can we use arrows like the examples below:

Here is one example:

http://dimsemenov.com/plugins/touchcarousel-wp/#example-4

and here is another one:

http://codecanyon.net/item/thumbnail-scroller-wordpress-plugin/full_screen_preview/2068683?ref=kriesi

Thanks.

Ozgur

Posted 7 months ago #
Nick
Moderator

Ozgur,

I can't 'borrow' a piece of a completely different slider and have it work with the one you are using. It's like taking the transmission from a BMW and trying to install it on a Mercedes. Besides, the owner of BMW will get upset. :)

I think it would be easiest for you to find a slider plugin (free on wordpress) and various premium ones on Code Canyon if you feel having this functionality is crucial.

Thanks,

Nick

Posted 7 months ago #
ozgurpolat
Member

Posted 7 months ago #
ozgurpolat
Member

Ok, another question the, is it possible to make the thumbnail pictures smaller so that we can fit in lets say 6 instead of three pictures? :) And When do you think kriesi might solve ipad problem? :)

Posted 7 months ago #
Ismael
Moderator
Hi,

I think it is possible to show more featured thumbnails. You can start by adding this on your custom.css
```
.feature_thumb {
width: 90px;
min-height: 60px;
}

.feature_thumb img {
width: 80px;
}
```
Regards,
Ismael
Posted 7 months ago #
ozgurpolat
Member

Hi,

If I wanted to change the slider on the main page with another slider like the one Nick recomended or any other slider, how can I do that?

Thanks

Posted 7 months ago #
Ismael
Moderator
Hi,

There are different ways to create a Home page with a different slider but the easiest way is to create a new template like template-fullwidth.php. Duplicate the file then rename this line of code to something else.

Template Name: Fullwidth Page

Replace it with

Template Name: New Homepage

Now find this code
```
$slider = new avia_slideshow(avia_get_the_ID());
 	 				echo $slider->display();
```
You can replace that with the new slider code or shortcode if you are using a slider plugin. You can now create a page then select "New Homepage" as the template.

Regards,
Ismael
Posted 7 months ago #
ozgurpolat
Member

Hi,

I have decided to keep the existing slider but every time I ask the question about the ipad issue, I don't get an answer. I really would like to know the nature of the problem, how difficult it is to fix. Because ipad is very important for me.

Posted 6 months ago #
Dude
Dude

Hi!

I tagged this thread for Kriesi's attention.

Best regards,
Peter

Posted 6 months ago #
Kriesi
Key Master

Well, finally found a good extension for the jquer ui slider that allows for touch controlls and added it. the next version will work fine on ipad and the slider will be touch enabled ;)

Cheers"
Kriesi

Posted 4 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top