Sidebar Redux

[americanmuse1]

I feel like a total idiot reading all of this... But I have tried umpteen ways to make this work and I am utterly lost.

When I loaded the plug in, it took me to the "other settings" tab.
After that, I have no idea what to do. I just want to make things look like they do in the example in the first post with the shoutbox on the side. Are there step by step instructions for novices like me?

[Brian]

Mar 12, 2013 18:30:24 GMT -8 americanmuse1 said:

I feel like a total idiot reading all of this... But I have tried umpteen ways to make this work and I am utterly lost.

When I loaded the plug in, it took me to the "other settings" tab.
After that, I have no idea what to do. I just want to make things look like they do in the example in the first post with the shoutbox on the side. Are there step by step instructions for novices like me?

Hi, americanmuse1.

Which part are you stuck on?

There's a Left Sidebar tab and a Right Sidebar tab along with the tab you mentioned. Each option inside those tabs has a tooltip (a question mark inside a speech bubble that you can hover your mouse over) telling you exactly what to type in each box, and they also provide examples to show you exactly how most things need to be typed.

To move the shoutbox into the sidebar, you can refer to the instructions in this post.

[americanmuse1]

I am lost as to how to make the sidebar appear.
I've read all the little question marks, but they aren't helping me to know where to put what code and what to activate.
My sidebar isn't showing up.

[Brian]

Mar 13, 2013 10:40:58 GMT -8 americanmuse1 said:

I am lost as to how to make the sidebar appear.
I've read all the little question marks, but they aren't helping me to know where to put what code and what to activate.
My sidebar isn't showing up.

Okay. First, let's go to your admin panel. Select Plugins > Manage > Sidebar Redux.

You should be on a page that looks like this:



On that page, click on the Left Sidebar tab (or the Right Sidebar tab). You should now be on this page:



You'll have the following options on the page:

Enabled - Turns on this sidebar when checked.

Fixed Positioning - If set to Yes, when you scroll down, the sidebar follows you down the page.

Left Sidebar Width - How wide (in pixels) you'd like your sidebar to be. You can try out the value in the screenshot above to get an understanding of it. It's basically a number plus the letters px after them.

Left Sidebar Spacing - How much space (in pixels) you want after each box in your sidebar. If left blank, this will default to 10px, which is the forum default.

---

Next, you'll have the actual content of your sidebar, which will show on your forum. Every time you start filling one of these out, a new one will appear on the page for you to customize.

Title - What you want to display as the heading of this sidebar container (like how category names display on your list of boards).

ID - A name you can refer to in CSS/Javascript. This can be left blank, since we have no use for it right now.

Style - What you want this box to look like. Style 1 will look similar to your categories (or any of your forum's regular containers). Style 2 will be the same, but won't have the heading (Title). It'll just be the bottom box portion of the container. Disabled hides the container completely (good for when you want to keep some of your boxes without actually displaying them).

Content - This will be what displays inside this particular container. Type whatever you want in here.

---

Everything we've covered so far applies to both the Left Sidebar and Right Sidebar tabs, since they're virtually identical. Now we'll move on to the Other Settings tab, which has some required values you need to fill out before enabling the plugin.



Move Banner - When set to No, your forum will remain in its regular layout. The sidebars will be applied to the sides of your categories, legend, and forum info, along with anything else you may have below the banner and the ads. If you set it to Yes, the ads will be moved to the very top of the page and the sidebars will start beside the banner, so your entire page will be between the sidebars.

Forum Spacing - How much space (in pixels) you want between your forum and the sidebars. I recommend 10px since it's the default space between each container on the forum.

Fixed Sidebar Spacing - If you have Fixed Positioning set to Yes for either of your sidebars, this will be the space (in pixels) between the top of the page and the sidebar while it's following you down the page.

---

Click on the Save Changes button, then go to Plugins > Manage in your admin area and make sure Sidebar Redux is checked. After that, your sidebar should show.

[Angelic Girl]

Brian,

I'm having a bit of trouble with the css part of the sidebar.  I wanted to use the specific ID to customize the titles with images instead of text.

I had something like this in my css with another sidebar that worked: 

<div>.sidetitle1 {background-image: url(URL TO IMAGE); height: 300px; width: 200px;} </div><div>.sidetitle2 {background-image: url(URL TO IMAGE); height: 300px; width: 200px;} </div><div>.sidetitle3 background-image: url(URL TO IMAGE); height: 300px; width: 200px;} </div><div>.sidetitle4 {background-image: url(URL TO IMAGE); height: 300px; width:200 px;}</div><div>.sidetitle5 {background-image: url(URL TO IMAGE); height: 300px; width: 200px;}</div>

However when I tried that in the css you gave to customize the titles it didn't work.  I did this:

<div>#sidetitle1 > .title-bar {</div><div>    /* Title Bar - Insert your CSS below */</div><div>{background-image: url(http://i1077./w467/bethyxgirlx/boat1_zps87ad0c24.png); height: 300px; width: 200px;} </div>

However it gave an error when I tried to save it and said it didn't have any css to style, or something like that.  What am I doing wrong ? ): Thanks for the help.  Sorry I'm a newb at CSS. ;.; 

Also, how would you add more lines to the code you gave?  -so confused- LOL

This is the site I'm trying to install the plugin on:

The Unforgivable Curse

[Brian]

Mar 13, 2013 15:10:22 GMT -8 Angelic Girl said:

#sidetitle1 > .title-bar {
   /* Title Bar - Insert your CSS below */
   {background-image: url(http://i1077./w467/bethyxgirlx/boat1_zps87ad0c24.png);
   height: 300px;
   width: 200px;
}

I see an extra brace in there.

Try this:

#sidetitle1 > .title-bar {
    /* Title Bar - Insert your CSS below */
    background-image: url(http://i1077./w467/bethyxgirlx/boat1_zps87ad0c24.png);
    height: 300px;
    width: 200px;
}

New lines can be added as long as they're between the braces.

[Angelic Girl]

Brian

Almost perfect, but they seem to be stretching for me by several pixels.  When I try to adjust the spacing it just gets worse.  Any thoughts?  

Screencap of what I mean:

[americanmuse1]

Brian, I did everything you said here and it worked. But I can't get the shoutbox in there and I am really close to a nervous breakdown trying to get this stuff to work. It's not at all user-friendly and it's very frustrating for people who don't code to make their boards look nice.

Your instructions on how to move the shoutbox into side tables says: (Themes > Colors & Styles > Style Sheet)
My screens don't have Colors & Styles, It has Themes, Color & Themes Creator, Advanced Styles and CCS, Layout Templates.
The post sends me to other posts and then I have to go back. I am so thoroughly confused.

I have shoutbox code in my header so it would show up at the top, but I really want it on the side. So it says to paste into Shoutbox containers. Well, I guess I am a total imbecile because I can't find the shoutbox containers.


I'm not trying to be difficult, I just want to learn this stuff so I don't have to spend so much time bugging everyone here. I really do appreciate all your help and patience.

Thanks,
AM

ps - I have no idea how to link your name... sorry.

[Brian]

Mar 13, 2013 18:50:31 GMT -8 americanmuse1 said:

Brian, I did everything you said here and it worked. But I can't get the shoutbox in there and I am really close to a nervous breakdown trying to get this stuff to work. It's not at all user-friendly and it's very frustrating for people who don't code to make their boards look nice.

Your instructions on how to move the shoutbox into side tables says: (Themes > Colors & Styles > Style Sheet)
My screens don't have Colors & Styles, It has Themes, Color & Themes Creator, Advanced Styles and CCS, Layout Templates.
The post sends me to other posts and then I have to go back. I am so thoroughly confused.

I have shoutbox code in my header so it would show up at the top, but I really want it on the side. So it says to paste into Shoutbox containers. Well, I guess I am a total imbecile because I can't find the shoutbox containers.


I'm not trying to be difficult, I just want to learn this stuff so I don't have to spend so much time bugging everyone here. I really do appreciate all your help and patience.

Thanks,
AM

ps - I have no idea how to link your name... sorry.

Sorry, I haven't updated the instructions in a while. We changed the section's name to Advanced Styles & CSS a little while ago. I updated both this thread and the other one with the proper section name. Do you wanna give it another try? Should be less road blocks now in terms of navigation.

Meant to say sidebar containers in that thread. Surprised nobody corrected me up until now.

[Brian]

Mar 13, 2013 15:40:02 GMT -8 Angelic Girl said:

Brian

Almost perfect, but they seem to be stretching for me by several pixels.  When I try to adjust the spacing it just gets worse.  Any thoughts?  

Screencap of what I mean:

They look fine for me now. Did you get it figured out?

[americanmuse1]

Well, I guess I am getting there...  but not quite... now I have 2 shoutboxes??
And WOW are they messed up...
(*bangs head on desk)

This is how it looks when you are scrolled all the way to the top.




This is how it looks when you scroll down a little bit.

Mar 13, 2013 19:40:11 GMT -8 Brian said:

Mar 13, 2013 18:50:31 GMT -8 americanmuse1 said:

Brian, I did everything you said here and it worked. But I can't get the shoutbox in there and I am really close to a nervous breakdown trying to get this stuff to work. It's not at all user-friendly and it's very frustrating for people who don't code to make their boards look nice.

Your instructions on how to move the shoutbox into side tables says: (Themes > Colors & Styles > Style Sheet)
My screens don't have Colors & Styles, It has Themes, Color & Themes Creator, Advanced Styles and CCS, Layout Templates.
The post sends me to other posts and then I have to go back. I am so thoroughly confused.

I have shoutbox code in my header so it would show up at the top, but I really want it on the side. So it says to paste into Shoutbox containers. Well, I guess I am a total imbecile because I can't find the shoutbox containers.


I'm not trying to be difficult, I just want to learn this stuff so I don't have to spend so much time bugging everyone here. I really do appreciate all your help and patience.

Thanks,
AM

ps - I have no idea how to link your name... sorry.

Sorry, I haven't updated the instructions in a while. We changed the section's name to Advanced Styles & CSS a little while ago. I updated both this thread and the other one with the proper section name. Do you wanna give it another try? Should be less road blocks now in terms of navigation.

Meant to say sidebar containers in that thread. Surprised nobody corrected me up until now.

[Brian]

Mar 14, 2013 9:59:20 GMT -8 americanmuse1 said:

Well, I guess I am getting there...  but not quite... now I have 2 shoutboxes??
And WOW are they messed up...
(*bangs head on desk)

This is how it looks when you are scrolled all the way to the top.

This is how it looks when you scroll down a little bit.

Whoa, that's funky.

Can you give me the link to your forum? You can PM it to me as well if you don't want it posted publicly.

I'm guessing the weirdness has to do with some values being entered incorrectly. That's just a guess. I'll look into the shoutbox doubling when I see it.

Also, you can tag people by Alt+Clicking their names on the reply page or by clicking on the button to search for their username while typing a post.

[Angelic Girl]

Yes, I got it all sorted I think. Thanks for all of your help.

[leif]

By any chance can we add a toggle to this? So we can hide it when we want it hidden?

[swindler]

Is there anyway to add a border around the boards/categories and the side tables like you could back on v4 with the side tables code?