Is this is a good idea?

Removing all the profile specific CSS, album specific CSS, social group specific CSS and blog specific CSS and putting them in external CSS files? I personally think that might save some vital bandwidth due to caching.

 

Not a clue, I'm not that technical. But I did want you to know I read your post. : )

 

I have done this once with the normal css vb files through acp settings.
Don't know if I've done any mistake but some times later I observed by clicking on google cache result of my site it looked horrible and I belief this had a bad influence on my rankings so I removed this option.

 

Or you could just flip a switch that does it automatically...?

 

Problem is, that only stores the actual main themes as stylesheets, and I always have that setting active, what is doesn't do is remove CSS stuck in the header for profiles, albums, social groups or various modifications, most of which should have really been in an external file but for some reason wasn't. You know, like how for social groups, this shows up in the main HTML:

HTML:

<style type="text/css" id="vbulletin_socialgroup_css"> <!--.list_no_decoration {
list-style-type: none;
margin: 0px;
padding: 0px
}
div.fixed_width_avatar {
text-align: center;
}
div.fixed_width_avatar {
padding: 6px;
}
/* Table emulation */
.social_group {
padding: 1px;
}
.social_group .block_title, .social_group .block_row {
padding: 6px;
}
.social_group .block_row {
margin: 1px 0px 0px 0px;
}
.social_group .block_title {
margin: 0px;
text-align: left;
}
.social_group div.tfoot {
text-align: center;
}
.social_group table .thead {
padding: 6px;
}
.social_group_message {
margin-top: 6px;
}
.social_group_message_body {
padding: 6px;
}
.social_group_message .inlinemod_checkbox {
margin-bottom: 5px;
position: relative;
top: -2px;
left: 3px;
}
#inlinemodsel {
position: relative;
top:1px;
left:1px
}
#group_name {
margin: 0px;
font-weight: normal;
font-size: 16pt;
}
#group_creator {
margin-bottom: 6px;
}
#view_all_members_link {
float: right;
}
#group_member_list {
list-style-type: none;
margin: 0px;
padding: 0px
}
#group_member_list .memberinfo_tiny {
height: 100px;
width: 76px;
overflow: hidden;
float: left;
text-align: center;
margin: 1px;
}
#group_footer_links {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#group_footer_links li {
display: inline;
margin:0px 6px 0px 6px;
}
#picture_links {
float: right;
}
#qc_error_div {
text-align: left;
margin-bottom: 6px;
}
#qc_error_header {
font-weight: bold;
}
#qc_error_okay {
text-align: right;
}
#message_form div.allowed_bbcode {
float: left;
}
#message_form div.submit_button {
text-align: right;
}
#message_form div.messagetext {
text-align: left;
}
#group_message_inlinemod_form {
margin: 0px;
display: block;
}
.social_group .vbmenu_control {
text-align: left;
float: right;
background: none;
padding: 6px 0px;
}
.sgmenu_control {
float: right;
background: none;
padding: 0 6px;
}
#message_list {
border: none;
}
#message_list li {
margin-bottom: 6px;
}
#message_list div.fixed_width_avatar {
margin-right: 6px;
float: left;
}
#message_list div.info_bar {
border-width: 0px 0px 0px 0px
}
#message_list div.info_bar div.alt2 {
padding: 6px;
}
#message_list .group_message_date {
float: right;
vertical-align: text-bottom;
}
#message_list .inlinemod_checkbox {
float: right;
}
#message_list ul.controls {
margin-top: 6px;
text-align: right
}
#message_list ul.controls li {
display: inline;
margin-left: 6px;
}
#message_list ul.controls a:link, #message_list ul.controls a:visited {
text-decoration: none;
}
#message_list .deletedmessage{
float: left;
}
.action_links {
padding: 6px 0px;
width: 50%;
display: inline-block;
clear: left;
}
.discussion_tools {
float: right
}
#discussion_moderation, .discussion_tools {
float: right;
text-align: left;
clear: right;
}
#discussion_pagenav {
float: right;
margin-top: 6px;
text-align: right;
}
.discussion_list ul {
float: right;
text-align: right;
}
.discussion_list ul.controls li {
display: inline;
margin-left: 6px;
}
.discussion_list ul.controls li a {
text-decoration: none;
}
.discussion_bit_preview {
width: 70%;
float: left;
padding: 2px 0;
}
.unread {
font-weight: bold;
}
.push_down {
margin-top: 6px;
}
.social_group .panel {
margin: 6px;
}
.join_to_view {
margin-bottom: 6px;
}
.panelsurround {
text-align: center
}
.social_group .quick_reply_controls {
margin-bottom: 6px;
}
ul.vbmenu_popup li {
padding: 4px;
margin: 0px 1px 1px 1px;
white-space: nowrap;
}
ul.vbmenu_popup li.first {
margin: 1px;
}
.hidden {
display: none;
}
fieldset form, div.fieldsetpad {
display: block;
padding: 6px;
}
.userlist_title {
font-weight:bold;
}
.userlist_description {
margin-bottom: 6px
}
.avatar_toggle {
text-align: right;
}
div.checkbox_ctrls {
margin-bottom: 6px;
}
label.check_all_ctrl {
float: left;
}
label.show_avatars_ctrl {
float: right;
}
div.submitrow {
text-align: right;
}
div.submitrow #moderatedlist_action {
float: left;
text-align: left;
}
.userlist_error {
display: none;
}
.userlist_error_image {
float: left;
margin-right: 6px; 
margin-bottom:6px;
}
ul.userlist {
list-style: none;
padding: 0px;
margin: 0px;
}
ul.userlist li {
float: left;
margin-right: 6px;
margin-bottom: 6px;
width:175px;
}
ul.userlist hr {
display:none;
}
ul.userlist_hideavatars li {
position: relative;
width:215px;
border:solid 1px silver;
padding:4px;
}
ul.userlist_hideavatars div.username a {
font-weight:bold;
}
a.sg_catcloudlink:link, a.sg_catcloudlink:visited {
text-decoration:none;
}
a.sg_catcloudlink:hover, a.sg_catcloudlink:active {
text-decoration:underline;
}
a.sg_catlevel1 {
font-size: xx-small;
}
a.sg_catlevel2 {
font-size: small;
}
a.sg_catlevel3 {
font-size: medium;
}
a.sg_catlevel4 {
font-size: large;
}
a.sg_catlevel5 {
font-size: large;
font-weight: bold;
}
img.sgicon {
border: 1px solid gray;
margin: 1px;
}
#sg_owngroups_info, #sg_randomgroup_info {
float: left;
}
#sg_owngroups_info div, #sg_randomgroup_info div {
padding: 4px 16px;
padding-left: 0px;
}
div.sgicon, div.sgicon span {
float:left;
text-align:center;
}
div.sgicon span {
width:92px;
margin-left:-6px;
margin-right:-6px;
text-align: center;
clear:left;
}
div.sgicon {
width: 100px;
}
#sg_grouplist div.sgicon {
width: 92px;
}
#sg_newgroups div.sgicon, #sg_mygroups div.sgicon {
height: 118px;
width: 82px;
overflow: hidden;
padding: 8px;
padding-top: 0px;
}
#sg_newgroups div a {
text-decoration: none;
}
#sg_owngroups div.sgicon {
height: 82px;
padding-bottom: 4px;
}
#sg_owngroups div.sgicon, #sg_randomgroup div.sgicon {
}
#sg_newgroups td.alt1 {
padding: 6px 0px;
}
em.note {
font-style: normal;
color: #22229C;
}
#sg_owngroups td.alt1, #sg_randomgroup td.alt1 {
margin: 0px;
border: 0px;
}
.floatwrapper {
width: 100%;
float: left;
}
#sg_catcloud, #sg_owngroups, #sg_mygroups, #sg_randomgroup {
padding-right: 320px;
min-width: 382px;
padding-bottom: 16px;
}
#sg_mygroups {
padding-bottom: 0px;
}
#sg_mygroups div.sgicon {
width: 86px;
padding: 4px 8px 8px 8px;
}
#sg_newgroups {
float: left;
width: 304px;
margin-left: -304px;
}
#sg_owngroups img.sgicon, #sg_randomgroup img.sgicon {
margin-top: 2px;
margin-left: 0px;
margin-right: 8px;
}
#sg_catcloud {
text-align:justify;
}
--> </style>

