Trying to change header

@perrie
9 years ago
435 posts

I would like to change the header to a very simple type. Just trying to recreate what I have which looks like this:
But I would move the "speak your mind" to under the name of the group.
Is there an easy way to do that, or do I have to make up a template and import it? I was thinking that since I would put it where the Ninga name is, that I could just replace it with mine and change the color to match.

updated by @perrie: 07/12/15 08:20:24AM

@soaringeagle
9 years ago
3,304 posts

edit header.tpl
u might need a lil css too

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@perrie
9 years ago
435 posts

That is what I was afraid of.

@soaringeagle
9 years ago
3,304 posts

why its very simple what you want todo

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

Strumelia
@strumelia
9 years ago
3,603 posts

Perrie, isn't the "ninja name" in your header/banner simply an image file (.jpg or .png) placed in the current header banner? I think it may be called "logo".
I made a new .jpg the same general dimensions as the ningja image file, of my network logo, and I gave it the same name as the ninja logo file, and uploaded it to replace the ninja logo image in my banner. I may have even gone into my server via Filezilla and manually replaced the "logo" image file with my own, of the same name. I think it was in my active skin's "image" folder. Then I refreshed the cahce including the checkbox for 'icons'...and there it was. I also copied the color # into my skin's "style/CSS" tab for the 'header bckgrnd'.
If you use firefox, there's a handy little eyedropper plugin called Colorpicker so you click on any colored object or area on your screen and it tells you what that specific color # code is.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@soaringeagle
9 years ago
3,304 posts

u go into skin settingsd . images upload the new logo save check the checkbox, save
if you want additional text to the right of the image find the liogo code in header.tpl add add text here
you might need to play around with it see how it looks on mobile, maybe even hide it on mobile

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@perrie
9 years ago
435 posts

