Sidebar Redux

[Brian]

Aug 7, 2014 10:12:45 GMT -8 ;Spots.xx said:

Do you have a live example somewhere of what you're trying to do showing the part you're stuck on? It sounds like you just need to add CSS to remove the padding.

No, I was mostly messing around with the code but I didn't save anything. Basically what I'm trying to do is this:

http://i394./pp25/wolflover-spots/test_zps18175f72.jpg

The black parts would be the images, the sidebar content would be inside the gray part. (See the styling I already have on my site.) 

I tried just putting the images at the top of the content coding, but what I end up with is something like this:
http://i394./pp25/wolflover-spots/test2_zps280f712c.jpg

I want the padding around the content to remain the same, but remove the padding around the images. I would also like to get rid of the rounded corners, though I'm not sure where in the coding to do that.

You could use this in your Global Header if you're using the same head/base images for every container.

<script type="text/javascript">
$(document).ready(function(){
var headURL = "URL TO HEAD IMAGE";
var baseURL = "URL TO BASE IMAGE";
$('#sidebarr-left .container').css('font-size','0').prepend('<img src="'+headURL+'">').append('<img src="'+baseURL+'">');
});
</script>

If you want different images for each one it'll take a bit more work.

Also, I noticed you have multiple content boxes and elements within them all sharing the same IDs. Two objects on the same page cannot have the same ID. If you need to add CSS styles to multiple elements I suggest using a class instead of an ID.

[;Spots.xx]

Yes, I would like different images.

Ah, thanks for letting me know! I'm not great with coding, so I'm glad you told me.

[Brian]

Aug 7, 2014 12:01:10 GMT -8 ;Spots.xx said:

Yes, I would like different images.

Ah, thanks for letting me know! I'm not great with coding, so I'm glad you told me.

Let me know when you've given each of your content boxes a different ID and I can modify the code based on that.

[;Spots.xx]

Oh, I just changed it to a class. Do you need me to give them different IDs instead?

Thank you for all the help by the way, I really appreciate it.

[Brian]

Aug 7, 2014 12:15:50 GMT -8 ;Spots.xx said:

Oh, I just changed it to a class. Do you need me to give them different IDs instead?

Thank you for all the help by the way, I really appreciate it.

I meant both those and the ID field for each content box in the plugin's settings, below their titles and above the style radio buttons. Those all need to be unique as well as they determine the ID attribute of the HTML that constructs the sidebar.

The importance of having a unique ID for each element is so that Javascript can address it properly. If multiple elements on the same page have the same ID the JS can't find any past the first one.

[;Spots.xx]

Gotcha, I forgot about those and just fixed the ones in my style sheet. All the boxes now have different IDs.

[SailorEffinMoon]

Sept 6, 2013 16:23:54 GMT -8 Joachim said:

<style type="text/css">
/* This will hide an individual sidebar box */
#containerID { display: none; }
</style>

This is what I have in my header and it works wonder to hide containers where I don't want them. Keep in mind that your IDs are case sensitive.

Joachim Okay but how are you hiding them in the "profiles" and "messages" areas?  

[Joachim]

Brian is the one who gave me that code, it works only on the boards and sub-boards. I imagine he might be the only one who'll be able to tell you how to hide them in the profiles and PM area.

[SailorEffinMoon]

Aug 8, 2014 9:31:35 GMT -8 SailorEffinMoon said:

Sept 6, 2013 16:23:54 GMT -8 Joachim said:

<style type="text/css">
/* This will hide an individual sidebar box */
#containerID { display: none; }
</style>

This is what I have in my header and it works wonder to hide containers where I don't want them. Keep in mind that your IDs are case sensitive.

Joachim Okay but how are you hiding them in the "profiles" and "messages" areas?  

Brian Do you know how I could hide them in profiles and messages areas?

[Brian]

Aug 7, 2014 18:29:38 GMT -8 ;Spots.xx said:

Gotcha, I forgot about those and just fixed the ones in my style sheet. All the boxes now have different IDs.

This should work then. Substitute the red text with the ID you gave your content box. The head URL and base URL text should be replaced with the URLs to the images you want to use as your head/base images for that content box.

<script type="text/javascript">
$(document).ready(function(){
var sidebarImg = {
    1: { id: "ID HERE", head: "HEAD URL", base: "BASE URL" },
    2: { id: "ID HERE", head: "HEAD URL", base: "BASE URL" },
    3: { id: "ID HERE", head: "HEAD URL", base: "BASE URL" },
    4: { id: "ID HERE", head: "HEAD URL", base: "BASE URL" }
};
for(var i in sidebarImg)
    $('#'+sidebarImg[i].id).css('font-size','0').prepend('<img src="'+sidebarImg[i].head+'">').append('<img src="'+sidebarImg[i].base+'">');
});
</script>

If you need to add more entries just add a comma after the last one in the list, then add a new line and duplicate one of the previous lines, incrementing the number and filling out the ID, head, and base fields again. Make sure the very last entry on the list doesn't have a comma at the very end or the Javascript will break as it expects another property following a comma.

Aug 9, 2014 7:20:00 GMT -8 SailorEffinMoon said:

Brian Do you know how I could hide them in profiles and messages areas?

Use this in your global header. Duplicate the line with the container ID over and over again for each container you want to hide.

<script type="text/javascript">
$(document).ready(function(){
var route = pb.data('route').name;
if(route.indexOf('user') != -1 || route.indexOf('conversation') != -1) {
    $('#container ID here').hide();
}
});
</script>

[Stern]

Hey Brian,

I'm sorry if this has already been covered, is there a way to have it move the banner for all themes except one, by any chance? We have one theme that's build under an over-arching banner, but I'd like to have the side tables up next to the banner for the rest of them, if there's any way of accomplishing that.

Thank you so much!

[Brian]

Aug 10, 2014 7:59:17 GMT -8 Stern said:

Hey Brian,

I'm sorry if this has already been covered, is there a way to have it move the banner for all themes except one, by any chance? We have one theme that's build under an over-arching banner, but I'd like to have the side tables up next to the banner for the rest of them, if there's any way of accomplishing that.

Thank you so much!

Nope. That's controlled by Javascript, so there's no pretty way to reverse that.

[Stern]

Aug 10, 2014 9:43:52 GMT -8 Brian said:

Aug 10, 2014 7:59:17 GMT -8 Stern said:

Hey Brian,

I'm sorry if this has already been covered, is there a way to have it move the banner for all themes except one, by any chance? We have one theme that's build under an over-arching banner, but I'd like to have the side tables up next to the banner for the rest of them, if there's any way of accomplishing that.

Thank you so much!

Nope. That's controlled by Javascript, so there's no pretty way to reverse that.

Alright, thank you! It was worth a shot. :- )

[Lionhearted]

Hello, Brian,

How do I add images to a sidebar?

soulofthewarrior.proboards.com/

I want to add some pictures to the admins sidebar.

[mugiwara303]

hi Brian i want to make a status updates on the sidebar is that possible?
my forum link : thegamescene.boards.net