[Forum] New Stylevar Color Controls for Activity Stream

[MacroPhotoPro]

With this new "Activity Stream" comes a new series of Stylevar controls I guess, but I cannot figure out how to control some of them. For example the Tab link color (hover-link color) in the profile:

Can anyone tell me where I can adjust the link color (and hover-link color) of both rows of tabs ... or will custom coding be needed, because there is no default remedy?

Thanks,

Jack

[MacroPhotoPro]

No one?

[Abdulla Ashoor]

You can find them all in 'userprofile.css' template

'body_color' for the link color
'module_text_color' for the selected tab

[MacroPhotoPro]

Thank you for responding, but what is " template?

I don't see any " template ... all I see in my StyleVar is ActivityStream, and there is no "body_color" there nor any "module_text_color" that I can see ...

Please clarify, thank you.

Jack

- - - Updated - - -

Also, the top row of Tabs seems to be controlled by different means than the bottom row of Tabs ...

[Abdulla Ashoor]

The template name is 'userprofile.css'.

Main profile tabs link color stylvar: moduleinactive_text_color (there is no stylevar for the hover)
Activity stream tabs link color stylvar: moduleinactive_text_color

[MacroPhotoPro]

Thank you for your time, I appreciate it. This is what I found:

@charset "UTF-8";
/* CSS Document */

.member_content a, .member_content a:hover
{
    color: {vb:raw page_link_color};

}

.userprof_underline
{
    border-color: {vb:raw module_border};
}

.userprof{
    font-family:{vb:raw font_family};
    font-size: {vb:raw fontsize};
}

.userprof_title{
    color: {vb:raw title_text_color};
}

