anyone know html/css/web? We are adding some features per community suggestions....

[Jason Manley]

If you know CSS and HTML we could really use some help to add some features like new banners for the COW and activity winners, etc... It isn't a lot of work, but we are short handed tech wise and would love for a bit of help. CA is getting the attention it needs after far too long and any assistance would be appreciated.

Please let me know! If you have a little time to assist please add me on skype at brilliantcolorsceo


JM

[Jason Manley]

We are making all the thumbnails now...thanks to some great help and both Nemome and Black Spot prodding me with a stick to have some transition updates to the site prior to the installation of 4.0.

This is the gist of what we need to do...We need the simple html adjustments in the header to be able to post these up in the right spots on the header, and with the dark background behind them. This is super rough as I just mocked up the idea, but it should be maybe 30 minutes of help I'd think...and we can start highlighting the awesome


Thanks everyone!


JM

[theYiffer]

Hey Jason,

I more or less consider myself fluent in HTML, but not a wiz. (I still prefer to relay on WYSIWYG apps like Dreamweaver or BlueGriffon.) Based on your rough layout, you could easily use a table, and if you want, you can use CSS either withing the page's code or as a linked file (ex: table.css) to control the color of the boarder and the backgrounds of all of the table cells. If I were to do this (assuming this will start as a static element), I'd take your rough into PhotoShop, divide it up using the slice tool. Export everything (save for web), and open the html file into Dreamweaver or BlueGriffion to tweak the table directly with html or css. Then copy and paste your new header code into CA's php template. (I assume that's how it's structured.)

[Jason Manley]

Thank you TheYiffer! can you add me on skype? my handle is brilliantcolorsceo

[Jason Manley]

Btw...if any of you all are up and know html and Mr Yiffer happens to be out for the night, I am up late and can help get this done. Excited.

[SpectreX]

Do not know if it is needed anymore but I'm a software engineer by day (and artist by night )
So HTML, css, javascript are familiar languages for me, as is PHP if needed.

[Jason Manley]

awesome.

lots of new stuff coming right up folks. cant wait.

[Harkins]

If you need additional help I also know HTML and CSS. I worked as a web designer for a few years. Here are some of the sites I've built:

http://ampgs.com
http://luzernecountyfair.com
http://homegrownpoker.com (this one's still under construction)

Let me know Jason

[email protected]

- Bill

[Jason Manley]

Thank you!!!

[Jason Manley]

ok finally figured out how to make the thumbs work up there. I am determined to learn this code stuff, which not knowing has hampered me for so long. Can't figure out how to get the little space between the bottom of the forums highlight thumbs and the activities...they are butting up against each other at the moment. Totally neophyte in this stuff.

I also want to add a bunch of thumbs atop the sketchbook forums like that for the featured sketchbooks (new ones for all the peeps who are kicking ass right now). Maybe will do the same for the other forums too. That part I am not sure how to do yet. Once we get this stuff done we will get focused solely on 4.0's first site launch which is currently heading into production.


j

[Jason Manley]

Yay...fixed the spacing. Box code for pixel height was off. Magic!

[Jason Manley]

So frustrating...I want this to go in the finished section in a certain spot. I can get it to show up in the right spot, but the images do not go left to right they stack on top of each other. I want them to show up with the black border and left to right like the square thumbs in the header now...but they show up without any black border and stacked right on top of each other. I also want it to be positioned to the center of the page...and not positioned all the way to the left.

Learning code...learning code...learning code....not easy at all.

<style type="text/css">

#wrapper {
width:1180px;
margin:auto;
position:relative;
#container {
width:1180px;
background:black;
position:relative;
margin:1px auto;
padding-top:4px;
padding-bottom:4px;
}
.ffbanner {
width:388px;
height:200px;
margin-left:4px;
float:left;
margin-top:4px;
opacity:1;
-webkit-transition-duration:500ms;
-moz-transition-duration:500ms;
-o-transition-duration:500ms;
} }
.fade {
opacity:1;
-webkit-transition-duration:500ms;
-moz-transition-duration:500ms;
-o-transition-duration:500ms;
}
.fade:hover {
opacity: 0.4;
}
</style>
<div class="clear"></div>
<div class="ffbanner">
<a href="http://conceptart.org/forums/showthread.php?266842-

3d-Character-designs">
<img class="fade"
src="https://lh6.googleusercontent.com/-JWrM56DBHSg/UTLLgbp-

R4I/AAAAAAAAALs/SSWwNETExtM/h120/3dcharacter.jpg" alt="Soulty666 3D Character Art!"/>
</a>
</div>
<div class="ffbanner"> <a
href="http://conceptart.org/forums/showthread.php?265511-Various-cover-arts">
<img class="fade"
src="https://lh4.googleusercontent.com/-

FnwHHpjzPyE/UTLLgkiHiVI/AAAAAAAAALw/vTS5JkfZjqU/h120/kemar.jpg"

