Breathe [v1.0.5]

[elli]

Alice in the Boxxx

[Alice in the Boxxx]

elli, Thanks. I did that, but I guess I did not wait long enough for it to load, because it works now.

[elli]

Alice in the Boxxx Might have needed to do a hard refresh, stylesheets are often cached: ctrl + shift + R

[elli]

Apr 13, 2016 10:50:29 GMT -8 Boy_Wonder said:

Scrolling for the overall container

Will have this sometime over the weekend.

[elli]

Boy_Wonder All right, here you go.

Find this bit of the image column:

<div class="grid-col-4 grid-col-4-images">
   <div class="grid-content has-children">
       <div class="grid-row top">
           <div class="grid-col-12">
               <div class="grid-content images">
                   <img src="http://placehold.it/300x140/b5bac0/e2e6eb" />
               </div>
           </div>
       </div>
       <div class="grid-row bottom">
           <div class="grid-col-12">
               <div class="grid-content images">
                   <img src="http://placehold.it/300x140/b5bac0/e2e6eb" />
               </div>
           </div>
       </div>
   </div>
</div>
Replace it with this:

<div class="grid-col-4">
   <div class="grid-content">
       <h3>Staff</h3>
       <hr>
       <div class="scroll-content staff">
           <div class="staff-item">
               <div class="staff-avatar">
                   <img src="http://placehold.it/75x75" alt="[]" />
               </div>
               <p><strong>Robs Stable Empire</strong> Main Admin<br>
                   GMT Timezone</p>
           </div>
           <div class="staff-item">
               <div class="staff-avatar">
                   <img src="http://placehold.it/75x75" alt="[]" />
               </div>
               <p><strong>Robs Stable Empire</strong> Main Admin<br>
                   GMT Timezone</p>
           </div>
           <div class="staff-item">
               <div class="staff-avatar">
                   <img src="http://placehold.it/75x75" alt="[]" />
               </div>
               <p><strong>Robs Stable Empire</strong> Main Admin<br>
                   GMT Timezone</p>
           </div>
       </div>
   </div>
</div>

Then find this bit of the CSS:

.grid-content .scroll-content { margin-right: -20px; padding-right: 20px; font: 12px @default_forum_text_font_family; line-height: 1.5; text-transform: initial; overflow-y: auto; }
.grid-content .scroll-content::-webkit-scrollbar { width: 9px; height: 9px }
.grid-content .scroll-content::-webkit-scrollbar-track { background-color: @bg_color_2; }
.grid-content .scroll-content::-webkit-scrollbar-thumb { background-color: @bg_color_1; border: 3px solid @bg_color_2; cursor: pointer; }
.grid-content .scroll-content p { margin-bottom: 1em;
   &:last-of-type { margin-bottom: 0; }
}
.grid-content .scroll-content.welcome { height: 68px; }
.grid-content .scroll-content.updates { height: 170px; }
.grid-content .scroll-content.updates strong { color: @pop_of_color; }
Replace it with this:

.grid-content .scroll-content { margin-right: -20px; padding-right: 20px; font: 12px @default_forum_text_font_family; line-height: 1.5; text-transform: initial; overflow-y: auto; }
.grid-content .scroll-content::-webkit-scrollbar { width: 9px; height: 9px }
.grid-content .scroll-content::-webkit-scrollbar-track { background-color: @bg_color_2; }
.grid-content .scroll-content::-webkit-scrollbar-thumb { background-color: @bg_color_1; border: 3px solid @bg_color_2; cursor: pointer; }
.grid-content .scroll-content p { margin-bottom: 1.2em;
   &:last-of-type { margin-bottom: 0; }
}
.grid-content .scroll-content.welcome { height: 68px; }
.grid-content .scroll-content.updates { height: 174px; }
.grid-content .scroll-content.updates strong { color: @pop_of_color; }
.grid-content .scroll-content.staff { height: 174px; }
.grid-content .scroll-content.staff .staff-item { display: -webkit-box; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; margin-bottom: 1.2em;
&:last-of-type { margin-bottom: 0; }
}
.grid-content .scroll-content.staff .staff-avatar { width: 75px; height: 75px; margin-right: 1em; }
.grid-content .scroll-content.staff .staff-avatar img { width: 100%; height: auto; }

