picture navigation after 4.0.8 update

[michelle86]

Hey guys!

So after the update to 4.0.8 I have had tons of issues.

One of them is changes in member photo albums.

When navigating through individual pictures you can see that there is a background color behind the blue crisscross image I set for the bar that goes across the top of the photo album.

Also, the links are white... good for when they are on the bar, BAD when they are on the very light colored buttons.

I have NO idea what settings I have to change to fix this. I have gone though stylevars and tried changing things trying to figure it out by trial and error. But I just can't figure it out. This isn't a site-wide issue, it is only the photo albums.

Can anyone help?

Here's my site if it if helps to look around at other parts of the site: http://www.members.lovingfromadistance.com

[Lynne]

The background is set in ".textcontrols a, a.textcontrol" so do a Search in Templates to see what it is set to and then modify it.

[michelle86]

I found a.textcontrol in the album.css template. I am stumped on what to change though since the part where a.textcontrol is it doesn't look like there is anything there to change.

can you help me out?

Here it is:

@charset "UTF-8";
/* CSS Document */
.album_pagination_top {
        float: {vb:stylevar right};
        clear: both;
        margin: {vb:math {vb:stylevar padding}/2} 0;
        display: block;
}
.clear {clear:both;}
.toolsmenu li a.upload, .toolsmenu li a.upload {
	background: url({vb:stylevar imgdir_button}/reply_40b.png) no-repeat transparent {vb:stylevar left} ;
}
.toolsmenu li a.upload:hover, .toolsmenu li a.upload:hover {
	background: url({vb:stylevar imgdir_button}/reply_40b-hover.png) no-repeat transparent {vb:stylevar left} ;
}
.toolsmenu .picturenav li a.edit, .toolsmenu li a.edit {
	background: url({vb:stylevar imgdir_button}/edit_40b.png) no-repeat transparent {vb:stylevar left} ;
}
.toolsmenu li a.edit:hover, .toolsmenu li a.edit:hover {
	background: url({vb:stylevar imgdir_button}/edit_40b-hover.png) no-repeat transparent {vb:stylevar left} ;
}
.toolsmenu li a.add, .toolsmenu li a.add {
	background: url({vb:stylevar imgdir_siteicons}/add.png) no-repeat transparent {vb:stylevar left} ;
}
.toolsmenu li a.add:hover, .toolsmenu li a.add:hover {
	background: url({vb:stylevar imgdir_siteicons}/add-hover.png) no-repeat transparent {vb:stylevar left} ;
}
.toolsmenu li a.report {
	background: url({vb:stylevar imgdir_button}/report-40b.png) no-repeat transparent {vb:stylevar left} ;
}
.toolsmenu li a.report:hover {
	background: url({vb:stylevar imgdir_button}/report-40b-hover.png) no-repeat transparent {vb:stylevar left} ;
}
.albumedit .blockrow {
	border: {vb:stylevar albumedit_blockrow_border};
	margin: {vb:stylevar padding} 0;
 	-moz-box-shadow: -2px 2px 2px {vb:stylevar shadow_color};
	-webkit-box-shadow: -2px 2px 2px {vb:stylevar shadow_color};
}
.albumedit .blockrow .thumbnailedit {
        float: {vb:stylevar left};
        width: {vb:stylevar albumedit_thumbnailedit_width};
        padding: {vb:math {vb:stylevar padding}/2};
}
.albumedit .blockrow .maineditor {
        float: {vb:stylevar left};
        width: {vb:stylevar albumedit_thumbnailedit_width};
        padding: {vb:math {vb:stylevar padding}/2};
}
.albumedit .blockrow .movedelete {
        float: {vb:stylevar left};
        width: auto;
        padding: {vb:math {vb:stylevar padding}/2};
        margin-{vb:stylevar left}: {vb:stylevar padding};
}
.albumedit .blockrow .movedelete layer {
        clear:both;
        margin-bottom: {vb:math {vb:stylevar padding}/2};
}
.albumedit .blockrow .maineditor textarea {
        background: {vb:stylevar albumedit_maineditor_background};
        border: {vb:stylevar albumedit_maineditor_border};
        min-height: {vb:math {vb:stylevar albumedit_thumbnailedit_width}-10};
        height: auto !important;
        height: {vb:math {vb:stylevar albumedit_thumbnailedit_width}-10};
}

