This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Edit Style of Sidebar widgets?

  • Creator
    Topic
  • #11413
    AAOM
    Participant

    Hello,
    I would like to edit the style of the sidebars (and their widgets) on my site http://www.aaom.mb.ca
    –no outlining around the boxes
    –no fill / shading
    –change title color

    The goal is to have the sidebar a little more minimal, and to de-emphasize the outlined widgets.

    Although I have tried your advice to use firefox to locate these characteristics and the relevant changes to make changes in a child theme, I have not been able to locate these specific sidebar characteristics.

    I would appreciate your help to direct me to the right place.

    Thanks!
    Rick

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #11423
    Jason Bobich
    Keymaster

    Hello,

    Using our inspector (I’m using Google Chrome), we can quickly see that these are our selectors effecting the areas we want to change:


    Click to enlarge


    Click to enlarge

    And so this sets us up something like this:

    /* Widget */
    .fixed-sidebar .widget {
    	...
    }
    
    /*  Widget Title */
    .fixed-sidebar .widget-title {
    	...
    }

    And then from their you’ve got your basic CSS properties you’ll need to understand for a customization like this:

    http://www.w3schools.com/cssref/pr_text_color.asp

    http://www.w3schools.com/css/css_border.asp

    http://www.w3schools.com/cssref/css_colors.asp

    http://www.w3schools.com/css/css_padding.asp

    http://css-tricks.com/css3-gradients/ (for titles, set background property to none to override)

    =======

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #11425
    AAOM
    Participant

    Hi Jason,

    Thanks! You make it look easy. I’ll review your tutorial with this advice, and try it again.

    Also, thanks for the references for the CSS changes.

    I appreciate your generosity to provide your time and support to help to beginners. Your theme is excellent and easy to use. Your theme is fantastic and the support that goes with it is also outstanding.

    Thanks again.
    RIck

Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.