How to remove background of TN3 gallery in Graphene theme

  • Olivier Boels



    I have tried to remove the backgrounds ( black and grey) of the gallery but without success. I wrote to the people from the TN3 gallery and these are the codes they sent me , but it doesn’t work in the CSS custom editor of the Graphene theme. M’I missing something?

    After reflexion, instead of taking out the black background , I would like to be able to resize it!

    Thanks a lot!

    This is the code for the grey background :

    .tn3e-gallery {
    position: relative;
    width: 960px;
    height: 550px;
    line-height: normal;}

    “and to remove the black area you should edit the class “.tn3e-image” to look like this:”

    .tn3e-image {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 920px;
    height: 360px;



    Wow – very interesting use of the Graphene theme!!

    You should add your site to our “Showcase” forum when you get it near completion!

    Okay… so you’re trying to adjust the size of that big grey overlay when you open the page?

    Olivier Boels


    Hi Josh,

    Thanks and yes, definitly I will put it in the showvcase especially because I find you guys very efficient. Thanks for the good job at help us. I’m a beginner in the css universe and your dedication is really appreciated. Ok, so What I would like to do is to get rid of the grey area and being able to resize the black area( background). I say resize because I’m not sure yet how will be the final layout, so I would like to be able to hide it for now, this way if later on I decide to get the background again i just will have to change the size. I hope you’ll understand what I’m saying? This will be easier if I could send you an image of the idea of what I want to do. I Have tried to do these changes in the firebug but the problem I enconter is that when I change size of the black area the picture also disappear, it seems that the picture and the black area are one only container! Also when I have tried to take out the grey area, the picture goes completly to the right and the filmstrip end up on the top of the menu on the top of the page. I got in touch with the people from TN3 but didn’t really resolve the problem.

    Please tell me if I could send you and image of what I would like to do with the layout which will make the understanding way easier.

    Thanks again.



    Well, is really simple with firebug.

    you need to implement this code:

    for grey border:

    .tn3e-gallery {
    background-color: transparent;
    background-image: none;

    for black background:

    .tn3e-image {

    First try to disable that code using !important statement like this:

    background-color: transparent !important;

    If won’t work than edit exact .css file in your plugin directory:

    …wp-content/plugins/tn3-gallery/skins/tn3e/tn3e.css file.

    by edit I mean to delete that lines or adjust them like described above.

    For resizing is a little difficult, as far as I see styling is hardcoded in html, I assume by javascript. Ask for support on tn3-gallery forum or so…

    If you need more help contact me on email.

    Olivier Boels


    Thanks you so much Luko, it works just fine. Where do I find your email?





    Glad you make it:


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

  • You must be logged in to reply to this topic.