News:

SMF 2.1.3 has been released! Take it for a spin! Read more.

Main Menu

Flatline 2.1

Started by TwitchisMental, September 11, 2021, 02:40:16 PM

Previous topic - Next topic

iqbalresources

Quote from: TwitchisMental on August 16, 2022, 02:34:08 PM
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>


thank you!  :)

TwitchisMental

Quote from: iqbalresources on August 16, 2022, 02:54:32 PM
Quote from: TwitchisMental on August 16, 2022, 02:34:08 PM
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>


thank you!  :)
You're welcome :).
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

TwitchisMental

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.
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

iqbalresources

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.


TwitchisMental

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.
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

iqbalresources


iqbalresources

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

TwitchisMental

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.
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

iqbalresources

Quote from: TwitchisMental on August 18, 2022, 02:29:38 PM
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.

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.  :)

iqbalresources

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


but to be honest, u might have better idea. i don't have any problem to follow. no problem  :)

iqbalresources

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;
}

Dzonny

Can you provide a URL so we can see it, as we don't all have that specific theme installed :)

iqbalresources

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.  ;)

Dzonny

I just saw that you have two background elements in your code. You should remove first one.

iqbalresources

u mean this one?

background:#d2d2d2
done remove. and image still not appear.  :'(

i tried remove this too

background: #e9eef2;
same too.  :'(

Dzonny

Remove both of those and use:
background-image: url(../images/background.png);

iqbalresources

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.  :'(

Dzonny

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...

iqbalresources

the path is correct.  ;)

yup. i'm too thinking some tweak might able to 'unhide' that image. let me try as per your suggestion.

iqbalresources

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

Advertisement: