Anyone using photoplog pro on vb4.1.2 and cured the CSS issue?

[rolfw1]

Since update to 4.1.2, I've noticed the index page for photoplog pro is broken see here (http://www.thamesvalleybirds.co.uk/photoplog/index.phphttp://). From information on photoplog.com, it appears that the designer is not going to fix any vbulletin generated issues, so I'm not prepared to commit $35 support renewal, for potentially no solution.

Note: a new vB editor is coming out. This is almost sure to break PhotoPlog again. There are no plans to keep updating PhotoPlog each time vB4 breaks it. Support is offline indefinitely.

[Ramsesx]

*lol* thanks for the info, now I Know for sure that there will be no more chance to get a working vB4 GARS version. (same developer)

[Lynne]

Since you havne't provided an image of what it is supposed to look like, I can't even guess as what CSS to give you to 'fix' the issue.

[rolfw1]

Well I can't show you what it's supposed to look like with my forum Lynne, but here's the demo (http://www.photoplog.com/demo/pro/index.php) of the same version of photoplog on vb3.8.5.

As you can see, all of the borders have gone, plus the column labels are in a stack, instead of going across the page. Not the end of the world, just doesn't look very nice.:)

[Lynne]

Add to css:
td.thead, th.thead, div.thead {
display: table-cell;
}

As for border, tborder isn't defined, so you'd need something like:
.tborder {
border: 1px solid black;
}

and then tcat has a border of a different color assigned, so you'll want the color of that border and the color of the tborder to be the same.

Everything looks just fine on the page if you just make those three changes.

[rolfw1]

Thanks Lynne, anywhere in the photoplg.css in in particular? Not particularly au fait with CSS.

