Support Forum

Column and row dividers (like V4.5)

CF Conrad_Farlow
Conrad_Farlow
Member

Hello on my V4.5 simple press installation there are some very subtle column and row dividers (borders) in both group and forum view. I’d like to see how these look with my V5.0 theme. What would be the best way of turning these on, if indeed they can be turned on. If not what would be the most expedient way of generating them?

Conrad

18 Answers

New Answer

MP Mr Papa
Mr Papa
Member

you would have to add the css for them… add borders…

spColumnSection for columns though you might want to be more specific… and you will need to use firefox and firebug for the rows you want to do it on to narrow down…

CF Conrad_Farlow
Conrad_Farlow
Member

I have dismally failed to get this working.

I added the following code in the default.php for the theme:

#spMainContainer .spColumnSection {
     margin: 0;
     padding: 5px 0 0 0;
     border-right:1px dotted silver;

If I comment out the last line above the columns behave perfectly well and the site looks good, like this.

 

 

With the line in I get this:

 

 

 

I have tried everything, padding etc. I don’t actually understand what is causing it at all. The column percentage are unchanged and add up to 100%.

I probably won’t have the borders there anyway but I would like to have a look at the effect and I would like to understand what is causing the problem.

 

Conrad

MP Mr Papa
Mr Papa
Member

the numbers wont be able to add to 100%…  remember the border and margin/padding may take up additional space…

easiest way to do it is using firefox and firebug…  what if…  add the border, margin, padding, etc until it looks the way you want…

CF Conrad_Farlow
Conrad_Farlow
Member

Can you imagine what a revelation it was to me when I read this. Oh of course all the elements are involved so there might not be space. Hard to imagine that adding 4 px in total in a container could cause me such mayhem.

I have set the right border to 1px dotted silver for all spColumn sections in default.php like this:

#spMainContainer .spColumnSection {
    margin: 0;
    padding: 5px 0;
    border-right:1px dotted silver;

whereas in reality all I want is the columns in Group and forum view to have the treatment. I couldn’t figure out how to pass the border commands in the spGroupView.php or the spForumView.php so if this can be done a small piece of sample code would be nice.question

I have a similar problem in the profile permissions pop up where all the spOdd sections are misbehaving. I know how the columns and padding work now but I can’t figure out where the problem is being generated.

Here’s another screen shot from yours truly, notice how the second group ‘Technical Stuff’ is OK, the third group behaves like the ‘Members Forum’ group.

BR Brandon
Brandon
Member

There is something before the first group causing a problem. Something wasn’t cleared out before it is shown. You can add a div class=clear: both; and that would remove the previous formatting.

BR Brandon
Brandon
Member

Conrad_Farlow said

whereas in reality all I want is the columns in Group and forum view to have the treatment. I couldn’t figure out how to pass the border commands in the spGroupView.php or the spForumView.php so if this can be done a small piece of sample code would be nice.question

I would think, that as an example, in spGroupView you should see the different columns.

IE,
# Column 1 of the forum row
                        # ———————————————————————-
                        sp_ColumnStart(‘tagClass=spColumnSection spLeft&width=6%&height=55px’);

It should add the border if you did something like this.

                        sp_ColumnStart(‘tagClass=spColumnSection spLeft&width=6%&height=55px&border-right=1px solid silver’);

You would have to add in the border to all the columns as needed then probably adjust the width % to make up for the additional borders.

MP Mr Papa
Mr Papa
Member

no. you cannot pass in the border like that… those template tag arguments are not css styles… they are essentially variables passed to the php function…  anything you try to pass in must be ‘expected’ on the other end, or they will just be ignored…  and we are not looking for a variable called border-right…

keep in mind the left side of = is the variable name and the right side is the value…  but again, these are php variables not css…

so in this case, you want to pass something in tagClass variable…  this will be added to the css class for the element… then you would add css styles to the class…  so you can add new styles to spColumnSection or add another class (there are two already spColumnSection and spLeft) and style that one if you want something more specific than the generic column class…

BR Brandon
Brandon
Member

Dang, thanks for the heads up. It appeared simple in FF and Firebug but that makes sense now that you explain it.

Thanks for piping in.

MP Mr Papa
Mr Papa
Member

no worries.  thanks for jumping in – keep on doing it… best way to learn!

CF Conrad_Farlow
Conrad_Farlow
Member

So I need to add a css statement to where the spColumnSection tagClass is defined. Now where would that be my good people? I am only just getting the hang of these tag classes, I can see the power of the approach though. It’s obvious even to a newbie.

CF Conrad_Farlow
Conrad_Farlow
Member

Er…..

Where is the spColumnSection tagClass css defined and how can I alter it so that I can pass border parameters as Brandon suggested in post 7 of this thread.

Conrad

YS Yellow Swordfish
Yellow Swordfish
Member

What browser do you use Conrad? And please do not say IE 🙂
Safari, Chrome, Opera could all be good answers though

CF Conrad_Farlow
Conrad_Farlow
Member

I use Firefox 9.0.1 and Chrome 16.0.912.75 m, Firefox with firebug to figure stuff out and check little tweaks but obviously not that proficient as yet. When things look right on those two browsers I will then check on all the others I can get my hands on, including iPad’s, iPhone and various Android platforms.

But I’d really really really like to know how to have the columns only in group and forum view please, not globally. So I need to find out how to change the spColumnSection tagClass definition to allow the border right parameter to be passed as an argument.

Please help, I’ve tried to figure it out and now its making my head hurt.

Conrad

YS Yellow Swordfish
Yellow Swordfish
Member

Well as Steve pointed out in post 8 on this thread, border is not an available argument as it styling.

All columns are given the same class by default. In fact mostly they are given two classes – ‘spColumnSection’ and ‘spRight’ or ‘spLeft’

These are the defaults. You can change those to something else wherever you want. So if you want one to have a completely different set of styling rules you can define your own class in your CSS file and change it in the function’s tagClass argument.

Another way would be to define a simple class in your CSS file with just, for example, a border-right setting. So this could be something like:

.susan { border-right: 1px solid black; }

Then in the template function call instead of passing:

‘tagClass=spColumnSection spRight’ – you could pass:

‘tagClass=spColumnSection spRight susan’

which would then apply the .susan class to that instance of the column.