Create space between boards and head/base images ....

[jeannerene]

Hi ... trying to recreate my home page and I am not succeeding in finding codes that will customize for  (1) more space between boards (2) allow head and base images  .... (3) is there still a code that will allow me to have two title bars?    Thanks!  Just need to be pointed in the right direction...

Poetic Horizons

jeanne

[Tumbleweed]

Hi jeannerene,

The link you gave is to a V4 site. You do know that any day now your forum could be converted to V5. They are doing automatic upgrades now. What I would suggest is you make a copy of your site so it is in V5 format instead of trying to fix a gap that could be irrelevant any day now. 

However, I checked your coding and you have the dividing categories in your main footers (I think) and there is this area where you can change the gap:

var gapSize = 30;

However, again, I'd suggest you get an idea what V5 is going to be like by making a copy. I would say most all of your codes you have in your headers and footers will not work. Instead, some of those things are already built right in to ProBoards by default, for some things like head and base images, you'll simple add the images to your V5 template. Other things can be done by plug-ins and already there is a large group of plug-ins already created to replace some of the most popular V4 codes.



You can make a copy or convert your forum by reading the note from ProBoards in your admin panel. Also wanted to add, if you make a copy, that is just a copy. It is just meant for testing things out. Once your real forum is converted over, down the road, your copy will be deleted. 

[jeannerene]

Thank you Tumbleweed for your reply. I'm sorry I should have clarified my post better. I know that I posted screen shots from my v4 forum, but I am not trying to make changes or customizations on the v4 forum. I am working on a v5 version....here's the link:

Poetic Horizons ... v5

I am trying to find codes that will give me the same custom features that I have on my original board, but I have not been able to locate any for v5 that would allow the same spacing, or allow head/base images or the double title bars.  The codes that I used for my v4 forum I probably found at SoCal or the original Slightly Insane .... I really can't remember. 

I have looked through every single page of available plugins but have found nothing that I understand to be able to achieve the same customization as I have in my original forum. 

I understand a bit of what goes into headers and footers and can make adjustments by looking carefully at a code, but anything involving making changes or adding to the CSS ... well that's way over my head......

Tumbleweed ... I appreciate you taking the time to look at my headers and footers on v4 ....

I am hoping that I can find comparable codes or plugins for v5 ......

Thanks,

jeanne

[Tumbleweed]

jeannerene,

It did cross my mind that might be what you were doing but since you only provided a V4 link and V4 images, I ruled that out, mistakenly.

It's a simple template mod to add a header and footer image between categories but a bit more tricky with different headers for different cats. But surprising myself, considering I'm an idiot when it comes to jquery, I think I have it worked out and will post it in just a bit when I have time to work out the details to explain what to do.

Edit: Whoops, spoke too soon. It works in Chrome, FF and IE but if you have some categories not viewable to guests is fails so will have to work on that aspect. Edit:<<Think I fixed the guest issue.

[jeannerene]

Thanks p????lq?n? ... I'll check back. Appreciate it!

[Tumbleweed]

O.K. I've given you an example of having a head image and having just blank space you can adjust. I also added the info center with a header and the legend bar with a header in case you want one there. 

Also I borrowed your first header image off your v4 site to test this with. Hope you don't mind.

This is going to go at the very bottom of your "Home" template.



<!--below are different headers and footers for different cats-->
<style>
#cat_1_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
#cat_blank{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
#legend_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
#stats_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
</style>


<!--This hides the head images from guests when cats are hidden-->      
{if $[current_user.is_member]}

<div style="width:770px;text-align:center">
 
<div id="cat_1_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>  
   
<div id="cat_blank"></div>
</div>

{/if}


<!--These images can show for guests-->
<div style="width:770px;text-align:center">
   
<div id="legend_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>
   
<div id="stats_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>

</div>

<script type="text/javascript">
$("document").ready(function(){
$("#cat_1_head").insertBefore("[name='category-1']");
$("#cat_blank").insertBefore("[name='category-2']");
$("#legend_head").insertBefore(".container.legend");
$("#stats_head").insertBefore(".container.stats");
});
</script>

Unfortunately, I'm having a heck of a time trying to get base images on just certain categories so the above is just for head images. I'm not giving up though.

I'm hoping just looking at it is self-explanatory but just in case I'll try to explain what is going on.

I have created some div's that have unique id's and some css to style it and then the image within the div, if a head image is required. Then I'm using jquery to put those specific div's above the categories. Each category is numbered 1, 2, 3 in sequential order but keep in mind, if you reordered the categories they won't be in sequential order. 

Here is a div with the image within.

<div id="cat_1_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>

This is the css portion that syles it:

#cat_1_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}

And this is the jquery that moves that div to be above the category designated in the jquery.

$("#cat_1_head").insertBefore("[name='category-1']");


