Header Image Size & Theme Width/Wrapper Size

lmcseo · January 31, 2013, 10:13am

I wanted to know if there would be an easy way to change the header image size. I'd like to make it another 200/300 pixels taller and noticed on mobile it doesn't resize the image. so the nav is off page to the right; is there a javascript file to use or something I can do to make the header image fluid?

Also, what about making the overall theme wider? I'd like to make it wider than the 960px or whatever the wrapper currently is. Looks very thin on my desktop monitor but okay on my laptop. Would that take a lot of work or can i get a tip on what to edit please?

So far loving the framework, just didn't see answers to these questions on reading the forums so thought I'd post..

-Chris

sagarjadhav · January 31, 2013, 12:27pm

Hello lmcseo, Are you using the rtPanel Child Theme or using the rtPanel Theme Framework directly?

lmcseo · January 31, 2013, 9:15pm

Hello, the starter framework with some css edits and elegant themes builder plugin for super easy content/page manipulation.

I'm playing with the install below, it's not the home page (live) or so don't crap on my initial work hehe. I just filled it up with stuff to get a feel of the full framework from rtcamp and to see that i don't like pages below my logo haa

http://continentalautoparts.com/auto/

So yeah, if there is a way to widen the entire site as well as make the header image area taller, and lastly the site is responsive but when i check on my phone the banner image stays off page and menu to the far right. I was able to fix that with a theme i purchased from some other site with a java-script file he provided. If you can point me in the direction to understand how that works or what its called so i can research and create my own, thanks a million!

sagarjadhav · February 1, 2013, 10:48am

Hello lmcseo, There is a filter to change the height and width of header image. Open functions.php from rtPanel theme and add the following line of codes.

<?php  
// This line is to set image width  
add_filter( 'rtp_header_image_width', create_function( '', 'return 940;' ) );  
// This line is to set image height  
add_filter( 'rtp_header_image_height', create_function( '', 'return 300;' ) );  
?>

For a fluid Header Image , add these lines in "rtp-mobile.js" that you can find in the "js" folder. You can tweak the script as per your need.

