As for the colors, you are very right but I don't know how to create a skin for a forum and I don't have time to learn about that . . .I am the same, but I will help as soon as I have some spare time.
The plugin 24h 48h 72h does not appear anywhere . . . I cannot find it even though it is installed.
So if this is important to you then maybe do some tests and verify you can see it before changing the theme.
Hi Melodie
Sorry for the wait, I was busy.
I think it looks good, except for these few points.
1. Difference between icons 'New posts' (dark orange) and 'No New posts' (light orange) is not pronounced enough. I would maybe use the html background-color: 'lime' which is a bright green for New posts. It is easy to see and complements the orange.
Also, the black borders around the orange icons look a bit 'clunky', they could be made to look more smooth and glassy and 3d.
2. Zooming in on the tabs, I see that the gradient colour is 2 steps red/orange, it would be nicer to use css3 and produce a sort of gradient effect, though not all browsers are html5 and css3 capable. Or change the code to use images for the tabs and then all older browsers will render complex 'artistic tabs'. I prefer to use css tabs rather than images because css loads faster than images.
3. The banner looks ok. The background gradient is ok.
The banner could be enlarged to fill the full page width and blend in and be more integrated..
4. Experiment with thin borders, they can transform a page from unfinished and ordinary to very professional looking.
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #9ce000;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid orange;border-top:20px solid transparent;border-bottom:20px solid transparent}
The result is herea img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}
.windowbg{background-color:#ccebff}
Here is a screenshotdid you see I linked to the sources? SVG and font?Yes, I installed the font on my computer, but it did not display in the svg.
.logo_name{margin-left:0px;/* kjdixo modifications start */border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../header_linuxvillage2.png);background-repeat:no-repeat}
.level1,.level2{padding-top:6px}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 4% 0% 4%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:14px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:4px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}
(http://www.kdworld7.net/smf/Themes/tabs-fun/new-posts3.png)Yes, I installed the font on my computer, but it did not display in the svg.
For now, I have experimented with the original png and the css code.
I fixed the gradient background (946px) + below filled with css coloured background as requested, but it faded to white, which was much too harsh on the eyes.
So I cropped the background gradient to 900px height (not yet bright white, but slightly blue tinted) and used the colour value of the 900th pixel to use as the background colour to the page bottom.
I am keeping all my modifications at the end of style.css in the tabs-fun theme.
Code: [Sélectionner].logo_name{margin-left:0px;/* kjdixo modifications start */border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../header_linuxvillage2.png);background-repeat:no-repeat}
.level1,.level2{padding-top:6px}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 4% 0% 4%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:14px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:4px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}
/* kjdixo modifications start */
.logo_name{margin-left:0px;border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../header_linuxvillage2.png);background-repeat:no-repeat}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 8% 0% 8%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:14px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:6px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}
.title,div#menu a.level2,div#menu span.level2{color:navy}
/* transformed colour of images/tab_bg.jpg using mtPaint */
/* kjdixo modifications start */
.logo_name{margin-left:0px;border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../header_linuxvillage2.png);background-repeat:no-repeat}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
/* a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}*/
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 8% 0% 8%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:14px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:6px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}
.title,div#menu a.level2,div#menu span.level2{color:navy}
/* transformed colour of images/tab_bg.jpg using mtPaint */
/* mtPaint snapshot of zoomed in css web button, then made background transparent, then ImageMagick to create a shadow, then resized with Mirage to (48x48) including background, result is a new images/off.png */
MTPaint: 7.5.7 Creating a Mask from a Single ColourThen I used imageMagick to do 2 steps (see code snippet below):
Pick the colour from the canvas using Ctrl+Left/Right mouse click to store it in colour A & B
Create a new channels using 'Set colour A radius B'
convert.im6 mask3.png -alpha Extract -blur 0x8 -shade 130x30 -alpha On -background gray10 -alpha background -auto-level aqua_shade2.png
convert.im6 mask3.png aqua_shade2.png -compose Softlight -composite aqua_result.png
Then resized to 48x48px..logo_name{margin-left:0px;border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:140px;background-image:url(../../new-header.png);background-repeat:no-repeat}
$ scrot -c -d 5 test-forum-index.png
/* kjdixo modifications start */
.logo_name{margin-left:0px;border:solid 1px white;border-radius:0.5em;margin-top:10px;background-size:cover;min-height:150px;background-image:url(../../new-header.png);background-repeat:no-repeat}
.level1{border-top-left-radius:0.4em;border-top-right-radius:0.4em}
.level2{border-radius:0.2em}
/* resized images/short_bg.jpg and images/short_bg2.jpg to 50px height */
a img[title='New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #ffffb3;border-top:20px solid transparent;border-bottom:20px solid transparent}
/* a img[title='No New Posts']{cursor:pointer;width:0px;height:0px;border-left:40px solid #66cc99;border-top:20px solid transparent;border-bottom:20px solid transparent}*/
.windowbg{background-color:#ccebff}
body{background:url(images/backdrop3.png);background-repeat:repeat-x;padding: 0% 8% 0% 8%;background-color:#f0f6fa}
div.user_info.clearfix{background-color:#ccebff;border-top-left-radius:0.5em;border-top-right-radius:0.5em;height:80px}
div.user_info.clearfix center{font-size:120%;margin-top:10px}
li{background-color:#ccebff}
li.level1,li.level2{background-color:transparent}
div#footerarea.headerpadding.topmargin.clearfix{background-color:#ccebff}
div#bodyarea{background-color:#ccebff;padding:24px 4px 4px 4px}
form,form input,form select{margin-top:0.5em;margin-bottom:0.5em;font-size:120%}
form#search_form{margin-right:15%;margin-top:284px;display:none}
.logo_name h1{display:none}
div#menu a.level1,div#menu span.level1{padding-top:2px;background-color:transparent}
.tall_bg{padding:0px 0px}
#infocenter_login{background-color:#ccebff;border:solid 1px black;border-radius:0.2em}
.title,div#menu a.level2,div#menu span.level2{color:navy}
/* transformed colour of images/tab_bg.jpg using mtPaint */
/* mtPaint snapshot of zoomed in css web button, then made background transparent, then ImageMagick to create a shadow, then resized with Mirage to (48x48) including background, result is a new images/off.png */
div.post_wrapper{background-color:#ccebff}
h5,div.username h4,div.content h3,div.content h4{color:black}
body{line-height:150%}
th{color:white}
a.new_win,li span,li.last span{padding-left:10px}
li.copyright{padding-left:18px}
div#topic_icons.description{height:120px}
span.stats_hour{width:30px}
li.reply_button,li.quote_button,li.notify_button,li.remove_button{background-color:cornsilk;font-size:120%}
.user_info {
color: orange;
}
.user_info a {
color: green;
}
LinuxVillage » LinuxVillage welcome » Rules and life of the forum » Répondre ( Re : Turning point for Linuxvillage and it's forum? )
Posté par: kjdixo le: 21 novembre 2015 à 20:40:54 :1, I think that your orange / green text is too small, making it difficult to read.
I saw your orange/green plugin effect.
I can do that in the theme css if you want.
I think that the line of user info text is too small, it should be a bigger font and moved away from the yellow tabs, the dropdown lists sometimes cover it, which is not good.
1. I have to be careful here because this is one of the cases where the logged in and logged out interfaces are both affected by the same bit of css code.
Posté par: melodie le: le: 23 novembre 2015 à 02:07:09 :
#linktree has a padding-top 54px, and " .user_info clearfix" has a height of 80px, which makes the space above the breadcrumbs still quite empty.
div.user_info.clearfix center:after{content:' - please login or register';color:green}
span.ie6_header:after{content:' with username, password and session length'}
To display that bit of text in french I would have to find where to modify the PHP code somewhere.div.post_wrapper {
border: 2px solid #d0d0e0;
margin-top: 4px;
border-radius: 1em;
padding: 8px;
}
div.user_info.clearfix center {
/* font-size: 120%; */
font-size: 105%;
margin-top: 10px;
}
blockquote {
border: 1px solid #BABABF;
}
instead of:
blockquote {
...
/* border: 1px solid #000; */
...
}
.quoteheader, .codeheader {
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
width: 100%;
color: #666; // instead of #000
}
code {
color: #000;
background-color: #DDD;
display: block;
font-family: "courier new","times new roman",monospace;
font-size: x-medium; //instead of x-small
line-height: 1.5em; // instead of 1.3em
border: 1.5px solid #BABABF; /instead of 1px solid #000
margin: 1px auto;
padding: 1px;
width: 99%;
overflow: auto;
white-space: nowrap;
max-height: 24em;
}
Posté par: kjdixo le: Aujourd'hui à 11:18:15
The only problem might be: . . . . . . .Code: [Sélectionner]div.user_info.clearfix center:after{content:' - please login or register';color:green}
. . . . . . . . .To display that bit of text in french I would have to find where to modify the PHP code somewhere.
span.ie6_header:after{content:' with username, password and session length'}
// kjdixo modification 2015-11-24-1900 it removes unecessary clutter from the login screen
// global (works for all languages and overrides the default theme text for 'quick_login_dec').
$txt['quick_login_dec'] = '';
?>
Bienvenue, Invité Merci de vous connecter ou de vous inscrire.
Do you have any idea why the word "Bienvenue" is clearly smaller than the other words on the line? I seem unable to see anything which could explain it.
It seems the green looks bigger (color vibration). What about you do reverse? . . . .
Wouldn't it look better? (I know, I'm probably knitpicking… :p )
I understand that it makes you feel to create a full theme from the ground up. :-(No [:-( . . . what makes you think that?], I am quite happy and don't care either way.
I noticed while testing, that when not logged in, the ".user_info" line have the two first words which suddenly aren't on the same horizontal line than the rest of the sentence.Yes I agree, I noticed that too and I spent quite a while trying to fix it, but 1px +/- changes make it too high or too low. The two lines cannot be made to line up by adjusting the top/bottom margin offsets. I think it is something to do with the font magnification percentages.
when users are logged out, I would like them to be able to see if there are new messagesI have not found out how to do that yet.
when logged out, the whole sentence is aligned left, while when logged in the whole sentence that replaces it is centered, which I find being much better.Yes that should be easy and it is good that you mentioned it whilst talking about #5 {above).
I look forward to your new improvementsSorry the comments came first.
<Oldiesmann> SMF doesn't track whether there are new posts for guests or not
<Oldiesmann> So there's no way to do that really
Line 464
//--------------------------------------------------------------------------------------------------------------------------------
echo ''; // this once echoed the line commented out below.
// echo '<center>', $txt['hello_guest'], ' <strong>', $txt['guest'], '</strong></center>'; this line has closing tags so can be completely removed
// kjdixo modification 2015-11-25-1930 moved the line above to inside of <form></form> tags on line 530
//--------------------------------------------------------------------------------------------------------------------------------
Line 517
//---------------------------------------------------------------------------------------------------------------------------------
// kjdixo modification 2015-11-25-1930
// line 530 align="center" removed from <div>, now need to add </center> after </div>
// moved welcome inside form
// Made sure <center><div ... ><form ...> closed with </form></div></center>
// Validated new HTML
//---------------------------------------------------------------------------------------------------------------------------------
else
{
echo '<center><div ', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
', $txt['hello_guest'], ' ', $txt['guest'], '
' , $txt['login_or_register'], '<br />
<input type="text" name="user" size="10" />
<input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">', $txt['one_hour'], '</option>
<option value="1440">', $txt['one_day'], '</option>
<option value="10080">', $txt['one_week'], '</option>
<option value="43200">', $txt['one_month'], '</option>
<option value="-1" selected="selected">', $txt['forever'], '</option>
</select>
<input type="submit" value="', $txt['login'], '" /><br />
', $txt['quick_login_dec'];
if (!empty($modSettings['enableOpenID']))
echo'
<br />
<input type="text" name="openid_url" id="openid_url" size="25" class="openid_login" />';
echo '
<input type="hidden" name="hash_passwrd" value="" />
</form></div></center>';
}
I was very busy today (and tired).
I will do some more as soon as possible.
Sorry for the delay.
Re : Turning point for Linuxvillage and it's forum?
« Réponse #61 le: 25 novembre 2015 à 14:17:02 »
And one detail we talked about several days ago, to not be forgotten : when users are logged out, I would like them to be able to see if there are new messages. While I'm at it, I don't understand how the green + of the message bubbles work : is it supposed to show "new message" or to show "no new message" ? It's unclear to me. How do we know which is what? Is there a tootip for it?
. . . have you seen the last Bento ISO mini which came out? (Just finished a new one, even lighter and smaller which I will need to test now).
Here is the very last one, 341MB, works on machines having a 64bits processor.
http://phillw.net/isos/bento-ubuntu-remix/bento-sushi-14.04.3-5-x86_64.iso
http://phillw.net/isos/bento-ubuntu-remix/bento-sushi-14.04.3-5-x86_64.iso.md5sum
I downloaded from your link. Thank you.
I am not a great fan of Cinnamon or Gnome3, I would probably like Mate better
Enjoy your vacation!Portugal - Algarve
img[id='upshrink_ic']{cursor:pointer;width:0px;height:0px;border-left:20px solid #0f0;border-top:10px solid transparent;border-bottom:10px solid transparent}
What do you think Melodie?
.user_info {
color: #41A700;
font-family: Dejavu Sans;
}
.user_info a {
color: #025797;
font-family: Dejavu Sans;
font-weight: bold;
font-variant: small-caps;
}
Validating CSS Style Sheets
If you use CSS in your document, you can check it using the W3C CSS Validation Service."
http://jigsaw.w3.org/css-validator/
I added your css code to the end of style.css in the tabs-fun theme.
I also checked it validates ok.
Did you want to apply the deja vu sans font everywhere, or only on user_info?
Stylish is often compared to Greasemonkey, another Mozilla extension that allows client-side manipulation of web pages.
<link rel="stylesheet" type="text/css" href="http://www.kdworld7.net/smf/Themes/tabs-fun/style.css?rc1" />
<link rel="stylesheet" type="text/css" href="http://www.kdworld7.net/smf/Themes/default/css/print.css?rc1" media="print" />
<link rel="stylesheet" type="text/css" href="http://www.kdworld7.net/smf/Themes/default/css/ff.css" />
<link rel="stylesheet" type="text/css" id="compat_css" href="http://www.kdworld7.net/smf/Themes/default/css/compat.css" />
.search_box
{
position: absolute;
top: 25px;
right: 15px;
}
.user_info
{
text-align: center;
padding: 5px 0 5px 0;
color: #004272;
}
.user_info a
{
color: #004272;
}
/* DropDownMenu */
I forgot to say: after I posted, the page didn't return to the post.That might be fixable by changing a setting in the forum admin. I will look tomorrow.
Melodie
Recent Messages on Index page:
You need to go into ADMIN
To display 100 recent posts at bottom of index page
div.post_wrapper{overflow:hidden}
. . . the whole range of buttons at the bottom of the last post is missing (just the texts, but not in buttons).Those buttons were removed at the beginning of the modifications, when I removed the red and black buttons that were part of the tabs-fun theme.
Also I think I fixed the avatar alignment problem.
A stroke of genius . . the first thing I tried when I looked at the avatar alignment problem.
I tried the following code in style.css . . .and it worked . . I couldn't believe it, I was expecting it to be really difficult to solve. Also the answer came into my head, I did not hunt for a solution or try lots of things.Code: [Sélectionner]div.post_wrapper{overflow:hidden}
Looks like it is fixed.