StyleVars: Am I doing something wrong?

[Sarteck]

I don't understand these StyleVars... I wish we had some kind of visual reference to know what parts of the pages are covered by which StyleVars. (Googling, I found that "StyleVars Visual Dictionary on vbulletin.com, but it's not really helpful, tbh.)

I was trying to adjust the background and foreground colours of the sidebar that shows up on the left of the profile, to make it uniform with the style I'm trying to create. (I swear, I don't know who had the bright idea for this many StyleVars, but it really makes uniformity a big pain in the ass.)

Anyways, I'm sitting here looking at the StyleVars I can modify, and helpfully there's something right there for profiles, and more specifically, profile sidebars.

...

...or so I thought. After about an hour of frustrating myself trying to find out if I was doing something wrong, or not saving something, or whatever, I stumble across this random StyleVar, "tabslight_selected_background". As I'm trying to navigate around these StyleVars and didn't know what this did, I set it to an eye-burning bright purple.

DING! The profile sidebar background changed!

Okay, my first question is this. Having read this far, is it your opinion that my vBulletin itself is borked, or is this what everyone else is experiencing? Is that the correct way for these StyleVars to act? It's like most of those profile sidebar StyleVars don't do ANYTHING, but that tabslightwhatever changes the sidebar background?

If the answer to that is a woeful "yes, that is the way they are supposed to act," then my second question (after the obligatory "WTF?") is "Okay, now how am I supposed to change the font color of that sidebar? >.>

These StyleVars would probably be great if I knew how to use 'em... But IB doesn't seem to have made them very intuitive (assuming my vB ain't borked).

[TheLastSuperman]

This might help you some:
https://vborg.vbsupport.ru/showthread.php?t=256370

See the helpful links near the top.

Basically stylevars are well... Style Variables, we use that system to key in all sorts of info and most of the stylevars are used in the css so instead of regular css for example:

.widget_content {
color: #515151;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #ffffff;
border: #c4c4c4;
_background-image: none;
padding: 5px 5px 5px 5px;
}

We will see this:
.widget_content {
color: {vb:stylevar sidebar_content_color};
-moz-border-radius:{vb:stylevar border_radius};
-webkit-border-radius: {vb:stylevar border_radius};
background:{vb:stylevar sidebar_content_background};
border:{vb:stylevar sidebar_content_border};
_background-image: none;
padding:{vb:stylevar vbcms_widget_content_padding};
}

Now I did not reference the stylevars correctly just used as an example however if you see a CSS definition such as:

background:{vb:stylevar sidebar_content_background};

Now simply look for... you got it ;)... the stylevar sidebar_content_background and change it to see the results :D. It's still being worked on per say (or should be imo) as recently I noticed some sidebar stylevars are used for the widgets as you can note by my css examples lol however they are apparently different systems etc so it's not perfect and not every bit of CSS uses or has a stylevar.

[Sarteck]

Let me re-state my problem, following the video you link here: http://www.vbulletin.com/forum/content.php/290-How-To-Find-a-StyleVar-%28video-version%29


M'kay, I'm looking for how to change the background of the sidebar on the User Profile Page.

I load up the page, load FireBug, and find the HTML Element in question.

<div id="sidebar_container" class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border sidebarleft">


Looking at the CSS, I see it gets it background-color property (#1F1F1F) from:

#sidebar_container.member_summary {
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: -2px 2px 2px #C8C8C8;
background-color: #F1F1F1;
border: 1px solid #C1C1C1;
clear: right;
display: inline-block;
float: left;
margin-bottom: 10px;
padding: 0;
width: 240px;
}


I go to my AdminCP, Search in Templates for "member_summary", and the most logical one seems to be userprofile.css.

I find where it gets the background property...

#sidebar_container.member_summary
{
color: {vb:raw moduleinactive_text_color};
background-color: {vb:raw moduleinactive_background_color};
background-image: {vb:raw moduleinactive_background_image};
background-repeat: {vb:raw moduleinactive_background_repeat};
border-color: {vb:raw moduleinactive_border};
}