.userprof_module{
    color: {vb:raw [COLOR=#ff0000]module_text_color[/COLOR]};
    background-color: {vb:raw module_background_color};
    background-image: {vb:raw module_background_image};
    background-repeat: {vb:raw module_background_repeat};
}
.userprof_module_border{
    border-color: {vb:raw module_border};
}

.userprof_module a{
    color: {vb:raw module_text_color};
}


.userprof_module a:hover{
    color: {vb:raw module_text_color};

}

.userprof_moduleinactive{
    color: {vb:raw [COLOR=#ff0000]moduleinactive_text_color[/COLOR]};
    background-color: {vb:raw moduleinactive_background_color};
    background-image: {vb:raw moduleinactive_background_image};
    background-repeat: {vb:raw moduleinactive_background_repeat};
}
.userprof_moduleinactive_border{
    border-color: {vb:raw moduleinactive_border};
}

.userprof_moduleinactive a{
    color: {vb:raw moduleinactive_link_color};
}


.userprof_moduleinactive a:hover{
    color: {vb:raw [COLOR=#ff0000]moduleinactive_link_color[/COLOR]};

}

.userprof_headers{
    color: {vb:raw headers_text_color};
    background-color: {vb:raw headers_background_color};
    background-image: {vb:raw headers_background_image};
    background-repeat: {vb:raw headers_background_repeat};
}

.userprof_headers_border{
    border-color: {vb:raw headers_border};
}

.userprof_headers a{
    color: {vb:raw headers_link_color};
}


.userprof_headers a:hover{
    color: {vb:raw headers_link_color};

}

.userprof_content{
    color: {vb:raw content_text_color};
    background-color: {vb:raw content_background_color};
    background-image: {vb:raw content_background_image};
    background-repeat: {vb:raw content_background_repeat};
}

.userprof_content a {
    color: {vb:raw content_link_color};
    background-color: transparent;
}

li.userprof_content a {
    color: {vb:raw content_link_color};
}

.userprof_content a:hover {
    color: {vb:raw content_link_color};
}

.userprof_content .shade
{
    color: {vb:raw content_text_color};

}
dd.userprof_content {
    color: {vb:raw content_link_color};
    background-color: {vb:raw content_background_color};
    border-color: {vb:raw content_border};
}

dl.tabslight dd.userprof_moduleinactive a, dl.tabslight dd.userprof_moduleinactive a:hover":{"bc":"moduleinactive_border
{
    color: {vb:raw [COLOR=#ff0000]moduleinactive_text_color[/COLOR]};
}

/* I know these next few have the same settings. Since the class definition becomes an array key for a javascript array
it's better to keep to one line. That requires three separate lines*/
dl.tabslight dd a, #sidebar_container.member_summary .blocksubhead.smaller, #sidebar_container.member_summary .blockrow{
    font-family:{vb:raw font_family};
    font-size: {vb:raw fontsize};
}
.textcontrols .textcontrols a, a.textcontrol, #sidebar_container.member_summary .mainblock .usertitle, #sidebar_container .userprof_content a{
    font-family:{vb:raw font_family};
    font-size: {vb:raw fontsize};
}

.profile_content .blog_stats, .profile_content .blogentrybit .blog_meta{
    font-family:{vb:raw font_family};
    font-size: {vb:raw fontsize};
}


dl.tabslight dd.userprof_module a{
    color: {vb:raw module_text_color};
    background-color: {vb:raw module_background_color};
    border-color: {vb:raw module_border};
}


dl.tabslight dd.userprof_module a:hover{
    color: {vb:raw module_text_color};
}

dl.tabslight dd.userprof_moduleinactive a{
    color: {vb:raw [COLOR=#ff0000]moduleinactive_text_color[/COLOR]};
    background-color: transparent;
    background-image: none;
    border-color: {vb:raw moduleinactive_border};
}

dl.tabslight dd.userprof_content a{
    color: {vb:raw content_text_color};
    background-color: {vb:raw content_background_color};
    border-color: {vb:raw content_border};
}

li.userprof_content{
    margin-bottom: .5em;
    color: {vb:raw content_text_color};
    background-color: {vb:raw content_background_color};
    background-image: {vb:raw content_background_image};
    background-repeat: {vb:raw content_background_repeat};
}


.userprof_content_border{
    border-color: {vb:raw content_border};
    border-style: solid;
    border-width: 1px;
}

li.userprof_content_border{
    border-color: {vb:raw content_border};
}

.userprof_button{
    color: {vb:raw button_text_color};
    background-color: {vb:raw button_background_color};
    background-image: {vb:raw button_background_image};
    background-repeat: {vb:raw button_background_repeat};
    border-color: {vb:raw button_border};
}

.body_wrapper{
    background-color: {vb:raw page_background_color};
    background-image: {vb:raw page_background_image};
    background-repeat: {vb:raw page_background_repeat};
}


#colorbox_title_text_color{
    background-color: {vb:raw title_text_color};
}

#colorbox_page_background{
    background-color: {vb:raw page_background_color};
}

#colorbox_module_text_color{
    background-color: {vb:raw module_text_color};
}

#colorbox_module_link_color{
    background-color: {vb:raw [COLOR=#ff0000]module_link_color[/COLOR]};
}

#colorbox_module_background{
    background-color: {vb:raw module_background_color};
}

#colorbox_module_border{
    background-color: {vb:raw module_border};
}

#colorbox_content_text_color{
    background-color: {vb:raw content_text_color};
}

#colorbox_content_link_color{
    background-color: {vb:raw content_link_color};
}

#colorbox_content_background{
    background-color: {vb:raw content_background_color};
}

#colorbox_content_border{
    background-color: {vb:raw content_border};
}

#colorbox_button_text_color{
    background-color: {vb:raw button_text_color};
}

#colorbox_button_background{
    background-color: {vb:raw button_background_color};
}

#colorbox_button_border{
    background-color: {vb:raw button_border};
}

#colorbox_moduleinactive_text_color{
    background-color: {vb:raw [COLOR=#ff0000]moduleinactive_text_color[/COLOR]};
}

#colorbox_moduleinactive_link_color{
    background-color: {vb:raw [COLOR=#ff0000]moduleinactive_link_color[/COLOR]};
}

#colorbox_moduleinactive_background{
    background-color: {vb:raw moduleinactive_background_color};
}

#colorbox_moduleinactive_border{
    background-color: {vb:raw moduleinactive_border};
}

