Help on a few small things on v5 test site please!

[Ishy]

I'm not sure if I post this here or in the v5 section but my question concerns the new v5. I started making a skin on v4 then i decided I needed to go ahead and have a skin already made for when all sites are switched to the new version. I've figured out alot but I still have alot to learn. I received help from Tumbleweed on a certain code for v4 and she said I could use that in v5 if I wanted. I added the code, Floating sidetable and Border Around Forum code, and everything seems to be working fine except for some small things.

I. How can I move my banner and navigation bar inside the white forum border?
II. How can I resize my select and input fields so they're not stretched out as you see on the site?
III. This isn't as important but I for some reason cannot get my image of the flowers in the Seasons table to center.
IV. I've seen sites that have removed the Board|Threads|Posts|Last Posts as well as the icon images in both the board section and info center section and I am wonder who to do that.
V. And lastly is there any way to put a border-bottom on my category titles?

If anyone also knows if there is a thread that is kind of like a guide to the new v5 version of making skins and working with coding I could save that page and it would really help out alot.

v4 site (example of what it should look like): awesomehptestsite.proboards.com/index.cgi
v5 test site: anotherawesometester.freemessageboards.com/

[Tumbleweed]

I: O.K. Remove the border I gave you including the css that goes with it. Instead go to your Admin >Themes Advanced Styles & CSS and then click on the style sheet tab, add this to the very bottom of the css: (Also, I forgot to mention this to you before but in order to keep the forum and ads from going under the side tables when people have a smaller screen resolution (not many do anymore) the blue on the end of that will keep it from doing so.



#wrapper {
background-color: @container_inner_border_color;
width: 900px;
background: #e1e1e1;
background-repeat: repeat;
border: 5px solid #000000;
padding: 14px;
}
body{
margin-left: 250px;
}

II: For the input and select, I know this first class changes the select and action in a thread and then the second class changes teh width of the area around the "search" in a thread.

div.controls{font-size: 80%;
}
input[type="text"].search-input{max-width: 70px;
}


III: As for that image try putting a break after the date and then moving that div after the image like so:

<div style="font-size: 15px; text-align: center;">April, 2013 <br />
<img src="http://i45.tinypic.com/r8cuj6.png">
</div>

IV: I need to go find that bit in the layout part.
I'm not sure what parts in the info center section you want gone but to remove the Board|Threads|Posts|Last Posts in boards, 
Go to...Admin > Themes > Layout Templates

And then click on board lists tab and remove this part only:

 <thead>
  <tr>
   <th class="icon"></th>
   <th class="main">Board</th>
   <th class="threads">Threads</th>
   <th class="posts">Posts</th>
   <th class="latest last">Last Post</th>
  </tr>
 </thead>

V: Need to go play around with that
Try this in your style sheet: (I was hoping to use border: 1px solid and a color but I can only get it to target the wrapper around the text and not the text itself)

div.title_wrapper{text-decoration: underline;
}

[Ishy]

I. Okay I added it and it worked, but my floating side bar is shoved down to the bottom of the page as well as made my table with the links and updates and requests all funky looking. (I didn't save my work so you can't see it but if it helps you I can just so you can see it.)

II. I'm assuming I add the code in the same page as the border around forum one above but yet I have no idea where to add it. I added it at the bottom or where ever I thought it should go but it just makes the board screwy. (And I thought v4 codes were confusing at first...this new version makes v4 coding look like a piece of cake >.>) 

IV. That seemed to be the easiest out of the five I requested, granted it took me a few to figure it out still. But I also would like to remove the folder icons next to the boards as well as the icons in the info center, if its possible. If not then I can come up with some replacement images.

V. Again I have no idea where in the stylesheet it is safe to add this. Does it go in a certain section, certain line, at the very, very bottom? I added it to the bottom and it just messed up the whole site.

[Tumbleweed]

I'm sorry, #II and #V should be put in your style sheet like I told you in #1. Admin >Themes Advanced Styles & CSS and then click on the style sheet tab. Just put at the bottom of the css. (There actually may be places in visual where you can enter some this stuff in input fields but right now, I don't have the patience or time to find which one it is.)

I can tell you that helping someone find out why something isn't working, on V5, is much more difficult than trying to set things up.

For the border (#I) I hope you weren't relying on the visual of your forum below where it shows your changes because I found it looks very funky there but if you open your site up in another tab and check your changes there, you get a better picture of what is happening. Also, I had 900px width in that, which is probably way too wide. You will very likely have to change that to a smaller width. Just like the side-table plug in, if your forum width is too wide the double side tables won't work properly. Maybe try adding it again and change that width to 700 for starters and then adjust after that, if it works like you want.

Also I see this in your global header:

body{
margin-left: 80px;
}

I'm not sure if you had that in there all along but if you plan on having different layouts for different skins, I'd just suggest putting it in the style sheet (like #I, #II and #V) and then changing the 80px to about 250px. If you don't plan on having different skin/layouts then it is fine in your global header but just needs to be increased to 250px and not be put in the style sheet via themes.

I'll look into this: "But I also would like to remove the folder icons next to the boards as well as the icons in the info center, if its possible."

[Tumbleweed]

I'm sorry, #II and #V should be put in your style sheet like I told you in #1. Admin >Themes Advanced Styles & CSS and then click on the style sheet tab. Just put at the bottom of the css. (There actually may be places in visual where you can enter some this stuff in input fields but right now, I don't have the patience or time to find which one it is.)

I can tell you that helping someone find out why something isn't working, on V5, is much more difficult than trying to set things up.

For the border (#I) I hope you weren't relying on the visual of your forum below where it shows your changes because I found it looks very funky there but if you open your site up in another tab and check your changes there, you get a better picture of what is happening. Also, I had 900px width in that, which is probably way too wide. You will very likely have to change that to a smaller width. Just like the side-table plug in, if your forum width is too wide the double side tables won't work properly. Maybe try adding it again and change that width to 700 for starters and then adjust after that, if it works like you want.

Also I see this in your global header:

body{
margin-left: 80px;
}

I'm not sure if you had that in there all along but if you plan on having different layouts for different skins, I'd just suggest putting it in the style sheet (like #I, #II and #V) and then changing the 80px to about 250px. If you don't plan on having different skin/layouts then it is fine in your global header but just needs to be increased to 250px and not be put in the style sheet via themes.

I'll look into this: "But I also would like to remove the folder icons next to the boards as well as the icons in the info center, if its possible."

[Ishy]

I. Yay! It worked. You were right, the preview pane next to the stylesheet does make the site look funky. Because of it I was always afraid to save in case the site actually looked messed up.

II. Okay I added it to the bottom of the stylesheet and it's located below the border code, but the select bar and input field is still stretched out. I even messed around with the numbers some but nothing.

II&IV. Completed

V. I wanted the whole bar to have border-bottom: 3px solid #689368;. I added it and it worked but it doesn't go all the way to the end nor does it register for the info center titles. I tried .div.title_bar{border-bottom: 3px solid #689368; instead of wrapper and it didn't show at all.

[Tumbleweed]

V. I was misunderstanding. Again in the style sheet add this to the bottom of the sheet. (I put a fat red border just to make sure it was working)

.container > .title-bar.bbcode{
    border-bottom: 4px solid red;
}


II. Can you link me to a page where they are stretched out, that is if it is something I can see as a guest. I may be targeting the wrong thing. I'm looking at your site and the search looks almost too small now so it most certain is working  and clicking on a thread the search is still small and the quote looks relatively compact, but as a guest, that is all I can see. Maybe name exactly what each one is called, if possible? 

By the way, I started to go through all the text colors in visual (not the style sheet) on a V5 test site making each color unique but I haven't finished yet. But you are welcome to take a look. I have a legend that starts at the very top of the visual options but like I said, I didn't finish it yet. It has helped me on a couple things.

paviii.freemessageboards.com/

I also outlined things so I knew what changed what but afraid I have no legen made for that yet. So the site looks like someones worst nightmare with all those different colors and borders. lol

[Ishy]

This is what I see. The red circles show the areas that are stretched out.
i48.tinypic.com/u7rky.png

This is what it should look like. The red circles show the areas.
i46.tinypic.com/2z65cox.png

[Tumbleweed]

Oh, you didn't say side tables.

The dropdown class is:

.forminput{
width: 100px;
}

and then it looks like the login is just input (no . or # before it):

input{
width: 100px;
}

[Ishy]

The class for the dropdown worked. Thank you! But now I just realized my quick login doesn't even work >.< Even when I'm logged in it always says Login and when I logout and login with the quick login it doesn't even log me in but it'll refresh the page like it did. I can either find another one (though I really like this one because you can stay on the same page you are on if you sign on with it) or just take it out completely. What should I do?

EDIT: I figured out how to take the icons off! Well atleast for the boards anyways. In Board Lists I just removed <td class="icon">$[board.icon]</td> from line 6 and 39 (though it worked when I only took it from line 6.) Still working on the info center icons. I decided to use icons.

[Tumbleweed]

You know I didn't even give that login a 2nd thought since so many V4 forums have them but we have global login with V5 now. You do know. if you need to switch to another account. you just click on the people icon in the bottom right of your screen. It still takes you to the global login but if you get all your accounts set up properly, it'll be pretty easy to switch accounts.

[Ishy]

Okay thank you! I saw it. I apologize for the late response. My computer time was cut short. Before I can close this thread I have one last question to ask (if its okay). How can I make the floating sidebar you gave me toggle? The creator of the site needs it to toggle because shes on her phone on the site most of the time and the sidebar covers half the page on mobile screens. This is for v4 and v5.

[Tumbleweed]

Now it is my turn to apologize. I somehow missed your last question.



You can use jquery. Just add this to the top of your header:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">

function toggleDiv(divId) {

   $("#"+divId).toggle();

}

</script>

And then this is what you want to put somewhere to click to hide the side table.

<a href="javascript:toggleDiv('myContent');">Toggle</a>

And this goes around the content to hide it.

<div id="myContent">

side panel content

</div>

but now that I think of it, it would be nice to have memory so if you click it closed it won't reopen until you click it again or delete your cookies.

In that case, the Expand/Collapse Content with Memory would be good. (Scroll down a bit to find it.)

support.proboards.com/thread/110159?3533829

 

[Ishy]

Okay I added that and I don't see the toggle bar. I'd like to have the toggle bar on the right side of the side table.

[Tumbleweed]

I'm looking at your coding and I don't see where you put it. But had I known you wanted to be able to hide and show your side table, I would of just suggested you use the plug-in for the peek-a-boos.  If you don't want to do that, I suppose you want the toggle part to move to the left side of the page. Like I have on the right side on this site, except on the left. If so, it will take me a bit of fiddling to get a toggle on that. 

By the way, that toggle should have shown up but it may been such small text you didn't notice it, plus, since I don't have your exact layout, I'm not sure where that toggle would have been on the page for you.