That's just a waste of space.

 

I dunno. Haven't done it. Looked into it closely. My conclusion was that this was an open door into ... not determinable. That's a reason not to do it, if one values a stable website, just imo. I couldn't find anyone who had done it willing to share an experience. I rather guess that it's paid services territory, not profitable to share much with the learning public. Just a guess.

I decided that if one wanted to dedicate one's life to plinking around with the css it might be worth trying. Concluded that all changes would need very thorough testing before committing them to the live site, so a separate test site would have to be paralleled and maintained indefinitely. In the end there were enough appearance options without it that I decided it wasn't worthwhile.

And if the words 'vb 4' can be uttered, I doubt it would roll forward into 4. 4 is doing nearly the same thing with hundreds of individual settings through the admin cp. And I think that at some point those hanging tight with 3.x are going to cliff out and have to migrate to another sw or go to 4. Pure speculation.

 

Oh you're talking about 3.8.

Yes, it's a good idea if you only have one Theme, if you have multiple it'll get tricky and probably not worth the effort to save a little bandwidth (if any).

Take the CSS out, throw it in a .css file, then replace the contents of the css template with:

HTML:

<link rel="stylesheet" type="text/css" href="urltostylesheet" />

 

If you do them as files it helps with server load for queries. Also for viewing as a lot of people have their browser cache the pages for quicker load.

I do the same as Ryan said. Then you can do quick hit editing to it as well.

 

I'm wondering how much of an advantage that would really be?? On the other end, I would be curious if minimizing http requests, db queries, driving towards XHTML and CSS 2.1 compliant and eliminating a few tables and utilizing more CSS calls would be a better way to go in the long run to reduce bandwidth consumption and provide a better end-user browsing experience.

 

True, although one other thing would be useful, removing all the javascript to a single external file. But hey, you can't underestimate the effects of this stuff, the member info page for example has a ridiculous about of CSS in the HTML of the document itself, which should be externalised in some way.

 

I agree with what you are saying, absolutely move that out of there. On a side note, some time ago I tried what you were saying about the Java, things did not go good for me ;P

 

What happened then?

 

All java stopped working.
I have a "few external to vb" javascripts, I worked on compressing them and better placement to keep them optimized. Stock stuff I left alone. Since vB 3.7xx, they started compressing their own stuff. It worked out well in the end.

 

Ouch, that's definitely something you don't want happening. I still don't get how merely moving the javascript can stop it working though.

 

Some Javascript needs to have values set by PHP, which is only possible if it's embedded into the templates.

This would also be the case for CSS, now that I think about it. Some of its values might be set by PHP.

If there are no variables in the CSS, then you're good to go, otherwise it needs to remain.

 

why not just use the built in "store stylesheet external" option you have already in your vboptions?

 

^Because it doesn't work for the profile/album/social group specific CSS. I already use it, and it works for other CSS though.