First Attempt (Modifying Lifestyle Pro) Advice Needed

[Tom]

Hi all,

Thank you for taking the time to read this topic, I am reasonably new to modifying Genesis Child Themes and even WordPress Themes in general to be honest. Until recently, I decided I needed to start digging into code a bit more instead of always focusing my time on design projects.

I will try and keep this short and sweet, I am currently in the process of modifying The Lifestyle Pro Theme and have hit a wall with three areas of my design:

1) .SVG Logo: I would love to insert the simply logo as a .SVG file and then experiment with the code applying animation etc. but what is the best and most practical way to achieve this? I have already created the .SVG file from Illustrator, I need pointing in the right direction on the best way to add it to the code. (please see mock-up).

2) Genesis - User Profile: By default this widget displays one profile, is it possible to edit the source code so two profiles can be displayed? (please see mock-up).

3) Footer Widgets: I was going to try and work this out last, but if anyone has any suggestions how I can achieve a similar design as per to the mock up that would be great! (In the mock up, there are two different styles for the footer widget. I will probably try and apply the one with the grayscale image to the child theme).

[IMG]http://i62.tinypic.com/syuzhy.png[/IMG]

Looking forward to hearing your views guys!

Many Thanks,
Tom

http://notavailableatthemoment.com

[Tom]

Alternative Image Link
http://i62.tinypic.com/syuzhy.png

[Tom]

Any Suggestions? 🙂

[AnitaC]

For the first item, I've never used SVG but found this article - http://www.leighton.com/blog/enable-upload-of-svg-to-wordpress-media-library. Maybe it might help you.

For item two you could add two author boxes to the same widget area to accomplish that. Just add the other user profile to the site and do not add a title to the second one.

For the last item, you can always create custom IDs to present the information differently like you have it.

---

Need help with customization or troubleshooting? Reach out to me.

[Tom]

Hi Anitac,

1) Great! If I apply the hook referenced in the blog post you provided, how can I then use the SVG as a logo instead of the title header?

2) Ah okay, this will display as two separate boxes/widgets though, right? I would like to try and get two user profiles within one widget. Do you think this is asking too much?

3) I see, would it be advisable to use something like Genesis Sandbox Featured Content Widget, so it's easier for the user to edit content within the footer. Or am I on the wrong track here?

Many Thanks,

[AnitaC]

Well in Genesis the logo and header are basically the same thing. There isn't a "logo" area. So you'd modify it header to be the height and width of your logo.

For the user profiles, you'd have to hack the core files to do that which isn't recommended, however you may be able to put out a shoutout on Twitter using hashtag #GenesisWP pointing to this discussion asking if someone can customize that for you and add it to your functions.

Try the GSFCW widget, it's new and I haven't used it yet - but it might work for what you want.

---

Need help with customization or troubleshooting? Reach out to me.

[Tom]

Jumping back to the topic of SVG's, the code for the header within 'funtions.php' is:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header_image'    => '',
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 110,
	'width'           => 320,
) );

Where would be the correct location to insert the SVG code or at leaset reference the file, here within funtions.php or the stylesheet? There is a very helpful post by Chris Coyier http://css-tricks.com/using-svg

If someone would be happy to provide a quick example/code snippet, that would be very useful!

Many Thanks,
Tom

[AnitaC]

You'd put it in between the single quotes in here:

'header_image' => 'YOUR IMAGE URL',

---

Need help with customization or troubleshooting? Reach out to me.

[Tom]

Thank you Cre8tiveDiva! Much appreciated! 🙂

[AnitaC]

Post back how the SVG works. That's something new for me.

---

Need help with customization or troubleshooting? Reach out to me.

[Tom]

I can not get it to work unfortunately, I have tried several inserts like:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header_image'    => '/images/tgoc.svg',
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 110,
	'width'           => 320,
) );

and I have the following code in funtions.php to enable SVG uplaods. Though, even with this code in place. There is no file preview in the media library.

//* Enable SVG file upload
function custom_mtypes( $m ){
    $m['svg'] = 'image/svg+xml';
    $m['svgz'] = 'image/svg+xml';
    return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' );

[AnitaC]

Ok, it's time for the BIG GUNS now. Let me send out a Tweet!

---

Need help with customization or troubleshooting? Reach out to me.

[Tom]

Haha! Brilliant! I also took the query to Stackoverflow, but no suggestions yet.

Here's the CSS I added

/* Logo, hide text */

.header-image .title-area {
    padding: 0;
    width: 340px;
    height: 340px;
    background: url(/img/tgoc.svg);
    display: block;
}

.no-svg .header-image {
    // fallback
    background-image: url(logo.png);
}

.header-image .site-title a {
	float: left;
	min-height: 110px;
	width: 100%;
}

I'm on my localhost, could this have something to do with it?

Unix based servers (.htaccess)
It’s a bit less involved for Unix based servers, the MIME types can be added to your .htaccess file by adding the following lines:

AddType image/svg+xml svg
AddType image/svg+xml svgz

[Tom]

In fact, I have also tried using a .png, which doesn't work either so maybe I am simply doing something wrong somewhere.

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header_image'    => '/images/logo.png',
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 110,
	'width'           => 320,
) );

[AnitaC]

Well, after sending that tweet out earlier today, no one responded back. So... I deleted the tweet. Maybe post a tweet of your own and use Hashtag #GenesisWP. They might answer you since they didn't answer me. 🙁

---

Need help with customization or troubleshooting? Reach out to me.

[Robin]

I've never worked with SVG either, but your path (in your CSS) looks suspect to me. What is the name of the directory in your theme which is holding your image files? You refer to both an img and and images directory. In either case, the css shouldn't have the front /... an example from my code has this background: url(images/logo.png) no-repeat left; where images is a subdirectory in my theme folder.

If you use something like Chrome's Developer Tools, you can see if the browser is able to find your image URL, and specifically what it's looking for as the image URL. If it's throwing a 404 for your logo, then the path isn't right. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[neilc]

SVG files are scalable vector graphics and whilst various browers have varying support it's not a good choice of file format for a logo.

If you suspect the image path is wrong then try an absolute path instead of a relative one. You can look up this path in the Media Library section. If that works then you know you need to look into your relative path.

I don't know these theme but most of the Genesis themes have the ability to select an image in the Header section. Does this theme not have that?

[Tom]

Thank you Robin, I tried your suggestion but no luck unfortunately. I will come back to this on a rainy day and as I am in England it will probably be tomorrow...

I can select an image in the Header section, but the .svg will not work, it just appears like so:

[AnitaC]

Hi Tom, I found a plugin - https://wordpress.org/plugins/scalable-vector-graphics-svg/. See if this might help you.

---

Need help with customization or troubleshooting? Reach out to me.

[neilc]

I doubt svg is a valid file format for that.

What is the need for svg over the usual pngs and jpgs etc?

[Author]

Posts