Sidebar Redux

[Brian]

Aug 10, 2014 19:50:40 GMT -8 Lionhearted said:

Hello, Brian,

How do I add images to a sidebar?

soulofthewarrior.proboards.com/

I want to add some pictures to the admins sidebar.

Use HTML image tags.

Aug 11, 2014 9:39:48 GMT -8 mugiwara303 said:

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

You'll have to be a bit more specific.

[mugiwara303]

hi Brian i mean this when someone updated his status to appears in the sidebar

[Brian]

It wouldn't be possible to add those to the sidebar without someone making a plugin similar to the recently updated threads plugin. Sorry, mugiwara303.

[Lionhearted]

Another thing Brian-- how do I add sidebar redux to my new forum 

eraofthedragons.proboards.com? When I click on the sidebar redux, it keeps wanting to import it to soulofthewarrior. How do I get it to my new forum?

[Brian]

Aug 11, 2014 11:57:44 GMT -8 Lionhearted said:

Another thing Brian-- how do I add sidebar redux to my new forum 

eraofthedragons.proboards.com? When I click on the sidebar redux, it keeps wanting to import it to soulofthewarrior. How do I get it to my new forum?

Go into the admin area of the forum you want it installed on, then go to Plugins > Plugin Library. It should show the correct forum after that.

[Lionhearted]

Thanks!

[;Spots.xx]

Aug 9, 2014 15:53:55 GMT -8 Brian said:

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.

Perfect, just what I needed! Just two small things. How do I get rid of the rounded edges of the content boxes? And is there a way to have the box's border extend around the head/base images too?

[Brian]

Aug 13, 2014 9:18:00 GMT -8 ;Spots.xx said:

Perfect, just what I needed! Just two small things. How do I get rid of the rounded edges of the content boxes? And is there a way to have the box's border extend around the head/base images too?

Those would both require you to edit your style sheet.

First we'd need to make a small change to the Javascript code. Change this line:

$('#'+sidebarImg[i].id).css('font-size','0').prepend('<img src="'+sidebarImg[i].head+'">').append('<img src="'+sidebarImg[i].base+'">');

To this:

$('#'+sidebarImg[i].id).css('font-size','0').prepend('<img class="side-head" src="'+sidebarImg[i].head+'">').append('<img class="side-base" src="'+sidebarImg[i].base+'">');

Next, go to Themes > Advanced Styles & CSS > Style Sheet. Place this at the very bottom.

#sidebarr-left .content-box, #sidebarr-right .content-box { .rounded-corners(0); }
.side-head, .side-base { border: @content_area_border; }
.side-head { border-bottom-width: 0; }
.side-base { border-top-width: 0; }

Once that's done the corners should be normal and the head/base images should use the same borders. Note that the borders add to the height and width of your head/base images so you may need to edit the image accordingly.

[mugiwara303]

hi Brian i want to make the sidebar only on home page, thank you

[Brian]

Aug 16, 2014 12:20:12 GMT -8 mugiwara303 said:

hi Brian i want to make the sidebar only on home page, thank you

Use the code at the end of this post in your forum's global header.

support.proboards.com/post/5111044

[mugiwara303]

it works like magic! thank you

[joebrosky]

How do I get links to be hyperlinked and to create a custom name for the link?  I'm really new at this lol

[Brian]

Aug 18, 2014 13:10:25 GMT -8 joebrosky said:

How do I get links to be hyperlinked and to create a custom name for the link?  I'm really new at this lol

You'd need to use HTML. Here's a page that details how to create hyperlinks.

www.w3schools.com/tags/tag_a.asp

That site also documents a whole bunch of other HTML tags if you're interested in learning more.

[roweenac]

Hey there. I didn't know where to add this thread since it's not really the functionality of the plugin but some strange glitch which I think tends to be caused by my theme rather than the plugin... anyways...

I made a screenshot of the situation I am talking about. I added the sidebar  just fine. Just in the background there seems to appear a random bar underneath the texts of the recent status updates and I can't figure out how to get rid of it.

I am by no means an expert in Css coding so I would need pretty precise help to adjust that. 

Link to my forums for better understanding; I will enable view for everyone in a second after posting this thread.
Roleplay Safe Haven

I hope one of you can help me with this. It's not a biggie but it bugs me.

Thanks, RC~

edit: link doesn't seem to be working since proboards doesn't like the URL (which I am currently looking into changing so it won't bother anyone anymore). I'll happily provide the link in PM or something :/

Attachments:

[joebrosky]

Aug 18, 2014 13:27:45 GMT -8 Brian said:

Aug 18, 2014 13:10:25 GMT -8 joebrosky said:

How do I get links to be hyperlinked and to create a custom name for the link?  I'm really new at this lol

You'd need to use HTML. Here's a page that details how to create hyperlinks.

www.w3schools.com/tags/tag_a.asp

That site also documents a whole bunch of other HTML tags if you're interested in learning more.

Thank you it helped so much! One last question, how would i get it so that when you highlight over the link it turns red?