CSS code to remove comment box and add social media icons to menu in Photolia

samsbeautyroom · Member · Mar 18, 2014 at 12:41 am
Copy link

Add topic to favorites
HI,

I seem to be having issues with removing the comment form from each page. I’ve disabled comments on both pages and posts, yet, the box still appears.

I’ve been trying to find the right CSS code to edit the style sheet but can’t seem to do that either.

In addition, I need to turn the social media tabs in the menu into icons, which is not working for me either.

Any help would be greatly appreciated.

The site is: samsbeautyroom.net

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 18, 2014 at 1:25 am
Copy link
The change at Settings > Discussion will only disable comments on posts and pages from that point forward. For existing posts and pages, you will need to turn those off either individually in the Discussion module in the editor, or by using the bulk edit feature for pages and posts.

Page Bulk Edit
Post Bulk Edit
thesacredpath · Member · Mar 18, 2014 at 1:46 am
Copy link
I need to run out, but will work on your social media for you in a little bit.
designsimply · Member · Mar 18, 2014 at 1:49 am
Copy link
I’ve disabled comments on both pages and posts, yet, the box still appears.

You probably disabled the setting for future posts on the Settings > Discussion page, but if you had already created posts with comments turned on, then you need to disable them per post.

See the bulk editing section at http://en.support.wordpress.com/enable-disable-comments/#bulk-editing-comments

I’ve been trying to find the right CSS code to edit the style sheet but can’t seem to do that either.

Start with these, then let me know if you still have questions about that!
http://en.support.wordpress.com/custom-design/editing-css/
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
designsimply · Member · Mar 18, 2014 at 2:33 am
Copy link
In addition, I need to turn the social media tabs in the menu into icons, which is not working for me either.

Step 1 – upload social media icons to your media library and copy the image URLs

Step 2 – view the HTML page source for your blog and find the unique identifier for each of the menu items you want to change

Step 3 – add a custom CSS rule for each menu item using its unique identifier

Here is a CSS snippet for the Facebook and Pinterest icons to get you started:
```
/* main menu facebook icon */
#menu-item-389 > a {
	background: url("http://samsbeautyroom.files.wordpress.com/2014/02/facebook3.png?w=26") center no-repeat;
	width: 40px;
	height: 35px;
	text-align: left;
	text-indent: -9999px;
}

/* main menu pinterest icon */
#menu-item-393 > a {
	background: url("http://samsbeautyroom.files.wordpress.com/2014/02/pinterest1.png?w=26") center no-repeat;
	width: 40px;
	height: 35px;
	text-align: left;
	text-indent: -9999px;
}
```
In the example above, the unique identifier for the Facebook icon is “menu-item-389” and the unique identifier for the Pinterest icon is “menu-item-393”

Note that if you change the width or height of the images, you should also adjust the width and height in the CSS example.

I used the same icons you have in the “Let’s Get Social” widget currently showing at the bottom left of your site, but you can change those but updating the url() values in the example above.
samsbeautyroom · Member · Mar 18, 2014 at 5:25 am
Copy link
Thanks for your quick help, guys. Managed to get it all updated except for Instagram, google +, and mail icons. Tried to replicate the code above, just replacing menu item numbers but for some reason it didn’t work. This is the code I used:

/* main menu instagram icon */ #menu-item-394 > a { background: url("http://samsbeautyroom.files.wordpress.com/2014/02/instagram3.png?w=26") center no-repeat; width: 40px; height: 35px; text-align: left; text-indent: -9999px: } /* main menu google+ icon */ #menu-item-388 > a { background: url("http://samsbeautyroom.files.wordpress.com/2014/02/google1.png?w=26") center no-repeat; width: 40px; height: 35px; text-align: left; text-indent: -9999px:
designsimply · Member · Mar 18, 2014 at 6:06 am
Copy link
There are two problems.

1. “menu-item-394” is the wrong unique identifier for the Instagram menu item

To find the correct identifier, you should view the page source. Here is a guide that explains how to find CSS, but you can use it to look at HTML as well:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

If you look at the page source, you will find that the Instagram menu item is using the unique identifier “menu-item-397”

2. The 2nd problem is in the last line:

text-indent: -9999px:

The last character is a “:” but it should be a “;” instead like this:

text-indent: -9999px;
samsbeautyroom · Member · Mar 18, 2014 at 6:20 am
Copy link
Sweet! Thanks for spotting the mistakes. First time playing with the code, a total rookie ;) Just one more question. How would I alight the social media icons right – so they’re placed a bit further away from the menu (more towards the right hand side? Thanks
designsimply · Member · Mar 18, 2014 at 11:23 am
Copy link
No problem!

In the examples, change “right” back to “center.” That keyword is for the links “a” which are inside the list elements, i.e. #menu-item-388 is a list element.

To move the elements to the right after that, there are a couple different possibilities. One would be to float them all to the right like this:
```
#menu-item-388,
#menu-item-397,
#menu-item-393,
#menu-item-389 {
	float: right;
}
```
samsbeautyroom · Member · Mar 18, 2014 at 11:42 pm
Copy link
Awesome. Thanks again for all your help!
designsimply · Member · Mar 19, 2014 at 12:24 am
Copy link
Cheers! :)

No items found.