alt="Kemar's Cover Work!"/>
</a>
</div>
<div class="ffbanner"><a href="http://conceptart.org/forums/showthread.php?

236253-Caricatures-)/page4">
<img class="fade"
src="https://lh4.googleusercontent.com/-

QzasfBBhrbw/UTLLgklbjVI/AAAAAAAAAL0/WB8L_NWFFXs/h120/jadecilcleton.jpg"

alt="jadecicleton's Charicatures!"/>
</a>
</a></div>
</div>


Any ideas?

[Hawkswift]

It looks like they align vertically because each of the images is in a separate <div> </div> block. If you put all three into a single one, they'll show up in a single row. Like this:

<div class="ffbanner" id="container">
<a href="http://conceptart.org/forums/showthread.php?266842-

3d-Character-designs">
<img class="fade" id="container"
src="https://lh6.googleusercontent.com/-JWrM56DBHSg/UTLLgbp-

R4I/AAAAAAAAALs/SSWwNETExtM/h120/3dcharacter.jpg" alt="Soulty666 3D Character Art!"/>
</a>
<a
href="http://conceptart.org/forums/showthread.php?265511-Various-cover-arts">
<img class="fade"
src="https://lh4.googleusercontent.com/-

FnwHHpjzPyE/UTLLgkiHiVI/AAAAAAAAALw/vTS5JkfZjqU/h120/kemar.jpg"

alt="Kemar's Cover Work!"/>
</a>
<a href="http://conceptart.org/forums/showthread.php?

236253-Caricatures-)/page4">
<img class="fade"
src="https://lh4.googleusercontent.com/-

QzasfBBhrbw/UTLLgklbjVI/AAAAAAAAAL0/WB8L_NWFFXs/h120/jadecilcleton.jpg"

alt="jadecicleton's Charicatures!"/>
</a>
</div>

[Jason Manley]

OK...trying it! Lessons I like. Thank you. I can remember that

[Jason Manley]

I tried it...the above code suggestion made it like this: http://conceptart.org/forums/forumdi...NALLY-FINISHED!! I then replaced the blown up low res image with a high res and it stays the same size as it shows now, but is the right resolution. Happy accident...a bug that looks ok ...a nice big image and smaller thumbs under...poor folks on mobile...the new site doesn't have that issue. What do you think...should we keep the big image there for daily highlights? Can probably have them rotate too fairly easily. It's super light weight, so won't be a bandwidth issue. Can really show off the good stuff. Too big? Good big? Bad big? thoughts?

Anyway...going to add some galleries to each of the forums sections so the highlights from those areas show up well. Still doing a rebuild on the thumbnails...taking forever but hums along. There are many millions of artworks to do....and show


J

[Hawkswift]

Ha! I did that - I was trying to figure out what the #container section was for and forgot to remove the id="container" lines when I pasted in the example code.

[Harkins]

Yeah Jason I think the 'accident' actually looks pretty sweet. It is pretty tall though when you think about how far people have to scroll down from the top grid, then past the new banner.

There are a few ways to get things to line up horizontally next to each other, but I use a CSS style called float. If I were to strip out everything out it would look like this in it's most basic form.

<div style="float:left;width:50px;height:50px;backgroun d:orange;"></div>
<div style="float:left;width:50px;height:50px;backgroun d:orange;"></div>
<div style="float:left;width:50px;height:50px;backgroun d:orange;"></div>
<div style="clear:both;"></div> (this clears the floats so it knows when to stop aligning things in the same row, otherwise everything else on your page will try to float left)

If you go off that you can always adjust the width/height and put an image in the <div></div> tag to the dimensions you want. I just threw a color bg in there so you can see it if you start messing with the code.

Edit: It's showing a space between the n and d in background in the code above, that's not supposed to be there, not sure why that's showing up for me.

[Hawkswift]

There's a float:left; line in the .ffbanner class declaration, which wasn't working. I think it comes down to the #wrapper id not having a closing } before the #container id declaration. I also removed a closing } after the .ffbanner declaration that seemed extraneous. Sorry I didn't catch it earlier...

The values for width in the ffbanner class need to be played with, if it's being used. here's the modified style declaration:

<style type="text/css">

#wrapper {
width:1180px;
margin:auto;
position:relative;
}
#container {
width:1180px;
background:black;
position:relative;
margin:1px auto;
padding-top:4px;
padding-bottom:4px;
}
.ffbanner {
width:250px;
height:200px;
margin-left:4px;
float:left;
margin-top:4px;
opacity:1;
-webkit-transition-duration:500ms;
-moz-transition-duration:500ms;
-o-transition-duration:500ms;
}
.fade {
opacity:1;
-webkit-transition-duration:500ms;
-moz-transition-duration:500ms;
-o-transition-duration:500ms;
}
.fade:hover {
opacity: 0.4;
}
</style>