Title: Widget customization Last modified: August 31, 2016 --- # Widget customization * [krystaelliott](https://wordpress.org/support/users/krystaelliott/) * (@krystaelliott) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/) * I am trying to meld two themes together – I had completely customized sugar and spice and it still wasn’t what I was looking for. I now have Sela activated and like it – but what I really want are the side widgets from sugar and spice on Sela. I copy and pasted the CSS from one to the other but nothing changed. Can anyone help solve this? Viewing 10 replies - 1 through 10 (of 10 total) * [paulwpxp](https://wordpress.org/support/users/paulwp/) * (@paulwp) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254087) * There are 4 widgets that Sugar and Spice theme provides [https://themes.trac.wordpress.org/browser/sugar-and-spice/1.3.2/inc/widgets](https://themes.trac.wordpress.org/browser/sugar-and-spice/1.3.2/inc/widgets) * All of them are just UI for simple HTML input, meaning we can avoid using that and put in the HTML in WP’s standard Text Widget. Just view source (on your Sugar and Spice with that widgets and copy the source code to put in Text Widget in Sela theme’s sidebar). * There are also other archive widget availabe as a plugin (check on plugin page). There is another way to do this archive widget by using WP’s menu setting, set up the menu links to archive page as we want and the use WP’s standard Custom Menu Widget targeting that menu that we just set. * For the social widget, they are just normal text links with icon styling, this we can put in Custom CSS and make use of icon font (that Sela theme has already). * Thread Starter [krystaelliott](https://wordpress.org/support/users/krystaelliott/) * (@krystaelliott) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254102) * Thank you for responding Paul! I am a beginner… So should I copy and paste the widget section from Sugar & Spice php and put that in Sela? * [paulwpxp](https://wordpress.org/support/users/paulwp/) * (@paulwp) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254116) * Please avoid doing anything to theme file, keep theme file untouched. * **For About Widget:** try one of these plugins [https://wordpress.org/plugins/image-widget/screenshots/](https://wordpress.org/plugins/image-widget/screenshots/) [https://wordpress.org/plugins/simple-image-widget/screenshots/](https://wordpress.org/plugins/simple-image-widget/screenshots/) * **For Social Widget:** try one of these plugins [https://wordpress.org/plugins/lightweight-social-icons/screenshots/](https://wordpress.org/plugins/lightweight-social-icons/screenshots/) [https://wordpress.org/plugins/ultimate-social-media-icons/screenshots/](https://wordpress.org/plugins/ultimate-social-media-icons/screenshots/) * **For Archive Widget:** use WP’s native Menu and Use it in WP’s native Custom Menu Widget, or use a plugin [https://codex.wordpress.org/WordPress_Menu_User_Guide#Creating_Multi-level_Menus](https://codex.wordpress.org/WordPress_Menu_User_Guide#Creating_Multi-level_Menus) [https://wordpress.org/plugins/search.php?q=archive+widget](https://wordpress.org/plugins/search.php?q=archive+widget) * **For Contact Widget:** use WP’s standard Text Widget and put in the contact info manually, or use a plugin [https://wordpress.org/plugins/search.php?q=contact+widget](https://wordpress.org/plugins/search.php?q=contact+widget) * Thread Starter [krystaelliott](https://wordpress.org/support/users/krystaelliott/) * (@krystaelliott) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254121) * I’m so sorry, but I really don’t understand how this is going to make the Sela side widget look like the sugar and spice one? I want the fonts, colour and look from sugar and spice side bar on Sela. Maybe I am completely wrong with it being a widget? * [paulwpxp](https://wordpress.org/support/users/paulwp/) * (@paulwp) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254127) * So it’s **not** the the widgets from Spice and Sugar theme, it’s the sidebar styling, am I correct? * Thread Starter [krystaelliott](https://wordpress.org/support/users/krystaelliott/) * (@krystaelliott) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254134) * Sorry, I guess not. I want the sidebar to look like the sidebar in sugar and spice. * [paulwpxp](https://wordpress.org/support/users/paulwp/) * (@paulwp) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254230) * [@krystaelliott](https://wordpress.org/support/users/krystaelliott/) * First please install and activate this plugin [https://wordpress.org/plugins/simple-custom-css/](https://wordpress.org/plugins/simple-custom-css/) * Then navigate to Appearance > Custom CSS * Copy and paste this code below into it and click save * ``` /*------ Start sidebar styling------*/ @import url(https://fonts.googleapis.com/css?family=Niconne); .widget { background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAADCAIAAADqcT3hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACVJREFUeNpifPfuHcMoIA4w/v//fzQUiAQs79+/Hw0FIgFAgAEAJqEIm4nV/SwAAAAASUVORK5CYII=") repeat-x scroll 0 24px; text-align: center; } .widget-title { background: #fff; display: inline-block; font-family: "Niconne"; font-size: 24px; text-align: center; text-transform: lowercase; color: #f9aa89 !important; margin-bottom: 0; padding: 0 12px; } .widget-title::before, .widget-title::after { display: none; } .widget ul, .widget ol { text-align: initial; } .front-widget-area .widget ul > li, .front-widget-area .widget ol > li, .sidebar-widget-area .widget ul > li, .sidebar-widget-area .widget ol > li { border-bottom: 1px dashed #eee; border-top: 0; font-family: serif; } .widget ul > li, .widget ol > li { padding: 8px 0; } .widget a, .widget a:visited { color: #36ab8a; } .widget a:hover, .widget a:focus { color: rgba(54, 171, 138, 0.7); } /*------ End sidebar styling------*/ ``` * It will style the sidebar of Sela theme to look like one in Sugar and Spice theme. The only thing that can’t be made via CSS is the different font-family used in the word “Recent” in “Recent Post”, that needs to have extra markup in widget title which I think it’s too much hassle to go into. * Thread Starter [krystaelliott](https://wordpress.org/support/users/krystaelliott/) * (@krystaelliott) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254266) * THANK YOU!!! @paulwpxp!! I changed the colours and it looks SO good! I liked the font like it was in sugar and spice – but I can try to figure that out from here.. as well as the social media icons.. unless you want to help 😉 * [paulwpxp](https://wordpress.org/support/users/paulwp/) * (@paulwp) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254267) * The code already takes care of the font, it uses [@import](https://wordpress.org/support/users/import/) pulling that same font. If it doesn’t work for you, it could be that there are other CSS rules before, (the [@import](https://wordpress.org/support/users/import/) must be the first rule for it to work). So, please make sure that you put that whole block of code the very first thing and then put other code below it. * About the social icons, please consider using plugin, there are plenty of them just find the one that look similar to. * Thread Starter [krystaelliott](https://wordpress.org/support/users/krystaelliott/) * (@krystaelliott) * [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254277) * ok, thank you for all your help!!! What you did was perfect! Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Widget customization’ is closed to new replies. ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [widgets](https://wordpress.org/support/topic-tag/widgets/) * 10 replies * 2 participants * Last reply from: [krystaelliott](https://wordpress.org/support/users/krystaelliott/) * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/widget-customization-6/#post-7254277) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics