• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

First Attempt (Modifying Lifestyle Pro) Advice Needed

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › First Attempt (Modifying Lifestyle Pro) Advice Needed

This topic is: not resolved

Tagged: Beginner, footer, lifestyle Pro, magazine, SVG, user profile

  • This topic has 21 replies, 4 voices, and was last updated 10 years, 9 months ago by AnitaC.
Viewing 20 posts - 1 through 20 (of 22 total)
1 2 →
  • Author
    Posts
  • August 6, 2014 at 7:06 am #117331
    Tom
    Member

    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
    August 6, 2014 at 7:07 am #117333
    Tom
    Member

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

    August 6, 2014 at 3:03 pm #117419
    Tom
    Member

    Any Suggestions? 🙂

    August 6, 2014 at 3:48 pm #117443
    AnitaC
    Keymaster

    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.

    August 6, 2014 at 4:35 pm #117453
    Tom
    Member

    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,

    August 6, 2014 at 5:02 pm #117458
    AnitaC
    Keymaster

    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.

    August 11, 2014 at 3:11 pm #118283
    Tom
    Member

    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

    August 11, 2014 at 4:03 pm #118287
    AnitaC
    Keymaster

    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.

    August 11, 2014 at 4:20 pm #118289
    Tom
    Member

    Thank you Cre8tiveDiva! Much appreciated! 🙂

    August 11, 2014 at 4:27 pm #118291
    AnitaC
    Keymaster

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


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

    August 12, 2014 at 11:09 am #118428
    Tom
    Member

    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' );
    August 12, 2014 at 11:22 am #118434
    AnitaC
    Keymaster

    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.

    August 12, 2014 at 11:36 am #118437
    Tom
    Member

    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
    August 12, 2014 at 3:22 pm #118460
    Tom
    Member

    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,
    ) );
    August 12, 2014 at 9:01 pm #118491
    AnitaC
    Keymaster

    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.

    August 13, 2014 at 6:15 am #118532
    Robin
    Member

    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)

    August 13, 2014 at 6:59 am #118541
    neilc
    Member

    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?

    August 13, 2014 at 9:21 am #118585
    Tom
    Member

    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:

    August 13, 2014 at 9:24 am #118587
    AnitaC
    Keymaster

    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.

    August 13, 2014 at 9:34 am #118589
    neilc
    Member

    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
Viewing 20 posts - 1 through 20 (of 22 total)
1 2 →
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble