News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Modifying header on default theme

Started by EA1DDO, September 20, 2017, 07:07:57 AM

Previous topic - Next topic

EA1DDO

Hi,

I am trying to modify the default theme, mostly the header, to add a picture and remove some stuff.
This is my website:
http://foro.ea1ddo.es/smf/index.php

As you can see, the picture has been added already, but I need to modify the html code.
The question is; What file is hosting next piece of code?


<body>
<div id="wrapper" style="width: 90%">
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">
<a href="http://foro.ea1ddo.es/smf/index.php">Foro Radio Tecnico</a>
</h1>
<img id="upshrink" src="http://foro.ea1ddo.es/smf/Themes/default/images/upshrink.png" alt="*" title="Encoger o expandir encabezado." style="display: none;" />
<img id="smflogo" src="http://foro.ea1ddo.es/smf/Themes/default/images/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />
</div>


There are lots of files and I can´t found where the <body> is hosted.

Thank you

Martin

Gwenwyfar

"It is impossible to communicate with one that does not wish to communicate"

Arantor

Though note that the area covered by your image won't be massively helped by mangling the code in the header because the header background is one huge image...

EA1DDO

Big thank Gwenwyfar. And Arantor.

I´ll try to remove the forum title at the top, because my plan is to get a picture with title on it already, so I don´t need the title at the top anymore.

Regarding the background, I don´t exactly what will be, so far. I am just testing things to get at the end something good enough.

My new forum is more focused in content, not in special effects or stylist. Just things clear, minimalist and a touch of presentation.

I´ll try to modify that file tonight (I can´t use FTP from corporate network where I am actually working).

Thanks

Martin

EA1DDO

The "original" code is quite different !!


<body>';
}

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>';

// the upshrink image, right-floated
echo '
<img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';
echo '
', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '
</div>
<div id="upper_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<div class="user">';


Pipke

Quote from: EA1DDO on September 20, 2017, 04:27:04 PM
The "original" code is quite different !!


<body>';
}

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>';

// the upshrink image, right-floated
echo '
<img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';
echo '
', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '
</div>
<div id="upper_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<div class="user">';



the original is coded in php, the code in your first post is html, also a note i see your forum is at v2.0.9 you should update to v2.0.14 wich is the latest atm.
"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

EA1DDO

Quote from: Pipke on September 20, 2017, 06:00:39 PM
the original is coded in php, the code in your first post is html, also a note i see your forum is at v2.0.9 you should update to v2.0.14 wich is the latest atm.

Hi Pipke, yes, you are right.
I have no idea about PHP, but I use to do modify some code in the past, but this kind of PHP is first time for me.
It seems this PHP "generates" a HTML with those "echo" functions.

Regarding the version, I´ve got yesterday the update notice, but I haven´t done it yet. I though it would easier than it is, and now I am still trying to complete the header modification.

Yesterday I could do something else. The header is looking better.
Actually, I would like to remove or modify some background images from CSS, but I couldn´t so far.

/* the framing graphics */
#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px; 
padding-left: 20px;
}
#header div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -480px;   
display: block;
padding: 5px 20px 1em 0;
}     


Thanks

Gwenwyfar

Quote from: EA1DDO on September 21, 2017, 08:57:30 AM
I have no idea about PHP, but I use to do modify some code in the past, but this kind of PHP is first time for me.
It seems this PHP "generates" a HTML with those "echo" functions.

Regarding the version, I´ve got yesterday the update notice, but I haven´t done it yet. I though it would easier than it is, and now I am still trying to complete the header modification.
Yes, that is right. You should be fine modifying the HTML inside the PHP as long as you don't alter the PHP. Any decent code editor can help you to highlight the syntax.

Quote
Yesterday I could do something else. The header is looking better.
Actually, I would like to remove or modify some background images from CSS, but I couldn´t so far.

/* the framing graphics */
#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px; 
padding-left: 20px;
}
#header div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -480px;   
display: block;
padding: 5px 20px 1em 0;
}     


Thanks
What exactly are you trying to do with the background?
"It is impossible to communicate with one that does not wish to communicate"

EA1DDO

#8
Hi Gwenwyfar,

Quote from: Gwenwyfar on September 21, 2017, 09:09:38 AM

Any decent code editor can help you to highlight the syntax.

I use PSPad mostly. Sometimes Notepad++.

QuoteWhat exactly are you trying to do with the background?

Well, if you have a look how is actually the situation;

http://foro.ea1ddo.es/smf/index.php

There is an background image underneath my banner, like a shadow. You can see it on both sides.
How Can I remove it?

Yesterday I´ve try to remove it doing this:


#header div.frame
{
/* background: url(../images/theme/main_block.png) no-repeat 100% -480px;   */
display: block;
padding: 5px 20px 1em 0;
}


But it haven´t worked as expected.

I´ve even tryed applying "box-shadow" to my image, unssuccessfully.

Thank you

Martin

Gwenwyfar

#9
You could edit the image to remove it, or you can remove the background from #header.frame, like you did, then remove the one on #header and replace it with this:

background: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #b7b7b7;
border-bottom: none;


You could also add a linear-gradient in there if you wish to keep the blue part on top, and some inner box-shadow to mimic the white border area:


background-image: linear-gradient(#c9d7e7 0%, #fff 100px);
box-shadow: 2px 2px 0 #fff inset, -2px 2px 0 #fff inset;
"It is impossible to communicate with one that does not wish to communicate"

EA1DDO

Quote from: Gwenwyfar on September 21, 2017, 04:31:43 PM
You could edit the image to remove it, or you can remove the background from #header.frame, like you did, then remove the one on #header and replace it with this:

You could also add a linear-gradient in there if you wish to keep the blue part on top, and some inner box-shadow to mimic the white border area:


Gwenwyfar, you are a star.
I´ll try your mod tonight.

Thank you

Martin

EA1DDO

Quote from: Gwenwyfar on September 21, 2017, 04:31:43 PM
You could edit the image to remove it, or you can remove the background from #header.frame, like you did, then remove the one on #header and replace it with this:

background: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #b7b7b7;
border-bottom: none;


You could also add a linear-gradient in there if you wish to keep the blue part on top, and some inner box-shadow to mimic the white border area:


background-image: linear-gradient(#c9d7e7 0%, #fff 100px);
box-shadow: 2px 2px 0 #fff inset, -2px 2px 0 #fff inset;


Gwenwyfar, it works perfect !!
The result is as my wish, clean, minimalist and looking nice.
Big thank you.

EA1DDO

Hi Gwenwyfar, all,

Is any way to get these modifications into a package or mod?

I am asking because I am afraid every time I update SMF could overwrite a new version of the template and CSS files and remove all the work done.

I know I can modify the files everytime after a mayor upgrade, but if there is an easier or automatic way to do it, it is wellcome.

Thank you

Martin

Arantor

I doubt there would be a change to 2.0 and if you updated 2.1 you'd have to totally redo it anyway because everything is different in 2.1's theme.

Advertisement: