Board Remodel

[Teg]

Kami 

alright, i implemented the test theme for guest viewing..

gfxcons.boards.net

Now, all I need to do is be able to change the background for each board so the images don't all include news.... That's what I need help with I suppose...

[Jaguar]

Apr 3, 2015 15:16:37 GMT -8 Teg said:

Kami 

alright, i implemented the test theme for guest viewing..

gfxcons.boards.net

Now, all I need to do is be able to change the background for each board so the images don't all include news.... That's what I need help with I suppose...

Damn that is HAWT, I love the test theme. I love the template/CSS stuff so cool.

[Teg]

Lol thanks, trying to work out some bugs lol

[Kami]

with the third board jumping down to the third line, try decreasing the width of the board divs by a couple of pixels.

[Teg]

Apr 3, 2015 17:35:37 GMT -8 Kami said:

with the third board jumping down to the third line, try decreasing the width of the board divs by a couple of pixels.

Please see This support thread
it includes the full source code for it and the css..    

[Kami]

It's because the outer wrapper is a percent as well. Since the outer wrapper is fluid, the 31% you specified for the width of the board is 31% of whatever 90% (or whatever number) is for that person's browser resolution.

[Kami]

Demonstration of the above:
Browser at a width of 1300px:




Browser width 100% of my screen (1920px)

[Teg]

Okay so I should switch the wrapper width to a pixel width is what you are saying?

[Kami]

Apr 3, 2015 18:08:03 GMT -8 Teg said:

Okay so I should switch the wrapper width to a pixel width is what you are saying?

Yeah, as long as you're going to be using a percent for the boards you should define the pixel width for the wrapper. Every time the wrapper gets bigger or smaller, the boards do too and that'll cause resizing issues.

[Kami]

EDIT: Though if you perhaps define a minimum width for the wrapper? I haven't experimented much with this particular bit of CSS, but try:

"min-width: [pixel size];" and see if that helps.

[Teg]

/*style common views*/
.main_boards {
background-color: #202022;
min-width: 960px;
}

.view {
width: 31.56%;
height: 200px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;

}
.view .mask,.view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 14pt;
padding-bottom: 5px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: 'Oxygen', serif;
font-style: italic;
font-size: 10pt;
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center;
}
.view a {
color: #fc2b57;
}
view a:hover {
color: #000000;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info:hover {
color: #fc2b57;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}


I changed the pixel width to a min width... in pixels, and it isn't dropping down any more however it's changing the sizes when zoomed in and out?

[Kami]

Teg - all min width is supposed to do is specify the absolute smallest an element can be. So if the min-width is 960px, it shouldn't get any smaller than that even if it's resized smaller.

If it doesn't work I'm not really sure why (like I said I haven't played much with it) so feel free to declare a specific width instead.

[Teg]

Apr 3, 2015 18:37:52 GMT -8 Kami said:

Teg - all min width is supposed to do is specify the absolute smallest an element can be. So if the min-width is 960px, it shouldn't get any smaller than that even if it's resized smaller.

If it doesn't work I'm not really sure why (like I said I haven't played much with it) so feel free to declare a specific width instead.

It's not that it's getting smaller.. It's cutting off the edges of them last column, or adding a gap after the last column dependent upon whether or not your zoomed in or out..

[Teg]

I even added !important to see if that helps but it doesn't..

[Kami]

Apr 3, 2015 18:39:40 GMT -8 Teg said:

Apr 3, 2015 18:37:52 GMT -8 Kami said:

Teg - all min width is supposed to do is specify the absolute smallest an element can be. So if the min-width is 960px, it shouldn't get any smaller than that even if it's resized smaller.

If it doesn't work I'm not really sure why (like I said I haven't played much with it) so feel free to declare a specific width instead.

It's not that it's getting smaller.. It's cutting off the edges of them last column, or adding a gap after the last column dependent upon whether or not your zoomed in or out..

I'm not sure I'm seeing what you're seeing, could you screenshot?