.albumedit .movelabel {
	width: 100%;
	display: block;
}

form .blockfoot { border: none; }
#album_content {
	width: 100%;
	float: {vb:stylevar left};
        margin-{vb:stylevar right}:-{vb:stylevar album_content_width};
	margin-top: {vb:math {vb:stylevar padding}/2};
	padding-bottom:{vb:math {vb:stylevar padding}*2};
	clear: both;
}

#album_content > div,
#album_content > form {
margin-{vb:stylevar right}: {vb:stylevar album_content_width};
}
#album_content .content {
margin-{vb:stylevar right}: {vb:stylevar album_content_width};
}
#album_sidebar {
	float:{vb:stylevar right};
        width: {vb:math {vb:stylevar album_content_width}-1.5};
	margin-{vb:stylevar left}:{vb:stylevar padding};
	margin-top: {vb:math {vb:stylevar padding}/2};
}
#albumlist .blockbody ,#albumlist .blockbody.albumsback, #album_sidebar .blockbody, #album_content .blockbody, #album_sidebar .blockrow.albumlist_entry  {
        background: {vb:stylevar albumlist_blockbody_background};
}

.albumlist_entry  {
	float:{vb:stylevar left};
	margin-{vb:stylevar left}:{vb:math {vb:stylevar padding} *2 +5};
	margin-top:{vb:math {vb:stylevar padding}*2};
	padding: 0 {vb:math {vb:stylevar padding}+5} {vb:stylevar padding} {vb:math {vb:stylevar padding}+5};
	text-align:{vb:stylevar left};
	display:block;
	width:{vb:raw vboptions.attachthumbssize}px;
	height:{vb:math {vb:raw vboptions.attachthumbssize} + {vb:stylevar font.fontSize}*{vb:stylevar line_height}*2 + {vb:stylevar small_fontSize}*{vb:stylevar line_height}*2 + {vb:stylevar padding} / 2};
	overflow:hidden;
	border: {vb:stylevar albumlist_entry_border};
	background:{vb:stylevar albumlist_entry_background};
	-moz-box-shadow: -2px 2px 2px {vb:stylevar shadow_color};
	-webkit-box-shadow: -2px 2px 2px {vb:stylevar shadow_color};
}

.albumlist_entry .albumthumb {
	display:block;
	width:{vb:raw vboptions.attachthumbssize}px;
	margin: {vb:math {vb:stylevar padding}/2} auto;
	text-align:center;
}
.albumlist_entry img {
	-moz-box-shadow: -2px 2px 2px {vb:stylevar albumlist_image_shadow_color};
	-webkit-box-shadow: -2px 2px 2px {vb:stylevar albumlist_image_shadow_color};
}
.albumlist_entry .albumtitle {
	font-weight:bold;
	text-decoration:none;
}

.albumlist_entry .albumdescription {
	font-size: {vb:math {vb:stylevar font.fontSize}-2}px;
}
.albumlist_entry .shade {
	display: inline;
	font-size: {vb:math {vb:stylevar font.fontSize}-2}px;
	padding-{vb:stylevar left}: {vb:math {vb:stylevar padding}/2-2};
}

.albumlist_entry .stats {
	margin-top:0.3em;
	font-size:{vb:stylevar small_fontSize};
}

/* Show album */

#thumbnails li {
	float:{vb:stylevar left};
	margin:{vb:stylevar padding};
	text-align:center;
	background-color:{vb:stylevar lightweightbox_background.backgroundColor};
	border:solid 1px {vb:stylevar lightweightbox_border.borderColor};
 	-moz-box-shadow: -2px 2px 2px {vb:stylevar shadow_color};
	-webkit-box-shadow: -2px 2px 2px {vb:stylevar shadow_color};
}