Thanks Lisa for a more detailed description, (and thanks SE for trying, but I don't have much coding knowledge). I thought it would just be easy as to type into the code, (if I knew where) the font and color of the logo, since it really isn't a true logo (sans picture), but this is another route to go.

I see I have a long way to go with my learning curve. I am not using filezilla just the Jamroom server, so I would think that might make things easier.

Anywho, thanks again!
updated by @perrie: 06/07/15 11:25:05PM

@soaringeagle
9 years ago
3,304 posts

you can remove the logo code from the template, and replace it with text an h1 tag or something theres no need todo it in filerzilla unless your createinga custom temolate instead simply edit the existing template in the skin template editor

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@soaringeagle
9 years ago
3,304 posts

without trying this out heres the default header template code

{jrCore_include template="meta.tpl"}

<body>

{if jrCore_is_mobile_device()}
    {jrCore_include template="header_menu_mobile.tpl"}
{/if}

<div id="header">
    <div id="header_content">

        {* Logo *}
        {if jrCore_is_mobile_device()}
            <div id="main_logo">
                {jrCore_image id="mmt" skin="jrNingja" image="menu.png" alt="menu"}
                {jrCore_image image="logo.png" width="170" height="40" class="jlogo" alt=$_conf.jrCore_system_name custom="logo"}
            </div>
        {else}
            <div id="main_logo">
                <a href="{$jamroom_url}">{jrCore_image image="logo.png" width=180 height=50 alt=$_conf.jrCore_system_name custom="logo"}</a>
            </div>
            {jrCore_include template="header_menu_desktop.tpl"}
        {/if}

    </div>
</div>

{if !jrCore_is_mobile_device()}
<div class="spacer"></div>{/if}

<div id="wrapper">
    <div id="content">

        <noscript>
            <div class="item error center" style="margin:12px">
                This site requires Javascript to function properly - please enable Javascript in your browser
            </div>
        </noscript>

        <!-- end header.tpl -->

now ififd have to guess you wan t sometthing simular to this

{jrCore_include template="meta.tpl"}

<body>

{if jrCore_is_mobile_device()}
    {jrCore_include template="header_menu_mobile.tpl"}
{/if}

<div id="header">
    <div id="header_content" style="background-color:black;">

        {* Logo *}
        {if jrCore_is_mobile_device()}
            <div id="main_logo">
                {jrCore_image id="mmt" skin="jrNingja" image="menu.png" alt="menu"}
              <div style="float:left;"><h1 style="color:red;">The news talkers</h1></div><div style="float:right;"><h3 style="color:red;">speak your mind</h3></div>
            </div>
        {else}
            <div id="main_logo"> <div style="float:left;"><a href="{$jamroom_url}"><h1 style="color:red;">The news talkers</h1></a></div><div style="float:right;"><h3 style="color:red;">speak your mind</h3></div>
            </div>
            {jrCore_include template="header_menu_desktop.tpl"}
        {/if}

    </div>
</div>

{if !jrCore_is_mobile_device()}
<div class="spacer"></div>{/if}

<div id="wrapper">
    <div id="content">

        <noscript>
            <div class="item error center" style="margin:12px">
                This site requires Javascript to function properly - please enable Javascript in your browser
            </div>
        </noscript>

        <!-- end header.tpl -->

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@soaringeagle
9 years ago
3,304 posts

ps, u might need to add some padding. margins, etc to get the look the way you want, maybe widths on the divs as well
on mobile you might want the h1 above the h3
while on desktop you want the h1 to take up say 60% of the left the h3 40% of the right

add a height and a top bottom left andright margin and/pr paddingto get thepositionings just right

because the codes in both desktop and mobile sectionsu can customize the look to each, maybe display:none on the h3 div on mobile to hide it completely...
play around see what works best for ya
but my template should get u close enough for a starrt thenfinetune from therer

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

John Bizley
@john-bizley
9 years ago
251 posts

perrie:
I would like to change the header to a very simple type. Just trying to recreate what I have which looks like this:
But I would move the "speak your mind" to under the name of the group.
Is there an easy way to do that, or do I have to make up a template and import it? I was thinking that since I would put it where the Ninga name is, that I could just replace it with mine and change the color to match.

To replace the site header from the Ningja words you can do that simply by going into your ACP and click on the tabs below
ACP > SKINS > IMAGES

Look for the Ningja logo the browse to select a new image, save it then go back in and make it active by ticking the new active box which will show up.

Refresh you caches and then it should show up

Here is mine with my logo

updated by @john-bizley: 06/08/15 12:20:14PM

@soaringeagle
9 years ago
3,304 posts

she wants txt no image

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

John Bizley
@john-bizley
9 years ago
251 posts

soaringeagle:
she wants txt no image

Rather than messing with templates and code etc is it not easier then to just make a transparent png image with the text in it ? This way it will also keep it mobile friendly and then other browsers will not render the font in a different way if the user has not got that font in their system.

@soaringeagle
9 years ago
3,304 posts

thats true, however it has 1 drawback, a png, especialy a transparent png can be like 120k while the txt is like 60 bytes or so
plus the png has to have another request established ..another conection
the server might have to compress and resize or optimize dependingv onifu have like mod pagespeed or anything adding cpu respourcces

in short the txt versions going to be a faster page load
however

a site shiould have 1 h1 tag andthat should be unique to every page so instead ofusing h1, it should be h2 or simply texxt with a font-size:45px or font-size:4em type thing

transparent pngs are rather large files as far as images go for websites

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

John Bizley
@john-bizley
9 years ago
251 posts

soaringeagle:
thats true, however it has 1 drawback, a png, especialy a transparent png can be like 120k while the txt is like 60 bytes or so

Actually you are quite wrong on the png side of things, yes jpgs are better for images as they are different in how they compress images but they are a lossless type image so the quality degrades over time on viewing them. Png's yes can be quite large but simple png's with text are very small in size. For instance the image added here is 300x75px and is only 3kb in size and loading that will not make any difference at all compared to text. Even if you made the font bigger and a longer sentence the size would still not go much over 5kb so not really sure where you are getting 120k from, that would be a more complicated image like a picture or some thing like that but just a text sentence would not be anywhere near that and even using a jpg would still be much the same as the png size sentence.

updated by @john-bizley: 06/08/15 02:03:26PM

@soaringeagle
9 years ago
3,304 posts

your wrong in "looses qualoity overtimewhen viewing' loosy means the more its compressedthe more the pixels aere 'blended together' creating lower quality image,the compression can be set anywhere from highest with no compression no loss in qiality down to low (typucaly 10 but uu can go zs low as 1) wich is highly compressed and looses qiuality
viewing over time has no Affect on it at all

but making a png transpafrent adds greatly to its size, png 8 v3 png 24 greatly increases size and transparency quality
a transparent png ..of the same image with the samed colors etc will be many times larger then amedium to high quality jpg

and plain old text is bytes
each pixel in an image contains more bytes then the entire sentence as text

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@soaringeagle
9 years ago
3,304 posts

SAME TEXT IS 10 BYTES THE IMAGE IS 3000 BYTES

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@michael
9 years ago
7,714 posts

I always use .png's because there are less things to think about when I export them.

Strumelia
@strumelia
9 years ago
3,603 posts

Not knowing much myself, I saw that the default Jamroom header was "logo.png"...so I simply created my own and kept it a png, and named it the same, "logo" and just substituted it for the JR one on my server. That worked for me and it shrinks a bit when the screen gets smaller. If Perry has a flat color like black for both the banckground of the logo .png and the whole header too, then it doesn't need to be transparent anyway, right?

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@perrie
9 years ago
435 posts

OMG, I got none of this in sent to me. I was wondering if anyone replied. Let me go through my options before I reply.

@michael
9 years ago
7,714 posts

Should get turned on automatically when you create the thread, (i think) but if you want notifications on each reply check that target button at the top of this thread. Click it once and it will turn yellow and you'll get an email for each new post.