Forum Moderators: not2easy
# <style type="text/css">
# #gallery {background: url('/gallery2/modules/colorpack/packs/PGcharcoal/images/background/bg5_3.gif') repeat 0 1px;}
# body.gallery {background: url('/gallery2/modules/colorpack/packs/PGcharcoal/images/background/bg5_3.gif') repeat 0 1px;}
# .giThumbnail {border:1px solid
# #000!important; }
# .gsSingleImage {border:1px solid
# #000!important; }
# .gsSingleImageNoF {border:1px solid
# #000!important; }
# </style>
# <style type="text/css">
# a.iconLogo img{
# width: 300px;
# height: 100px;
# background: url(/gallery2/themes/PGlightbox/templates/extra/logos/logo.gif) left top no-repeat;
# }
# a.iconLogo:hover img{
# background: url(/gallery2/themes/PGlightbox/templates/extra/logos/logoon.gif) left top no-repeat;
# }
# a.iconFull img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/full.gif) left center no-repeat;
# }
# a.iconFull:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/fullon.gif) left center no-repeat;
# }
# a.iconFirst img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/first.gif) left center no-repeat;
# }
# a.iconFirst:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/firston.gif) left center no-repeat;
# }
# a.iconPrev img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/prev.gif) left center no-repeat;
# }
# a.iconPrev:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/prevon.gif) left center no-repeat;
# }
# a.iconNext img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/next.gif) left center no-repeat;
# }
# a.iconNext:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/nexton.gif) left center no-repeat;
# }
# a.iconLast img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/last.gif) left center no-repeat;
# }
# a.iconLast:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/laston.gif) left center no-repeat;
# }
# a.iconGal img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/gal.gif) left center no-repeat;
# }
# a.iconGal:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/galon.gif) left center no-repeat;
# }
# a.iconAlbum img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/album.gif) left center no-repeat;
# }
# a.iconAlbum:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/albumon.gif) left center no-repeat;
# }
# a.iconThumb img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/thumbnails.gif) left center no-repeat;
# }
# a.iconThumb:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/thumbnailson.gif) left center no-repeat;
# }
# a.iconSS img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/slideshow.gif) left center no-repeat;
# }
# a.iconSS:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/slideshowon.gif) left center no-repeat;
# }
# a.iconFullPopup img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/popup.gif) left center no-repeat;
# }
# a.iconFullPopup:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/popupon.gif) left center no-repeat;
# }
# a.iconAddCom img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/addcomments.gif) left center no-repeat;
# }
# a.iconAddCom:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/addcommentson.gif) left center no-repeat;
# }
# a.iconViewCom img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/comments.gif) left center no-repeat;
# }
# a.iconViewCom:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/commentson.gif) left center no-repeat;
# }
# a.iconAddCart img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/add_cart.gif) left center no-repeat;
# }
# a.iconAddCart:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/add_carton.gif) left center no-repeat;
# }
# a.iconViewCart img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/view_cart.gif) left center no-repeat;
# }
# a.iconViewCart:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/view_carton.gif) left center no-repeat;
# }
# a.iconViewExif img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/exif.gif) left center no-repeat;
# }
# a.iconViewExif:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/exifon.gif) left center no-repeat;
# }
# a.iconeCard img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/ecard.gif) left center no-repeat;
# }
# a.iconeCard:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/ecardon.gif) left center no-repeat;
# }
# a.iconBlocks img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d/block.gif) left center no-repeat;
# }
# a.iconBlocks:hover img{
# background: url(/gallery2/modules/colorpack/packs/PGcharcoal/images/set1/3d_on/blockon.gif) left center no-repeat;
# }
# </style>
# <style type="text/css">
# .opacityT img{
# filter: alpha(opacity=100);
# -moz-opacity: 1;
# opacity: 1
# }
# .opacityT:hover img{
# filter: alpha(opacity=60);
# -moz-opacity: 0.6;
# opacity: 0.6
# }
# </style>
# <style type="text/css">
# .MTclass img{
# filter:alpha(opacity=60);
# -moz-opacity: 0.6;
# opacity: 0.6;
# width:px;
# height:px;
# }
# .MTclass:hover img{
# filter:alpha(opacity=100);
# -moz-opacity: 1;
# opacity: 1;
# width:px;
# height:px;
# }
# </style>
# <style type="text/css">
# div dl#imap {
# display:block;
# border: 5px solid #0000ff;
# background-color: #00ff00;
# }
# .imap {
# display:block;
# border: 5px solid #00ff00;
# background-color: #0000ff;
# }
# .imap a#title:hover {
# background-position: 0 0;
# z-index:20;
# }
# .imap dd {
# position:absolute;
# top:0;
# padding:0;
# margin:0;
# }
# .picprevT {
# left:0px;
# z-index:20;
# }
# #imap #picfullT {
# left:0px;
# z-index:20;
# }
# #imap #picnextT {
# left:0px;
# z-index:20;
# }
# #imap #picprevB {
# left:0px;
# top:0px;
# z-index:20;
# }
# #imap #picfullB {
# left:0px;
# top:0px;
# z-index:20;
# }
# #imap #picnextB {
# left:0px;
# top:0px;
# z-index:20;
# }
# .prevT {
# display:block;
# width:0px;
# height:0px;
# text-decoration:none;
# z-index:20;
# }
# #imap a#fullT {
# display:block;
# width:0px;
# height:0px;
# text-decoration:none;
# z-index:20;
# }
# #imap a#nextT {
# display:block;
# width:0px;
# height:0px;
# text-decoration:none;
# z-index:20;
# }
# #imap a#prevB {
# display:block;
# width:0px;
# height:0px;
# text-decoration:none;
# z-index:20;
# }
# #imap a#fullB {
# display:block;
# width:0px;
# height:0px;
# text-decoration:none;
# z-index:20;
# }
# #imap a#nextB {
# display:block;
# width:0px;
# height:0px;
# text-decoration:none;
# z-index:20;
# }
# .imap a span, .imap a:visited span {
# display:none;
# }
# .prevT a:hover {
# background-position:0 0;
# }
# .imap a#prevT:hover, #imap a#fullT:hover, #imap a#nextT:hover, #imap a#prevB:hover, #imap a#fullB:hover, #imap a#nextB:hover {
# background-position:0 0;
# }
# .imap a:hover span {
# position:absolute;
# width:px;
# display:block;
# font-family:arial;
# font-size:12px;
# color:#000;
# border:1px solid #000;
# padding:px;
# }
# * html #imap a:hover span {
# width:400px; w\idth:388px;
# }
# a#prevT:hover span {
# left:-30px;
# width:px;
# background:#;
# filter: alpha(opacity=100);
# -moz-opacity: 1.0;
# opacity: 1.0;
# }
# #imap a#nextT:hover span {
# left: 0px;
# width:px;
# background:#;
# filter: alpha(opacity=100);
# -moz-opacity: 1.0;
# opacity: 1.0;
# }
# #imap a#fullT:hover span {
# left: 0px;
# width:px;
# background:#;
# filter: alpha(opacity=100);
# -moz-opacity: 1.0;
# opacity: 1.0;
# }
# #imap a#prevB:hover span {
# left:-30px;
# width:px;
# background:#;
# filter: alpha(opacity=100);
# -moz-opacity: 1.0;
# opacity: 1.0;
# }
# #imap a#nextB:hover span {
# left: 0px;
# width:px;
# background:#;
# filter: alpha(opacity=100);
# -moz-opacity: 1.0;
# opacity: 1.0;
# }
# #imap a#fullB:hover span {
# left: 0px;
# width:px;
# background:#;
# filter: alpha(opacity=100);
# -moz-opacity: 1.0;
# opacity: 1.0;
# }
# a#prevT span:hover {
# filter: alpha(opacity=60);
# -moz-opacity: 0.6;
# opacity: 0.6;
# }
# #imap a#nextT span:hover {
# filter: alpha(opacity=60);
# -moz-opacity: 0.6;
# opacity: 0.6;
# }
# #imap a#fullT span:hover {
# filter: alpha(opacity=60);
# -moz-opacity: .6;
# opacity: .6;
# }
# #imap a#prevB span:hover {
# filter: alpha(opacity=60);
# -moz-opacity: 0.6;
# opacity: 0.6;
# }
# #imap a#nextB span:hover {
# filter: alpha(opacity=60);
# -moz-opacity: 0.6;
# opacity: 0.6;
# }
# #imap a#fullB span:hover {
# filter: alpha(opacity=60);
# -moz-opacity: .6;
# opacity: .6;
# }
# </style>
### CSS Compressor ###
[cssdrive.com...]
And if you're really paranoid you could use PHP..
### GZip CSS ###
[fiftyfoureleven.com...]
Hope this helps.
The theme I have chosen seems to use excessive quantities of CSS and this may cause problems with the page being indexed.
I've never heard of excessive CSS causing a problem with page indexing! especially as it's external - Page load time may be affected sometimes perhaps, but being as this CSS is mainly generating hover effects, and is for an image gallery any delay should be imperceptible as you cannot possibly hover over every link/image at the same time.
There's too much code in your post to do sweeping howto answer and it depends how deep into your CSS you want to get because this CSS is obviously linked to different modules ;)
Anyway, back to the excessive part, yes this looks like it could be pared down. The excessive part is the downside to 'interchangeable' templates that have usually been written so that it's transparently obvious which bits a theme author can change and makes allowances for all theme interchange functionality, whether required or not by all themes. e.g. a search on this particular theme shows it to be one of a suite which add different 'color packs' and these will have been coded to integrate as seamlessly as possible with Gallery 2 software, so users can plugin the modules and go, like any CMS/Blog plugins/modules really.
If what you're saying is that you are happy with the theme you've found and wish to now modify the CSS code to suit your own style and perhaps integrate it with your sites existing CSS then yes it looks to me like a lot can be done with the above. Along with optimising the above, I wonder if seeing the generated HTML might throw up some ID's which could be used to group selectors more effectively too.
A word of advice, if you do decide to try some optimisation, before you start changing the stylesheets, make a copy of all the originals so you can revert back to it at any time! These modularised stylesheets that go along with Gallery/CMS software products are often tightly knit around plugin modules and core stylesheets and I've often found that something in a themes CSS which looks unnecessary is actually necessary in order to override a previous rule in one of the core Sheets. Also be aware that any support that is offered with the theme will likely be nullified as an author cannot be expected to provide support if their original code is modified. If you are also reliant on support upgrades for your theme and are not willing or able to go under the hood any time there's upgrades you may want to think twice about changing anything.
a couple of quick observations..
1. There are a lot of rules in the above code which could cause potential parse errors because they are empty, have you pasted code which is actually in use?
:e.g.
width:px;
height:px; 2. re:
.MTclass img{
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
width:px;
height:px;
}
.MTclass:hover img{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
width:px;
height:px;
}even if there are width and height values required on this class, there should be no need to redeclare the values on the :hover rule unless the img sizes are different. there are a few other rules which fall under this optimisation plan too - there is no need to re-declare same value rules on pseudo elements.
the #imap and .imap link rules are very confusing (is there really a class and an ID with the same name targetting the same links in the HTML?) Without seeing the HTML structure for that bit it would be hard to say how best to do it. bear in mind that an ID has higher specificity than a class and intermingling classes and ID's like this can lead to cascade confusion.
I see some others which might be duplicates but are impossible to read without the HTML too
e.g.
.prevT a:hover {}
.imap a#prevT:hover {}-Suzy
Try to get it to validate e.g. at
[jigsaw.w3.org...]
The problem with that is the use of non-standard tags
- "filter" isn't part of the standard, AFAIK it's one of the kludges to get IE to do the right thing.
- -moz-* are mozilla extensions
- opacity: is a CSS version 3 tag, we'll need to wait a "few" years before browsers pick that up
You also seem to have the CSS in the (x)html, generally it's easier to keep it in a separate file. And then search engines won't even look at it.
It looks like it's using many images though, and that will affect load time significantly. Merging images into one (and changing background position), and compressing images can help save loading of many bits of images.
#imap a#fullT {
display:block;
width:0px;
height:0px;
text-decoration:none;
z-index:20;
}
#imap a#nextT {
display:block;
width:0px;
height:0px;
text-decoration:none;
z-index:20;
}
#imap a#prevB {
display:block;
width:0px;
height:0px;
text-decoration:none;
z-index:20;
}
#imap a#fullB {
display:block;
width:0px;
height:0px;
text-decoration:none;
z-index:20;
}
#imap a#nextB {
display:block;
width:0px;
height:0px;
text-decoration:none;
z-index:20;
}
you can say exactly the same thing with just this instead...
#imap a#fullT, #imap a#nextT, #imap a#prevB, #imap a#fullB, #imap a#nextB {
display:block;
width:0px;
height:0px;
text-decoration:none;
z-index:20;
} you might even be able to get away with just this, depending on what other kind of <a> tags you have in the #imap div...
#imap a{display:block;width:0;height:0;text-decoration:none;z-index:20;}
Just to clarify for others reading, some of my previous reply was based on the CSS being external as stated in the first post, but having now seen the link and other Gallery2 sites the CSS which is in the first post is not external, it's embedded in the <head>. This is where the SEO optimization aspect is coming in and the question is more to do with optimizing the on page source code and removing all CSS code out of the source to an external sheet, rather than actually knocking a few bytes off the CSS itself. Advice on optimising that still stands, but it may not be as simple as editing a stylesheet, CSS called this way might be hardcoded in the module/plugin template(.tpl) file?
So while g-zipping and compression are an advanced option for lengthy external sheets I would (and have) now advised that the first step for optimising here is to go back to the CMS software and see if all modules/plugins are required; if not, then disable them, this should remove chunks of unnecessary CSS code. This is how some Gallery, and other CMS, plugins work - the software looks for the presence of the module and calls the CSS code into the <head> rather than linking to it. This can lead to quite a mish-mash of embedded code, both CSS and JS, if you use a few different plugins. If the module is not present then no code - and if the modules are required then it should be possible to link to your own custom stylesheet, via the PHP template. Cancel the call(s) to the the provided CSS and paste the required CSS into your single custom stylesheet instead. This may involve editing core tpl (template) files but is IMHO the first step to on page optimization.
Then whether the CSS is actually required or can be optimized further once it's off page is almost secondary, as it's not really that long and you might not want to mess about with the CSS code provided with your chosen theme, but if you do then some of the suggestions here can definitely help with that.
Some of these community developed software packages might have tips/tricks in their own support forums on how to edit the PHP template files for better SEO.
-Suzy
Search engines cannot see a rendered page, they just see the HTML. Feel free to have as much CSS as you need. One thing though, a real lot of CSS can affect the amount of time it takes for your page to load, but in your case that is not a lot of CSS.