jQuery( document ).ready(function() {  
    var bg_url = jQuery('#header-wrapper').css('background-image');  
    bg_url = bg_url.match(/^url\(['"](.+)["']\)$/);  
    bg_url = bg_url ? bg_url[1] : ""; // If matched, retrieve url, otherwise ""  

    if( bg_url != '' ) {  
        jQuery('#header-wrapper').css({'background':'none', 'height':'auto', 'width':'auto'}).append('');  

        jQuery('#header-wrapper .rtp-grid-12').css({'position':'absolute', 'left':'0', 'top':'0', 'z-index': '10'});  
        jQuery('#rtp-primary-menu').css({'top':'100px'});  
    }  
}

CSS for wide monitors Add these lines in "style.css" at the bottom.

/*Header Image Resize*/   
body #header-wrapper { height: auto; width: auto; }  

/* You can generate custom grids here: http://grids.heroku.com/ */   
/* Responsive Structure */   
@media screen and (min-width: 1200px) { .rtp-container-12 { width: 1200px; }  

/* Grid >> 12 Columns */  
.rtp-grid-1 { width: 80px; }  
.rtp-grid-2 { width: 180px; }  
.rtp-grid-3 { width: 280px; }  
.rtp-grid-4 { width: 380px; }  
.rtp-grid-5 { width: 480px; }  
.rtp-grid-6 { width: 580px; }  
.rtp-grid-7 { width: 680px; }  
.rtp-grid-8 { width: 780px; }  
.rtp-grid-9 { width: 880px; }  
.rtp-grid-10 { width: 980px; }  
.rtp-grid-11 { width: 1080px; }  
.rtp-grid-12 { width: 1180px; }  

/* Prefix Extra Space >> 12 Columns */  
.rtp-prefix-1 { padding-left: 100px; }  
.rtp-prefix-2 { padding-left: 200px; }  
.rtp-prefix-3 { padding-left: 300px; }  
.rtp-prefix-4 { padding-left: 400px; }  
.rtp-prefix-5 { padding-left: 500px; }  
.rtp-prefix-6 { padding-left: 600px; }  
.rtp-prefix-7 { padding-left: 700px; }  
.rtp-prefix-8 { padding-left: 800px; }  
.rtp-prefix-9 { padding-left: 900px; }  
.rtp-prefix-10 { padding-left: 1000px; }  
.rtp-prefix-11 { padding-left: 1100px; }  

/* Suffix Extra Space >> 12 Columns */  
.rtp-suffix-1 { padding-right: 100px; }  
.rtp-suffix-2 { padding-right: 200px; }  
.rtp-suffix-3 { padding-right: 300px; }  
.rtp-suffix-4 { padding-right: 400px; }  
.rtp-suffix-5 { padding-right: 500px; }  
.rtp-suffix-6 { padding-right: 600px; }  
.rtp-suffix-7 { padding-right: 700px; }  
.rtp-suffix-8 { padding-right: 800px; }  
.rtp-suffix-9 { padding-right: 900px; }  
.rtp-suffix-10 { padding-right: 1000px; }  
.rtp-suffix-11 { padding-right: 1100px; }  

/* Push Space >> 12 Columns */  
.rtp-push-1 { left: 100px; }  
.rtp-push-2 { left: 200px; }  
.rtp-push-3 { left: 300px; }  
.rtp-push-4 { left: 400px; }  
.rtp-push-5 { left: 500px; }  
.rtp-push-6 { left: 600px; }  
.rtp-push-7 { left: 700px; }  
.rtp-push-8 { left: 800px; }  
.rtp-push-9 { left: 900px; }  
.rtp-push-10 { left: 1000px; }  
.rtp-push-11 { left: 1100px; }  

/* Pull Space >> 12 Columns */  
.rtp-pull-1 { left: -100px; }  
.rtp-pull-2 { left: -200px; }  
.rtp-pull-3 { left: -300px; }  
.rtp-pull-4 { left: -400px; }  
.rtp-pull-5 { left: -500px; }  
.rtp-pull-6 { left: -600px; }  
.rtp-pull-7 { left: -700px; }  
.rtp-pull-8 { left: -800px; }  
.rtp-pull-9 { left: -900px; }  
.rtp-pull-10 { left: -1000px; }  
.rtp-pull-11 { left: -1100px; }  

}

Let me know if this helps. Thanks

lmcseo · February 1, 2013, 12:07pm

Okay, adding the php function code makes the site not load. I get this: Parse error: syntax error, unexpected '<' in /home/content/84/8771184/html/continentalauto/auto/wp-content/themes/rtpanel/functions.php on line 44

I added the javascript to the file but don't think its working due to the above not working. Also added the style.cc and i notice on my laptop its already wider so thats working!

I logged in my server and luckily copied the orginal functions code so i replaced it and loaded back up. you can skim the site to see if its doing what you had me do? You're awesome man. Thank you for helping me!

lmcseo · February 1, 2013, 12:11pm

After cross checking browsers the main nav is not centered on firefox or chrome but yes in IE 8, it looks to be a float/div issue maybe? It is aligned correctly on the left but goes off to the page ends on the right? i can screenshot if you need but yeah it doesnt end on the right where it should, goes off the page to the right end of screen

sagarjadhav · February 1, 2013, 1:19pm

Hello lmcseo In your style.css, find the bellow line. /Header Image Resize/

You can either remove this line or just replace with this. /* Header Image Resize */

lmcseo · February 2, 2013, 4:26am

Okay so the responsiveness is making the body look great on wider monitors, and that little fix in style.css is making the image resize great too, but one last thing. How could i get the image to stay center? add an "image-align" somewhere or more complicated than that?

Right now its body wrapper is larger so my original header image is to the left and there is blank white to the right.

Or if i design it at 1024 or whatever that width is, then it will resize for the slimmer views? Also what about making that header image taller? its only like 3/400 i'd like to make it maybe double or at least 100/200 pixes taller.

you've been such a help with this i cant thank you enough! positive energy your way!

sagarjadhav · February 4, 2013, 2:51pm

Hi lmcseo, To center-align the image, find the below line in your style.css.

body #header-wrapper { height: auto; width: auto; }

And replace it with following code:

body #header-wrapper { background-position: 50% 0; height: 200px; width: auto; }

for Image height you can change height as per your need in above code.

Let me know if this helps.

P.S : Please note that since you are making all these changes in the rtPanel Core, all your changes will be replaced when rtPanel is upgraded. Child theme is the way to go if you need rtPanel upgrades as well as the changes you make to your theme.

Thanks

lmcseo · February 5, 2013, 2:02am

Okay cool yeah its centered and after setting the header bg to match it's working.

could you help me align the "rtp-navigation" i'm not liking it all to the left when it adapts for the wider desktop view.

you're a godsend. thank you for your knowledge and time!

sagarjadhav · February 5, 2013, 4:54pm

Hello lmcseo, If you want to align the “rtp-navigation” at center, find the below line in your style.css.

#rtp-nav-menu {float: left;}  
#rtp-nav-menu li { float: left; list-style: none; position: relative; }

And replace it with following code:

#rtp-nav-menu {float: none;text-align: center;}  
#rtp-nav-menu li {float: none;list-style: none;position: relative;display: inline-block;}

Let me know if this helps.

Thanks

lmcseo · February 6, 2013, 11:58am

You are a miracle my friend. I cannot wait until I get as good at this as you. A million thank yous!

system · November 9, 2018, 2:09pm