#thumbnails li:last-child {
	margin-bottom:{vb:stylevar padding};
}

#thumbnails li .picturetitle {
	display:none;
}

#thumbnails li .picture {
	display:block;
	width:{vb:math {vb:raw vboptions.attachthumbssize}+8}px;
	height:{vb:math {vb:raw vboptions.attachthumbssize}+8}px;
	padding:{vb:stylevar padding};
}

#album .blockfoot {
	/*text-align:{vb:stylevar right};*/
}

#edit_controls {
	float:{vb:stylevar right};
	padding:{vb:math {vb:stylevar padding}/2} {vb:stylevar padding};
}

#edit_controls li {
	font-size:{vb:stylevar small_fontSize};
	display:inline-block;
	margin-{vb:stylevar left}: {vb:stylevar padding};
}

#controls_above {
	margin-bottom:{vb:stylevar padding};
}

#controls_below {
	margin-top:{vb:stylevar padding};
}


#controls_above a.textcontrol,
#controls_below a.textcontrol {
	float:{vb:stylevar right};
	margin-{vb:stylevar left}:{vb:stylevar padding};
}

#pagination_top,
#pagination_bottom {
	float:{vb:stylevar left};
}

.addgrouprow {
	text-align:center;
}

/* View picture */

.picturenav {
	float:{vb:stylevar right};
}

.picturenav li {
	float:{vb:stylevar left};
	margin-{vb:stylevar left}:{vb:stylevar padding};
}

#picturecontainer {
	margin:{vb:stylevar padding} {vb:math {vb:stylevar padding}*2};
}
#picturestats {
	font-size:{vb:stylevar small_fontSize};
}

#picturelink {
	text-align:center;
	vertical-align:middle;
	display:block;
	margin:{vb:stylevar picturelink_margin} auto;
}

#picturelink img {
	background-color:{vb:stylevar lightweightbox_background.backgroundColor};
	border:solid 1px {vb:stylevar lightweightbox_border.borderColor};
	padding:{vb:stylevar padding};
	text-align:center;
	-moz-box-shadow: -2px 2px 2px {vb:stylevar picturelink_img_shadow_color};
	-webkit-box-shadow: -2px 2px 2px {vb:stylevar picturelink_img_shadow_color};
}

#picturecaption {
	margin:{vb:stylevar picturelink_margin} auto;
	font-family:{vb:stylevar content_font.fontFamily};
	margin-{vb:stylevar right}:{vb:math {vb:stylevar albumtop_margin}+100};
}
#picturestats {
	margin-{vb:stylevar right}:{vb:math {vb:stylevar albumtop_margin}+80};
}
#picturestats dt {
	float:{vb:stylevar left};
	clear:{vb:stylevar left};
}

#picturestats dd {
	float:{vb:stylevar left};
	margin-{vb:stylevar left}:{vb:math {vb:stylevar picturelink_margin}/2};
}

#picturecontrols {
	float:{vb:stylevar right};
	margin-{vb:stylevar right}:{vb:stylevar padding};
}
#picturecontrols li  {
	float:{vb:stylevar left};
	margin-{vb:stylevar left}:{vb:stylevar padding};
}
#picturecontrols li a {
	text-align:center;
}

#pictureurls {
	float:{vb:stylevar right};
	padding-bottom:{vb:stylevar picturelink_margin};
	width: {vb:math {vb:stylevar albumtop_margin}+70};
}

#pictureurls input.textbox {
	display:block;
	width:{vb:stylevar albumtop_margin};
	margin:{vb:math {vb:stylevar padding}-7} 0;
	background-color:{vb:stylevar lightweightbox_background.backgroundColor};
	border:solid 1px {vb:stylevar lightweightbox_border.borderColor};
	padding:{vb:math {vb:stylevar padding}-7};
}

/* Picture comments */

#above_posts {
	clear:both;
	position:relative;
}

