Layouts

[Moda]

Feb 20, 2013 17:53:49 GMT -8 Stinky666 said:

Feb 20, 2013 17:34:23 GMT -8 Moda said:

 Brian, I really am a bunny (pardon that pun) but I've tried in several spots, it has shown in one place but way to the left and I would also have to change the color.
Suggestions please

Hi Moda, is there any chance you could link us to a test forum with the code in place and allow guests to view please?

thepride.boards.net
My board is a closed forum people must register to gain entry however I have opened it up for now for you to take a look.
The reason for closing it is that I was being threatened with legal action for allowing a cut & paste from another forum that was a bit nasty where names were used. I 've had no problems in the past 4 years due to the members only action.

I'd really like to place it in the white panel The Pride > Home >  I'd like to have the messages info along here if it'd possible

under the red panel with these links

Index - Help - Search - Calendar - members - Admin - Profile - Messages - The Pride Web - Tipping Comp - Chat - Register

[Brian]

Feb 20, 2013 18:38:25 GMT -8 Moda said:

I'd really like to place it in the white panel The Pride > Home >  I'd like to have the messages info along here if it'd possible

Give this a try. Place this before $[participated_threads_link] in Structure > Layout Templates > Forum Wrapper.

{if $[current_user.is_member]}
<a href="/conversations/inbox" class="messages-button{if $[current_user.messages.new] > 0} new{/if}">Inbox: $[current_user.messages.inbox] | New: $[current_user.messages.new]</a>
{/if}

Then in Themes > Colors & Styles > Style Sheet, add this to the end:

.messages-button { color: @nav_tree_color; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; background: @nav_tree_background_color; margin-bottom: 10px; height: 20px; .rounded-corners(@nav_tree_border_radius); }
.messages-button { font: @nav_tree_font; cursor: pointer; float: left; height: 14px; margin: 0 10px 10px 0; padding: 3px 6px 3px 6px; text-align: center; }
.messages-button:hover,
.messages-button.new { color: @nav_tree_hover_color; font: @nav_tree_hover_font; text-decoration: @nav_tree_hover_decoration; background-color: @nav_tree_hover_background_color; }

This will add a button to the left of your navigation tree, then automatically highlight it if you have any new PMs.

If you have a plugin that moves your banner, you can add this to your Global Footer if the button ends up in the wrong place.

<script type="text/javascript">
$(document).ready(function() {
$('.messages-button').insertBefore($('#navigation-tree'));
});
</script>

[Moda]

Feb 21, 2013 10:24:12 GMT -8 Brian said:

Feb 20, 2013 18:38:25 GMT -8 Moda said:

I'd really like to place it in the white panel The Pride > Home >  I'd like to have the messages info along here if it'd possible

Give this a try. Place this before $[participated_threads_link] in Structure > Layout Templates > Forum Wrapper.

{if $[current_user.is_member]}
<a href="/conversations/inbox" class="messages-button{if $[current_user.messages.new] > 0} new{/if}">Inbox: $[current_user.messages.inbox] | New: $[current_user.messages.new]</a>
{/if}

Then in Themes > Colors & Styles > Style Sheet, add this to the end:

.messages-button { color: @nav_tree_color; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; background: @nav_tree_background_color; margin-bottom: 10px; height: 20px; .rounded-corners(@nav_tree_border_radius); }
.messages-button { font: @nav_tree_font; cursor: pointer; float: left; height: 14px; margin: 0 10px 10px 0; padding: 3px 6px 3px 6px; text-align: center; }
.messages-button:hover,
.messages-button.new { color: @nav_tree_hover_color; font: @nav_tree_hover_font; text-decoration: @nav_tree_hover_decoration; background-color: @nav_tree_hover_background_color; }

This will add a button to the left of your navigation tree, then automatically highlight it if you have any new PMs.

If you have a plugin that moves your banner, you can add this to your Global Footer if the button ends up in the wrong place.

<script type="text/javascript">
$(document).ready(function() {
$('.messages-button').insertBefore($('#navigation-tree'));
});
</script>

As I said before in another thread, you're the man.
However I still have a problem the line of text re messages is to the left of the white panel not in it. Is it at all possible to have it on the same line on the right of $[participated_threads_link].
Plus I added the code as above at the end of the Style Sheet  but cannot find anything however does that only show when I get new messages?

[Brian]

Feb 22, 2013 4:45:49 GMT -8 Moda said:

Feb 21, 2013 10:24:12 GMT -8 Brian said:

Give this a try. Place this before $[participated_threads_link] in Structure > Layout Templates > Forum Wrapper.
Then in Themes > Colors & Styles > Style Sheet, add this to the end:
This will add a button to the left of your navigation tree, then automatically highlight it if you have any new PMs.

If you have a plugin that moves your banner, you can add this to your Global Footer if the button ends up in the wrong place.