.subnav
{
background: {vb:stylevar navbar_tab_background.backgroundColor};
color:{vb:stylevar navbar_tab_color};
padding: 6px;
text-align:center;
}
.subnav a
{
color:{vb:stylevar navbar_tab_color};
}
.subnav a:hover
{
color:{vb:stylevar navbar_tab_color};
}
.tborder
{
}
.tcat
{
background: {vb:stylevar blockhead_background};
color: {vb:stylevar blockhead_color};
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 6px;
}
.tcat a:link, .tcat_alink
{
color: {vb:stylevar blockhead_link_color};
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: {vb:stylevar blockhead_link_color};
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: {vb:stylevar blockhead_linkhover_color};
text-decoration: underline;
}
.thead
{
background: {vb:stylevar wgoheader_background };
/* background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left; */
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 6px;
width: auto; /* unset the 100% */
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #FFFF00;
}
.alt1, .alt1Active
{
background: {vb:stylevar postbit_background};
padding: 6px;
}
.alt2, .alt2Active
{
background: {vb:stylevar postbit_userinfo_background};
padding: 6px;
}
.inlinemod
{
background: #FFFFCC;
color: #000000;
}
textarea, .bginput
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.bginput option, .bginput optgroup
{
font-size: 10pt;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.navbar
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
/*
.panel
{
background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left;
color: #000000;
padding: 10px;
border: 2px outset;
}
.panelsurround
{
padding: 15px;
margin: 15px;
background: #D1D4E0;
color: #000000;
}
*/
legend
{
color: #22229C;
font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
background: #738FBF;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
color: #FFFFFF;
text-decoration: underline;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background: #BBC7CE;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite
{
background: #8A949E;
color: #FFFFFF;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
color: #FFFFFF;
text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

.ppround
{
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webit-border-radius-topright:5px;
/* ie9/opera stuff */
radius-topright:5px;
radius-topleft:5px;
}
.nounder, .nounder a:hover, .nounder a:active
{
text-decoration: none;
}
.popuplinkcolor, .popuplinkcolor a:link, .popuplinkcolor a:hover, .popuplinkcolor a:active
{
color: {vb:stylevar navbar_selected_popup_body_a_Color};
}

[Lynne]

I'd add it in where it should go. tborder goes where it says ".tborder" etc. tcat border is from some other file, but throw the same border line in there and see if it works.

[rolfw1]

OK thanks Lynne, getting there, although appear to have developed a lot of white space either side of the post icons and have no category division lines, the column headings are however now neatly sitting above the columns.:)

This is what I now have:

.subnav
{
background: {vb:stylevar navbar_tab_background.backgroundColor};
color:{vb:stylevar navbar_tab_color};
padding: 6px;
text-align:center;
}
.subnav a
{
color:{vb:stylevar navbar_tab_color};
}
.subnav a:hover
{
color:{vb:stylevar navbar_tab_color};
}
.tborder {
border: 1px solid black;
}
.tcat {
border: 1px solid black;
}
{
background: {vb:stylevar blockhead_background};
color: {vb:stylevar blockhead_color};
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 6px;
}
.tcat a:link, .tcat_alink
{
color: {vb:stylevar blockhead_link_color};
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: {vb:stylevar blockhead_link_color};
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: {vb:stylevar blockhead_linkhover_color};
text-decoration: underline;
}
td.thead, th.thead, div.thead {
display: table-cell;
}
{
background: {vb:stylevar wgoheader_background };
/* background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left; */
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 6px;
width: auto; /* unset the 100% */
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #FFFF00;
}
.alt1, .alt1Active
{
background: {vb:stylevar postbit_background};
padding: 6px;
}
.alt2, .alt2Active
{
background: {vb:stylevar postbit_userinfo_background};
padding: 6px;
}
.inlinemod
{
background: #FFFFCC;
color: #000000;
}
textarea, .bginput
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.bginput option, .bginput optgroup
{
font-size: 10pt;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.navbar
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
/*
.panel
{
background: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left;
color: #000000;
padding: 10px;
border: 2px outset;
}
.panelsurround
{
padding: 15px;
margin: 15px;
background: #D1D4E0;
color: #000000;
}
*/
legend
{
color: #22229C;
font: 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
background: #738FBF;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
color: #FFFFFF;
text-decoration: underline;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background: #BBC7CE;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite
{
background: #8A949E;
color: #FFFFFF;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
color: #FFFFFF;
text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

.ppround
{
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webit-border-radius-topright:5px;
/* ie9/opera stuff */
radius-topright:5px;
radius-topleft:5px;
}
.nounder, .nounder a:hover, .nounder a:active
{
text-decoration: none;
}
.popuplinkcolor, .popuplinkcolor a:link, .popuplinkcolor a:hover, .popuplinkcolor a:active
{
color: {vb:stylevar navbar_selected_popup_body_a_Color};
}

[Lynne]

I don't know what you did, but you have messed up the css somewhere. Probably here:
.tcat {
border: 1px solid black;
}
{
background: {vb:stylevar blockhead_background};
color: {vb:stylevar blockhead_color};
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 6px;
}

That is not valid. I don't want to go compare the two. Can you please only post exactly what was changed instead of the whole files.

[rolfw1]

OK thanks for your help, I'll have a play with it tonight, have no idea what I'm doing on css, but at the worst I can put it back to how it was and just modify the headings part.

[Lynne]

Well, the example I gave should be like this instead. I'm not sure what you are doing with the extra parenthesis in there:
.tcat {
border: 1px solid black;
background: {vb:stylevar blockhead_background};
color: {vb:stylevar blockhead_color};
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 6px;
}

[rolfw1]

OK thanks, sorted the category headings and the extra space, will play with the category dividers later.

Original css

.thead
{
background: {vb:stylevar wgoheader_background };
/* background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left; */
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 6px;
width: auto; /* unset the 100% */
}

Revised css

td.thead, th.thead, div.thead {
display: table-cell;
}
.thead
{
background: {vb:stylevar wgoheader_background };
/* background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left; */
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 6px;
width: auto; /* unset the 100% */
}

[WxP]

My photo not show on my photoblog that are in database but not in photoblog/images how to import from Mysql to images the photo?

http://www.forumivirtual.com/photoplog/index.php