#picturecommentpopups {
	position:absolute;
	{vb:stylevar right}:{vb:math {vb:stylevar padding}/2};
	top:{vb:math {vb:stylevar padding}/2};
}

#picturecommentpopups a.popupctrl {
	color: {vb:stylevar blockhead_color};
}

#picture_comment_inlinemod_form {
	margin-bottom:{vb:stylevar padding};
}

#below_posts {
	clear:both;
	position:relative;
	padding-bottom:{vb:stylevar picturelink_margin};
}

#inlinemod_formctrls {
	float:{vb:stylevar right};
}

#addalbumlink {
	float:{vb:stylevar right};
}

#albumlist {
	margin-bottom:{vb:stylevar padding};
}

/* Latest Albums */
#latestalbumcontainer div.albumthumbcontainer, .albumlist_entry div.albumthumbcontainer {
	margin:5px auto;
	text-align:center;
	vertical-align: middle;
}
#latestalbumcontainer div.albumthumbcontainer img.album_cover {
	margin: auto 0;
	vertical-align: middle;
	-moz-box-shadow: -2px 2px 2px {vb:stylevar albumlist_image_shadow_color};
	-webkit-box-shadow: -2px 2px 2px {vb:stylevar albumlist_image_shadow_color};
}
#latestalbumcontainer p {
	overflow:hidden;
}

#latestalbumcontainer li {
	float:{vb:stylevar left};
	margin-{vb:stylevar left}:{vb:math {vb:stylevar padding}*2+5};
	margin-top:{vb:math {vb:stylevar padding}*2};
	padding: 0 {vb:math {vb:stylevar padding}+5} {vb:stylevar padding} {vb:math {vb:stylevar padding}+5};
	text-align:{vb:stylevar left};
	display:block;
	width:{vb:raw vboptions.attachthumbssize}px;
	height:{vb:math {vb:raw vboptions.attachthumbssize} + {vb:stylevar font.fontSize}*{vb:stylevar line_height}*2 + {vb:stylevar small_fontSize}*{vb:stylevar line_height}*2 + {vb:stylevar padding} / 2};
	overflow:hidden;
	border: {vb:stylevar albumlist_entry_border};
	background:{vb:stylevar albumlist_entry_background}; 
	-moz-box-shadow: -2px 2px 2px {vb:stylevar shadow_color};
	-webkit-box-shadow: -2px 2px 2px {vb:stylevar shadow_color};
}

#latestalbumcontainer li:hover {
	background:#FFF url({vb:stylevar imgdir_gradients}/form-control-gradient-alpha.png) repeat-x scroll center bottom;
}

#latestalbumcontainer li:last-child {
	margin-bottom:{vb:stylevar padding}px;
}

#latestalbumcontainer li a img {
	margin: auto;
}

#latestalbumcontainer li span {
	display:block;
	clear:{vb:stylevar left};
	margin-top:{vb:math {vb:stylevar padding} / 2}px;
}
#latestalbumcontainer li span.time {
	display:inline;
}
#latestalbumcontainer .albumtitle {
	font-weight:bold;
	text-decoration:none;

}

#latestalbumcontainer .shade {
	font-size:11px;

}

#latestalbumcontainer .alb_unread_picture {
	margin-top:{vb:stylevar padding}px;
}

.alb_picturebit_checkbox {
	position:relative;
	width:{vb:raw picture.thumbnail_width}px;
}
.alb_picturebit_checkbox_input {
	position:absolute;
	{vb:stylevar left}: 0px;
	top: 0px;
}
#controls_top {
	margin-bottom:{vb:math {vb:stylevar padding}+4};
	margin-top:{vb:math {vb:stylevar padding}/5};
}

ol.addgrouplist .checkbox {
	margin-top:{vb:math {vb:stylevar padding}/5};
	float:{vb:stylevar left};
}

ol.addgrouplist .blockrow {
	background:{vb:stylevar formrow_background.backgroundColor} {vb:stylevar formrow_background.backgroundImage} repeat-x bottom;
	border-bottom:solid 1px {vb:stylevar light_border.borderColor};
}

