• Registered: 2012-12-24
  • Posts: 34

Topic: custom image nav symbols and thumbs buttons

We are  trying to customize the look of our galleries.

I have made the image nav buttons look less chunky by editing the assets gif and png files for shape but cant figure out how to change the density of the arrows.   

I want them to appear very pale grey instead of black. I am using a white background to the galleries by the way.

Also I would prefer to shrink the size of the reverse the show thumbs buttons (etc) and reverse them such that I see dark icons against my white back ground ( rather than square buttons with cut outs in the center)

current state of the site   http://philipchudy.com

Appreciate any help with this,

thanks

  • Registered: 2012-04-24
  • Posts: 5,906

Re: custom image nav symbols and thumbs buttons

I want them to appear very pale grey instead of black.

You should be able to change the color of the buttons using an image manipulation program such as Adobe Photoshop.

Also I would prefer to shrink the size of the reverse the show thumbs buttons (etc)

You would need to keep the size of the buttons the same as in the original 'assets.png' file. You could perhaps keep the bounds for each button the same but use a smaller image in the center of each one.

and reverse them such that I see dark icons against my white back ground ( rather than square buttons with cut outs in the center)

It sounds like you might be better creating a new 'assets.png' file from scratch (using the existing one as a template only to know where the buttons should be placed within the image) rather than trying to modify the existing one.

  • Registered: 2012-12-24
  • Posts: 34

Re: custom image nav symbols and thumbs buttons

thanks-  I did that without difficulty except that I was not able to successfully reverse the symbols (in other words to have the symbols with no squares around them). What happened as far as I can see was that there was some residual overlap between the symbols which still shows up. it looks as if it is an overlap between rounded boxes which I presume are defined in the code rather than in the png

  • Registered: 2012-04-24
  • Posts: 5,906

Re: custom image nav symbols and thumbs buttons

As far as I am aware, there should be no overlap if the individual icons are positioned correctly within the 'assets.png' file.
If you have overlapping icons when using your custom 'assets.png' file, you could try redefining the positions of the icons within the file in the 'jbcore/classic/theme.css' file. (Search for the term 'assets.png' and the corresponding class names should give you a clue as to which icon is being referred to.)

  • Registered: 2012-12-24
  • Posts: 34

Re: custom image nav symbols and thumbs buttons

Well, without insight as to how the program works there could be 2 different ways to try to reverse the symbols.

My first approach was to make transparent - on selected buttons that - that which was opaque and vice versa. And that did infact give me a reversed symbol albeit with this funny bits on the left and right. This clearly was wrong thinking in terms of how the program works.

The other approach which does work is to change the color or tonal value of the symbols in the template file - and set the button background to be fully  transparent and there are no edge borders appearing on the buttons.

But part of the confusion is that the software does in fact compensate and reverse the tone or color of the button symbols if the background is the same as the symbol itself. So if you are working with pure white and black you can get rather confused about what the color on the template does.