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.

How to style widgets in Alyeska to look like Akita

  • Creator
    Topic
  • #6647
    archehypnose
    Member

    Hello,

    Great theme !

    I would like to have my sidebars look the same as in the Akita themes. Any hints on doing this ? The widgets in the sidebars of Alyeska looks a little “poor” for my needs. Could you guide me into the CSS updating that would need to be done ?

    Thanks

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

    Hello,

    Thanks!

    This will be a customization you’ll need to make to the theme. 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.

    A good idea here would to also do this over on Akita’s live demo so you can see how the widgets are being effected. — http://themeblvd.com/demo/akita

    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.

    #6653
    Jason Bobich
    Keymaster

    Ok… This does actually does look pretty good for general widget styling in Alyeska.

    .widget {
        background: #ffffff;
    	border: 1px solid #cccccc;
    	-moz-border-radius: 4px; 
    	-webkit-border-radius: 4px; 
    	border-radius: 4px;
    	margin: 0 0 1em 0;
    }
    .widget .widget-inner {
    	padding: 15px;
    }
    .widget .widget-title {
    	background-color: #fbfbfb;
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#f0f0f0));
    	background-image: -webkit-linear-gradient(top, #fbfbfb, #f0f0f0);
    	background-image: -moz-linear-gradient(top, #fbfbfb, #f0f0f0);
    	background-image: -o-linear-gradient(top, #fbfbfb, #f0f0f0);
    	background-image: -ms-linear-gradient(top, #fbfbfb, #f0f0f0);
    	background-image: linear-gradient(top, #fbfbfb, #f0f0f0);
    	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fbfbfb', EndColorStr='#f0f0f0');
    	border-bottom: 1px solid #eaeaea;
    	-moz-border-radius-topleft: 3px;
    	-moz-border-radius-topright: 3px;
    	-webkit-border-top-left-radius: 3px;
    	-webkit-border-top-right-radius: 3px;
    	border-top-left-radius: 3px;
    	border-top-right-radius: 3px;
    	font-size: 16px;
    	margin: -15px;
    	margin-bottom: 1em;
    	padding: 10px;
    	text-shadow: 1px 1px 0 #ffffff;
    }
    .widget .widget-title .header-shade {
        display: none;   
    }

    If you wanted these changes to just apply to the sidebar, you’d append all the selectors with the class “fixed-sidebar” —

    .fixed-sidebar .widget { ... }
    .fixed-sidebar .widget .widget-inner { ... }
    .fixed-sidebar .widget .widget-title { ... }
    .fixed-sidebar .widget .widget-title .header-shade { ... }
Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.