Dedicated Boxes in Headers for Photo/ Video Showcasing...

[mastiffman]

Here is my forum... tropheus.proboards.com/

I have dedicated photos for each specific section of boards per topic. I was wanting to know if there was some good coding to create a windowed box for each photo to add a short label for each photo?

Currently I only have a basic "black boarder". I'm not completely familiar with all coding aspects yet but am learning slowly.

 So capabilities in the headers, I'm wanting:

- Dedicating (or group if no dedicating is possible) Window for each photo/video in the header.

- Background color flexibility, with potential to change or make partially transparent.

- Frame all of the way around the window with option to label photo/ video and possible name of author/creator.

- Maybe link to members gallery (Plugin for member gallery by "Todge".

Any guidance would be helpful.

TIA

[Tumbleweed]

Oct 25, 2015 10:10:29 GMT -8 mastiffman said:

Here is my forum... tropheus.proboards.com/

I have dedicated photos for each specific section of boards per topic. I was wanting to know if there was some good coding to create a windowed box for each photo to add a short label for each photo?

Currently I only have a basic "black boarder". I'm not completely familiar with all coding aspects yet but am learning slowly.

 So capabilities in the headers, I'm wanting:

- Dedicating (or group if no dedicating is possible) Window for each photo/video in the header.

- Background color flexibility, with potential to change or make partially transparent.

- Frame all of the way around the window with option to label photo/ video and possible name of author/creator.

- Maybe link to members gallery (Plugin for member gallery by "Todge".

Any guidance would be helpful.

TIA

I'm not sure what you mean by "window" for each photo or the bit about "or group". Totally lost me on that part however the rest would be easy to achieve if you don't mind manually adding the author/creator, the color or style changes. 

Anyway, is something like THIS in the ball park? (I hope you don't mind that I borrowed your cute fish images for a bit to test) I have it all set up with css so you can easily change colors, change the image hover affect and it's easy to edit to add new images, text, etc. Oh, and I also have it so if you click the link it will take them to the members gallary page but of course you'll have to add the link.

[mastiffman]

NICE! Yes! That pretty much what I'm looking for. I don't mind adding the changes as long as I can figure out how. - I might have questions. This is something that I will just have to add to the header of each section that I want it in obviously..? I'm down. What's first?

[Tumbleweed]

Oct 29, 2015 8:56:45 GMT -8 mastiffman said:

NICE! Yes! That pretty much what I'm looking for. I don't mind adding the changes as long as I can figure out how. - I might have questions. This is something that I will just have to add to the header of each section that I want it in obviously..? I'm down. What's first?

Thanks for the pm to remind me of this. I tend to miss things if I'm not quoted or tagged.  Here is the code: (I left your images in there.)



<style>
#my_board_wrapper{
width:820px;
    background-color:#ddddff;
    border:1px solid #000000;
margin:auto;
  padding:10px;
    text-align:center;
}
.my_images{
    width:260px;
  height:300px;
    float:left;
    text-align:center;
    border:2px solid #000000;
    margin:4px;
}
.my_images img{
    border:1px solid black;
    width:250px;
    height:180px;
    margin:4px;
opacity: 0.7;
    margin:4px;  
}
.my_images img:hover{
    opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.my_images div{
    color: #000000!important;
    text-align:center;
    padding: 6px;
}
</style>

<center>
<div id="my_board_wrapper">
<div class="my_images"><a href="http://linktomembersgal.com"><img src="http://imagizer.imageshack.us/v2/280x175q90/633/uuZmot.jpg"></a>
<div class="text">Caption here</div></div>
<div class="my_images"><a href="http://linktomembersgal.com"><img src="http://imagizer.imageshack.us/v2/280x175q90/633/sZxtqk.jpg"></a>
<div class="text">Caption here</div></div>
<div class="my_images"><a href="http://linktomembersgal.com"><img src="http://imagizer.imageshack.us/v2/280x175q90/905/bd9PNV.jpg"></a>
<div class="text">This is a longer caption to test to see how it looks.</div></div>
<p style="clear:left;"></p>
</div>
</center><br><br>

[mastiffman]

Oct 31, 2015 15:38:10 GMT -8 Tumbleweed said:

Oct 29, 2015 8:56:45 GMT -8 mastiffman said:

NICE! Yes! That pretty much what I'm looking for. I don't mind adding the changes as long as I can figure out how. - I might have questions. This is something that I will just have to add to the header of each section that I want it in obviously..? I'm down. What's first?

Thanks for the pm to remind me of this. I tend to miss things if I'm not quoted or tagged.  Here is the code: (I left your images in there.)

Awesome Thanks.

A couple of things... Anyway to reverse the effect of the photo being shaded until you hover over it? Or completely take that out but still leave a useable link to it?

I'm definitely going to have to tweak it a little to make it match the site for sure but I like it! Thanks!

[Tumbleweed]

Oct 31, 2015 18:13:51 GMT -8 mastiffman said:

Oct 31, 2015 15:38:10 GMT -8 Tumbleweed said:

Thanks for the pm to remind me of this. I tend to miss things if I'm not quoted or tagged.  Here is the code: (I left your images in there.)

Awesome Thanks.

A couple of things... Anyway to reverse the effect of the photo being shaded until you hover over it? Or completely take that out but still leave a useable link to it?

I'm definitely going to have to tweak it a little to make it match the site for sure but I like it! Thanks!

Yes, you can just switch these two parts I bolded. In other words the bolded part in the class .my_images img goes in the .my_images img:hover and visa-versa.


.my_images img{
border:1px solid black;
width:250px;
height:180px;
margin:4px;
opacity: 0.7;
margin:4px;
}
.my_images img:hover{
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;

}




or just remove the opacity: 0.7; out of the first class and just delete the hole bit for the hover part if you want no hover affect.  So no hover affect, just remove this below and delete the opacity line in the other class:

.my_images img:hover{
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

[mastiffman]

[quote source="/post/6496556/thread" timestamp="1446345578" author="Tumbleweed


or just remove the opacity: 0.7; out of the first class and just delete the hole bit for the hover part if you want no hover affect.  So no hover affect, just remove this below and delete the opacity line in the other class:

.my_images img:hover{
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

[/quote]

I actually just changed the 0.7 to 1.0 and that did it.

I was wondering if this would be the correct code to make the boarder of the whole rectangular box round at the corners? If so, where would I insert it? At the top after initial code for the entire rectangular box? [/p]

 If not, how would you accomplish this?

Thanks!

.rounded-corners(@a: 5px) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;

[Tumbleweed]

Glad you found a way you like the opacity.

Actually, if you have that css in your board header, using Proboards rounded corners won't work there, i'm pretty sure.
I'd just add this...

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

....to the class ..#my_board_wrapper...if that is where you wanted the rounded corners:

#my_board_wrapper{
width:820px;
background-color:#ddddff;
border:1px solid #000000;
margin:auto;
padding:10px;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

[mastiffman]

Oct 31, 2015 19:45:01 GMT -8 Tumbleweed said:

Glad you found a way you like the opacity.

Actually, if you have that css in your board header, using Proboards rounded corners won't work there, i'm pretty sure.
I'd just add this...

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

....to the class ..#my_board_wrapper...if that is where you wanted the rounded corners:

#my_board_wrapper{
width:820px;
background-color:#ddddff;
border:1px solid #000000;
margin:auto;
padding:10px;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

 That worked great! I made a couple of Tweaks to it as well.

1.Changed the background color to match the Forum.

2.Dropped the board wrapper to even out the right has side margin...

3.Shortened the height of the wrapper from 300 down to 250 (added my own text)

4.Changed the border radius of the wrapper from 5px down to 3px

5.Added a border radius value to the image borders using "border-radius: 2px" After the initial image border values.

Take a look.

tropheusandmore.com/board/9/tropheus-aquascaping

Is there a way to make the image borders a little more fancier than just a solid black line?

 Thanks.

 

[Tumbleweed]

mastiffman,

I'm not really sure what you had in mind but you could add a dotted border around them which would be the bolded part added to your existing css? Or a dashed or different rounded corners or double borders?

.my_images img{
background-color: #0000ff;
border-top: 4px dotted #000;
border-right: 4px dotted #000;
border-bottom: 4px dotted #000;
border-left: 4px dotted #000;
box-shadow: inset 0 -1px 0 0 #000, inset 0 1px 0 0 #000, 0 1px 0 0 #000, 0 -1px 0 0 #000;
padding:4px;
rest of css here



By the way, if you wanted that longer description you have of the fish below the boxes in yellow, you could make it more professional looking by including it in that coding I gave you if your are interested. (Here you can take a look and view if you like the dots as well. 

abetteramerica.freeforums.net/board/12/board

By the way, I will remove those images just as soon as I'm sure we are done here.  If you do decide to use the dotted border you will have to increase the width of the #my_board_wrapper id and the width of the .my_images class or the third box might go below the first two.

[mastiffman]

Nov 2, 2015 23:26:03 GMT -8 Tumbleweed said:

mastiffman,

By the way, if you wanted that longer description you have of the fish below the boxes in yellow, you could make it more professional looking by including it in that coding I gave you if your are interested. (Here you can take a look and view if you like the dots as well. 

abetteramerica.freeforums.net/board/12/board

By the way, I will remove those images just as soon as I'm sure we are done here.  If you do decide to use the dotted border you will have to increase the width of the #my_board_wrapper id and the width of the .my_images class or the third box might go below the first two.

 Okay, thanks. I'll probably just keep the current setting. Thank you.

 One last thing. Is there a way to use that same width boarder wrapper but place only two photos inside and then evenly space them out within that 820px width?

 I was trying to play with the "float: left;" by changing it to "float: center;" or even removing it but to no avail it would only place the images one below the other...

 P.S. Do you have a list of values/ settings that I could start learning this stuff from? (i.e. Any good websites to learn the basics of the CSS?) Thanks.

Andrew

[Tumbleweed]

Nov 3, 2015 10:51:40 GMT -8 mastiffman said:

Nov 2, 2015 23:26:03 GMT -8 Tumbleweed said:

mastiffman,

By the way, if you wanted that longer description you have of the fish below the boxes in yellow, you could make it more professional looking by including it in that coding I gave you if your are interested. (Here you can take a look and view if you like the dots as well. 

abetteramerica.freeforums.net/board/12/board

By the way, I will remove those images just as soon as I'm sure we are done here.  If you do decide to use the dotted border you will have to increase the width of the #my_board_wrapper id and the width of the .my_images class or the third box might go below the first two.

 Okay, thanks. I'll probably just keep the current setting. Thank you.

 One last thing. Is there a way to use that same width boarder wrapper but place only two photos inside and then evenly space them out within that 820px width?

 I was trying to play with the "float: left;" by changing it to "float: center;" or even removing it but to no avail it would only place the images one below the other...

 P.S. Do you have a list of values/ settings that I could start learning this stuff from? (i.e. Any good websites to learn the basics of the CSS?) Thanks.

Andrew

What you can do for just two boxes is first, remove one of the image bits (of course) which is this:

<div class="my_images"><a href="http://linktomembersgal.com"><img src="http://imagizer.imageshack.us/v2/280x175q90/633/uuZmot.jpg"></a>
<div class="text">Caption here</div></div>



and then in the css remove the line that says float: left; and add display:inline-block; and then make the margin substantial and add vertical-align:middle;

  So this....
.my_images{
width:260px;
height:300px;
float:left;
text-align:center;
border:2px solid #000000;
margin:4px;
}

becomes this...

.my_images{
width:280px;
height:250px;
display:inline-block;
text-align:center;
vertical-align:middle;
border:2px solid #000000;
margin:34px;
color:#000000!important;
}

Adjust the margin until you get the two images spaced as you like.

Oh, almost forgot. This is a great place to learn css:

www.w3schools.com/css/css_intro.asp