Link to the theme (https://custom.simplemachines.org/index.php?theme=2968)
(https://custom.simplemachines.org/index.php?action=download;theme=2968;attach=275172;image;thumb)
Flatline
Flatline is a multicolor flat and clean SMF theme.
Features :
Flat Style
Multiple Color Options
Slick Header
Slick Board Index
Author : TwitchisMental
(https://img.shields.io/badge/license-MIT-blue)(https://img.shields.io/badge/SMF-2.1-blue)
Screenshots :
(https://i.ibb.co/SxcVrGg/flblueindextop.png) (https://ibb.co/SxcVrGg)
Version History -
1.1
Bug Fix : The category description will now adjust based on how long the category title is.
Bug Fix : Fixed the menu not showing for mobile.
Bug Fix : Fixed an HTML validation issue with the cat desc.
Adjustment : Added box-shadow to the numbers in the top menu and main menu.
1.2
Update : Updated to work with SMF 2.1.0
Feature Added : Readded the time/date and news sections.
1.2.1
Update : Updated for SMF 2.1.3
Adjustment: Adjusted some link colors in posts and Admin CP.
Adjustment: Adjusted News&Date section to flow better.
1.2.2
Updated for SMF 2.1.4 and the Attachment UI changes.
Adjustment: Adjusted the background colors for various moderation specific styles.
Adjustment: Added background color to the admin menu and generic menu for blue. Other colors already had the background color.
Adjustment: Adjusted the new post indicator colors and made the text bold for legibility.
Nice looking theme!
Good job :)
Very cool yo!
Interesting. It looks like Dziner Studio's Silent Wave combined with phpBB Prosilver.
Quote from: Antechinus on September 11, 2021, 04:35:37 PMInteresting. It looks like Dziner Studio's Silent Wave combined with phpBB Prosilver.
The border around the category section,info center etc was inspired by Prosilver, nice catch there :). Played around with making a theme/style for phpBB and thought the border thing would look good here.(It does) Other than that though its just based on the Flatline version I made for smf 2.0.
Thank you for looking at it :).
I've been playing with phpBB a bit too. It's an interesting change. Frankly I still prefer to work with SMF or Elk, but having to do things a different way, and seeing what other people have done with it, is good for getting more ideas.*
Silent Wave was a nice theme too. If you can remember it you have probably been around SMF far too long. :D It was an early experiment wih "mostly flat design". These days you would probably want to change the typography a bit, but a good mixture of blue and grey always works well.
*Incidentally, I think Christian's Prosilver Dark is easily one of the best themes made for phpBB. Worth a look if you haven't seen it. ;)
Excellent. But I think the forum title and the SMF logo are selfish. I want options that "I" choose!
You can choose your own. The defaults are just placeholders. ;)
For beginners like me... Everything makes it easy! Do not use images in the title!
Quote from: marcosbr on September 11, 2021, 09:40:14 PMExcellent. But I think the forum title and the SMF logo are selfish. I want options that "I" choose!
You can modify the theme in any way you see fit.
Thank you for the feedback.
The question is exactly this...
It is easy for you to change everything, for the "simple mortals" it is more difficult!
That's why no one leaves the original.
Your theme is great. It was just a suggestion!
I love modifying. As far as I know!
Grateful!
Oh very nice, brings back memories when I visited my first forums. Great job :D
Regards!
Quote from: marcosbr on September 11, 2021, 11:26:36 PMWhen you mess with the "look" of the house, the tenants think it's great. As long as you don't touch the "structure"
I have been testing wonderful themes. But they mess too much with certain things...
80% of users are NOT experts.
Look for this audience!
Too much water kills the plant.
REPEATING...
Your theme is excellent. I am referring to themes in GENERAL!
One of the favorite things about SMF is its theme/template system and how easy it is to learn.
I think with two small steps you would get more of what you are looking for in this theme.
Copy the index.template.php file from the "default" theme folder and paste it over the version in the "Flatline" theme folder.
Next copy the settings.template.php file from the "default" theme folder and paste it over the version in the "Flatline" theme folder.
This will bring back any features that were removed. However the header will look different and certain sections will be in different locations. This is a possible solution for you.
I understand what you are trying to say about the default features. Luckily there are enough themes made by many different people that you(or anyone else) do not have to use mine.
Something else to note is that my themes are all under the MIT Open Source license, so you can do whatever you want with it. As far as the knowledge for modifying templates goes, we all have to start somewhere. Why not start by modifying something you like right :)?
I hope this clears up any confusion :).
Quote from: RockLee on September 12, 2021, 11:33:32 AMOh very nice, brings back memories when I visited my first forums. Great job :D
Regards!
Thank you, I am glad you like it.
Quote from: Antechinus on September 11, 2021, 05:11:25 PMI've been playing with phpBB a bit too. It's an interesting change. Frankly I still prefer to work with SMF or Elk, but having to do things a different way, and seeing what other people have done with it, is good for getting more ideas.*
Silent Wave was a nice theme too. If you can remember it you have probably been around SMF far too long. :D It was an early experiment wih "mostly flat design". These days you would probably want to change the typography a bit, but a good mixture of blue and grey always works well.
*Incidentally, I think Christian's Prosilver Dark is easily one of the best themes made for phpBB. Worth a look if you haven't seen it. ;)
phpBB is different for sure, but it was fun learning. As far the Silent Wave theme, that was the one with the water drop in the header correct? If so that was a good theme.
I also agree that Prosilver Dark is one of the best overall themes for phpBB.
i've split the posts out of this one to clean it up and keep it on topic about your theme
keep up the good work TwitchisMental
New version has been uploaded. 1.1
1.1
Bug Fix : The category description will now adjust based on how long the category title is.
Adjustment : Added box-shadow to the numbers in the top menu and main menu.
Hello. I like your theme, especially the color changer. I installed it on my test board but when I use it on my mobile phone or a smaller tablet there is no mobile menu at all.
mobile.menu.jpg
Quote from: RML on October 23, 2021, 02:49:39 AMHello. I like your theme, especially the color changer. I installed it on my test board but when I use it on my mobile phone or a smaller tablet there is no mobile menu at all.
mobile.menu.jpg
Thank you for reporting this bug. I will get this fixed ASAP.
I have one or two others to work out aswell.
Edit: The fixed version has been uploaded.
Many thanks TwitchisMental.
Version 1.2 has been uploaded and ready for download.
1.2
Update : Updated to work with SMF 2.1.0
Feature Added : Readded the time/date and news sections.
flatlinebi.png
Hello. I have a problem again with this theme. I upgraded my 2.1 RC3 site to 2.1.1. Before the upgrade I deleted all themes and mods. After the upgrade installed the latest version of your theme and it doesn't look good. (On a clean 2.1.1 install no such problem with your theme but I don't really want to do that.) Is there any solution for this problem?
Flatline.png
Quote from: RML on February 21, 2022, 10:58:11 AMHello. I have a problem again with this theme. I upgraded my 2.1 RC3 site to 2.1.1. Before the upgrade I deleted all themes and mods. After the upgrade installed the latest version of your theme and it doesn't look good. (On a clean 2.1.1 install no such problem with your theme but I don't really want to do that.) Is there any solution for this problem?
Flatline.png
If it is working without issue on a clean install, that leads me to believe this is being caused by a mod or something else.
Do you have a link to the forum ?
As I said I uninstalled all themes and mods before upgrading so there was no any mods installed when I upgreded the forum so it can't cause by any mod. In the meantime, I noticed that if I log out and see the forum as a guest, the situation is even worse.
Flatline2.png
Link to my forum:
https://board.missyforum.info/index.php
You can log in with guest user name and password.
Just wondering: you css is minified. Was this minified from 'before' the upgrade?
You may want to check your css (just to be sure) and switch the option to Minify css off
Then hard refresh the page (clear the cache)
Admin > Configuration > Features and options > General
Minimize CSS and JavaScript files > switch off
Quote from: @rjen on February 22, 2022, 03:09:14 AMJust wondering: you css is minified. Was this minified from 'before' the upgrade?
Yes, it was. Now I unchecked it, cleard the casche, cleard all the cookies and cashe of my browser too but it didn't help.
Found it.
There is an issue with the theme: if the news is not showing on the main page, the div class="newsandtime" is not closed properly.
Go to Admin > Configuration > Current theme
then choose option: "Enable random news line in the forum header" and you issue will go away..
Index.template.php
find
echo '
<div class="newsandtime">
<div class="row">
<div class="column">
<div class="user">
<time datetime="', smf_gmstrftime('%FT%TZ'), '">', $context['current_time'], '</time>';
if ($context['user']['is_logged'])
echo '
<ul class="unread_links">
<li>
<a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '">', $txt['view_unread_category'], '</a>
</li>
<li>
<a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '">', $txt['unread_replies'], '</a>
</li>
</ul>
</div></div>
<div class="column">';
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']) && !empty($context['random_news_line']))
echo '
<div class="news">
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>
</div>
</div>
</div></div>';
// The main content should go here.
replace with
echo '
<div class="newsandtime">
<div class="row">
<div class="column">
<div class="user">
<time datetime="', smf_gmstrftime('%FT%TZ'), '">', $context['current_time'], '</time>';
if ($context['user']['is_logged'])
echo '
<ul class="unread_links">
<li>
<a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '">', $txt['view_unread_category'], '</a>
</li>
<li>
<a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '">', $txt['unread_replies'], '</a>
</li>
</ul>
</div>
</div>';
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']) && !empty($context['random_news_line'])) {
echo '
<div class="column">
<div class="news">
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>
</div>
</div>';
}
echo '
</div>
</div>';
// The main content should go here.
Many thanks for your help
@rjen. It worked.
Sorry for bother you again but it solved the problem only for logged in users. This is what guests see.
Flatline3.png
It's a bug in the theme, to fix:
index.template.php
if (!empty($settings['enable_news']) && !empty($context['random_news_line']))
echo '
<div class="news">
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>
</div>
</div>
</div></div>';if (!empty($settings['enable_news']) && !empty($context['random_news_line']))
echo '
<div class="news">
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>
</div>';
echo '
</div>
</div></div>';
I believe that is what I already wrote?
What fix did you apply?
Your fix is more complete for sure, I missed your reply.
Btw the theme is not marked for 2.1.1, is that a mistake? Just noticed none are marked for it so just no changes in the themes, they should work just fine :)
Actually, my fix was incomplete: there is indeed another issue due to user being guest...
Let me post the complete fix...
find
echo '
<div class="newsandtime">
<div class="row">
<div class="column">
<div class="user">
<time datetime="', smf_gmstrftime('%FT%TZ'), '">', $context['current_time'], '</time>';
if ($context['user']['is_logged'])
echo '
<ul class="unread_links">
<li>
<a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '">', $txt['view_unread_category'], '</a>
</li>
<li>
<a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '">', $txt['unread_replies'], '</a>
</li>
</ul>
</div></div>
<div class="column">';
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']) && !empty($context['random_news_line']))
echo '
<div class="news">
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>
</div>
</div>
</div></div>';
// The main content should go here.
replace with
echo '
<div class="newsandtime">
<div class="row">
<div class="column">
<div class="user">
<time datetime="', smf_gmstrftime('%FT%TZ'), '">', $context['current_time'], '</time>';
if ($context['user']['is_logged']) {
echo '
<ul class="unread_links">
<li>
<a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '">', $txt['view_unread_category'], '</a>
</li>
<li>
<a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '">', $txt['unread_replies'], '</a>
</li>
</ul>';
}
echo '
</div>
</div>';
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']) && !empty($context['random_news_line'])) {
echo '
<div class="column">
<div class="news">
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>
</div>
</div>';
}
echo '
</div>
</div>';
// The main content should go here.
Looks like
@rjen has already resolved this issue.
I have uploaded the fixed version. Sorry about that.
Thank you very much
@rjen, now everything is perfect.
Hi
i'm working to open up my community forum later on, and at the moment still build up smf on my localhost. flatline simply a beautiful theme. for my community, i'm intend my forum users on the same page, means everyone check in into the very same place.Thus, may i know how can i remove the color selector,located on top left? thank you
(https://postimg.cc/zVQWk8Fc)
Quote from: iqbalresources on August 16, 2022, 02:11:21 PMHi
i'm working to open up my community forum later on, and at the moment still build up smf on my localhost. flatline simply a beautiful theme. for my community, i'm intend my forum users on the same page, means everyone check in into the very same place.Thus, may i know how can i remove the color selector,located on top left? thank you
Open index.template.php in your favorite editor.
Find line 369
echo '
<div id="wrapper">
<div id="header">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/custom/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
</h1>
<div class="styleselect">
<a class="red" href="', $scripturl, '?variant=red" title="'.$txt['colorred'].'"></a>
<a class="blue" href="', $scripturl, '?variant=blue" title="'.$txt['colorblue'].'"></a>
<a class="green" href="', $scripturl, '?variant=green" title="'.$txt['colorgreen'].'"></a>
<a class="purple" href="', $scripturl, '?variant=purple" title="'.$txt['colorpurple'].'"></a>
<a class="turquoise" href="', $scripturl, '?variant=turquoise" title="'.$txt['colorturquoise'].'"></a>
</div>
</div>Replace With
echo '
<div id="wrapper">
<div id="header">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/custom/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
</h1>
</div>
Quote from: TwitchisMental on August 16, 2022, 02:34:08 PMQuote from: iqbalresources on August 16, 2022, 02:11:21 PMHi
i'm working to open up my community forum later on, and at the moment still build up smf on my localhost. flatline simply a beautiful theme. for my community, i'm intend my forum users on the same page, means everyone check in into the very same place.Thus, may i know how can i remove the color selector,located on top left? thank you
Open index.template.php in your favorite editor.
Find line 369
echo '
<div id="wrapper">
<div id="header">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/custom/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
</h1>
<div class="styleselect">
<a class="red" href="', $scripturl, '?variant=red" title="'.$txt['colorred'].'"></a>
<a class="blue" href="', $scripturl, '?variant=blue" title="'.$txt['colorblue'].'"></a>
<a class="green" href="', $scripturl, '?variant=green" title="'.$txt['colorgreen'].'"></a>
<a class="purple" href="', $scripturl, '?variant=purple" title="'.$txt['colorpurple'].'"></a>
<a class="turquoise" href="', $scripturl, '?variant=turquoise" title="'.$txt['colorturquoise'].'"></a>
</div>
</div>
Replace With
echo '
<div id="wrapper">
<div id="header">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/custom/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
</h1>
</div>
thank you! :)
Quote from: iqbalresources on August 16, 2022, 02:54:32 PMQuote from: TwitchisMental on August 16, 2022, 02:34:08 PMQuote from: iqbalresources on August 16, 2022, 02:11:21 PMHi
i'm working to open up my community forum later on, and at the moment still build up smf on my localhost. flatline simply a beautiful theme. for my community, i'm intend my forum users on the same page, means everyone check in into the very same place.Thus, may i know how can i remove the color selector,located on top left? thank you
Open index.template.php in your favorite editor.
Find line 369
echo '
<div id="wrapper">
<div id="header">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/custom/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
</h1>
<div class="styleselect">
<a class="red" href="', $scripturl, '?variant=red" title="'.$txt['colorred'].'"></a>
<a class="blue" href="', $scripturl, '?variant=blue" title="'.$txt['colorblue'].'"></a>
<a class="green" href="', $scripturl, '?variant=green" title="'.$txt['colorgreen'].'"></a>
<a class="purple" href="', $scripturl, '?variant=purple" title="'.$txt['colorpurple'].'"></a>
<a class="turquoise" href="', $scripturl, '?variant=turquoise" title="'.$txt['colorturquoise'].'"></a>
</div>
</div>
Replace With
echo '
<div id="wrapper">
<div id="header">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/custom/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
</h1>
</div>
thank you! :)
You're welcome :).
Quote from: iqbalresources on August 16, 2022, 04:28:56 PMone more thing. how do i change the font color of 'my community'? . tqvm
Open index.css
Find Line 1165
h1.forumtitle a {
color: #a85400;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}Change color: #a85400; to whatever you'd like it to be.
One more thing. how can i make 'link' words (thread title) bold? (in attachment, the words shown i.e 'saja'). i've tried font-weight : bold; , but still couldn't. thank you.
(https://postimg.cc/WFxYtnm1)
I am not seeing an attachment.
With that said it is bold by default. If you want it bigger, it would be best to change the font-size.
Find line 3715
h3.catbg {
overflow: hidden;
font-size: 1.1em;
font-family: "Tahoma", sans-serif;
}
Change font-size to whatever you'd like.
thank you! ;)
Hi
May i know if flatline have option tu put facebook, twitter and github (not sure) icon on board. similar like features on Bend. thank you
Quote from: iqbalresources on August 18, 2022, 01:03:53 PMHi
May i know if flatline have option tu put facebook, twitter and github (not sure) icon on board. similar like features on Bend. thank you
Unfortunately, Flatline does not have that feature. I simply remade the SMF 2.0 version for SMF 2.1.
Where would you want to put the social icons ? I might be able to whip something up for you or anyone to add to it.
Quote from: TwitchisMental on August 18, 2022, 02:29:38 PMQuote from: iqbalresources on August 18, 2022, 01:03:53 PMHi
May i know if flatline have option tu put facebook, twitter and github (not sure) icon on board. similar like features on Bend. thank you
Unfortunately, Flatline does not have that feature. I simply remade the SMF 2.0 version for SMF 2.1.
Where would you want to put the social icons ? I might be able to whip something up for you or anyone to add to it.
owh. too bad :( . eh? really appreciate if u can help. still thinking it is might better to have social icon. just in case website down, would be able to inform everyone. :)
I was thinking at the below header , the red spot. the menu button on the left side, and social icon on the right side. pretty much balance i guess. :D
(https://i.postimg.cc/30hn9qpq/iconnn.png) (https://postimg.cc/30hn9qpq)
but to be honest, u might have better idea. i don't have any problem to follow. no problem :)
Hi
i was thinking to modify the index.css (blue color) into maroon color. and planning tu put background image. But that background didn't appear. is it something related with the code that i might wrongly displace?. before this, i'm adjust in index_red, and it worked. but rite now, not sure about index.css ;D
body {
background:#d2d2d2 url(../images/background.png);
background-repeat: repeat;
background: #e9eef2;
font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
color: #4d4d4d;
display: flex;
flex-direction: column;
min-height: 100vh;
}
Can you provide a URL so we can see it, as we don't all have that specific theme installed :)
err..it's okay brother. i'm playing around localhost at the moment. may start acquiring hosting web next month, if possible. ;D . Normally i'm playing around index_red (the closest to the maroon). But i'm thinking to disable color selection, and straight re-build up maroon color thru modifying index.css (default blue) :)
still thinking that i'm may wrongly displace the quoted code. no worries, theme author might help me pin point the exact problem. ;)
I just saw that you have two background elements in your code. You should remove first one.
u mean this one?
background:#d2d2d2
done remove. and image still not appear. :'(
i tried remove this too
background: #e9eef2;
same too. :'(
Remove both of those and use:
background-image: url(../images/background.png);
done remove both code, and use as ur suggestion.
body {
background-image : url(../images/background.png);
background-repeat: repeat;
font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
color: #4d4d4d;
display: flex;
flex-direction: column;
min-height: 100vh;
}
Still the same unfortunately. :'(
Are you sure that the image path is correct? Also are you sure it's not showing, maybe you just can't see it, maybe try to tweak it a little with:
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Again, it's hard to help more without actual url, so just throwing some suggestions here...
the path is correct. ;)
yup. i'm too thinking some tweak might able to 'unhide' that image. let me try as per your suggestion.
Quote from: Dzonny on August 19, 2022, 08:56:36 AMAre you sure that the image path is correct? Also are you sure it's not showing, maybe you just can't see it, maybe try to tweak it a little with:
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Again, it's hard to help more without actual url, so just throwing some suggestions here...
succeed!. image successfully appeared. stumbled upon the code at the bottom section of the index.css. :D
Hi
may i know, how can i change the color of the thread's title font in the board index? (testing stuff). I've been looking for the code's dark grey color, but still couldn't find it. :)
(https://i.postimg.cc/3kGxX4wq/thread.png) (https://postimg.cc/3kGxX4wq)
Quote from: iqbalresources on August 21, 2022, 05:10:01 PMHi
may i know, how can i change the color of the thread's title font in the board index? (testing stuff). I've been looking for the code's dark grey color, but still couldn't find it. :)
(https://i.postimg.cc/3kGxX4wq/thread.png) (https://postimg.cc/3kGxX4wq)
It may help you in the future to use your web browsers inspection tool to find the class you are looking for.
In this case the font color is being controlled by the h1,h2,h3,h4,h5,h6 section of index.css (Line 239)
If you want to change that specific title go to line 4187
.display_title {
font-weight: normal;
font-size: 26px;
margin-bottom: 0.25em;
line-height: 1.05em;
overflow-wrap: break-word;
}Add this to the bottom and change it to whatever color you would like -
color: #000;End Result -
.display_title {
font-weight: normal;
font-size: 26px;
margin-bottom: 0.25em;
line-height: 1.05em;
overflow-wrap: break-word;
color: #000;
}
Quote from: TwitchisMental on August 21, 2022, 05:59:45 PMQuote from: iqbalresources on August 21, 2022, 05:10:01 PMHi
may i know, how can i change the color of the thread's title font in the board index? (testing stuff). I've been looking for the code's dark grey color, but still couldn't find it. :)
(https://i.postimg.cc/3kGxX4wq/thread.png) (https://postimg.cc/3kGxX4wq)
It may help you in the future to use your web browsers inspection tool to find the class you are looking for.
In this case the font color is being controlled by the h1,h2,h3,h4,h5,h6 section of index.css (Line 239)
If you want to change that specific title go to line 4187
.display_title {
font-weight: normal;
font-size: 26px;
margin-bottom: 0.25em;
line-height: 1.05em;
overflow-wrap: break-word;
}
Add this to the bottom and change it to whatever color you would like -
color: #000;
End Result -
.display_title {
font-weight: normal;
font-size: 26px;
margin-bottom: 0.25em;
line-height: 1.05em;
overflow-wrap: break-word;
color: #000;
}
thank you! :)
Hi
if u could possibly help me, how could i change the font color of required information?. I've been looking around index.css, but still couldn't find it. not sure which code. thank you :)
(https://i.postimg.cc/qhvYhmNT/registration.png) (https://postimg.cc/qhvYhmNT)
Quote from: iqbalresources on August 26, 2022, 11:30:32 AMHi
if u could possibly help me, how could i change the font color of required information?. I've been looking around index.css, but still couldn't find it. not sure which code. thank you :)
(https://i.postimg.cc/qhvYhmNT/registration.png) (https://postimg.cc/qhvYhmNT)
open the index.css and go to line 3765
h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg {
background: none;
color: rgb(85, 85, 85);
font-family: "Tahoma", sans-serif;
font-weight: bold;
overflow: hidden;
padding: 6px 12px 5px 12px;
text-shadow: none;
}Change the color to whatever you'd like.
Thank you! ;)
New Version Uploaded -
1.2.1
Update : Updated for SMF 2.1.3
Adjustment: Adjusted some link colors in posts and Admin CP.
Adjustment: Adjusted News&Date section to flow better.
New Version Uploaded:
1.2.2
Updated for SMF 2.1.4 and the Attachment UI changes.
Adjustment: Adjusted the background colors for various moderation specific styles.
Adjustment: Added background color to the admin menu and generic menu for the blue style. Other colors already had the background color.
Adjustment: Adjusted the new post indicator colors and bolded the text for legibility.
Is there a simple way an ignoramus like me can replace the word FLATLINE with other words or an image? I know NOTHING about coding except that I can destroy a complete program by touching ANYTHING in the code.
Thank you for any and all help.
Verla Kay
Quote from: VerlaKay on July 07, 2023, 10:55:47 PMIs there a simple way an ignoramus like me can replace the word FLATLINE with other words or an image? I know NOTHING about coding except that I can destroy a complete program by touching ANYTHING in the code.
Thank you for any and all help.
Verla Kay
The easiest way to do this would be replacing the logo.png file with your own logo.png.
It can be found in Flatline>images>custom .
Thank you very much for your super speedy response. I'll see if I can find that file. The forum is hosted on SiteGround....
I found the file and uploaded my image to the correct place on the server, but it's still showing a broken question mark for the image. Is there a specific size that the image needs to be to show up on the header?
Quote from: VerlaKay on July 08, 2023, 05:56:28 PMI found the file and uploaded my image to the correct place on the server, but it's still showing a broken question mark for the image. Is there a specific size that the image needs to be to show up on the header?
No specific size needed.
I would first try to do a hard refresh (control key + f5) .
If it is still showing a question mark, that usually means the file is not found. I have registered on your forum to investigate further, but it seems I will need approval first.
Oops! You registered for the wrong forum. The one with the problem is
https://www.scbwidiscussionboards.org/index.php
Be sure to put in the reason for registering that you are helping Verla Kay with the FlatLine image so the other Admins won't block, delete or ban you because you aren't associated with the Kidlit industry!
Okay done and done.
It's UP! Thank you, thank you, THANK YOU!
Quote from: VerlaKay on July 08, 2023, 08:02:42 PMIt's UP! Thank you, thank you, THANK YOU!
I have not done anything, I am still awaiting admin approval. Sounds like it may have just been a cache issue.
Either way I am happy to hear that the issue is resolved :).
Well, without your excellent information on how to find the file and which file needed to be replaced, I would not have been able to do this, so thanks are still appropriate. :-)
Some people on my forum have visual impairment and have requested a darker color for the text on the site. Is there an easy way for me to turn the text to all black, for instance. I know I would probably need to go into the code of the template and change the color to #000000, but I am TERRIFIED of fooling around in the code! All I know about codes is that it is EXTREMELY easy to break the entire site by fooling around with it.
Quote from: VerlaKay on July 09, 2023, 07:47:05 PMSome people on my forum have visual impairment and have requested a darker color for the text on the site. Is there an easy way for me to turn the text to all black, for instance. I know I would probably need to go into the code of the template and change the color to #000000, but I am TERRIFIED of fooling around in the code! All I know about codes is that it is EXTREMELY easy to break the entire site by fooling around with it.
The main body text found in index.css would be the one to change
open index.css
Find :
body {
background: #e9eef2;
font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
color: #4d4d4d;
display: flex;
flex-direction: column;
min-height: 100vh;
}Replace :
body {
background: #e9eef2;
font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
color: #000;
display: flex;
flex-direction: column;
min-height: 100vh;
}
Thank you. Please wish me luck.... I might wait until late tonight to attempt this so if I mess things up I'll have time to put it back together before too many people notice what I did....
Quote from: VerlaKay on July 09, 2023, 08:19:28 PMThank you. Please wish me luck.... I might wait until late tonight to attempt this so if I mess things up I'll have time to put it back together before too many people notice what I did....
Backup backup backup :).
Make a copy of the index.css and name it something like index1.css.
So if you mess up, you can delete the bad one and rename the backup to index.css and problem solved :).
If you find that you really, REALLY, don't want to mess with the code for fear of breaking something, any one of us could easily be persuaded to do it for you.
It would be better for you to do it so you learn and Twitch's post about backing up is key.
But like I said, we are available if you need us.
The backup is what I planned to do, but SiteGround says I've used all of my allowed manual saves and when I was logged into their site and tried to delete the existing manual saves, there was no way to do it. Their instructions said to click on the three dots to the right of the backup, then scroll down to the DELETE menu item, which was the fifth thing in the dropdown menu...only there are only four items in the menu. No delete choice. I thought maybe it was because I was on my iPad, not a computer, so I dug out my MacBook laptop and tried from it, but came up with the same problem. No delete option. I hunted "forever" to find a way to contact SiteGround and finally gave up. I'll have to try again today, when, hopefully, they will have their phones manned and their help chats open. It's very frustrating!
I'll try the css copy thing and see if SiteGround will let me do that! ETA Nope. That didn't work, either. Couldn't find any way to duplicate the .css file. I tried using the COPY menu item, and it said the file was copied, but I couldn't find a copy of it anywhere.
Do you have and/or know how to use FTP?
No on the FTP. Finally got ahold of someone at SiteGround and discovered I don't have permission to delete the manual saves because I'm not the "owner" of the site anymore, but just a collaborator. Sarah Baker will have to delete the manual saves when she returns from her vacation on Thursday (I originally created and now run the board for her).
I did it! Got the black #000000 into the code.
THANK YOU for all your help!
Quote from: VerlaKay on July 14, 2023, 06:46:52 PMI did it! Got the black #000000 into the code.
THANK YOU for all your help!
Good to hear :). You're welcome.
Hello
I'm in the midst trying to customize the forum, to make it align with main website themes. So i need to adjust the font and font size of the forum. May i know :
i) how do i customize the font-size of last post column? at least to make the font size similar with the font size of board description
(https://imgur.com/a/AMYfLac)
ii) how do i customize the font size of content? just to make it a little bit bigger
(https://imgur.com/a/hsqJw1a)
Thank you
This is where the inspect tool in your browser comes in quite handy ;).
Quotei) how do i customize the font-size of last post column? at least to make the font size similar with the font size of board description
Find:
.lastpost {
width: 30%;
font-size: 0.9em;
padding-top: 3px;
}Change the font-size: 0.9em; to whatever you wish.
Quoteii) how do i customize the font size of content? just to make it a little bit bigger
Find:
body {
background: #e9eef2;
font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
color: #4d4d4d;
display: flex;
flex-direction: column;
min-height: 100vh;
}Adjust the font: to whatever you would like.
Thank you!. Really appreciate the help.
and may i know, how to customize font color for board titles (in board description), last post and poster (in last column)? . I've tried make some tweak in css, but the color didn't change :
.lastpost {
width: 30%;
font-size: 1em;
font-color: #222222;
padding-top: 3px;
}
1.
Line 4818
.info .subject {
font-weight: 700;
font-size: 1.1em;
color: #3498db;
}
2.
If you mean the link colors in the last post section those are controlled by the a:link class -
Line 4257
a:link {
color: #3498db
}
If you want specifically the last post links to change you can throw this under the .lastpost class.
.lastpost a {
color: whatever color you want;
text-decoration: none;
}
Quote from: TwitchisMental on September 16, 2023, 11:02:15 PM1.
Line 4818
.info .subject {
font-weight: 700;
font-size: 1.1em;
color: #3498db;
}
2.
If you mean the link colors in the last post section those are controlled by the a:link class -
Line 4257
a:link {
color: #3498db
}
If you want specifically the last post links to change you can throw this under the .lastpost class.
.lastpost a {
color: whatever color you want;
text-decoration: none;
}
Thanks! :)
Quote from: TwitchisMental on September 16, 2023, 11:02:34 AMThis is where the inspect tool in your browser comes in quite handy
@iqbalresources - you might want to think about learning a little bit about using that tool. It saves a lot of questions. ;D
Hello
i've been looking the css in index.css, to change color for the bars of Forum Stats and Users online in Info Center, but couldn't find it.
(https://imgur.com/a/CHkB4It)
So i tried to look thru inspect and view source, to find any hint that can help me find the route to the css, but still no avail.
May i know? where could i find the css code?, so i could change the color for both bars
tqvm
Line 4775
h4.subbg, .subbg {
background: #2c3e50;
color: #fcfcfc;
text-shadow: 2px 2px 2px rgba(0,0,0,.2);
font-family: "Tahoma", sans-serif;
font-weight: bold;
overflow: hidden;
padding: 6px 12px 5px 12px;
}
Hey there, been using this theme for a while and this is the first time I am having some trouble .
I am using the blue theme and my admin and moderation page only show html on white page , when i change the color to any other, it works as it should. Do you have any idea what should I do?
TIA
That is very strange the first thing I would do is just try replacing all of the theme files. Does this happen with any other theme?