Something Dark Theme [1.4.3]

[Stinky666]

Jun 21, 2013 19:59:11 GMT -8 luap said:

A) I am fine with the navigation bar. It is the banner image that I would like to lop the top corners off of.

If you could pop to the site real quick you will see what I mean lifeordeath.freeforums.net

B) As for the location box...first off...is that section called the "mini-profile"? The one that is next to the persons post? Assuming that is a yes...I just think (in my opinion only) that the mini-profile overall is too tall for when people do short posts. If I could remove the box that contains personal stuff like location it would help. It isn't really the type of forum where people are going to get too personal. With that and removing some of the vertical padding I would be happier...but it is a minor tweak.

One other thing is my signature is passing underneath the mini-profile, can it be set to always be to the right of it unless the post is longer than the profile?

1)
The two images, I see now. Would you like to remove them instead?
If so, go to Admin > Themes > Advanced Styles & CSS > Style Sheet
Lines 83 - 87 you will see similar to this:


/* Common Elements and Classes */
@body_background_attachment: scroll, scroll, scroll;
@body_background_image: url('http://storage.proboards.com/5217496/i/MFJJrgmOJ10l6N8W4rdj.png'), url('http://storage.proboards.com/5217496/i/bcxJpDqb36hdj9ZXjlV6.png'), url('http://storage.proboards.com/5217496/i/Ir6_2JKtnlSIQMJ45yXB.png');
@body_background_repeat: no-repeat, no-repeat, repeat-x;
@body_background_position: left top, right top, center top;


Remove the parts I have put in blue.

---

2)
Go to Admin > Themes > Layout Templates > Mini-Profile

You should see this from line 32 to 45:

   <div class="info" id="personaltext">
           {if $[user.gender]}
           <b>Gender:</b> $[user.gender.text]
           {/if}<br/>
           {if $[user.birthday]}
           <b>Born:</b> $[user.birthday]
           {/if}<br />
           {if $[user.location]}
              <b>Location:</b> $[user.location]
           {/if}<br />
           {foreach $[user.mini_custom_field]}
           <br /><span class="$[user.mini_custom_field.content_class]"><b>$[user.mini_custom_field.name]:</b> $[user.mini_custom_field.value]</span>
{/foreach}{/if}
</div><br />

Highlight the whole of those lines, and then delete them. So it is completely gone.
Now copy the following to your clipboard:

<br /><span class="$[user.mini_custom_field.content_class]"><b>$[user.mini_custom_field.name]:</b> $[user.mini_custom_field.value]</span>
{/foreach}{/if}

And go to line 31 and hit enter once. Paste that into the new line, so now you should have this for lines 29, 30, 31, 32 and 33:


           {if $[user.website]}
           $[user.website]
           {/if}
   <br /><span class="$[user.mini_custom_field.content_class]"><b>$[user.mini_custom_field.name]:</b> $[user.mini_custom_field.value]</span>
{/foreach}{/if}</div><br />

---

3)
For the signature, go to Admin > Themes > Advanced Styles & CSS > Style Sheet
Scroll down to lines 1746 - 1750, you will see:

/* Signature in Threads */
#arrow_box { position: relative; background: #141414; border: 1px solid #272727; padding: 10px; .rounded-corners(3px); margin-left: 170px; }
#arrow_box:after, #arrow_box:before { bottom: 0%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
#arrow_box:after { border-color: rgba(20, 20, 20, 0); border-bottom-color: #141414; border-width: 10px; left: 50%; margin-left: -10px; }
#arrow_box:before { border-color: rgba(20, 20, 20, 0); border-bottom-color: #141414; border-width: 13px; left: 50%; margin-left: -13px; }


You wont have the bit that I have coloured in blue. Add that in.

[luap]

Sorry, I ended up passing out...

1) I like the left and right background images. At a minimum, I like that they are an option and could be replaced with other images at some point. I would prefer to round the top corners of the banner if that is possible. If not then I can just live with it.


2) I did the suggested change for the mini-profile and it did not quite work. I may have some how messed it up but it kept giving me ...
0: 0 {/foreach}{/if}
within the division box just under "currently online"

I knew you had me in the right place though so I studied how that bit of code was working and came up with...
   {if $[user.is_member]}
