Support » Theme: Sela » replace site name with logo in Sela

Viewing 15 replies - 1 through 15 (of 19 total)
  • Hi there,

    You’ll unlock the option to upload a logo if you install the Jetpack plugin.

    After you’ve installed Jetpack, navigate to Appearance > Customize in your site’s /wp-admin area and then select the Site Title, Tagline, and Logo tab.

    Hope that’s helpful!

    trehanecarpentry

    (@trehanecarpentry)

    Thank you Siobhan. I seem to have the jetpack plugin installed and activated but do not have those options on my customize menu. i deactivated it and it said it needs to be activated to get logos, etc. as you say, then i reactivated.

    do i need to connect it to wordpress.com to make it work (as prompted)?

    I saw another thread on this (that was never resolved online) and the user said that jetpack made his page load very slowly. Will this happen?

    trehanecarpentry

    (@trehanecarpentry)

    Hi again,
    I used your advice from this topic and it fixes the visual problem.
    https://wordpress.org/support/topic/header-image-size-38/

    remaining problem is that i cannot click the logo, i guess because it is just a background image.

    I think I will have a few more questions on how to adjust images as i work through this site, too.
    S.

    trehanecarpentry

    (@trehanecarpentry)

    Hello all,
    Hoping someone out there can give me a hand.

    1. does anyone have another suggestion to fix this logo issue or an explanation for why the jetpack logo option isn’t appearing?

    2. Also, I am finding some glitches in the coloring of my drop down menus (when clicked they still turn pink, once visited they are sometimes the same color as the background but sometimes not…)

    3. I would also like to remove some of the padding around my widgets and text in general. (within the main box on home page, top and bottom of front page widget area and footer widget area). I don’t have these style options in Cusomize.

    4. I would also like to edit the contents of the theme footer, ideally without using a child theme. Any suggestions?

    Thank you!

    Hi @trehanecarpentry,

    I’ll go through each of your questions one by one below.

    It’s worth noting for the future: It’s generally better to create a separate thread for each separate question that you have on this forum as we’re then able to more efficiently help out.

    do i need to connect it to wordpress.com to make it work (as prompted)?

    I saw another thread on this (that was never resolved online) and the user said that jetpack made his page load very slowly. Will this happen?

    1. does anyone have another suggestion to fix this logo issue or an explanation for why the jetpack logo option isn’t appearing?

    The logo option will display after you’ve connected to WordPress.com via Jetpack.

    If you don’t wish to set up a WordPress.com account then you could have a search for workaround to using the plugin’s features without connecting. Here are a couple that I found:

    The Jetpack plugin by itself shouldn’t noticeably impact your site’s performance. In fact, the plugin’s Photon module enables you to serve images faster.

    If you do notice that the plugin noticeably impacts your site’s performance, get in touch with the team! 🙂 We’d be happy to help troubleshoot what’s going on:

    https://jetpack.com/contact-support/

    2. Also, I am finding some glitches in the coloring of my drop down menus (when clicked they still turn pink, once visited they are sometimes the same color as the background but sometimes not…)

    Would you be able to share a link to your site so that I can get a clearer idea of what you mean by this?

    Did you add some custom CSS to change the menu from the default pink? If so, can you let me know what custom CSS you added specifically?

    3. I would also like to remove some of the padding around my widgets and text in general. (within the main box on home page, top and bottom of front page widget area and footer widget area). I don’t have these style options in Cusomize.

    You could use some custom CSS to reduce the padding around the main box on the home page:

    @media screen and (min-width: 768px) {
        .front-page-content-area .with-featured-image {
            padding: 0.6em;
        }
    }

    Increase/decrease the value of padding to increase/decrease the amount of spacing. Please note that increments/decrements of 0.1 are enough to have an impact e.g. 0.7em, 0.8em, etc.

    Looking at the Sela theme’s demo site here, I’m not seeing much padding around the widget areas on the front page or footer:

    https://selademo.wordpress.com

    Would you be able to share a link to your site so that I can see how those widgets look there? I’ll then be in a better position to assist you with CSS.

    4. I would also like to edit the contents of the theme footer, ideally without using a child theme. Any suggestions?

    Are you referring to the credit in the footer? If so, the only way to edit that is via a child theme. Let me know if you do set a child theme up (guidance to do so can be found here) and I’ll be happy to guide you further from there.

    trehanecarpentry

    (@trehanecarpentry)

    Thank you!
    item 1 – resolved! jetpack is functioning. It raises a separate question, which i will add to a separate request (thanks!). i’m still having trouble making the logo appear as i want it so have put a transparent image overtop of the header background logo so it can be clicked instead. Not perfect but will do the job for now. if the transparent image is too large it expands the whitespace or it is somewhat visible like water droplets on a windshield…

    trehanecarpentry

    (@trehanecarpentry)

    Item 2 – my site is not yet unveiled publicly so don’t think you can access by link. i am trying to paste a screen shot example of the missing link (no luck pasting here…) but can’t both click an item and screen shot it at the same time so trust me that the active link is sela pink/red. 🙂

    here is the code I have that attempts to customize the links (i found it didn’t carry to the footer widget area etc so it’s a bit mish mash based on answers i found on support forums), although I’d actually like all links to share the same properties (except the footer area, which is black so have kept as is in the theme):
    – links dark blue,
    – hover is a bold grey,
    – clicked – great if i can specify dark grey, otherwise just dark blue again.
    – active links can be grey as well). (tried a:visited but it didn’t seem to take)

    /* dropdown colours */
    .main-navigation ul ul {
    background: #e9f0f6;
    }
    .main-navigation ul ul a {
    color: #2559a2;
    }

    .main-navigation ul ul a:hover {
    color: #aaa;
    font-weight: bold;
    }
    /* Nav background */
    .main-navigation {
    background-color: #2559a2;
    }

    /* Nav rollovers */
    .main-navigation li a:hover {
    color: #e9f0f6;
    }
    .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
    color: #e9f0f6;
    }

    /* Nav item separators */
    .main-navigation .nav-menu > li > a:after, .main-navigation .menu > li > a:after {
    color: #2559a2;
    }

    /* Site wide links */
    a {
    color: #2559a2;
    font-weight: bold;
    }

    /* Footer links */
    .site-info a {
    color: #fff;
    }

    .site-info a:hover {
    color: #2559a2;
    }
    /*footer widget areas link colors*/
    #tertiary a {
    color: #2559a2;
    font-weight: bold;
    }
    #tertiary a:hover {
    color: #aaa;
    font-weight: bold;
    }

    trehanecarpentry

    (@trehanecarpentry)

    item 3 – thank you! solved the issue of the box at the top of the page, although I changed to only address the top and bottom as so:

    /*reduce padding in home page box*/
    @media screen and (min-width: 768px) {
    .front-page-content-area .with-featured-image {
    padding-top: 1px;
    padding-bottom: 1px;
    }
    }

    As for the footer area etc, it looks just like the template you sent basically, but the footer area particularly seems too large with such a large (1cm or so) padding at top and bottom. I just want to reduce this. Same in the front page widget area. Does this make sense? reducing top and bottom as in box above would be ideal, just to reduce the “white space”. Cheers.

    trehanecarpentry

    (@trehanecarpentry)

    Item 4 – I realize i should probably create a child theme but it feels too daunting for the time being. I will revisit this and be in touch when I have done so. 🙂 On my other webpage, i just edit the footer.php data every time I do a theme update. annoying, not standard, but simple.

    @trehanecarpentry: Thanks for the extra information about the dropdown menu colours! To prevent the flash of pink you mentioned on dropdown menus, try replacing the following in your custom CSS:

    .main-navigation ul ul a:hover {
    color: #aaa;
    font-weight: bold;
    }

    With the following:

    @media screen and (min-width: 768px) {
        .main-navigation ul ul a:hover, .main-navigation ul ul > li.focus > a {
            color: #aaa;
            font-weight: bold;    
        }
    }

    Then, try removing the following to prevent some of the dropdown menu links appearing the same colour as the background:

    .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
        color: #e9f0f6;
    }

    As for the footer area etc, it looks just like the template you sent basically, but the footer area particularly seems too large with such a large (1cm or so) padding at top and bottom. I just want to reduce this. Same in the front page widget area. Does this make sense? reducing top and bottom as in box above would be ideal, just to reduce the “white space”. Cheers.

    The following can be used to reduce the gap at the top of the footer widgets:

    .footer-widget-area {
        padding-top: 2em;
    }

    Similarly, use the following to reduce the gap at the top of the front page widgets:

    .front-widget-area {
        padding-top: 2em;
    }

    Item 4 – I realize i should probably create a child theme but it feels too daunting for the time being. I will revisit this and be in touch when I have done so. 🙂

    It’s also worth mentioning that there’s some plugins that will generate a child theme on your behalf. If you don’t want to create one manually, I recommend having a browse through the repository:

    https://wordpress.org/plugins/search/child+theme/

    It’ll definitely save you time in the long run if you’re currently manually updating files each times a theme update is released!

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘replace site name with logo in Sela’ is closed to new replies.