Widget customization

There are 4 widgets that Sugar and Spice theme provides
https://themes.trac.www.ads-software.com/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).

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?

Please avoid doing anything to theme file, keep theme file untouched.

For About Widget: try one of these plugins
https://www.ads-software.com/plugins/image-widget/screenshots/
https://www.ads-software.com/plugins/simple-image-widget/screenshots/

For Social Widget: try one of these plugins
https://www.ads-software.com/plugins/lightweight-social-icons/screenshots/
https://www.ads-software.com/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.www.ads-software.com/WordPress_Menu_User_Guide#Creating_Multi-level_Menus
https://www.ads-software.com/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://www.ads-software.com/plugins/search.php?q=contact+widget

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?

So it’s not the the widgets from Spice and Sugar theme, it’s the sidebar styling, am I correct?

Sorry, I guess not. I want the sidebar to look like the sidebar in sugar and spice.

@krystaelliott

First please install and activate this plugin
https://www.ads-software.com/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.

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 ??

The code already takes care of the font, it uses @import pulling that same font. If it doesn’t work for you, it could be that there are other CSS rules before, (the @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.

ok, thank you for all your help!!! What you did was perfect!