The appearance of the buttons and text under the sharing icons on post pages
-
I’m trying to change the appearance of the “like” and “reblog” buttons (and the text underneath them) under the sharing icons under my posts (e.g., http://musicuratum.com/2014/09/16/a-september-miscellany/), and by using Firefox and the Firebug I’ve found the unique selectors for them (e.g., .wpl-button) and figured out the CSS code for them I would need, but haven’t been able to make it work in the editor here.
The theme is The Columnist.
The blog I need help with is: (visible only to logged in users)
-
The reblog/like section is contained in an iframe element and because of how it’s implemented it looks like it’s not possible to use CSS to make any changes.
-
I had thought so too, but somehow (I’m not quite sure how) I was able to change the color of the text underneath the “reblog” and “like” buttons.
And with the Firebug in the Firefox browser, when I changed some of the code of the items — as an experiment — their appearance was altered.
So could it be possible after all, with the right code?
-
The colour of the “Be the first to like this” line doesn’t look like it’s set with custom CSS, it looks to be hard-coded inline.
Can you post the bit of code you used that you’re talking about when you were tinkering with Firebug so I can double check?
-
Well, just a few days ago I was able to change the color of that line of text — it was a lucky accident (I hadn’t aimed to do it).
For the “like” button (when I use Firefox I’m not logged in to WP, so I can’t see the “reblog” button) I clicked on it with the Firebug and then altered the code as follows:
.wpl-button:before, .wpl-button a:before {
color: white 1 !important;
}.wpl-button a {
background: #ff0050;
border: 0px;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0;
border-radius: 0 0 0 0;
color: white;
font-family: “share-tech”, sans-serif;
opacity: .8;
text-transform: uppercase;
}Most of these changes were implemented, but not (so far as I can see) the use of a different typeface.
-
Were you just editing the live code (viewing the HTML and editing in the style pane) or were you adding to the page’s CSS (viewing the CSS and clicking on the live edit button)?
If it’s the latter then it should be possible but the former is basically a Firebug cheat and doesn’t reflect how CSS actually works when it’s loaded by the browser.
-
I made the changes in the small box under the “Rules” tab — and the changes are visible immediately.
-
Can you show me a screenshot of how you’re doing it? I have a feeling it’s still not something that can be modified with custom CSS.
-
-
Upload it to your media library and paste the URL (or use a third party image host like imgur/tinypic/etc)
-
Good idea, thanks. Here is the link:
I circled (in red) the code which changed the color of the button.
-
I see now, unfortunately while it’s possible in the CSS editor part of the browser, because the buttons are in an iframe element the custom CSS you use won’t have any effect (as far as I can tell), sorry!
-
So this iframe element shields them?
I did try placing the various “div” codes identified in that part of the Firebug system (e.g. div.sd-content.wpl-likebox) but to no avail. Perhaps there is one that would work, after all?
-
-
That’s a pity.
One other, somewhat related question. On my other site, on post pages, such as this one:
http://musicuratumlargeprint.com/2014/09/16/a-september-miscellany/
all the sharing buttons etc. are situated above the tags, whereas I’d much rather have the reverse order — with the tags underneath the post, and those buttons and the like underneath them. Is there a simple way to do this?
-
You can do something like that with the following code but the distances are hardcoded so it might look strange if you have far fewer or far more tags than in this example:
.single footer.entry-meta { top:-200px; } .entry-content #jp-post-flair { padding-top:120px; }As an aside, 22 tags is quite excessive and might actually stop people from finding your posts (because it is assumed to be a spam risk), a good rule of thumb is to use as few tags as you possibly can!
-
Right, the variable height of the tag area is the problem I’m thinking of. Is there some way of using the “position: relative” to anchor the bottom of the “sharedaddy” box at a fixed distance from the bottom of the page?
-
I don’t think there’s a water-tight way to do this as whatever approach you take you then have to move the tags up a specified amount. The best bet would be to make sure there is enough of a gap for the tags to fit in without the sections overlapping. The values above should work – hopefully there aren’t any posts where you have 4 lines of tags!
- The topic ‘The appearance of the buttons and text under the sharing icons on post pages’ is closed to new replies.
WordPress.com Forums 