Buttons on Action Bar

[BilliTheCat]

Forum URL: www.secretsocietyfriends.com

Ok. I hope The pictures make more sense than if I tried to explain myself.

This is what I want to happen in all themes.



This is the code that did that.

<div class="container posts">

<div class="title-bar">



<h1>$[thread.subject]</h1>

</div>

<div class="control-bar ui-helper-clearfix $[scroll_class]">



<div class="controls">





$[action_menu]

<a href="Http://www.secretsocietyfriends.com/threads/recent"><img src="http://secretsociety.b1.jcink.com/uploads/secretsociety//29565e9e-image.png" height:14px;></a>

           

<div class="float-right controls" style="$[bottom_reply_button.style];">

    <span>      <a href="$[participated_threads_link.href]">Participated</a>

         

        <a href="http://www.secretsocietyfriends.com">Home</a>

           $[reply_button]

       

        {if $[current_user.is_guest]}

$[login_link]

{else}

$[logout_link]

{/if}

   </span> </div>





</div>

<div class="float-left">$[thread.icons]</div>

{if $[current_user.is_member]}<img src="http://emoticoner.com/files/emoticons/smileys/multi-stars-smiley.gif">{/if}

       $[pagination]

       

     

</div>

<div class="content cap-bottom">

$[thread.labels]

$[poll]

<table class="list" role="presentation">

<tbody class="$[list_class]">

$[post_list]

</tbody>

</table>

{if !$[quick_reply]}{if $[bottom_reply_button]}

<div class="reply_button pad-all-double">$[bottom_reply_button]<br class="clear" /></div>

{/if}{/if}

</div>

</div>

$[quick_reply]

This is theme that I want to change.



This is the code that did that.

<div class="container posts">

<div class="title-bar">



<h1>$[thread.subject]</h1>

</div>



    <div class="control-bar ui-helper-clearfix $[scroll_class]">



<div class="controls">



$[action_menu]



           <a href="Http://www.secretsocietyfriends.com/threads/recent"><img src="http://secretsociety.b1.jcink.com/uploads/secretsociety//29565e9e-image.png" height:14px;></a>

           

<a href="$[participated_threads_link.href]">Participated</a>



           <a href="http://www.secretsocietyfriends.com">Home</a>



           $[reply_button]

   

           {if $[current_user.is_guest]}

$[login_link]

{else}

$[logout_link]

{/if}



       </div>



           <div class="float-left">$[thread.icons]

           </div>



           {if $[current_user.is_member]}$[theme.image.welcomeback]

           {/if}

     

           $[pagination]

       

      </div>



   

<div class="content cap-bottom">

$[thread.labels]

$[poll]

<table class="list" role="presentation">

<tbody class="$[list_class]">

$[post_list]

</tbody>

</table>

{if !$[quick_reply]}{if $[bottom_reply_button]}

<div class="reply_button pad-all-double">$[bottom_reply_button]<br class="clear" /></div>

{/if}{/if}

</div>

</div>

$[quick_reply]



Can somebody give me a clue please?

[Kami]

The biggest difference I see is the background colour behind the action bar area; is that what you're referring to? If not, can you elaborate, because there are several elements within the box you've indicated.

[BilliTheCat]

I want the links on the action bar to share the same style as the post controls. How do I do this? Why wasnt I able to do it by pasting what I had done on another theme. I didnt alter that CSS in either case.

[Kami]

This may be a silly question but did you go to your admin panel and change the colour of those elements in your 'advanced styles' section? (not the css portion). The reason I ask is that there's no CSS defined in the template you copied, other than the default ProBoards classes, so if you didn't modify the CSS sheet the only thing I can think of that would change the appearance of those buttons / that area is in the advanced styles section.

[BilliTheCat]

I am guessing that you are talking about the visual editor.That was my first thought. That is how I changed the pagination and background color of the action bar, but the actual links... I have tried every way I can to change them, and they ALWAYS stay the same font, size, weight, and decoration. I was able to make a non rounded corner border around the whole mess of links. I was able to change that enclosed area's background color, but never the color of the text. I forgot my point.

[Kami]

Yes, the visual editor. I had a momentary blank and forgot what it was called, haha.

Unfortunately since I can't access the second theme to try and compare the CSS between the two, I'll have to leave this to someone either more knowledgeable or who can access both themes. (:

[BilliTheCat]

Thanks anyway. Nobody uses the second theme, so I am not exactly concerned about it.

[BilliTheCat]

I keep forgetting to mention here that I figured it out.

There was a change on the Css that was so tiny that I forgot that I made it. I will go copy and paste what it was and what it is.

[BilliTheCat]

I cant tell you if it is the right or wrong thing to do, but it works on all of my themes now.



CSS

Not sure what I changed anymore...



.controls > li a

{

   display: inline-block;

}

.controls >  a

{

   .rounded-corners(3px);

   color:#260b01;

   font-size:large;

   display: inline-block;

   background-color:#ffffff;

   border:1px outset #260b01 ;

   padding: 4px 4px 2px 4px;

   text-align:center;

   text-decoration:none;  

}

.control-bar .ui-pagination

{

   margin-top:-5px;

   padding: 3px 5px 3px 7px;

}

.control-bar > div.float-left

{

   padding-left: 10px; padding-top: 8px; padding-bottom: 8px;

}

.control-bar > div.float-left img

{

   padding-right: 5px;

}

.control-bar .controls ul

{

   z-index: 233;

}

.control-bar .controls .ui-selectMenu-box

{

   margin:8px; padding-bottom:1px; padding-top:3px; font-size:large;

}

.control-bar .ui-search

{

   padding-bottom: 5px !important;

}

.ui-selectMenu-box

{

   border: 1px solid darken(@container_inner_border_color, 20%); .rounded-corners(4px); text-align:center;

}

.ui-selectMenu-box .arrow.down > span

{

   display:none; border-top-color: #000000;  



html



{foreach $[post]}

<tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}">

<td class="$[post.unblocked_class]">

<table role="grid">

<tr>

<td class="left-panel" rowspan="2">

$[post.created_by.miniprofile]

</td>

<td class="content">

<article>

<div class="content-head ui-helper-clearfix">

<div class="info">

$[post.thread]

<span class="date">$[post.created_on]</span>

<br>

                                   $[post.likes]

                                   

                                   {if $[post.how_posted]}

<span class="post-method">via $[post.how_posted]</span>

{/if}



</div>

<div class="controls">

$[post.quote_button]

$[post.edit_button]

$[post.likes.button]

$[post.select_options]

</div>

</div>

<h3 class="title aria-hidden">Post by $[post.created_by.name] on $[post.created_on]</h3>

<div class="message">$[post.message]</div>

</article>

</td>

</tr>

<tr>

<td class="foot">

{if $[post.edited]}

<div class="edited_by"><span class="italic">Last Edit:</span> $[post.edited.date] by $[post.edited.by_user]{if $[post.edited.reason]}: $[post.edited.reason]{/if}</div>

{/if}

{if $[post.created_by.signature]}

<div class="signature">$[post.created_by.signature]</div>

{/if}

</td>

</tr>

</table>

</td>

{if $[post.is_blocked]}

<td class="$[post.blocked_class] content center">

<div class="message note pad-bottom">This post is hidden</div>

$[post.display_blocked_post_button]

</td>

{/if}

</tr>

{/foreach}

{if !$[post]}

<tr class="last"><td class="last center" colspan="1">No posts were found.</td></tr>

{/if}
That is all I did. Once again I forgot it the second I figured it out. 

Attachments: