Siriux Theme Image Thumbnail CSS Customization

benwu2005

Joined: 2005-09-05
Posts: 11

Posted: Fri, 2005-09-09 04:18

For anybody who is familiar with the Siriux theme, if you go to the Siriux.Net photo album, the image borders are offset by 4px. I'm pretty sure its some settings in CSS, but I just can't find it for the life of me! (In other words, there's an image, 4px of whitespace, then the border).

Please help!!

THANKS!
Ben

http://www.benjaminwu.com/gallery/

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Fri, 2005-09-09 04:34

You mean this in theme.css

#gallery .gallery-thumb img {
    background: #fff;
    border-width: 1px;
    padding: 4px;
    margin: 1px;
    -moz-border-radius: 2px;
}

#gallery .gallery-thumb a:hover img {
    border-width: 2px;
    border-color: #5ca112;
    margin: 0;
    -moz-border-radius: 3px;
}

.gallery-photo {
    text-align: center;
}

#gallery .gallery-photo img {
    background: #fff;
    border-width: 1px;
    padding: 7px;
    -moz-border-radius: 4px;
}

Install firefox and the web developer addon ;)
http://www.mozilla.org/
https://addons.mozilla.org/extensions/moreinfo.php?id=60

I found that code, but copying and pasting the CSS code from theme.css into a text file then searching for "hover" and "img"

benwu2005

Joined: 2005-09-05
Posts: 11

Posted: Fri, 2005-09-09 18:44

Hrm, it didn't work...the border is still tight, right around my image. I'm trying to get that gap/offset between the image and the border...

is there a border size perhaps? I can set the border to like 105% or something?

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Fri, 2005-09-09 19:10

Try clearing your local cache. I don't see what you're talking about on your site. I see a border about 4px or so away from the image. If I'm using Firefox with the Web Developer addon I'm able to change the CSS for that border right there, I can make it thicker or change the offset distance. At least I was able to last night.

If that doesn't work, can you post a screen shot hightlight exactly what you're seeing?

benwu2005

Joined: 2005-09-05
Posts: 11

Posted: Mon, 2005-09-12 23:04

I'm using IE...but i can see the siriux.net site just fine...

See screenshots for more detail...
[img]www.benjaminwu.com/screen.gif[/img]
[img]www.benjaminwu.com/screen2.gif[/img]
www.benjaminwu.com/screen.gif
www.benjaminwu.com/screen2.gif

benwu2005

Joined: 2005-09-05
Posts: 11

Posted: Mon, 2005-09-12 23:05

The images didnt work :S

use the link instead...

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Tue, 2005-09-13 04:15

Something to do with IE and your CSS then. Because in Firefox your site shows up just fine, but not with IE. In IE and Firefox Sirux.net shows up just fine.

I'd do a heavy comparision with your CSS and the Siriux.net CSS files

benwu2005

Joined: 2005-09-05
Posts: 11

Posted: Tue, 2005-09-13 15:41

I know, weird isnt it?

I tried looking through the files, but I can't find any major differences...

Anybody else?

http://www.benjaminwu.com/gallery/themes/siriux/theme.css

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Wed, 2005-09-14 06:34

Well I just took the Siriux site's theme.css and used it on your page and no go for IE. I did notice some differences in your id and class callouts in your HTML. I'd examine your HTML a bit closer. But to be sure. I don't know. I was able to take one of your thumbs and plug it straight into the Siriux page I downloaded and it showed up correctly in IE.

My guess, there's a tiny error some where. Maybe try having a go at it from scratch with the latest G2 code, latest Siriux theme... I don't know.

benwu2005

Joined: 2005-09-05
Posts: 11

Posted: Wed, 2005-09-14 18:21

I've found the offending code! It's no longer really a "customization" issue. Rather it's an HTML issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

By adding the DOCTYPE info at the top of my page, the borders look correct, but a new problem arose with my table.

I had my table height set to 100% so that the white body extends through the entire page. When I insert the DOCTYPE, that table no longer fits itself to the page. Rather, it simply ends where the content ends.

Can anybody with the relevant experience let me know what I'm doing wrong? Or what an appropriate DOCTYPE would be?

