peekaboo side bar

[' SweetiePie, ♥!]

Forum URL: wolvencall.boards.net/

okay, so i wasn't sure where else to post this but i'm looking for help. I'm using the Peekaboo Sidebar plugin and I want to add things to it but not quite sure how.. so I figured out how to add a background image to it.. kind of.. by googling the html code necessary. But everything else i'm pretty much lost on. I want to add tabs inside of the content but i have no idea where to start.. can someone help me with this?

[Tumbleweed]

Mar 19, 2015 22:46:14 GMT -8 ' SweetiePie, ♥! said:

Forum URL: wolvencall.boards.net/

okay, so i wasn't sure where else to post this but i'm looking for help. I'm using the Peekaboo Sidebar plugin and I want to add things to it but not quite sure how.. so I figured out how to add a background image to it.. kind of.. by googling the html code necessary. But everything else i'm pretty much lost on. I want to add tabs inside of the content but i have no idea where to start.. can someone help me with this?

I don't see a background in your peek-a-boos. If you want a image background, you can add this to the bottom of your style sheet:

#LPcont{
background-image:url("http://i657./uu300/EliteList/100x100/th_ATGbkg1.png");background-repeat:repeat;
}

Replace the blue part with your own image. (The image I'm using is a repeatable image)

To go to your style sheet: Admin> Themes> Advanced Styles & CSS> Style Sheet>

If you just want a color, when you are editing your peek-a-boos, there is a Content Background Color option where if you click on the color wheel, you can select your background color.

If you want to have tabbed content in there it would be something like this:

<script>
$(document).ready(function(){

$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');

$(this).addClass('current');
$("#"+tab_id).addClass('current');
})

})
</script>




<style>
.container_side{
width: 220px;
margin: 0 auto;
}

ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
font-size:10px;
background-color:#ffffff;
height: 20px;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 2px 2px;
cursor: pointer;
}
ul.tabs li.current{
background: #dddddd;
color: #0000ff;
}
.tab-content{
display: none;
background: #aaaaaa;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
</style>


<div class="container_side">

<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>

<div id="tab-1" class="tab-content current">
Content for tab one
</div>
<div id="tab-2" class="tab-content">
Content for tab two
</div>
<div id="tab-3" class="tab-content">
Content for tab three
</div>
<div id="tab-4" class="tab-content">
Content for tab four
</div>

</div>

You can actually just paste that whole bit into your peek-a-boo content area so you can edit the css colors right there but one you have it exactly how you want it, I'd put the css at the bottom of your style sheet but you don't absolutely have to.
 

If you need further help, just let us know.

[' SweetiePie, ♥!]

thank you for help with the tab content! but the background image thing isn't working.. i put in it the stylesheet like you said but it's still not working.

[Brian]

If you copied it directly from the post you'll need to add http:// before the image link as the post stripped it when converting it to a clickable link.

[' SweetiePie, ♥!]

Mar 22, 2015 15:02:23 GMT -8 Brian said:

If you copied it directly from the post you'll need to add http:// before the image link as the post stripped it when converting it to a clickable link.

i did what you said and it's still not working.. i don't know why ..not sure if i'm doing something wrong or not.

[' SweetiePie, ♥!]

oh wait, nvm..i got it to work, thank you!~