[jlo2013]

I made it responsive!
Add this to the CSS file + logos in different dimentions:

/* Mobile Responsive Design
------------------------------------------------------------ */
body {

overflow-x: hidden;

}

@media only screen and (max-width: 768px) {

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

.genesis-grid-even,
.genesis-grid-odd {
width: 100%;
}

#header {
margin: 0 auto;
min-height: 96px;
width: 100%;
}

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
background: url(http://www.yoursite/files/2015/03/logo_768.png) no-repeat !important;
background-size: contain;
width: 760px;
height: 96px;
}

#nav {
width: 100% !important;
}

#inner .wrap {
width: 100% !important;
padding: 5% !important;
}

#content-sidebar-wrap {
float: none;
width: 100% !important;
}

#content {
float: left;
padding: 0 5px;
width: 90% !important;
overflow: hidden;
}

.featured {
margin: 0 auto;
height: auto;
width: 100% !important;
}

.home-middle,
.home-middle-1,
.home-middle-2,
.home-middle-3,
.sidebar {
width: 100%;
}

.home-bottom h4, .home-middle h4 {
text-align: center;
}

.home-middle .featuredpage img, .home-middle .featuredpost img {
margin: 5px;
display: inline;
width: 45%;
}

.home-middle p {
text-align: justify;
display: inline;
float: right;
width: 50%;
}

.home-bottom {
width: 100%;
}

.home-bottom-1,
.home-bottom-2 {
float: none;
width: 100%;
}

#footer .wrap {
width: 100%
}

#footer .creds p {
float: none;
text-align: center;
width: 100%;
}

#footer .gototop {
display: none;
}
}

@media only screen and (max-width: 600px) {

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
background: url(http://www.yoursite.se/files/2015/03/logo_600.png) #ffffff no-repeat !important;
background-size: contain;
width: 100%;
height: 60px;
}

#header {
margin: 0 auto;
min-height: 60px;
width: 100%;
background-color: #fff;

}

}

@media only screen and (max-width: 400px) {

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
background: url(http://www.yoursite.se/files/2015/03/logo_400.png) #ffffff no-repeat !important;
background-size: contain;
width: 320px;
height: 120px;
margin 0 auto;
}

#header {
margin: 0 auto;
min-height: 120px;
width: 100%;
background-color: #fff;

}

.home-middle .featuredpage img, .home-middle .featuredpost img {
margin: 5px;
display: block;
width: 287px !important;
}

.home-middle p {
text-align: justify;
display: block;
float: none;
width: 100% !important;
}

}

@media only screen and (max-width: 240px) {

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
background: url(http://yoursite.se/wp-content/uploads/2015/03/header240.png) no-repeat !important;
background-size: contain;
width: 100%;
height: 120px;
}
}

[jlo2013]

Hi Susan I resolved it in another way 🙂 Thanks for replying.

[jlo2013]

Hi Perry and Ramsey, I found this blog http://wpsites.net/web-design/styling-the-background-of-your-theme/,
you can create an bg-image and solve it.
Just ad the code in the function file:

/** Add support for custom background */
add_theme_support( 'custom-background' );

This will add the background image functionality.

Good luck,
Johanna

[jlo2013]

Hi Harvey, I found this blog http://wpsites.net/web-design/styling-the-background-of-your-theme/, you can create an bg-image and solve it.
Just ad the code in the function file:

/** Add support for custom background */
add_theme_support( 'custom-background' );

This will add the background image functionality.

Good luck,
Johanna

[jlo2013]

Thanks for the link to the blogs!

[jlo2013]

Hi Ramsey I am working on antother theme: Magazine Pro, I would also like to have a background color. I cannot find the #inner in the CSS. My URL: http://wp.byggteknikforlaget.se/

Do you know how to solve? Thanks.
// Johanna

[jlo2013]

I have solved thru looking in the forum, the answer is here: http://travlanders.com/wordpress/2013/11/changing-the-logo-in-the-header-of-the-agency-pro-theme/

You change the logosize in the functions file as well. No need to edit "cropped-logo-final.png" in this theme.
// Johanna

[jlo2013]

Hi I have the same problem, my theme: Magazine pro.
It doesn´t seem to work the normal way, now I am trying out plugins..

[jlo2013]

Thanks it worked 🙂 Cheers

[jlo2013]

I have resolved it.

// Jo

[jlo2013]

Hey Greg, I managed it thru the functions file:

** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 115 ) );

add_action( 'genesis_header', 'custom_header' );
function custom_header() {
?>

<table border="0" width="600">
<tr>
<td width="500">&nbsp;</td><td width="150" align="right" valign="top"><font color="#999999">PHONE: 08 - 123 456</font></td></tr></table>
<?php
}

 

[jlo2013]

This reply has been marked as private.

[jlo2013]

This reply has been marked as private.

[jlo2013]

This reply has been marked as private.

[jlo2013]

Hi Greg,

Now I have added the phonenumber (i made a frame aroud it to test..)

// Johanna

[jlo2013]

This reply has been marked as private.

[jlo2013]

If I use the titel instead of a logo it works, however I want to use the logo.

[jlo2013]

Yes, but it seems they are in different divs or wraps.. here is my link: http://bbstockholmfamily.se/test/

// Johanna

 

[jlo2013]

Hi I ave the theme “Agency” . I have made some changes in the CSS the logo area is not as wide as before however the menu is still under the logo.. when I look at:

http://demo.studiopress.com/agency/

the menu is next to the logo.=As I want it

On my site I can see: div wrap 960 x 31 whish is the height of the menulinks

On the demo site I see: div wrap 960 x 0 so, the menu is not placed in that div tag. How do I change that?

Thanks!

 

// Johanna

[jlo2013]

Hi I have the theme "Agency" and I followed "And or" recipe above. The logo area is not as wide as before however the menu is still under the logo.. when I look at:

Agency

the menu is next to the logo.

On my site I can see: div wrap 960 x 31 whish is the height of the menulinks

On the demo site I see: div wrap 960 x 0 so, the menu is not placed in that div tag. How do I change that?

Thanks!

Johanna

[Author]

Posts