[Boy_Wonder]

Perfect!! One other question, not sure how doable this is - is there any chance that for the menu thingy at top I could set it so when its not showing its background colour text should be white when it does scroll and bring in the background colour it goes black text

[elli]

Boy_Wonder So you want this text to be black instead? (Attachment)

[Boy_Wonder]

No no - when that shows the text should be black as it is, when that isn't there the text should be white as right now the black doesn't have enough 'contrast' on the part of the image its on so its getting lost

[elli]

Boy_Wonder Sorry, I'm having a hard time understanding. You're wanting the text on the hover menu to be white, but before it changes to this state, when it's over the banner image, you want it to be black?

[Boy_Wonder]

No let me take a screenshot:



As you see it shows perfectly when the plain background shows, but on the banner it gets a bit lost so needs ideally to be white...

[elli]

Boy_Wonder Hmm, it should be white by default. If you replace these:

@nav_bar_button_color: @title_text_color;

...

#nav-tree > li + li a::before { content: " / "; padding-right: 15px; color: @title_text_color; display: inline-block; }
#nav-tree > li a { padding: 0 15px 0 0; font: @nav_tree_font; line-height: 60px; letter-spacing: 0.025em; text-transform: @nav_tree_case; text-decoration: @nav_tree_decoration; color: @title_text_color; display: block; }
With these:

@nav_bar_button_color: #fff;

...

#nav-tree > li + li a::before { content: " / "; padding-right: 15px; color: #fff; display: inline-block; }
#nav-tree > li a { padding: 0 15px 0 0; font: @nav_tree_font; line-height: 60px; letter-spacing: 0.025em; text-transform: @nav_tree_case; text-decoration: @nav_tree_decoration; color: #fff; display: block; }
That will make the default state for the navigation items white. But then to make them black when it changes to the hover state, you'll need to find this:

#navigation-container.sticky { background: @nav_bar_background !important; border: @nav_bar_border; .fixed-navigation(); }
And add this:

#navigation-container.sticky { background: @nav_bar_background !important; border: @nav_bar_border; .fixed-navigation(); }
#navigation-container.sticky #navigation-menu > ul > li,
#navigation-container.sticky #navigation-menu > ul > li > ul > li { color: @title_text_color; }
#navigation-container.sticky #nav-tree > li + li a::before { color: @title_text_color; }
#navigation-container.sticky #nav-tree > li a { color: @title_text_color; }

[Boy_Wonder]

Perfect! Thank you!

[vulpes]

Hi elli  

I love love love this theme. The only question I have is how do I make my icons for new posts appear in the categories/threads views? 

For example, my forum is a Ravenclaw-themed/Harry Potter community site. On an older theme I used (it was just a basic theme that I customized, nothing complex/intuitive like yours is), I had remembrals that signified a new post versus an old post. The empty remembral was the old/no new posts icon. The full remembral is the new posts icons. It appeared in the homepage/category view as well as in the boards when viewing threads. I would like to do this again but I'm not sure how to do it with your theme. I do have the images uploaded to this theme as the images for old/new posts, as a start. This is sort of what I'm looking for... 

Categories view:



Boards/threads view: 



Obviously if it pans out that the sizing of the images would need to be scaled down (and this quick mock up was done in paint so there is transparent involved that's missed here), that's fine. I would just like the option to make it more visible. Especially since the category view doesn't appear to have any visible new thread views. 

Thanks again for this awesome theme & for taking the time to read this.  

[Boy_Wonder]

elli

Elli its me again (sorry!) I've noticed a glitch when viewing posts with miniprofiles - I'm sure it shouldn't look like this:


all posts are doing this however... any chance of a fix? I'm willing to turn my site temporarily off mm while you register and set you in a outside testing group that has staff powers

[Maleficent]

Elli

I should really extend my appreciation for the wonderful theme you have made.

I did some tweaks here and there( according to my needs), it is absolutely nice as I could easily understand the way in which you have written the CSS.

Thanks
Kyles