Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #10599

    How can I put a thin (1px black) border around the portfolio preview images?

    Thanks Joe

    #68649

    Hey!

    Since there are a lot of different gallery options: which one do you mean?

    Do you have a link to the portfolio page? that would make it easier for us to tell you were to add a border in your css file

    #68650

    Thanks for the reply…here is the link. This is a “standard” Flashlight portfolio page. Hope this helps.

    http://joeligammari.com/portfolio

    I am very pleased with the Flashlight theme and support!

    Joe

    #68651

    Hi!

    Try to add following code to css/custom.css:

    .portfolio_image img{
    border: 1px solid #000;
    }

    .template-portfolio-overview .innerAjax .post-entry {
    margin: 0 0 0 29px;
    width: 201px;
    }

    Best regards,

    Peter

    #68652

    Hi Peter,

    This gets me a border around the preview image except for the right side.

    .portfolio_image{

    border: 1px solid #000;

    width: 201px;

    }

    This gets me a border around all sides including the image title but all the preview images become unaligned. It forces the third image to the next row.

    .template-portfolio-overview .innerAjax .post-entry {

    margin: 0 0 0 29px;

    width: 201px;

    border: 1px solid #000;

    }

    It tried different parameters and can’t seam to get a right border!

    Any suggestions?

    Thanks,

    Joe

    #68653

    Hey!

    Hi!

    try adding this to your custom.css instead of all of the above:

    .portfolio_image{
    border: 1px solid #000;
    }

    .portfolio_image img{
    width: 198px;
    }

    Best regards,

    Chris

    Best regards,

    Peter

    #68654

    Hi Chris,

    Now my custom css file is not attaching properly!!!

    The complete site is not working properly.

    Joe

    #68655

    Maybe it’s a browser cache issue. Please try to clear it. I corrected Chris code a bit (the .portfolio_image class is attached to the surrounding container and a width of 198 would break the right border).

    #68656

    Hi guys,

    for some reason the custom.css file is not being read completely. I have been able to recover much of the site but still some issues. It tried the code change but it does not seem to to getting implemented nothing is changing.

    Tried clearing the cache will try again and get back to you with an answer.

    Thanks for your help.

    Joe

    #68657

    Hi again,

    got almost everything back.I don’t think it was a cache issue. I had to delete and upload the custom.css file and make and changes. Weird!

    Tried the code, even by making the image size width = 195px the right border is still missing. Just having this issue with the “portfolio”, all other borders are working fine.

    You can visit the site and still see the right border missing.

    Thanks

    Joe

    #68658

    As it is now, really the only option I can think of to make this look good is replacing your custom.css code regarding the portfolio, this:

    .portfolio_image{
    border: 1px solid #000;
    }

    .portfolio_image img{
    width: 195px;
    }

    by this

    .portfolio_image{
    border: 1px solid #000;
    width:198px;
    }
    .portfolio_image img{
    width: 198px;
    }

    Making the .portfolio_image 198px wide will allow a 1px border, making the total 200px, as set by the surrounding div. It seems to work for me so I’m not sure what Peter means. Am I missing something?

    Cheers,

    Chris

    #68659

    Hi Chris,

    Thanks!!!

    That worked perfectly.

    Regards,

    Joe

    #68660

    Nevermind. I added the border around the image which would breakthe layout if the surrounding container is as big as the image itself. Your solution adds it to the container itself (eventually the same result but another approach :D ).

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

The topic ‘Borders around Portfolio Preview Images?’ is closed to new replies.