The second div is for where you don't want a head image but just blank space. There is css to style it and jquery for placement of the cat of your choice. 

<div id="cat_blank"></div>

You only need one div like the above for blank spaces and only one line of css to style it which is this:

#cat_blank{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}

However, you will need to create a new line of jquery for each cat you want blanks space. Here I have the jquery for the blank space above my category 2 so if you wanted another category blank you'll need to create another line (blue) and only change the category number (bold).

$("#cat_blank").insertBefore("[name='category-2']");
$("#cat_blank").insertBefore("[name='category-3']");


Had your head images been the same on all cats it would have been two lines of html and one class/id of css to style it. lol Also, not sure if I'll have the time to try to work out the base images until later today. (the 20th)

[jeannerene]

Tumbleweed,

Wow .... thank you so much. Thats a lot of work and time and I really appreciate it.  I really like the different head/base images and I hope that others can make use of the code too.

I've read everything a few times now and I believe I understand it.

I've found the Home Template layout page in the Editor ............. I do have a question as to where I place it .... above? or below? what is already there.  Also on the right there is a menu of Loops and Variables, so do I have to do anything there as well.

I'm just sneaking in here right now and I can't work on it until this evening (darn).... but looking forward to it ........... Thanks again!!!

jeanne

[Tumbleweed]

Jan 20, 2014 9:39:03 GMT -8 jeannerene said:

Tumbleweed,

Wow .... thank you so much. Thats a lot of work and time and I really appreciate it.  I really like the different head/base images and I hope that others can make use of the code too.

I've read everything a few times now and I believe I understand it.

I've found the Home Template layout page in the Editor ............. I do have a question as to where I place it .... above? or below? what is already there.  Also on the right there is a menu of Loops and Variables, so do I have to do anything there as well.

I'm just sneaking in here right now and I can't work on it until this evening (darn).... but looking forward to it ........... Thanks again!!!

jeanne

Below everything.

I'm using it here, eltest.proboards.com/  , in case you would feel better seeing it being used. (I'll remove your images as soon as you feel you have everything as you want them.)

[jeannerene]

Oh good lord .... am I anywhere close to understanding what I need to do .... I've given one category the id of "poetry" ............... so I'm I on the right track ...


div with image

<div id="cat_poetry_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>

css

#cat_poetry_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}

jquery

$("#cat_poetry_head").insertBefore("[name='category-poetry']");

__________________________________  I didn't try the above because I wanted to know if I got it or not ...


Still trying to wrap my mind around the code below... but my mind is working on it :

The second div is for where you don't want a head image but just blank space. There is css to style it and jquery for placement of the cat of your choice.

<div id="cat_blank"></div>

You only need one div like the above for blank spaces and only one line of css to style it which is this:

#cat_blank{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}

However, you will need to create a new line of jquery for each cat you want blanks space. Here I have the jquery for the blank space above my category 2 so if you wanted another category blank you'll need to create another line (blue) and only change the category number (bold).

$("#cat_blank").insertBefore("[name='category-2']");
$("#cat_blank").insertBefore("[name='category-3']");

I did insert new images for the legend and stats .... but they did not center .... I played around with it a bit, but with no success. Also, one of the images was floating ... although I see that the original image doesn't float on your eltest board ... and both original images were centered and not floating when I first inserted the code into the Home template and saved and checked. When I changed the images something happened ...
Poetic Horizons v5


Thanks Tumbleweed ... I hope that I've caught on to the first part  ...

[jeannerene]

Jan 20, 2014 21:50:24 GMT -8 jeannerene said:

Oh good lord .... am I anywhere close to understanding what I need to do .... I've given one category the id of "poetry" ............... so I'm I on the right track ...


div with image

<div id="cat_poetry_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>

css

#cat_poetry_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}

jquery

$("#cat_poetry_head").insertBefore("[name='category-poetry']");

__________________________________  I didn't try the above because I wanted to know if I got it or not ...


Still trying to wrap my mind around the code below... but my mind is working on it :

The second div is for where you don't want a head image but just blank space. There is css to style it and jquery for placement of the cat of your choice.

<div id="cat_blank"></div>

You only need one div like the above for blank spaces and only one line of css to style it which is this:

#cat_blank{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}

However, you will need to create a new line of jquery for each cat you want blanks space. Here I have the jquery for the blank space above my category 2 so if you wanted another category blank you'll need to create another line (blue) and only change the category number (bold).

$("#cat_blank").insertBefore("[name='category-2']");
$("#cat_blank").insertBefore("[name='category-3']");

I did insert new images for the legend and stats .... but they did not center .... I played around with it a bit, but with no success. Also, one of the images was floating ... although I see that the original image doesn't float on your eltest board ... and both original images were centered and not floating when I first inserted the code into the Home template and saved and checked. When I changed the images something happened ...
Poetic Horizons v5


