Adelle Customisation

theasiandestination · Member · Apr 20, 2014 at 5:03 pm
Copy link

Add topic to favorites
Hi! I am currently using the Adelle theme for http://theasiandestination.com would like to customise a few things:

1. I would like to be able to Centre ‘Share This Post’ and custom the social media buttons with my own images.

2. I’m not sure if this is possible but I would like to customize the drop down so that the archive displays like this:

Recent Posts
➢ 2012 (100)
➢ >2013 (100)
➢ 2014 (100)
>January 2014 (10)
>February 2014 ( 6)
>April 2014 (7)
List
Of
April
Posts
Here

3. I would like to customise the line that segregates each post on the home page with my own image.

Thanks in advance for any advice or suggestions!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Apr 21, 2014 at 6:54 pm
Copy link
1. I would like to be able to Centre ‘Share This Post’ and custom the social media buttons with my own images.

This will center the sharing icons at the bottom of each post:
```
.sharedaddy .sd-title,
.sharedaddy .sd-content {
	width: 100%;
	text-align: center;
}
```
When it comes to changing the buttons to your own images, first note that the social icons below posts are actually made with icon fonts. That means you can use an image replacement technique in CSS to replace each icon with a custom image, but it’s a little tricky. Here is a basic example to get you started:
```
.sd-social-icon .sd-content ul li[class*='share-'] a.sd-button {
	text-align: left;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	padding: 0;
	vertical-align: top;
}
.sd-social-icon .sd-content ul li[class*='share-'].share-facebook a.sd-button {
	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) center center no-repeat;
}
```
The first block in that example removes the icon for all of the sharing buttons. The 2nd blog replaces the facebook icon with a custom WordPress logo image as an example.

To replace all of the icons with you’re own, you will need to copy the 2nd block for each icon, and replace “facebook” in the CSS selector with the name of the icon you want to replace. The names can be found by viewing the page source. If you need help finding the names, let me know. The other thing you need to do is replace the url() value with a link to an image you have uploaded to your media library.
designsimply · Member · Apr 21, 2014 at 7:02 pm
Copy link
2. I’m not sure if this is possible but I would like to customize the drop down so that the archive displays like this:

Recent Posts

Sounds like you had installed the Recent Posts widget before but then removed it because I don’t see it at http://theasiandestination.com/ right now. In any case, CSS cannot be used to sort content, that is something that the widget itself would need to offer as an option. I checked the Recent Posts widget help page, but there are no sorting options. Sorry about that!
http://en.support.wordpress.com/widgets/recent-posts-widget/
designsimply · Member · Apr 21, 2014 at 7:10 pm
Copy link
3. I would like to customise the line that segregates each post on the home page with my own image.

The double line border that appears below posts on the http://theasiandestination.com/ home page right now is set by using the border property on a couple different elements. You can remove that border by adding this to your Appearance > Customize > CSS editor:
```
.hentry:after, body.single .content-area:after,
.hentry footer:after, body.single .site-content:after {
	border: none;
}
```
There are a few different ways to add a different image separator there. One would be a repeating image. Here is a basic example using a small WordPress logo as the example image:
```
.hentry:after, body.single .content-area:after {
	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) center repeat-x;
	height: 32px;
}
```
If you wanted a repeating image, you could use that example and change out the url() image link.

If you wanted an image that didn’t repeat, you could change “repeat-x” to “no-repeat” in the example.
theasiandestination · Member · Apr 22, 2014 at 12:03 pm
Copy link
Thank you so much for all your advice.

I’ve used your help to centre the ‘Share This Post’ and can see how to remove/+add my own customised separator.

I’m going to have a play around with the different sharing buttons with what you’ve provided and then have a go.

Many thanks, I’m really grateful!

No items found.