As I said before in another thread, you're the man.
However I still have a problem the line of text re messages is to the left of the white panel not in it. Is it at all possible to have it on the same line on the right of $[participated_threads_link].
Plus I added the code as above at the end of the Style Sheet  but cannot find anything however does that only show when I get new messages?

You missed the first period inside the code, so it was missing its background color. I've corrected this for you.

You want it inside the nav tree? I think that would look somewhat confusing.

As for placing it on the right of the Participated button, you'd need to change this line:

.messages-button { font: @nav_tree_font; cursor: pointer; float: left; height: 14px; margin: 0 10px 10px 0; padding: 3px 6px 3px 6px; text-align: center; }

To this:

.messages-button { font: @nav_tree_font; cursor: pointer; float: right; height: 14px; margin: 0 0px 10px 10px; padding: 3px 6px 3px 6px; text-align: center; }

If it shows up in the wrong place due to plugins that move stuff, use this Javascript code in your Global Footer.

<script type="text/javascript">
$(document).ready(function() {
$('.messages-button').insertBefore($('.recent-threads-button'));
});
</script>

[Moda]

Hey Brian
When I opened up the forum this morning and saw it had been fixed I was as "happy as a Bunny" I thank you so very much I am happy to leave it as it is now again
Proboards rocks, many thanks.

[Speed33]

Nov 15, 2012 17:24:05 GMT -8 P I E said:

Hello

Having seen the new PB v5 and messing around with the coding I suddenly became curious as to what other people have created. I am just wondering if anyone would like to share what skinning they have managed to do with the new software?

I'm not sure if this is where we post but yeah! Just curious to see what everyone has created.
Or if there is a specific thread where people can share their v5 layouts/skins etc could I please be re-directed to it?

Thank you !

Here is another board I did from scratch, it is a V5 Graphics and support board to help others like you

glassgraphix.proboards.com/

[♥ ℒʊ√ ♥]

Hi!

I posted this on support, but perhaps this is the place for it. I've just created a v5 beta test for my test forum that I use as the guinea pig for my real forum. I make changes there before I make them on our active board.

I created the graphics and hope I can incorporate them to the new version, but so far I can't even get the banner to work correctly. 


This is how it should look ~

 

This is how it looks ~ it cuts off and replicates itself on the left side. I have it centered but . . . .

I even shortened the board with to the size of the banner width (750 pixels) but it still doesn't work. And it is totally distorted if I make the forum with the desired 900 pixels. 

chitchat4u.freemessageboards.com/

Any help would be appreciated. 


Thank you.  

[Speed33]

Go back into your visual editor and widen the forum back to 900px and then go to header (top) / banner image / make the background repeat 'no repeat'.

That should do it.

If not play around with the width px till you get it the way you want it to look. If you want more personal service see the post that I made directly above yours.

** Also try centering the image.

[♥ ℒʊ√ ♥]

Thank you, Speed33.   I'll try that. I knew there must be a way to stop the "repeat" but couldn't find it.

And I most likely will join your forum. I love what you did. I created animated templates that I need to place on the v5 version and haven't a clue how to do that. 

And my members will demand all our smilies be brought over. And they'll want to do away with PB's totally. They'll want what they are accustomed to. I have to make the change over as smooth as possible or they could just up and leave. 

Your help is greatly appreciated. 

[Speed33]

Sounds good ~ Luv ~. Looking forward to it.

[♥ ℒʊ√ ♥]

Honestly, I feel like a novice in this new version.

I am in "structure" ~ and I presume I need to use the advanced editor.

I go to "forum wrapper" but can't find the language "then go to header (top) / banner image / make the background repeat 'no repeat'." in the html code. All that I can see pertaining to the banner is, <div id="banner-container" role="banner">

<h2 id="banner">

I could use my forum's banging head on wall smiley right about now!!!!


Changing the forum width back to 900 was easy. But now the banner is really whacked!!!!

[Speed33]

Feb 24, 2013 22:30:18 GMT -8 ♥ ℒʊ√ ♥ said:

Honestly, I feel like a novice in this new version.

I am in "structure" ~ and I presume I need to use the advanced editor.

I go to "forum wrapper" but can't find the language "then go to header (top) / banner image / make the background repeat 'no repeat'." in the html code. All that I can see pertaining to the banner is, <div id="banner-container" role="banner">

<h2 id="banner">

I could use my forum's banging head on wall smiley right about now!!!!


Changing the forum width back to 900 was easy. But now the banner is really whacked!!!!

No, Do this:



Admin Home>

Themes>

Colors & Styles>

Visual Editor> Forum

Then do what I described above.

[♥ ℒʊ√ ♥]

Woo-hoo! Forget that last post. I found the visual editor!!!!! All is well.  Speed33 you're a godsend!  Thank you and good night. I'm going to rest on my victory! Tomorrow is another day! 

[Speed33]

Me too!! Nice going

[♥ ℒʊ√ ♥]

We crossposted! I so thank you. Visual editor was staring me right in the face and I didn't see it.   It's been a long day. But again, thank you, thank you, thank you.