Thanks Tumbleweed ... I hope that I've caught on to the first part  ...

I went ahead and tried ... but obviously I'm not understanding something ...

Here's what I added (in red) trying to put an image on the "Poetry" category ....



<!--below are different headers and footers for different cats-->
<style>
#cat_poetry_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
#cat_1_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
#cat_blank{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
#legend_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
#stats_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}
</style>


<!--This hides the head images from guests when cats are hidden-->
{if $[current_user.is_member]}

<div style="width:770px;text-align:center">

<div id="cat_1_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>

<div id="cat_blank"></div>
</div>

{/if}


<!--These images can show for guests-->
<div style="width:770px;text-align:center">

<div id="cat_poetry_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>

<div id="legend_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/redline.gif">
</div>

<div id="stats_head">
<img src="http://i21./b280/jeannerene/poetic%20horizons/CITY.gif">
</div>

</div>

<script type="text/javascript">
$("document").ready(function(){
$("#cat_poetry_head").insertBefore("[name='category-poetry']");
$("#cat_1_head").insertBefore("[name='category-1']");
$("#cat_blank").insertBefore("[name='category-2']");
$("#legend_head").insertBefore(".container.legend");
$("#stats_head").insertBefore(".container.stats");
});
</script>



Help as to what I did wrong or what I'm not understanding... 

Thanks ...

jeanne

[Tumbleweed]

You did everything right except your category part. You Poetry category is 9. (Not sure why it is 9 but it is.)

So this part would be:

$("#cat_poetry_head").insertBefore("[name='category-9']");


To try to explain what I said here...

"The second div is for where you don't want a head image but just blank space. There is css to style it and jquery for placement of the cat of your choice.



<div id="cat_blank"></div>

....better. If there is a category you do not want a head image but you want to control the gap, you use that. The css you can adjust to increase or decrease the gap.

Does that help. I do think you are getting most of it, though.

If you are unsure how to find what number your category is, let me know what browser you are using and I can tell you how to find out.


As far as the images you have on your legend and stats, those images are wider than the one I borrowed from you to use. In the css, change the width to that of the image:

This one is 709px wide:
http://i21./b280/jeannerene/poetic%20horizons/CITY.gif

This one is 580px wide:

http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/redline.gif

I keep editing as I think of more things to tell you. lol.

The red line is the one I assumed you'd use as a base image. It floats because it is much skinnier. For each image you use you should set the width and height to that of that particular image. The margin-top & bottom are what adjust it once your width and height is set.

#cat_1_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:10px;margin-bottom:10px;}

[jeannerene]

Jan 21, 2014 18:54:19 GMT -8 Tumbleweed said:

As far as the images you have on your legend and stats, those images are wider than the one I borrowed from you to use. In the css, change the width to that of the image:

This one is 709px wide:
http://i21./b280/jeannerene/poetic%20horizons/CITY.gif

This one is 580px wide:

http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/redline.gif

Tumbleweed,

I do believe I understand ... or at least have an almost good understanding of everything you've explained.  I get what you've said about the "floating".  Once I try ... I'll know if I follow you ok ...
I remember knowing how to find the category ID number  ... but the mind needs some lubing .... and I can't remember ... I primarily use Firefox.  Thanks. 

I've never inserted anything into css on any board.  I located the area ... but have no idea how to write the info up correctly ...........

So in the css:


/* Legend */
.legend .content td { padding: 10px 5px; vertical-align: middle; color: @container_text_color_1; }
.legend .content td:first-child { padding-left: 15px; }
.legend .content td * { vertical-align: middle; }
.legend .new-icon { display: block; }

So how do I set this info up correctly in css in the Legend area
<div style="width:580px;text-align:center">
<div id="legend_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/redline.gif">
</div>


/* Info Centers */
@info_background: @empty;
@info_inner_border: 1px solid #024d13;
@info_text_color: @container_text_color_1;
@info_text_font: @empty;
@info_links_color: @container_links_color;
@info_links_font: @empty;
@info_links_decoration: @empty;
@info_titles_color: @empty;
@info_titles_font: @empty;
.stats table { background: @info_background; width: 100%; }
.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }
.stats .content { color: @info_text_color; font: @info_text_font; }
.stats .content a { color: @info_links_color; font: @info_links_font; text-decoration: @info_links_decoration; }
.stats th { color: @info_titles_color; font: @info_titles_font; text-align: left; }
.stats .icon { width: 70px; text-align: center; vertical-align: middle; }
.stats .info { padding: 10px 10px 10px 0px; }
.stats .content > table { width: 100%; table-layout: auto; }
.stats .content > table table table tr:last-child td a { white-space: nowrap; }
.stats .content > table > tbody > tr > td:first-child { border-left-width: 0px; width: 57%; }
.stats .content > table > tbody > tr:first-child > td { border-top-width: 0px; }


...and this info up correctly in css in the Stats area
<div style="width:709px;text-align:center">
<div id="stats_head">
<img src="http://i21./b280/jeannerene/poetic%20horizons/CITY.gif">
</div>


Ya' know at this point I know 100% more than either of my sons. Ha!!

Thanks so much again Tumbleweed!

[Tumbleweed]

Everything I gave you goes to the bottom of the home template. Sorry if I confused you there. If later, you want to move your css to the style sheet you can but for now or forever, you can leave it all at the bottom of the home template.  If you do go add it to your css style sheet, you'd want to put it at the very bottom but for now, while you are working on it, it is best if you just keep all of it at the bottom of the home plate and you can keep it there.

You just need to go edit what you have in there now and put the correct width and height in the css for each image you are adding.

I can see the Poetry one is working fine and is centered because it has the right width in there.

In Firefox, right click on the category you want the number for and select "inspect element" in the drop down choices and a window will pop up. It will highlight the line you are on (probably the one I highlighted in blue) but you need to go up a few lines to get the cat number (in red). For example, I right clicked on your "welcome mat" category and that is #5. You should look for this:

<a name="category-5"></a>
<div class="container boards">
<div class="title-bar bbcode">
<h2>
<div class="title_wrapper">Welcome Mat</div>

[cornholio]

Can you also create space between subboards? I've been searching all over the place for that...

[jeannerene]

<!--below are different headers and footers for different cats-->
<style>
#cat_general_head{margin-right:auto; margin-left:auto;width:560px;height:13px;margin-top:25px;margin-bottom:3px;}
#cat_poetry_head{margin-right:auto; margin-left:auto;width:400px;height:30px;margin-top:15px;margin-bottom:10px;}
#cat_suprise_head{margin-right:auto; margin-left:auto;width:500px;height:30px;margin-top:15px;margin-bottom:11px;}
#cat_news_head{margin-right:auto; margin-left:auto;width:604px;height:30px;margin-top:15px;margin-bottom:8px;}
#cat_admin_head{margin-right:auto; margin-left:auto;width:547px;height:10px;margin-top:15px;margin-bottom:4px;}
#cat_blank{margin-right:auto; margin-left:auto;width:400px;height:10px;margin-top:10px;margin-bottom:10px;}
#legend_head{margin-right:auto; margin-left:auto;width:547px;height:10px;margin-top:15px;margin-bottom:4px;}
#stats_head{margin-right:auto; margin-left:auto;width:709px;height:30px;margin-top:15px;margin-bottom:11px;}
</style>


<!--This hides the head images from guests when cats are hidden-->
{if $[current_user.is_member]}

<div style="width:770px;text-align:center">

<div id="cat_admin_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/THINGOLD.gif">
</div>

<div id="cat_blank"></div>
</div>

{/if}


<!--These images can show for guests-->
<div style="width:770px;text-align:center">

<div id="cat_general_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/daynite.gif">
</div>

<div id="cat_poetry_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/village-1.gif">
</div>

<div id="cat_suprise_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/divider-palm_zps9855934b.png">
</div>

<div id="cat_news_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/ahr007_zps3c459ff9.gif">
</div>

<div id="legend_head">
<img src="http://i21./b280/jeannerene/backgrounds%20bars%20banners%20dividers/THINGOLD.gif">
</div>

<div id="stats_head">
<img src="http://i21./b280/jeannerene/poetic%20horizons/CITY.gif">
</div>

</div>


<script type="text/javascript">
$("document").ready(function(){
$("#cat_general_head").insertBefore("[name='category-5']");
$("#cat_poetry_head").insertBefore("[name='category-9']");
$("#cat_blank").insertBefore("[name='category-4']");
$("#cat_suprise_head").insertBefore("[name='category-11']");
$("#cat_blank").insertBefore("[name='category-10']");
$("#cat_blank").insertBefore("[name='category-3']");
$("#cat_news_head").insertBefore("[name='category-8']");
$("#cat_blank").insertBefore("[name='category-6']");
$("#cat_blank").insertBefore("[name='category-7']");
$("#cat_admin_head").insertBefore("[name='category-1']");
$("#legend_head").insertBefore(".container.legend");
$("#stats_head").insertBefore(".container.stats");
});
</script>

Tumbleweed,
All is going well ... the only trouble I am having it with the cat_blank.  The only category that the extra space shows on the Home page is for Category 7 .........

Poetic Horizons v5

Question ... I just want to do a couple of base/foot images ... I am assuming I just change the wording to cat_NAME_base or cat_NAME_foot ... but where does it go? Under the "head" script?

I'm almost there ...
Thank you so much....