Borders around Portfolio Preview Images? « Support Forum | Kriesi.at

Support Forum » Flashlight

Borders around Portfolio Preview Images?

13 posts from 4 voices

Started 1 year ago by JoeLamari
Latest reply from Dude
This topic is closed
This topic is resolved

Tags:

JoeLamari
Member

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

Thanks Joe

Posted 1 year ago #
Kriesi
Key Master

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

Posted 1 year ago #
JoeLamari
Member

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

Posted 1 year ago #

Dude
Dude

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

Posted 1 year ago #

JoeLamari
Member

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

Posted 1 year ago #
Chris Beard
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
Posted 1 year ago #
JoeLamari
Member

Hi Chris,

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

The complete site is not working properly.

Joe

Posted 1 year ago #
Dude
Dude

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).

Posted 1 year ago #
JoeLamari
Member

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

Posted 1 year ago #
JoeLamari
Member

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

Posted 1 year ago #
Chris Beard
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
Posted 1 year ago #
JoeLamari
Member

Hi Chris,

Thanks!!!

That worked perfectly.

Regards,
Joe

Posted 1 year ago #
Dude
Dude

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 ).

Posted 1 year ago #