ol.addgrouplist .desc {
	margin-{vb:stylevar left}:{vb:math {vb:stylevar padding}*2};
}

ol.addgrouplist .desc strong {
	font-weight:bold;
}

[Lynne]

None of those are ".textcontrols a, a.textcontrol"

It's here in vbulletin.css:

.textcontrols a,
a.textcontrol {
    position:relative;
    padding: 3px {vb:math {vb:stylevar padding}/2};
    font: {vb:stylevar control_font};
    line-height: {vb:stylevar line_height};
    text-decoration:none;
    border: {vb:stylevar control_border};
    color: {vb:stylevar control_color};
    background:{vb:stylevar control_background};
    -moz-border-radius:{vb:stylevar popupmenu_border_radius};
    -webkit-border-radius:{vb:stylevar popupmenu_border_radius};
}

Now you can see the background is set by the stylevar "control_background". I'd suggest watching that video and also reading this which has the same info only written - How To: Find the correct StyleVar/LayoutVar to edit

[michelle86]

Now are you talking about the color that is behind the bar? I would love to change that but the button background can stay. I want to change the font color of

← Last

and

Next →

And make the font of those darker so they aren't so hard to see on the button. ( ← and
→ are the left and right arrows).

If I go to "View page source" and find where the last and next buttons are it shows:

<ul class="[COLOR="Red"]picturenav nopopupgroup[/COLOR]">
	    <li><a href="album.php?albumid=337&amp;attachmentid=5491" class="textcontrol">&larr; Last</a></li>
            <li><a href="album.php?albumid=337&amp;attachmentid=5503" class="textcontrol">Next &rarr;</a></li>
            
        </ul>

When I searched for picturenav_nopopupgroup in the templates I found that it was in the album _picturelist and album_pictureview



Here is a bit of the album_pictureview template where the picturenav_nopopupgroup shows up:

<div id="albumtop" class="floatcontainer toolsmenu">
<div>
    <vb:if condition="$show['picture_nav']">
       [COLOR="Red"] <ul class="picturenav nopopupgroup">[/COLOR]
	    <li><a href="album.php?{vb:raw session.sessionurl}albumid={vb:raw albuminfo.albumid}&amp;attachmentid={vb:raw pic_location.prev_attachmentid}" class="textcontrol"><vb:if condition="$stylevar['textdirection'] == 'rtl'">&rarr;<vb:else />&larr;</vb:if> {vb:raw pic_location.prev_text_short}</a></li>
            <li><a href="album.php?{vb:raw session.sessionurl}albumid={vb:raw albuminfo.albumid}&amp;attachmentid={vb:raw pic_location.next_attachmentid}" class="textcontrol">{vb:raw pic_location.next_text_short} <vb:if condition="$stylevar['textdirection'] == 'rtl'">&larr;<vb:else />&rarr;</vb:if></a></li>
            <vb:if condition="$show['usercss_switch']"><li><a href="profile.php?{vb:raw session.sessionurl}do=switchusercss&amp;hash={vb:raw bbuserinfo.logouthash}&amp;u={vb:raw userinfo.userid}">{vb:raw usercss_switch_phrase}</a></li></vb:if>
        </ul>
    </vb:if>

Is there anyway to edit this to make the font darker by editing the above code?

[Lynne]

The color of Next and Last is the same as that of Edit Picture and Report Picture by default. It would probably be easier to change their background and keep the color.

Did you view the video I linked you to or view the article?

[michelle86]

I looked at the article, but you didn't link to the video you mentioned.

[Lynne]

The video is here - How To: Find a StyleVar (video version)

[michelle86]

thanks so much. I fixed the button problem.

Even with using firebug though, when I click on the toolbar it only highlights <div> in the code and the css to the right is not applicable. So I don't know what css is putting that lighter background that is sticking out from behind the blue toolbar.

[Lynne]

Perhaps it is a border? I really can't tell from the image.