Now, I'm sitting here scratching my head wondering 2 things: WTH happened to StyleVars (seems we're using the raw output from some other variable), and how the heck do I change this moduleinactive_background_color variable (except by hunting IT down and using a plugin, which would make no sense)?







Also, I don't understand why the profile_sidebar_background and other profile_sidebar variables have no effect. Except for the avatar maxwidth (which doesn't change anything for the avatar itself, but instead for all other images in the sidebar) and maybe some that I didn't get to toying around with. It just makes no sense to me.

[ForumsMods]

Sidebar css is generated dynamically.
See ./vb/profilecustomize.php line #229.

Also check this:
http://www.vbulletin.com/forum/content.php/323-Setting-the-Default-Profile-Style.

[Sarteck]

@ForumsMods, I'm not quite sure what I'm looking at, there, tbh. O.o That seems to deal with Profile Customization, but I don't have my profile customized.

(Also, isn't pretty much all of the CSS generated dynamically from the StyleVars? Or do you mean a different type of dynamically. @_@ Confusing...)

[ForumsMods]

@ForumsMods, I'm not quite sure what I'm looking at, there, tbh. O.o That seems to deal with Profile Customization, but I don't have my profile customized.

(Also, isn't pretty much all of the CSS generated dynamically from the StyleVars? Or do you mean a different type of dynamically. @_@ Confusing...)
When there is not a profile customization, vb uses default profile style and if this does not exist, generates it from stylevars which you can see in php file.

You can modify the php file or create a default theme.

[Sarteck]

M'kay, I see where you are talking about...

in that profilecustomize.php,

'moduleinactive_background_color' => self::$stylevars['tabslight_selected_background']['color'],


So now I finally get where the tabslight comes in. Now I have to find out where the rest of the stuff comes from...



What I don't get is why there are a bunch of profile_sidebar StyleVars that seem to do nothing, then. :<

I mean, it would make some sense if I could change the background of the profile sidebar using profile_sidebar_background. :< Why put in them StyleVars, if we can't use 'em? XD










So wait.

Let me get this straight...

Half of my profile page, even if I'm not using customization, is more than likely NOT going to mesh with my skins?

You're saying it gets the values from a default profile... So if I want it to actually behave "normally," I have to edit the PHP?



Am I getting that right? It doesn't make much sense to do it that way, so I'm probably wrong...

[ForumsMods]

I would create a default theme or modify the css templates rather than modify the php file.

I wonder the same thing as you, maybe in next version vB will use these stylevars.

[Sarteck]

I want to get away with modifying as few of the templates as possible, tbh... After my last upgrade and all the "conflicts" when doing the template stuff. :< But I guess that's the only feasible way to go.

Making a "Default" theme would put me in the same boat I'm in now, since I have a bunch of style I offer my members to choose from, and having one "default" would pretty much screw all the others.

/me shakes a fist at IB.

Get off yer butts and make yer product compatible with itself!

[ForumsMods]

You can use additional.css templte to modify css without edititing default templates

[Sarteck]

Hmmm, I tried that, but it just doesn't seem to take (even after hard refresh to reload the CSS locally).




#sidebar_container.member_summary
{
color: {vb:stylevar profile_sidebar_text_color};
background-color: {vb:stylevar profile_sidebar_background_color};
background-image: {vb:stylevar profile_sidebar_background_image};
background-repeat: {vb:stylevar profile_sidebar_background_repeat};
border-color: {vb:stylevar profile_sidebar_border};
}


If I put that in my additional.css, then it should still grab those StyleVars and apply them, right? My profile page doesn't seem to be doing that...



Just changed background-color: {vb:stylevar profile_sidebar_background_color}; to background-color: #FFFFFF;. Doesn't seem to take. Am I doing my CSS wrong here or something? The way I read it, "The element labelled 'sidebar_container' with the class 'member_summary' gets these values."

Right? Wrong?

--------------- Added 1295173334 at 1295173334 ---------------

Ugh, and from reading the comments on that stuff ya linked... Seems they've known about the "bug" since 4.0.8, and haven't cared to fix it. :<