Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Indexhibit was updated to version 2.1.4 on April 10, 2017.

Delete background color when hover images and customize slideshow

 

Indexhibit version: 2.0
Thread is resolved.

deandelso
SPAIN
4 year(s) ago
Permalink Post

Hello!
I’m working on a web for my studio deandelso.com. I’d like to customize a few things that maybe are very easy but I've searched the forum and I was unable to find out how this can be done. I am new at CSS but I’ve made some modifications yet, so if it’s a simple coding thing I thik I could manage.

1.First thing is about hover images:
My links have a background with color on hover (yellow) but I don’t want this effect for the images. I looked forward the forum and I found similar questions and I tried to play with the style.css file, but I couldn’t do it.

2.The other things are about slideshow. I use this exhibit format to show all my proyects (PROYECTOS in the index). I have customize the file format.slideshow.php with word pad and uploaded it with filezilla.

I changed the words “Previous/Next” for “Prev/Next”, and then I placed them before the numbers, but now the space between “Next” and the numbers is very small... How can I increase it?

The other thing I want to do is to create a link to a text with more information about the proyect. I could manage to put the word “+info” beside the numbers, but now I don’t know how redirect it to an exhibit with only text… I suppose I’ve to create a subsection or something… How can I do that?

Any help would be greatly appreciated!
Thanks in advance!

P.S. Thanks for Indexhibit 2. It is great!

arsondpi
GREECE
4 year(s) ago
Permalink Post

1.
You'll need either Firebug the Firefox plugin or some bookmarklet to target and track down the exact css selector.
Since you're using Visual Index and slideshow I think the following will do (notice the !important attribute which overrides every other css rule for the chosen selector.

  1. .picture_holder a { background: transparent !important; }
  2. #slideshow a { background: transparent !important; }

2.
Again using Firebug I found out that you should effect a selector called #total

3. Make “+info” into a link

  1. <a link='url of your exhibit goes here'>+info</a>

The exhibit with the text could be a hidden exhibit (page options > hide exhibit from index, On)

deandelso
SPAIN
4 year(s) ago
Permalink Post

Thans arsondpi for your quick response.
I use Firebug, but as I am new at programming there are many things that i dont understadn very well.

1. I'd put the code you told me on the file style.css and it works fine for all the images except for the logo that I have on the pre-nav text... how can i do that?

2. I've tried to put the selector #total on the format.slideshow.php but surely i'm not doing it properly because i can't increase the space between next and the numbers

3. Fo the +info link I have a question.
I've created a new section called "TEXTOS" so I can create the exhibits with the only text (one for each proyect) so I will have a exhibit to redirect each "+info" link.
Then what I think I've to do is to modify the file format.slideshow.php to make "+info" into a link.... I'll have a diferent text for each proyect, so never is the same url:

+info

The question is... what url do I have to put on the file format.slideshow.php?

I think I should call with the same title both exhibits (the one with the slideshow and the one with the text) ...

Thanks in advance,

deandelso
SPAIN
4 year(s) ago
Permalink Post

Sorry, instead of +info I sould have posted:

  1. <a href="deandelso.com/textos/…;

Best Answer!
arsondpi
GREECE
4 year(s) ago
Permalink Post

1. right click on your logo and select Inpect element with firebug.
Again in firebug's code right click the element and select Copy CSS path.
You'll see:
html body.exhibits div#index div.container div.top a
which -assuming that you know code basics- can be shortened to
#index .top a

2. This is wrong:

  1. <a href="#total">    </a>

I mean't put the selector with an attribute in the css part of the format or in your style.css, for example:

  1. #total { padding: 0 100px 0 200px; }

3. Now I understood that +info is incorporated to the actual format.
I don't recommend this as formats have universal appearances and you'd need serious coding skills to do this automatically.
What I suggest is to insert the link to the text-exhibit in your caption, just as I mention on my first post.

deandelso
SPAIN
4 year(s) ago
Permalink Post

Thank you very much, I'll try it!

deandelso
SPAIN
4 year(s) ago
Permalink Post

Hello Arsondpi,
I worked with your recommendations and I could do nearly every thing I wanted and it works!
The only thing I could'nt do was to delete the yellow background when I hover the logo, my coding skills are very limitated. For the moment I'll leave it and keep working on the web.
Thank you very much for your patience

 

This thread has been closed, thank you.