#colorbox_headers_text_color{
    background-color: {vb:raw headers_text_color};
}


#colorbox_headers_link_color{
    background-color: {vb:raw headers_link_color};
}

#colorbox_headers_background{
    background-color: {vb:raw headers_background_color};
}

#colorbox_headers_border{
    background-color: {vb:raw headers_border};
}

#colorbox_page_link_color{
    background-color: {vb:raw page_link_color};
}

/**tabslight userprof_module a{
    background-image: none;
    background-color: {vb:raw module_background_color};
    color: {vb:raw module_color};
}**/

#sidebar_container .userprof_content .blockrow{
    color: {vb:raw content_text_color};
    background-color: {vb:raw content_background_color};
    <vb:if condition="$content_background_image != ''">
        background-image: {vb:raw content_background_image};
        background-repeat: {vb:raw content_background_repeat};
    </vb:if>
    border-color: {vb:raw content_border};
}

#sidebar_container .userprof_content a, #sidebar_container .userprof_content a:hover
{
    color: {vb:raw content_link_color};
}

.memberprofiletabunder {
    background-color: {vb:raw module_background_color};
    background-image: {vb:raw module_background_image};
    background-repeat: {vb:raw module_background_repeat};
}
.pagination span a, .pagination span a.popupctrl {
    color: {vb:raw moduleinactive_link_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};
}

.pagination span a:hover
{
    border-color: {vb:raw moduleinactive_border};
    color: {vb:raw moduleinactive_link_color};
}

.pagination span.selected a, .pagination span.selected a.popupctrl {
    color: {vb:raw module_text_color};
    background-color: {vb:raw module_background_color};
    background-image: {vb:raw module_background_image};
    background-repeat: {vb:raw module_background_repeat};
    border-color: {vb:raw module_border};
}


#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};
}
#sidebar_container .blocksubhead 
{
    color: {vb:raw moduleinactive_text_color};
    border-color: {vb:raw moduleinactive_border};
}

.tabslight dd.userprof_moduleinactive:hover {
    border-color: {vb:raw module_border};
}

dl.stats dt, #sidebar_container dl.stats, #sidebar_container .blockbody.userprof_content, #sidebar_container .userprof_content .time, .userprof_content .time  {
    color: {vb:raw content_text_color};
    background-color: transparent;
    background-image: none;
}

#sidebar_container a
{
    color: {vb:raw moduleinactive_link_color};
}

#sidebar_container a:hover
{
    color: {vb:raw moduleinactive_link_color};
}
.profile_editor_border, .profile_content .actionbuttons
{
    border-color: {vb:raw headers_border};

}

.profile_editor_border {
    border-top:none;
}
.userprof_editor {
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: {vb:raw headers_border};
}
.tabbackground {
    width:100%;
}

<vb:comment>This has to be at the bottom of this sheet, because there are some interesting background conflicts</vb:comment>
.moduleinactive_bg{
    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};
}

#sidebar_container.member_summary .textcontrol
{
    color: {vb:raw moduleinactive_link_color};
}

#sidebar_container.member_summary .textcontrol a
{
    color: {vb:raw moduleinactive_link_color};
}

#sidebar_container.member_summary .textcontrol a:hover
{
    color: {vb:raw moduleinactive_link_color};
}

.userprof .postbit .postdate .time {
    color: {vb:raw headers_text_color};
}

.userprof .postbit .postdate .time a {
    color: {vb:raw headers_link_color};
}

.userprof_content .quickedit .blockrow .description {
    color: {vb:raw content_text_color};
}

/* Activity Stream */

#activity_tab_container {
    margin-bottom:20px;
}

#activity_tab_container > div {
    overflow:hidden;
    background-color: {vb:raw moduleinactive_background_color};
}

dl.as-tabs dt {
    display:none;
}

dl.as-tabs dd {
    float:{vb:stylevar left};
}