<div class="info" id="personaltext">
Posts: <font color="#cf5558"><b>$[user.posts]</b></font><br />
           {if $[user.registered_on]}
           Joined: <b>$[user.registered_on_short]</b>
           {/if}<br />
           {if $[user.is_online]}Currently <font color="#8ccf55">Online</font>{else} Currently <font color="#cf5558">Offline</font>{/if}<br />
           {if $[user.website]}
           $[user.website]
           {/if}</div><br />
   <!--    <div class="info" id="personaltext">
           {if $[user.gender]}
           <b>Gender:</b> $[user.gender.text]
           {/if}<br/>
           {if $[user.birthday]}
           <b>Born:</b> $[user.birthday]
           {/if}<br />
           {if $[user.location]}
              <b>Location:</b> $[user.location]
           {/if}<br />-->
           {foreach $[user.mini_custom_field]}
           <br /><span class="$[user.mini_custom_field.content_class]"><b>$[user.mini_custom_field.name]:</b> $[user.mini_custom_field.value]</span>
{/foreach}{/if}
</div><br />
It may not be correct but it seems to work. Do you think this is acceptable or am I causing an issue I am not aware of?


3) The adjustment to the signature does move the box to the right as I wanted but I may have not been entirely clear on what I was looking for. What I was thinking is that the bottom of the signature box would be lined up with the bottom of the mini-profile box until such point as the text in the post got long enough to push the signature down lower.

These images should help to see what I would like...





Sorry for the large images. I could not figure out how to make thumbnails.

4) I can't for the life of me figure out which one of these padding numbers to change to reduce the space between the smilies/refresh button and the top most recent shout. I am using the inverted shoutbox setting so new stuff and reply is on top. Thanks.
/* Shoutbox */
@shoutbox_message_background: #141414   scroll;
@shoutbox_message_border: 1px solid #111111;
@shoutbox_message_border_radius: 10px 10px 0 0;
@shoutbox_message_text_color: #cf5558;
@shoutbox_message_text_font: normal 400 small Arial, Helvetica, sans-serif;
@shoutbox_shouts_background: #141414   scroll;
@shoutbox_shouts_border: 1px solid @container_inner_border_color;
@shoutbox_shouts_border_radius: 5px 5px 5px 5px;
@shoutbox_shouts_text_color: #969696;
@shoutbox_shouts_text_font: normal normal 100% Arial, Helvetica, sans-serif;
@shoutbox_shouts_edit_color: @empty;
@shoutbox_shouts_edit_font: 85% @default_forum_text_font_family;
@shoutbox_shouts_edit_decoration: @empty;
@shoutbox_shouts_delete_background: #111111   scroll;
@shoutbox_shouts_delete_border: 1px solid #181818;
@shoutbox_shouts_delete_border_radius: 0 5px 5px 0;
@shoutbox_shouts_delete_text_color: #cf5558;
@shoutbox_shouts_delete_text_font: normal 400 1em Arial, Helvetica, sans-serif;
@shoutbox_shouts_delete_text_decoration: none;
@shoutbox_shouts_selected_background: #272727   scroll;
@shoutbox_reply_background: #181818   scroll;
@shoutbox_reply_border: 1px none;
@shoutbox_reply_border_radius: 0 0 0 0;
@shoutbox_reply_counter_color: #969696;
@shoutbox_reply_counter_font: 85% @default_forum_text_font_family;
.shoutbox_welcome_message { color: @shoutbox_message_text_color; font: @shoutbox_message_text_font; background: @shoutbox_message_background; border: @shoutbox_message_border; .rounded-corners(@shoutbox_message_border_radius); margin-bottom: 10px; }
.shoutbox_messages .shoutbox-post { color: @shoutbox_shouts_text_color; font: @shoutbox_shouts_text_font; background: @shoutbox_shouts_background; border: @shoutbox_shouts_border; .rounded-corners(@shoutbox_shouts_border_radius); text-align: left; position: relative; overflow: hidden; margin-top: 2px; margin-right: 2px; padding: 2px 2px; }
.shoutbox_messages .shoutbox_edit_button { color: @shoutbox_shouts_edit_color; font: @shoutbox_shouts_edit_font; text-decoration: @shoutbox_shouts_edit_decoration; display: inline-block; width: 32px; margin-right: 0px; }
.shoutbox_messages .shoutbox_edit_button.hidden { display: none; }
.shoutbox_messages .shoutbox_delete_button { color: @shoutbox_shouts_delete_text_color; font: @shoutbox_shouts_delete_text_font; text-decoration: @shoutbox_shouts_delete_text_decoration; background: @shoutbox_shouts_delete_background; border: @shoutbox_shouts_delete_border; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; position: absolute; right: -7px; top: 0; width: 15px; cursor: pointer; margin-left: 20px; margin-top: 0px; padding: 3px; height: 100%; display: inline-block; }
.shoutbox .state-selected { background: @shoutbox_shouts_selected_background; }
.shoutbox_form { background: @shoutbox_reply_background; border: @shoutbox_reply_border; .rounded-corners(@shoutbox_reply_border_radius); padding: 0px; height: 100px; }
.shoutbox_form .shoutbox_counter { color: @shoutbox_reply_counter_color; font: @shoutbox_reply_counter_font; float: right; margin-top: 0px; }
.shoutbox_form textarea.gray { color: #d15d46; }
.shoutbox_messages { overflow-y: scroll; text-align: center; position: relative; }
.shoutbox .content { padding: 10px; }
.shoutbox_messages .shoutbox-post:first-child { margin-top: 0px; }
.shoutbox_messages .message { padding-right: 10px; }
.shoutbox_messages .details {  margin: 0px 0px 0px 0px; height: 16px; vertical-align: bottom; }
.shoutbox_form.reply-box-bottom { margin-top: 0px; }
.shoutbox_form.reply-box-top { margin-bottom: 0px; }
.shoutbox_form input[type="text"] { margin-top: 2px; margin-bottom: 4px; }
.shoutbox_form .button img { display: inline; padding: 2px 1px 0; }
.shoutbox_form .shoutbox_refresh_button { float: right; padding: 4px 8px 0px 8px; }
.shoutbox_form ul.tools { white-space: nowrap; display: inline-block; }
.shoutbox_form ul.tools li { float: left; margin: 0; padding: 0; .rounded-corners(0px); border: 0; height: 22px; width: 26px; text-align: center; line-height: 18px !important; }
.shoutbox_form ul.tools li img { padding: 0; }
.shoutbox_form textarea { height: 25px; width: 100%; margin-right: 0px; margin-bottom: 3px; margin-top: 0px; position: inherit; .box-sizing(); }
.shoutbox_form .shoutbox_post_button { float: right; margin-left: 0px; }
.shoutbox_form .shoutbox_cancel_button { vertical-align: bottom; }
.shoutbox_error { color: @status_text_failure_color; }
.shoutbox_name { padding: 10px 0; height: 22px; }
.shoutbox_name input { height: 15px; width: 50%; min-width: 150px; }
.shoutbox_container { position: relative; }
.shoutbox_container > .shoutbox_form_container { position: absolute; width: 100%; }
.shoutbox_container.orientation-top { padding-top: 100px; }
.shoutbox_container.orientation-top.no-post { padding-top: 0; }
.shoutbox_container.orientation-top > .shoutbox_form_container { top: 0; }
.shoutbox_container.orientation-bottom { padding-bottom: 117px; }
.shoutbox_container.orientation-bottom.no-post { padding-bottom: 0; }
.shoutbox_container.orientation-bottom > .shoutbox_form_container { bottom: 0; }
#content .shoutbox.container .smiley-menu > li > a { border: none; padding: 6px; }

[Stinky666]

luap.

1) That would require me to open the images in a design program and manually add a rounded border. If you do want me to, I can do it.