Thanks!

benwu2005 Joined: 2005-09-05 Posts: 11	Posted: Fri, 2005-09-09 04:18
	For anybody who is familiar with the Siriux theme, if you go to the Siriux.Net photo album, the image borders are offset by 4px. I'm pretty sure its some settings in CSS, but I just can't find it for the life of me! (In other words, there's an image, 4px of whitespace, then the border). Please help!! THANKS! Ben http://www.benjaminwu.com/gallery/
	XUser login Username: * Password: * Create new account Request new password
nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Fri, 2005-09-09 04:34
	You mean this in theme.css #gallery .gallery-thumb img { background: #fff; border-width: 1px; padding: 4px; margin: 1px; -moz-border-radius: 2px; } #gallery .gallery-thumb a:hover img { border-width: 2px; border-color: #5ca112; margin: 0; -moz-border-radius: 3px; } .gallery-photo { text-align: center; } #gallery .gallery-photo img { background: #fff; border-width: 1px; padding: 7px; -moz-border-radius: 4px; } Install firefox and the web developer addon ;) http://www.mozilla.org/ https://addons.mozilla.org/extensions/moreinfo.php?id=60 I found that code, but copying and pasting the CSS code from theme.css into a text file then searching for "hover" and "img"

benwu2005 Joined: 2005-09-05 Posts: 11	Posted: Fri, 2005-09-09 18:44
	Hrm, it didn't work...the border is still tight, right around my image. I'm trying to get that gap/offset between the image and the border... is there a border size perhaps? I can set the border to like 105% or something?

nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Fri, 2005-09-09 19:10
	Try clearing your local cache. I don't see what you're talking about on your site. I see a border about 4px or so away from the image. If I'm using Firefox with the Web Developer addon I'm able to change the CSS for that border right there, I can make it thicker or change the offset distance. At least I was able to last night. If that doesn't work, can you post a screen shot hightlight exactly what you're seeing?

benwu2005 Joined: 2005-09-05 Posts: 11	Posted: Mon, 2005-09-12 23:04
	I'm using IE...but i can see the siriux.net site just fine... See screenshots for more detail... [img]www.benjaminwu.com/screen.gif[/img] [img]www.benjaminwu.com/screen2.gif[/img] www.benjaminwu.com/screen.gif www.benjaminwu.com/screen2.gif

benwu2005 Joined: 2005-09-05 Posts: 11	Posted: Mon, 2005-09-12 23:05
	The images didnt work :S use the link instead...

nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Tue, 2005-09-13 04:15
	Something to do with IE and your CSS then. Because in Firefox your site shows up just fine, but not with IE. In IE and Firefox Sirux.net shows up just fine. I'd do a heavy comparision with your CSS and the Siriux.net CSS files

benwu2005 Joined: 2005-09-05 Posts: 11	Posted: Tue, 2005-09-13 15:41
	I know, weird isnt it? I tried looking through the files, but I can't find any major differences... Anybody else? http://www.benjaminwu.com/gallery/themes/siriux/theme.css

nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Wed, 2005-09-14 06:34
	Well I just took the Siriux site's theme.css and used it on your page and no go for IE. I did notice some differences in your id and class callouts in your HTML. I'd examine your HTML a bit closer. But to be sure. I don't know. I was able to take one of your thumbs and plug it straight into the Siriux page I downloaded and it showed up correctly in IE. My guess, there's a tiny error some where. Maybe try having a go at it from scratch with the latest G2 code, latest Siriux theme... I don't know.

benwu2005 Joined: 2005-09-05 Posts: 11	Posted: Wed, 2005-09-14 18:21
	I've found the offending code! It's no longer really a "customization" issue. Rather it's an HTML issue. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> By adding the DOCTYPE info at the top of my page, the borders look correct, but a new problem arose with my table. I had my table height set to 100% so that the white body extends through the entire page. When I insert the DOCTYPE, that table no longer fits itself to the page. Rather, it simply ends where the content ends. Can anybody with the relevant experience let me know what I'm doing wrong? Or what an appropriate DOCTYPE would be? Thanks!

Siriux Theme Image Thumbnail CSS Customization

XUser login