Image as section-title and exhibition-title

heyguillaume / 2013-07-15 08:45:13   

Hey all,

I downloaded the last version of Indexhibit. I preferred to start from zero my website, not to upgrade it from the former version.

I succeeded in the old version to put images as section-title and exhibition-title (thanks to Doctor_Osimo & Ezequiel through this thread : indexhibit.org/forum/thread/1017/).

I tried with the new version to reemplace the codes, with no success.

Did someone succeed?

Thanks
Guillaume

arsondpi / 2013-07-15 08:54:06   

Hello!

There's no issue as such in the new version.
Each section title and exhibit has its own css selector which means that via css (the background-image property) you can get each exhibit and section title in your #index to have its own image.
Again via css, you can even get them to have normal, hover, visited and active states!

What are you trying to do though? Can you post your url so we can be of further help.

heyguillaume / 2013-07-15 17:11:14   

I would like to put images or special fonts in the menu bar, and in the expanding menu.

I made a screenshot of my former website built with the former version of indexhibit : img850.imageshack.us/img850/9521/…

Guillaume

Vaska A / 2013-07-15 17:23:54   

I can't understand what is going on in the screenshot - the text is not readable.

Vaska A / 2013-07-15 17:35:10   

There are now newer and better hooks for replacing text with images - just have a look at the CSS (recommend using Firebug) and it will help you out.

Give it a try and show us and we can probably work out the quirks.

heyguillaume / 2013-07-15 17:46:00   

Hello Vaska,

and thanks for replying. With the former version of indexhibit, I just changed the index.php of the plugin by this way (indexhibit.org/forum/thread/1017/) and it worked perfectly.
So if I understood well, it's not possible with the new version?

Guillaume

Vaska A / 2013-07-15 18:04:11   

Did you read what I said in my previous post? Yes, it is possible...

heyguillaume / 2013-07-16 05:14:09   

Yes Vaska, perfect!
I know Firebug, but don't know which CSS I have to see or modify in order to put images instead texts.
Guillaume

arsondpi / 2013-07-16 07:28:09   

right click on a section or exhibit select Inspect element with Firebug and voila: you'll get the css selector to use in your style.css of your theme.

It's quite simple really - even by looking at your webpage source code.

heyguillaume / 2013-07-16 08:17:05   

Thanks arsondpi being patient with me!
The things I don't understand is which website must I have to inspect the CSS?
My older one (with images instead of texts) is no more available. The new one? But how can I see what to change to put images?
Guillaume

arsondpi / 2013-07-16 12:44:03   

What it your new site that you want to insert the images into the section titles?

heyguillaume / 2013-07-16 16:29:53   

My website (under construction) is guillaumeblot.com/.
I would like to put a small image instead of "ecrits" and another small image for each under-section such as "autres" & "brainmagazine".
Thanks again for your help.
Guillaume

Vaska A / 2013-07-16 16:52:22   

For "ecrits" when I look at the html/css this is what I see:

  1. <span id='section_title_2' class='section_title'>
  2. <a href='guillaumeblot.com/index.php/project/' id='section_link_2'>ecrits</…;
  3. </span>

There are hooks in the span that you can target to do what you need. Does this make sense now?

heyguillaume / 2013-07-18 15:11:05   

Thanks Vaska. It's clearer but not totally limpid.

So please tell me if I'm okay when I do this : - Then I go to the style.css of my theme - I copy/paste the line (I don't know exactly where?)
  • ecrits - I change a part (I don't know which one) with an ImageShack code (for example) - And I do the same for the under-section titles

    Right?
    Guillaume

  • arsondpi / 2013-07-18 17:20:44   
    1. <span id='section_title_X' class='section_title'>
    2. <a href='URL/' id='section_link_2'>Section Text here</a>
    3. </span>

    Where X is the number of that section, can be replaced with something like:

    1. #section_title_X { display: block; width: 150px; height: 20px; background: url(URL_OF_YOUR_IMAGE_HERE); }

    Can't be more obvious than this (I think)...

    heyguillaume / 2013-07-20 15:49:49   

    Thanks arsondpi! It worked for the section title.

    But I didn't suceed in doing it for the exhibit title. I tried this code :
    #exhibit_title_X { display: block; width: 150px; height: 20px; background: url(URL_OF_MY_IMAGE_HERE); }
    Where X seems to be the number of the exhibit title. But it didn't work.

    Moreover, the name of the section (for example "ecrits") appears on the image (guillaumeblot.com/). Is it possible to have just the image and not the text.

    Thanks again for all.
    Best,
    Guillaume

    arsondpi / 2013-07-20 16:32:13   

    That's because there's another css rule that overrides this.
    Try for example

    1. #exhibit_7.exhibit_title a { background: red; }

    Of course since this is a link you can set a:link, a:visited, a:hover, a:active states.

    I recommend using Firebug (a Firefox plugin) to track css rules like this.

    heyguillaume / 2013-07-22 18:07:55   

    Thanks arsondpi. Now it works.
    My problem would be that there's still the words "ecrits", "autres" & "brainmagazine" written on my background image. And I don't want: I would like just the clickable image.
    Do you have any solution?
    Thanks
    Guillaume

    Vaska A / 2013-07-22 18:20:26   

    Have you tried searching our site or even Google for things about CSS? We don't have every customization answer here, unfortunately.

    heloise / 2013-07-27 20:44:39   

    Hi,
    am interested into get a picture instead of title mondomaine.fr (appaering on the top left of the screen),
    thing is that i have read all thoose post on the forum, and i've also found good exemple of built with indexhibit website whoom have apparently succed.
    So i can pick up their codes with firebug, but thing i don't know is,
    wich file of my webside should i modify?
    Could you tell me?
    Thanks

    arsondpi / 2013-07-27 21:56:11   

    Hello heloise!
    Check out this thread: indexhibit.org/forum/thread/19060/
    It generic but I think it's got all what you need

    * this thread is about replacing a section title with an image

    heloise / 2013-07-28 07:06:56   

    Oh thank you!
    But has i'm new.. what do you call the 'pre nav area'?

    heloise / 2013-07-28 07:23:08   

    At least i've understood how to get the good URL adress from my picture, THANKS TO YOU.
    But, thing is that i can't understand in wich folder should i paste it and modify the code?

    arsondpi / 2013-07-28 11:02:01   

    Here's an another way of uploading images.
    This way you won't be confused: indexhibit.org/forum/thread/18969/

    heloise / 2013-07-28 17:57:20   

    UH UH Thanks!
    I succed into getting a picture instead of the title..
    but know i'm trying to get a link in order to always get to the main page by cliking on my logo, and have probably done something wrong.
    I wrote on the pre nav area (know i know what's this ;):

    < img src="/www/files/gimgs/logo.png" alt="logo.png" width="116" height="111" margin="3" padding="3" />< /a>

    when i go to my website, the link seems to work but instead of the picture i got my code...........
    Probably the image source wrong??

    arsondpi / 2013-07-28 18:49:32   

    yes the path of your image is wrong.
    Check again. It should be something like YOUR_DOMAIN/files/gimgs/logo.png

    heloise / 2013-07-28 23:12:10   

    Great, it works!
    thanks again

    This thread has been closed, thank you.