2) Glad you got this sorted. I see what I did wrong, apologies. I missed out:
{foreach $[user.mini_custom_field]}

3) Not too sure how to do this, but I will give it a try and will get back to you.

4) A very very quick, easy way to resolve this issue would be to increase the text area size slightly. Find this line on 1331:

.shoutbox_form textarea { height: 50px; width: 100%; margin-right: 0px; margin-bottom: 5px; margin-top: 5px; position: inherit; .box-sizing(); }

Change the blue to any pixel size you want. You should only need to add about 10px to yours. On my test forum, for some reason it has a HUGE gap, so I have to change it to 110px, but about 60px - 65px should suffice for you

[luap]

1. On the image thing I think you are misunderstanding my desire. Your images are fine the way they are. I like your pictures and am kind of upset that the needless black corners of the banner are covering it up. I am looking for it to be shaped something along the lines of the top of this theme so more of your images would be visible.

2. Cool I feel special now hehe...

3. Hmmm I created a challenge? This ought to be interesting. Don't put too much into it unless you want to...It isn't really that big a deal for me...just a tweak.

4. Yeah I know I could fill up the void doing the suggested change but I specifically reduced that number to 25px. I am trying to reduce the shoutbox as much as possible without making it unusable. I know that dimension has to be around somewhere. I had accidentally found it on my first draft of the forum and now I can't locate it.

[Stinky666]

1) So you want the banner's corners to be rounded? The top left and right of your banner.. ?

2)

3) I've tried a few things so far with this, but they are all inconsistent unfortunately. I tried using margin-top: -6%, and it was just a fail lol. Will keep trying.

4) I just need to head downstairs for a bit, but when I come back I will look again for this (I actually stopped looking immediately after I found the text area size, and saw you could increase that to reduce the other).

[luap]

Yes on the banner corner rounding. I could easily round the corners of my image but I think it would still have the built in background corners...so I need to find the spot where those are rounded if it exists.

Uh...just realized this forum we are on has the signature doing what I would like it to do I think...maybe if the default does it you can dissect it out?

[Stinky666]

Jun 22, 2013 14:31:37 GMT -8 luap said:

Yes on the banner corner rounding. I could easily round the corners of my image but I think it would still have the built in background corners...so I need to find the spot where those are rounded if it exists.

Uh...just realized this forum we are on has the signature doing what I would like it to do I think...maybe if the default does it you can dissect it out?

luap, try this for the rounded corners on line 1557 - add the blue:

#wrapper { background-color: #111111; box-shadow: 0px 0px 30px rgba(0,0,0,0.5); width: @wrapper_width; margin: 90px auto; margin-bottom: 0px !important; overflow-x: hidden; overflow: visible; .rounded-corners(10px); }

---

For the shoutbox, go to line 1339 and you should see this:
.shoutbox_container.orientation-top { padding-top: 174px; }

Change the 174px to anything you prefer - decrease the number

[luap]

1.) Yes that is it exactly...rounded corners good to go.

2.) The 174 I already found and no matter what I set it to it still leaves the space at the top. It is growing on my though so I won't worry about it.

3.) Let me know if you figure anything out with the signature deal. I don't know if you caught my mention before that this forum we are currently posting in has the signature working in the way I desire if there is a way to see this code.

I have one more edit I would like to make if you are not tired of me yet.

4.) I would like to comment out the <div for the "board" when you enter a board with sub-boards. I don't want any posts in the board when sub-boards exist so it seems like the easiest way to do that is to just remove the whole box at the bottom with the "board" information in it and only list the sub-boards.

I swear after this I am done...very pleased with the results of your work. I appreciate your help very much.

[Stinky666]

luap, apologies.

1) For the banner add this to the bottom of your style sheet (remove the other one I gave for it):
#banner { .rounded-corners(10px); }

2) The space decreases for me so I am not sure why it doesn't for you

3) I've had a play with the signature and can't figure this out, I even went back to basics, and it still went all the way across, so I am extremely confused. Hopefully if I tag Brian he could help with it: Brian

4) Maybe it's just me being ill and my brain not functioning 100%, but I am not sure exactly which bit you're referring to. Could you get a screenshot and maybe circle the bit you are talking about?

[luap]

Apologies for what? I am used to waiting days or weeks to get responses from people lol your awesome.

I am good to go on the banner and the shoutbox...happy with them.

Interested to see what comes of the signature thing.

I will get a picture for you but it will have to be tomorrow. To try to help in text explanation...if you go to my place, click the Grafetti Wall...in that next page you see the "sub-boards" section and then below it you see a separate box with the "Grafetti Wall" header and on the right, the ability to create a thread. I would prefer if that entire lower box just wasn't there. If that does not clear it up I will do an image in the morning.

[Stinky666]

Jun 23, 2013 19:11:24 GMT -8 luap said:

Apologies for what? I am used to waiting days or weeks to get responses from people lol your awesome.

I am good to go on the banner and the shoutbox...happy with them.

Interested to see what comes of the signature thing.

I will get a picture for you but it will have to be tomorrow. To try to help in text explanation...if you go to my place, click the Grafetti Wall...in that next page you see the "sub-boards" section and then below it you see a separate box with the "Grafetti Wall" header and on the right, the ability to create a thread. I would prefer if that entire lower box just wasn't there. If that does not clear it up I will do an image in the morning.

Ohhhhh. That's actually something you control in Admin > Structure > Categories & Boards
Click on the options for "Graffiti Wall", and under the "Settings" tab, change "Disable Posting", to yes.

[luap]

Well so it is. Somehow I missed that. Wish I could send you some cookies or something. I owe you.

[Alanna 🥀🖤]

Another question, where there is a new post in a board, two pink red lines appear on either side of the board description. Where can I edit that?

[Brian]

luap, what's the dealio with the signature, exactly? I'm not sure what needs to be done to it, so do feel free to explain to me.

Also, please quote this post or tag me when responding to me as I'm unlikely to manually visit this thread on my own during work and will be heavily reliant on the notification for it.

[luap]

I sent the details from above in this thread to you directly in PM I hope that is what you meant...I don't know how to do tags.

I have come up with another question for you too stinky.

If I wanted to create another box or section between the news feed and the shoutbox for a link I know where it would go I think since you showed me how to move the shoutbox but I don't know what the format of the thing would be. What I wish to put in it is this... and centered...

EDIT: nevermind I got this licked I think. I probably hacked it in in using bad code form or something but I am proud I figured it out lol....just need to know how to center it. I used this code...

<div class="wrapper">
   <div class="container stats usersonline">
      <div class="title-bar" line-height="31px;"><h2>Donation Station</h2></div>
        <tbody class="$[list_class]">
<div class="content">
              <form action= Blah blah blah blah
             </form>
</div>
        </tbody>
</div>
</div>
<br/>