Breathe [v1.0.5]

[elli]

directorlazuli Admin > Themes > Layout Templates > Boards > Board List, place the below above this line: <td id="$[board.content_id]" class="$[board.content_class]">

<td class="icon">$[board.icon]</td>

[directorlazuli]

Thanks again!

EDIT:


elli

Ugh, one more question- yeesh you must be tired of me by now...

I got the icons to show up, but the page looks quite wonky now. I've been fiddling with it for a few hours and I haven't been able to get the icons to show up beside the boards instead of above them?


Currently it looks like this:


and I want it to look more like this:

[elli]

directorlazuli Sorry, I gave you bad instructions. I think I may have been looking at code for an alternate version of the skin. What I meant was for you to find this line: <tr id="$[board.content_id]" class="$[board.content_class]"> and add the following in a new line below it:

<td class="icon">$[board.icon]</td>

Sorry about that.

[directorlazuli]

Oh, that's not a problem! Thank-you for being so helpful. It works awesome.

[Pebbles]

elli

the affiliating box in the footer shows up anywhere you go, even when you are in threads/boards
and i would like it to only be visible on the homepage of the forum

how do i get it like that?

thank you

[elli]

Pebbles Put it in the "Home" layout template instead of "Forum Wrapper"?

[Pebbles]

Aug 3, 2016 12:57:53 GMT -8 elli said:

Pebbles Put it in the "Home" layout template instead of "Forum Wrapper"?

haha that worked
simple
thanks, cannot believe i could not work that out myself

[Mokou]

Hi elli! I absolutely love this skin, it's so simple and elegant. I especially love the way you set up the post page; I was wondering if I could get permission to use that on a skin I am making for my own RPG forum?? If not, could I request something similar? Thanks a lot. ?

[elli]

Pebbles Ah, glad that worked. Was not sure if you had tried it yet or not.

Mokou This layout?

[Mokou]

elli No, this one gyazo.com/a0f933d03681f9a6ab6b575291d0347c
The actual post page/thread. I love how the quote/edit buttons are on the bottom, and post info (time stamp and all that) is on the bottom.

[Pebbles]

just letting you know i am using your theme here www.cute.boards.net

[elli]

Mokou Ah, yeah, that's fine. Here's the code for it:

SPOILER: Click to show

