Resize Logo / Header ProJam Light

@voxster
8 years ago
31 posts

I am trying to resize the header logo. It keeps defaulting to 375x80 pixels. I would also like to blend the color of my logo into the template. (Bit lighter) Does anyone have any suggestions on how to do this?
updated by @voxster: 04/29/16 12:26:57PM

@douglas
8 years ago
2,790 posts

You'll want to search for this code:

                            <a href="{$jamroom_url}">{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="max-width:375px;max-height:80px;" custom="logo"}</a>

in your skins/jrProJamLight/header.tpl and change the max-width: and max-height: or just change it to this:

                            <a href="{$jamroom_url}">{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name custom="logo"}</a>

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

Thanks for the help!

@voxster
8 years ago
31 posts

I was able to blend the color of the header background into the logo. Is there a way to adjust the height of the header bar? Attached screenshot.

@voxster
8 years ago
31 posts

I tried adjusting the height here:

{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="max-width:375px;max-height:160px;" custom="logo"}

Nothing changes. :-(

@douglas
8 years ago
2,790 posts

Give this a try:

{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name width="375" height="160" custom="logo"}

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Strumelia
@strumelia
8 years ago
3,603 posts

Some more related tips that might help you- The site code contains various references to the Jamroom logo which is called "logo.png" and is on your server. If you name your OWN logo "logo.png" and DELETE/replace Jamroom's png from your server, you can trick the site into simply looking for logo.png and showing YOUR logo instead of the jr image. Then you just would have to adjust the size of your logo as you like and adjust the site sizing code to match, as you know where to above.
You also should then go via ACP to your ACTIVE skin's "Images" TAB, and make sure the 'logo.png' setting points to your new image. Save changes and reset caches.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 01/27/16 12:37:53PM

@voxster
8 years ago
31 posts

@douglas - I tried that code., cleared the cache. I am not sure why... but it doesnt want to resize at all. My logo is named logo.png I am able to replace the logo but not resize it or the header. Could it be that the default Jamroom banner in the header may be keeping it from resizing?

Strumelia
@strumelia
8 years ago
3,603 posts

You shouldn't have the two logos showing in the banner- did you delete the Jamroom "logo.png" image from your server images folder altogether?

To add height or padding to your header (where your logo is going to fit), go via the ACP to your active skin, then the Style TAB, then set the dropdown menu to "header.css" and play with the header sizing settings in the four TABS color/padding/advanced/untagged.
It could be that your logo won't get any bigger than it is able to fit within the height of your header area. Try first increasing the header height under the 'advanced' tab there, in header.css 'style section'. Then maybe your logo will be able to show up bigger as you told it to, and will fit within the header area. Be sure to check on a mobile device to be sure you are not going overboard in header/logo sizing.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 01/27/16 01:06:59PM

@voxster
8 years ago
31 posts

Ok, I will try the ACP Style settings. I am using Jamroom hosting... is there a file manager available where I can delete the previous logo.png? I am trying to find a way to delete that logo.

Strumelia
@strumelia
8 years ago
3,603 posts

I use Filezilla (free) to access my JR server and the content on it. Took me a little while to put in the right settings to connect, but once I got connected I bookmarked it in filezilla, and get onto my server easily from then on. Maybe the JR guys can help you if you can't figure out some of the FZ info to put in to get connected. The logo.png you would find in your active skin's folder, in its img folder. I do know that in filezilla, in your network settings for connecting, the "User" field needs to be "jamroom". That tripped me up for a while.

Also- right click on that jamroom image in your banner and find out what that image file is named, just to be sure you know what to try and remove from your banner.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 01/27/16 01:22:15PM

@douglas
8 years ago
2,790 posts

voxster:
Ok, I will try the ACP Style settings. I am using Jamroom hosting... is there a file manager available where I can delete the previous logo.png? I am trying to find a way to delete that logo.

If you'll send me your admin login I'll take a look at it for you.

Send the info. to support[at] jamroom[dot] net

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

@douglas - I just sent you the info. Thank you!

@voxster
8 years ago
31 posts

Do you know how I can resize the mobile header logo as well? I changed this in header.tpl (added 248 for height to test - nothing happens)

{if jrCore_is_mobile_device()}
{jrCore_image id="mmt" skin="jrProJamLight" image="menu.png" alt="menu"}
{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="max-width:225px;max-height:248px;" custom="logo"}

Strumelia
@strumelia
8 years ago
3,603 posts

Look for the header height setting in the mobile_core.css style tab...adjust header height. There are a bunch of adjustable settings in the mobile_core.css "untagged" style TAB.

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

@douglas
8 years ago
2,790 posts

Change it to this:

{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="min-height:248px;" custom="logo"}

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

I am changing the the header height to 12px to test in the mobile_core.css but it does not save the change. Keeps defaulting back to Auto.

@douglas
8 years ago
2,790 posts

Are you making changes via the ACP > Skins > Skin Styles or are you making changes manually to the CSS file and then uploading it to your site?

Also, you may want to turn caching off while you work on your site, that way you see your changes right away.

Set your ACP > Global Config > General > Default Cache Seconds to 0 and then enable developer mode by going to your ACP > Developer > Developer Tools > Global Config and check the Run In Developer Mode check box.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

@douglas I changed it to the following but it is not applying the change. Same issue I was having with the logo yesterday. Changed it to this:

{if jrCore_is_mobile_device()}
{jrCore_image id="mmt" skin="jrProJamLight" image="menu.png" alt="menu"}
{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="min-height:248px;" custom="logo"}
{else}
{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="min-height:248px;" custom="logo"}

@voxster
8 years ago
31 posts

Will try the changes you mentioned in the above post.

@voxster
8 years ago
31 posts

Tried both of those options - made change directly to .css and also in ACP > Skins > Skin Styles Set cache to 0 seconds and enabled run in developer mode. Mobile header will not resize. :-(

@douglas
8 years ago
2,790 posts

I'll take a look at it for you.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@douglas
8 years ago
2,790 posts

How does it look now?

I made a little smaller because the size you wanted, 248px, made the image look out of proportion.

Note that if you make changes in your ACP > Skin Settings > Skin Styles, they will override your changes in the CSS files that you modify manually. So you'll want to do one or the other.

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 01/28/16 10:03:37AM

@voxster
8 years ago
31 posts

Thanks again, Douglas. Greatly appreciated.

@voxster
8 years ago
31 posts

@douglas - How did you get the logo to resize yesterday? I am checking out the Media Pro 5 Dark template.

@douglas
8 years ago
2,790 posts

Open your skins/jrProJam/header.tpl and find this:

                    <div id="main_logo">
                        {if jrCore_is_mobile_device()}
                            {jrCore_image id="mmt" skin="jrProJam" image="menu.png" alt="menu"}
                            {jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="max-width:225px;max-height:48px;" custom="logo"}
                        {else}
                            <a href="{$jamroom_url}">{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="max-width:375px;max-height:80px;" custom="logo"}</a>
                        {/if}
                    </div>

and change it to this:

                    <div id="main_logo">
                        {if jrCore_is_mobile_device()}
                            {jrCore_image id="mmt" skin="jrProJamLight" image="menu.png" alt="menu"}
                            {jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="min-height:148px;" custom="logo"}
                        {else}
                            <a href="{$jamroom_url}">{jrCore_image image="logo.png" class="img_scale" alt=$_conf.jrCore_system_name title=$_conf.jrCore_system_name style="min-height:160px;" custom="logo"}</a>
                        {/if}
                    </div>

That is for both the PC header and mobile header.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

I made those exact changes to the header.tpl in the Media Pro 5 template. It will not change. Trying to figure out what I am doing wrong. :-(

@douglas
8 years ago
2,790 posts

How did you make the changes?

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

I copied the 'change to this' code and pasted/replaced it with existing code in header.tpl.

@douglas
8 years ago
2,790 posts

Sorry, I should have been more precise with my question... did you modify the header.tpl and then upload it to your skins/jrProJam directory?

Or did you modify the template in the ACP > Skins > Templates section?

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

Oh, I modified it directly in the templates section. I didnt use FTP.

@douglas
8 years ago
2,790 posts

After making your modifications, go back to the templates section and check the "activate" check box for the header.tpl and save changes.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

BAM! It worked! Ok... so, I have to click the checkbox, same as when changing the header.

@douglas
8 years ago
2,790 posts

Any time you've modified a template, that has NOT been modified before, you'll want to check that box so your changes are used.

It's probably a good idea to make your changes this way so updates don't change them back. Ideally you should probably clone the skin so you have a custom skin and there would be no way for updates to change things back.

https://www.jamroom.net/the-jamroom-network/documentation/skins/839/creating-your-own-skin

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

I have another question. I want shrink the two image carousels on the home page of Media Pro 5 and have the modules on the right side. Just like they are on the other pages of this template. I want to create a custom module aligned on the ride side/top of main page. It will contain my popup player streaming my station. (attached diagram) Can you point me to the templates I need to modify?

@douglas
8 years ago
2,790 posts

It would be better if you created a new post for each issue that way someone else with the same questions will be able to find it when searching.

What your wanting to do would take some modifications to the index and slider templates and trying to explain it in the forums would take too long.

It isn't going to be very easy. Is there a reason you need the player to be next to the carousel?

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

I found the Featured Artist Slider settings in the header.tpl. I think if I modified the maxwidth if may change. It is set to 460. Right now there appears to be alot of space in the Featured Artist Slider. Perhaps because I only have one test artist created?

@douglas
8 years ago
2,790 posts

Yes and there are some other items that get added such as the artists influences and biography.

Should look something like this when all the info is there:
http://www.localbandz.com

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@voxster
8 years ago
31 posts

It looks good. I would like to reduce it so the "About Us" text will wrap in the smaller box. Keep the image slider the same size below it. I want to place a module with the station listen info to the right of the reduced section.

I am redesigning the logo. I made the changes in the header.tpl Went back and clicked the box to apply the changes but it is not taking it. Could it be because of the size of the header I uploaded?

@voxster
8 years ago
31 posts

Every time I try to save the changes... it keeps the check mark there.

@douglas
8 years ago
2,790 posts

voxster:
Every time I try to save the changes... it keeps the check mark there.

You only need to check that check box the first time you've modified the template, and it will always stay checked as long as you want to use the modified version of the template, modifications made after that only require you to reset the cache if caching is turned on.

As far as redesigning the carousel, let me see what it would take and I'll let you know.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

solved Resize Logo / Header ProJam Light

Tags