How can I put a thin (1px black) border around the portfolio preview images?
Thanks Joe
How can I put a thin (1px black) border around the portfolio preview images?
Thanks Joe
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
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
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
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
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
Hi Chris,
Now my custom css file is not attaching properly!!!
The complete site is not working properly.
Joe
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).
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
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
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
Hi Chris,
Thanks!!!
That worked perfectly.
Regards,
Joe
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 ).
This topic has been closed to new replies.