{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>
                           <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="sub-foot">
                       $[post.likes]
                       {if $[post.created_by.signature]}
                           <div class="signature">$[post.created_by.signature]</div>
                       {/if}
                   </td>
               </tr>
               <tr>
                   <td class="foot" colspan="2">
                       <div class="info">
                           $[post.thread]
                           <span class="posted-on">
                               Posted $[post.created_on]
                               {if $[post.how_posted]}
                                   <span class="post-method">via $[post.how_posted]</span>
                               {/if}
                           </span>
                           {if $[post.edited]}
                               <span class="edited_by">Edited by $[post.edited.by_user] $[post.edited.date] {if $[post.edited.reason]}: $[post.edited.reason]{/if}</span>
                           {/if}
                       </div>
                       <div class="controls">
                           $[post.quote_button]
                           $[post.edit_button]
                           $[post.likes.button]
                           $[post.select_options]
                       </div>
                   </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>
   <tr class="spacer"><td></td></tr>
{/foreach}
{if !$[post]}
   <tr class="last"><td class="last center" colspan="1">No posts were found.</td></tr>
{/if}

/* ======================================================
* POST LIST
* ====================================================== */

@posts_odd_background_color: @container_background_color_1;
@posts_odd_background_image: @empty;
@posts_odd_background_attachment: @empty;
@posts_odd_background_repeat: @empty;
@posts_odd_background_position: @empty;
@posts_odd_text_color: @container_text_color_1;
@posts_even_background_color: @container_background_color_2;
@posts_even_background_image: @empty;
@posts_even_background_attachment: @empty;
@posts_even_background_repeat: @empty;
@posts_even_background_position: @empty;
@posts_even_text_color: @container_text_color_2;
@posts_separator_border: 1px solid @container_inner_border_color;
@posts_likes_font: 11px @default_forum_text_font_family;
@posts_likes_case: lowercase;
@posts_likes_align: right;
@posts_likes_color: @empty;
@posts_foot_text_font: 11px @default_forum_text_font_family;
@posts_foot_text_case: lowercase;
@posts_foot_text_color: @empty;
@posts_code_background: @container_background_color_1;
@posts_code_border: 1px solid @container_inner_border_color;
@posts_code_text_color: @container_text_color_1;
@posts_code_text_font: @empty;
@posts_signatures_border: 1px solid @container_inner_border_color;
@posts_signatures_text_color: @empty;
@posts_signatures_text_font: 10px @default_forum_text_font_family;

.posts.container > .content { border-width: 0; }

.posts table.list > tbody > tr.spacer { height: 20px; }

.posts .post > td { padding: 0; border: @posts_separator_border; }
.posts .post.blocked > td.unblocked { display: none; }
.posts .post > td > table { width: 100%; }

.posts .poll { margin-bottom: 10px; border: @posts_separator_border; }
.posts .post .left-panel { background-color: mix(@bg_color_1, @bg_color_2, 20%); width: 260px; padding: 30px; vertical-align: top; position: relative; .box-sizing(); }
.posts .post .content { padding: 25px 30px; vertical-align: top; }

.posts #labels { padding: 5px; text-align: right; display: none; }
.posts span.labels { margin-bottom: 10px; padding: 8px 30px; border: @posts_separator_border; display: block; }
.posts span.labels .ui-label { padding-right: 5px; display: inline-block; zoom: 1; }

.posts.summary .post .content-head { margin-bottom: 10px; padding-bottom: 10px; border-bottom: @posts_separator_border; }
.posts.summary .post .content-head .info { float: none; }

.posts .post .message { margin-bottom: 1.3em; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }
.posts .post .message table { width: inherit; }
.posts .post .message table td { padding: 3px; }
.posts .post .message ul {margin-left: 31px; list-style-type: disc; }
.posts .post .message ol {margin-left: 31px; list-style-type: decimal; }
.posts .post .message code { background: @posts_code_background; margin-left: 16px; margin-right: 16px; padding: 5px; border: @posts_code_border; font: @posts_code_text_font; color: @posts_code_text_color; white-space: pre-wrap; display: block; }

.posts .post .sub-foot { padding: 25px 30px; vertical-align: bottom; }
.posts .post .sub-foot .signature { margin-top: 15px; padding-top: 25px; border-top: @posts_signatures_border; font: @posts_signatures_text_font; color: @posts_signatures_text_color; vertical-align: bottom; }

.posts .post .foot { height: 1px; padding: 10px 30px; border-top: @posts_separator_border; vertical-align: middle; }
.posts .post .foot .info { font: @posts_foot_text_font; line-height: 28px !important; text-transform: @posts_foot_text_case; color: @posts_foot_text_color; float: left; }
.posts .post .foot .posted-on,
.posts .post .foot .edited_by,
.posts .post .foot .post-method,
.posts .post.recent .foot .thread-link { padding-right: 10px; display: inline; }
.posts .post .foot .thread-link { max-width: 450px; overflow: hidden; display: none; }
.posts .post .foot .controls { float: right; border-collapse: separate; }
.posts .post .foot .controls > a,
.posts .post .foot .controls > .button { margin-left: 10px; float: left; }
.posts .post .foot .controls > a.likes-button { padding: 0 7px; font-size:12px; }

.likes { display: block; }
.likes, .likes:hover { font: @posts_likes_font; text-transform: @posts_likes_case; text-align: @posts_likes_align; color: @posts_likes_color; }
.likes-button { padding: 4px 0px 0px 5px; display: none; }
.liked.likes { display: inline; }

.quote_clear { clear: both; }

.posts .post, .post .quote div.quote div.quote_body { background-color: @posts_odd_background_color; background-image: @posts_odd_background_image; background-attachment: @posts_odd_background_attachment; background-repeat: @posts_odd_background_repeat; background-position: @posts_odd_background_position; font-size: 12px; line-height: 1.6; color: @posts_odd_text_color; }
.post.item abbr.time, .post.item .quote .quote abbr.time { color: @posts_odd_text_color; }
.post.item .quote abbr.time, { color: @posts_even_text_color; }

.posts.item .ui-pagination { padding-left: 0px; }

/* --- polls --- */

@polls_selection_border: 1px solid @container_inner_border_color;
@polls_selection_background: @container_highlight_color;
@polls_rank_default_background: @bg_color_1;
@polls_rank_default_border: none;
@polls_rank_default_rank_color: @text_color_2;
@polls_rank_default_rank_background: transparent;
@polls_rank_default_rank_border: 5px;
@polls_rank_first_background_color: @bg_color_3;
@polls_rank_second_background_color: fade(@bg_color_3, 50%);
@polls_rank_third_background_color: fade(@bg_color_3, 30%);

.ui-poll .results td .select-box { min-width: 15px; min-height: 15px; border: @polls_selection_border; }
.ui-poll .results tr.ui-selected { background: @polls_selection_background; }
.ui-poll .poll-vote-bar .bar { background: @polls_rank_default_background; border: @polls_rank_default_border; border-right-width: 0px; float: left; height: 18px; min-width: 5px; .border-radius(0); }
.ui-poll .poll-vote-bar .rank { float: left; background: @polls_rank_default_background; border: @polls_rank_default_border; border-left-width: 0px;  height: 18px; padding-left: 2px; .border-radius(0); }
.ui-poll .poll-vote-bar .rank div { color: @polls_rank_default_rank_color; font-weight: bold; font-size: 9px; background: @polls_rank_default_rank_background; padding: 1px 3px; opacity: 1; filter: alpha(opacity=100); .border-radius(0); }
.ui-poll .poll-vote-bar.rank-1 .rank, .ui-poll .poll-vote-bar.rank-1 .bar { background-color: @polls_rank_first_background_color; }
.ui-poll .poll-vote-bar.rank-2 .rank, .ui-poll .poll-vote-bar.rank-2 .bar { background-color: @polls_rank_second_background_color; }
.ui-poll .poll-vote-bar.rank-3 .rank, .ui-poll .poll-vote-bar.rank-3 .bar { background-color: @polls_rank_third_background_color; }
.ui-poll { padding: 25px 30px; }
.ui-poll h3 { margin-bottom: 10px; }
.ui-poll table { table-layout: fixed; width: auto; }
.ui-poll .icon-poll { margin-right: 0; }
.ui-poll .results { margin: 10px 0; }
.ui-poll .results td { padding: 5px 10px; }
.ui-poll .results tr.ui-hover { background-color: @container_highlight_color; cursor: default; }
.ui-poll .results td:first-child { padding-left: 0; padding-right: 0; }
.ui-poll .results .stats { float: left; margin-left: 5px; line-height: 18px !important; }
.ui-poll .voted ul { list-style: disc; padding-left: 20px; }
.ui-poll .vote-input { margin-top: 5px; }
.ui-poll .vote-input-cooldown { margin-left: 5px; margin-top: 2px; }
.ui-poll .poll-vote-bar { float: left; overflow: hidden; min-width: 10px; }
.ui-poll .results tr td .select-box i { visibility: hidden; display: block; }
.ui-poll .results tr.ui-selected td .select-box i { visibility: visible; }

/* --- quotes --- */

@quotes_background: @empty;
@quotes_border: 2px solid @container_inner_border_color;
@quotes_sub_background: @quotes_background;
@quotes_sub_border: @quotes_border;

#content .content .quote div.quote_body { background: @quotes_background; border: @quotes_border; margin-top: 7px; padding: 10px 10px; }
#content .content .quote div.quote div.quote_body { background: @quotes_sub_background; border: @quotes_sub_border; }

.quote { margin: 0 10px; padding-bottom: 10px; position: relative; top: 0px; }
.quote div.quote_avatar_container { float: left; }
.quote div.no_avatar_placeholder { display: inline-block; height: 30px; width: 30px; position: absolute; top: 14px; left: 4px; }
.quote div.quote_header { display: block; margin: 7px 0px 16px 35px; }
.quote.no_header { padding-top: 10px; }

/* --- quick reply --- */

.quick-reply textarea { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; height: 150px; padding: 10px; width: 100%; resize: none; .box-sizing(); }
.quick-reply .content { padding: 0; border-width: 0; }
.quick-reply .message { margin-bottom: 10px; }
.quick-reply .guest_name { padding: 0 10px 10px 0px; vertical-align: middle; }
.quick-reply .guest_name label { display: inline; font-weight: 800; }
.quick-reply input[type="submit"] { margin-left: 0; }

You will need to edit some of the variables, as they're unique to the theme as a whole. I would also really appreciate a credit somewhere for use of this particular remodel.

[Pebbles]

elli

is it possible to move the entire menu box, all of the info being displayed as dropdown when clicking menu, to somewhere else and put it on display on the index page, perhaps below the header or inside the header with a slide effect

asking because then people do not have to click menu to find all the info
and its easier to find the info if its right there in their face you know, i have had feedback on this and even though it is not hard difficult to click menu, it is a small thing somewhere above in the header that not every person gets right away unfortunately

i hope you can help me with this
obviously, if possible for me to move it all below the header area, i will reduce the height of the header or else it would look ridiculous haha

i tried adding the sidebar plugin but its no use and it doesn't look super with this theme in my opinion

[elli]

Pebbles Yeah, this theme isn't built to work with the sidebar plugin. Information is meant to be in the dropdown menu...

Depending on how many changes you've made, the info dropdown starts at line 174:

<div class="dropdown info-dropdown fallback">

And ends with its closing </div> on line 246. If you cut this section from the HTML, you can move it wherever you'd like.

[Tommy Huynh]

I still can't over how gorgeous this theme is.