dl.as-tabs dd a {
    font-size:{vb:stylevar tiny_fontSize};
    font-weight:bold;
    color:{vb:stylevar body_color};
    text-decoration:none;
    text-align:center;
    padding:0 {vb:stylevar padding};
    height:24px;
    line-height:24px;
    display:block;
}

dl.as-tabs dd#asall a {
    font-size:{vb:stylevar small_fontSize};
    line-height:22px;
}

dl.as-tabs dd#asuser a {
    background:url({vb:stylevar imgdir_siteicons}/profile.png) {vb:stylevar left} 2px no-repeat; 
    margin-{vb:stylevar left}:8px;
    padding-{vb:stylevar left}:18px;
}

dl.as-tabs dd#asfriend a {
    background:url({vb:stylevar imgdir_siteicons}/network.png) {vb:stylevar left} 2px no-repeat; 
    margin-{vb:stylevar left}:8px;
    padding-{vb:stylevar left}:18px;
}

dl.as-tabs dd#asphoto a {
    background:url({vb:stylevar imgdir_siteicons}/photo.png) {vb:stylevar left} 5px no-repeat;
    margin-{vb:stylevar left}:8px;
    padding-{vb:stylevar left}:18px;
}

dl.as-tabs dd#assub a {
    background:url({vb:stylevar imgdir_siteicons}/subscribe.png) {vb:stylevar left} 2px no-repeat; 
    margin-{vb:stylevar left}:8px;
    padding-{vb:stylevar left}:18px;
}

dl.as-tabs dd a {
    color: {vb:raw moduleinactive_text_color};
}

dl.as-tabs dd.selected a {
    color: {vb:raw module_text_color};
}

.activitystream_block dd.selected, dd.userprof_module {
    color: {vb:raw module_link_color};
    background-color: {vb:raw module_background_color};
    border-color: {vb:raw module_border};
    background-image: {vb:raw module_background_image};
    background-repeat: {vb:raw module_background_repeat};
}

.activitystream_block dd, dd.userprof_moduleinactive {
    color: {vb:raw moduleinactive_text_color};
    background-color: {vb:raw moduleinactive_background_color};
    border-color: {vb:raw moduleinactive_border};
    background-image: {vb:raw moduleinactive_background_image};
    background-repeat: {vb:raw moduleinactive_background_repeat};
}

.newactivity a, .newactivity > span, 
.moreactivity a, .moreactivity span {
    color: {vb:raw headers_text_color};
}

.as-tabs dd.selected, .as-tabs dd.userprof_module {
    border: 1px solid {vb:raw module_border};
}

.as-tabs dd, .as-tabs dd.userprof_moduleinactive {
    border: 1px solid {vb:raw moduleinactive_border};
}

These names are repeated throughout, and the colors are not controlled in the way I am used to changing colors (#000000, etc.), I am not sure how to change this at all

Thanks again for your time,

Jack

[grigore665]

Hello there,

I want to change the background colour too... to activity stream and user profile.
Second, i want to move the search box a bit up.

thanks

[Abdulla Ashoor]

These names are repeated throughout, and the colors are not controlled in the way I am used to changing colors (#000000, etc.), I am not sure how to change this at all

trait them as normal css elements, if you are familir with css you can easily update those variables by completely remove them. for example:
color: {vb:raw moduleinactive_text_color};

you can replace it with:
color: #111;

another example:
font-size: {vb:raw fontsize};

you can replace it with:
font-size: 11px;

The thing you need to remember once you remove these variables - {vb:????} - they no longer will have effect on the template whenever you changed them from style variable editor.

[Abdulla Ashoor]

Hello there,

I want to change the background colour too... to activity stream and user profile.
Second, i want to move the search box a bit up.

thanks

You have a custom style, I can't help you without a link. I'm not sure what you want to change is it the search text box background or the activity bit background? if you want to change the activitybit background you can do that from the stylevar: activitystreamcontent_background

Look for classes in your forum where you want to change anything. Use a debug mod like firebug in Firefox browser or similar in other browser to find where you need to make change for your style, and most importantly, please start your own thread next time. Thanks.

[grigore665]

sorry about that, the issue is solved! thanks