• Resolved mobe115

    (@mobe115)


    Got a couple questions for customizing this theme:
    1) how do i change the button graphic in the theme?
    2) how do i enable the site tagline without also enabling the title?
    3) how do i change the hover link color?
    4) how do i change the width of the sidebar?

    thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi there, I’ll answer your questions separately.

    1) how do i change the button graphic in the theme?

    To change the button graphic you’ll need to target the image path on each element where it’s used. You can use a browser inspector to help find the right elements to target.

    For example, on widget titles, this is the element you’d need to target:

    .widget-title::before {
        background: rgba(0, 0, 0, 0) url("https://your/image/path/image.svg") no-repeat scroll 0 0 / 84px 22px;
    }

    Replace the fake image path with your own. Button uses an SVG image for most flexibility. If you’d like do to the same, note that SVGs can’t currently be uploaded in the WordPress media library so you’ll need to use FTP.

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

    Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    Moderator Kathryn Presner

    (@zoonini)

    2) how do i enable the site tagline without also enabling the title?

    Reselect the Customizer option to display header text. Then, in your custom CSS editor or child theme, add this to hide just the tagline:

    .site-description {
     display: none;
    }
    Moderator Kathryn Presner

    (@zoonini)

    3) how do i change the hover link color?

    Depends on which links. ??

    For example, this will cover most link hovers:

    a:hover {
     color: #bb00bb;
    }

    But a more specific element needs to be targeted for menus:

    .main-navigation li a:hover {
      color: #bb00bb;
    }
    Moderator Kathryn Presner

    (@zoonini)

    Of course change the example purple to whatever colour code you prefer. ??

    Moderator Kathryn Presner

    (@zoonini)

    4) how do i change the width of the sidebar?

    Layout changes start to get more complex since changing one width affects other columns, as well as the theme’s responsiveness, and may cause negative effects on mobile devices.

    Could you tell me more about your goal in changing the width of the sidebar? Making it narrower is no problem for example, but making it wider is a more complex task with other considerations.

    Thread Starter mobe115

    (@mobe115)

    thanks so much!! also i meant i wanted to remove the site title not description but i figured it out and altered the code ?? also how do i change the font color? in terms of the width, i’m trying to make both the sidebar and main content area slightly wider. oh last question ?? how do i change the fonts?

    Moderator Kathryn Presner

    (@zoonini)

    Thanks so much!! also i meant i wanted to remove the site title not description but i figured it out and altered the code ??

    If you want to remove both the site title and tagline, no code is needed as that’s an option in the Customizer for all themes. ??

    In the Customizer’s Site Title & Tagline panel, just uncheck the box that says “Display Header Text” and you should be good to go.

    also how do i change the font color?

    Depends which element. ??

    Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    https://dailypost.wordpress.com/2013/06/21/css-intro/

    https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    https://thewc.co/articles/view/web-inspector-tutorial

    https://cssworkshop.wordpress.com/

    For fonts, the simplest method is to use a Google Fonts plugin to add the new font and then target the elements with CSS as needed.

    I’ll need to get back you about the column widths.

    Moderator Kathryn Presner

    (@zoonini)

    You’re in luck: Button is made in such a way that makes it pretty easy to change the column widths. ??

    Something like this should do the trick. I put it in a media query so it only affects larger screens; you can adjust the value as you like, but I wouldn’t affect going too much wider as it affects readability:

    @media screen and (min-width: 1400px) {
      .site {
        max-width: 1400px;
      }
    }

    Thanks for this theme….we really need themes like this, which have the sophistication of paid themes, and which are expected to be updated in the long run since they are backed by WordPress.

    Moderator Kathryn Presner

    (@zoonini)

    techtangerine – thanks for the kind feedback on Automattic’s themes, I’ve passed it along to Button’s creator, Caroline Moore.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Need some customization help?’ is closed to new replies.